How to make a price box using Elementor easily

Scatola dei prezzi è uno strumento molto utile se si gestisce un sito web per la vendita di prodotti. Normalmente, la maggior parte dei siti di commercio elettronico lo utilizza per vendere pacchetti, prodotti, corsi, beni di prima necessità, ecc. Spesso ci si rivolge ad esso come Tabella dei prezzi nel settore tecnologico. Inoltre, le tabelle dei prezzi ben strutturate facilitano il confronto dei prezzi per gli utenti e rendono più semplice decidere cosa acquistare.

Infatti, se riuscite a presentare le offerte e i prezzi ai vostri clienti con un design decente, è molto probabile che siano disposti a pagare. Con Elementor, infatti, è possibile creare tabelle di prezzi ordinate e sorprendenti. Per quanto riguarda il widget Tabella dei prezzi, Element Pack lo ha sviluppato. Questo widget ha caratteristiche impressionanti che potete utilizzare per creare facilmente un box prezzi efficace.

In questo blog, vi mostreremo passo dopo passo il processo di creazione di un riquadro dei prezzi utilizzando Elementor e Element Pack Addon Tabella dei prezzi Widget.

Creare una bella scatola dei prezzi con Elementor

Prima di tutto. Anche se non vale la pena menzionarla, per i principianti può essere utile. Trascinate e rilasciate il file Tabella dei prezzi (Element Pack logo allegato) nella vostra pagina web.

Se non si dispone della Element Pack plugin installato, nessun problema. In questo caso, è possibile utilizzare il widget tabella prezzi di Elementors. Si noti che entrambi sono disponibili nelle versioni pro.

Personalizzazione del layout

Dobbiamo menzionare una cosa: l'azienda Element Pack inserisce sempre tonnellate di opzioni di personalizzazione in ogni suo widget. Di conseguenza, si dispone di una grande barra di menu per la personalizzazione del box prezzi. Il Tabella dei prezzi widget vi aiuterà a creare facilmente disegni unici ed eleganti.

Passiamo alla portata principale!

Una volta che si rilascia il widget, apparirà Scheda Contenuto. Questa scheda contiene le impostazioni di base per la personalizzazione del contenuto del riquadro. Come si può vedere, la prima sezione di Layout ha due opzioni; Pelle e Layout. Entrambi sono impostati su Predefinito. Tenete d'occhio l'elenco delle sezioni di questa scheda.

Nel caso in cui si scelga un'altra La pelle (Partait), cambierà anche l'aspetto della casella dei prezzi. Ora notate che c'è una sezione 'Immagine' manca nell'elenco delle sezioni. Inoltre, non si può vedere alcun Layout opzione sotto Pelle. Tuttavia, il motivo è che quando si cambia l'opzione La pelle mostrerà/nasconderà automaticamente le opzioni relative a quel layout.

Ancora una volta, torniamo alle impostazioni predefinite. Il Layout opzione sotto La pelle ha anche la sua utilità. Dopo tutto, è possibile scegliere tra diversi stili di layout. Ogni stile di layout è diverso e ha diverse opzioni.

Un blog per voi

I blog più popolari

Per saperne di più su WordPress

Clicca su di me

Aggiunta di immagini e dettagli

Dopo aver scelto il layout, è necessario aggiungere i dettagli. In realtà, se volete, potete aggiungere qualsiasi immagine al vostro riquadro dei prezzi. L'aggiunta di immagini relative al servizio/prodotto attirerà maggiormente l'attenzione su di esso. Infatti, l'aggiunta di immagini aumenta il fascino del prodotto.

Ma se la pagina di destinazione mostra già tutte le informazioni su quel servizio, potrebbe non essere necessaria alcuna immagine. Tuttavia, vi mostrerò come aggiungere immagini in ogni caso.

Vai a Scheda Contenuto> Sezione Immagine

Siamo precisi. Per aggiungere un'immagine al vostro scatola dei prezzi non è una questione difficile. Ma il difficile è scegliere l'immagine giusta. Basta andare sul sito Immagine dal pannello di personalizzazione del widget e scegliere l'immagine.

Dopo aver scelto un'immagine, è possibile anche personalizzarne alcune caratteristiche. A partire dal Scheda stile, vai a Immagine. Qui si possono trovare alcune opzioni come Colore di sfondo, Dimensione, Opacità, Animazione Hover, ecc.

Per la maggior parte, le opzioni di dimensione dell'immagine, colore dello sfondo e opacità sono sufficienti. Ma, come si può vedere, Element Pack di altre opzioni come Bordo, Raggio del bordo e Ombra del riquadro, oltre ad altre opzioni. Tuttavia, provate voi stessi! Vi garantisco che riuscirete a creare un design fantastico.

Blog popolare

Come utilizzare il widget Iframe in Elementor da Element Pack

Leggi ora

Dettagli della scatola dei prezzi

Passiamo ora ai dettagli.

Intestazione e sottointestazione

Il titolo ha una grande importanza per il vostro contenuto. Pertanto, è necessario inserire qualcosa che catturi l'attenzione dei visitatori. Per un box prezzi, è necessario inserire titoli diretti come i nomi dei prodotti o dei piani di servizio. Per quanto riguarda la personalizzazione, andare su Scheda Stile> Intestazione. È possibile modificare il colore e la tipografia del titolo e dei sottotitoli.

Etichetta del prezzo

Parliamo poi del prezzo. Il Tabella dei prezzi widget ha un'impostazione interessante per questa parte.

Come per tutte le etichette di prezzo presenti sul mercato, è possibile modificare il prezzo dalla schermata Prezzi sezione. La parte più divertente è che si può scegliere qualsiasi etichetta di valuta dalla sezione Simbolo di valuta opzione.

Anche in questo caso, se si fa clic su Switcher Vendita, verrà visualizzato un altro campo di prezzo Prezzo originale. Qui è possibile inserire il prezzo originale del prodotto con uno stile barrato. In generale, si può utilizzare per mostrare prodotti scontati o offerte.

E infine, è possibile personalizzare il cartellino del prezzo dalla sezione Scheda Stile> Prezzi. Come mostrato sopra, cercate di lasciare il colore di sfondo separato dal resto. In questo modo si evidenzierà il cartellino del prezzo agli occhi degli spettatori.

Caratteristiche del prodotto/servizio nella casella del prezzo

Vai a Scheda Contenuto> Caratteristiche

Per cominciare, la sezione delle caratteristiche è la chiave per capire cosa comprende la vostra offerta. Anche se non è una parte brevemente dettagliata, dà una rapida visione dei contenuti. Quindi, per questa parte, usate parole dirette e siate specifici.

Parliamo di personalizzazione. Come si può vedere, in questa sezione sono presenti diversi ripetitori. È possibile aggiungerne altri o rimuoverli. Ogni ripetitore ha due set di opzioni, uno come Testo normale, l'altro come Testo del Tooltip. Per il testo normale, è possibile scegliere il logo, il colore del logo e il titolo. Nella maggior parte dei casi, è possibile ignorare l'opzione di tooltip.

Ora cambiamo l'aspetto di questa parte. In questo caso, andare su Scheda Stile> Caratteristiche. Lì troverete le opzioni mostrate sopra. In effetti, manteniamo un unico colore per l'intero riquadro dei prezzi. Anche in questo caso, l'etichetta del prezzo è l'unica parte evidenziata.

Tuttavia, è possibile modificare il colore, tipografia, larghezza del confine e peso, e divario da questa parte. Inoltre, è possibile modificare l'allineamento dei testi. Tuttavia, si consiglia di mantenere l'allineamento al centro di questo stile.

Siamo molto vicini alla parte finale. Indipendentemente dal tipo di box prezzi, è necessario aggiungere il piè di pagina. Vediamo come realizzarlo.

Il Scheda Contenuto del Widget Tabella prezzi ha una sezione denominata Piè di pagina. In pratica, l'area del piè di pagina presenta un pulsante di richiamo e una casella di testo aggiuntiva. Dalle impostazioni, si possono notare due selettori denominati Facile integrazione dei download digitali e Aggiungere attributi personalizzati. È possibile utilizzare il primo per collegare EDD al vostro pulsante. Per quanto riguarda il secondo, è possibile imparare a conoscerlo qui.

Tuttavia, è possibile modificare l'aspetto del piè di pagina dall'opzione Piè di pagina nella sezione Scheda stile. Infatti, è possibile rendere il pulsante rotondo utilizzando l'opzione Raggio del bordo opzione. Qui è possibile modificare il colore di sfondo e di primo piano del piè di pagina. Inoltre, è possibile aggiungere un effetto hover e un box shadow al pulsante.

Nastro

Le persone usano spesso Nastro sulla scatola dei prezzi per mostrare le caratteristiche o le nuove offerte. Non è altro che un marchio che evidenzia un prodotto specifico. Vi mostriamo come potete utilizzarlo.

Sul Scheda Contenuto, l'ultima sezione è Nastro. Nella parte superiore della sezione è presente un interruttore. È necessario attivarlo per far apparire la barra multifunzione. Tuttavia, è possibile modificare il titolo, cambiarne la posizione da Allineamento e posizione orizzontale/verticale. Inoltre, è possibile ruotare il nastro a piacimento.

Ora, per modificare l'aspetto della barra multifunzione, andare su Scheda Stile> Nastro. Come nell'immagine precedente, si può facilmente progettare cambiando il colore, il raggio del bordo, la tipografia e l'ombra del riquadro.

Date un'occhiata alla scatola dei prezzi completa

Congratulazioni e grazie per aver mantenuto i pazienti fino a questo momento. Guardate le splendide scatole dei prezzi che avete realizzato con noi. Con l'esempio qui sopra, potete facilmente creare scatole di questo tipo per il vostro siti web di commercio elettronico.

Inoltre, è possibile aggiungere sfondi personalizzati a queste caselle di prezzo. È facile da creare. È attraente. Inoltre, è divertente. Grazie per aver letto questo blog. Buona giornata!

La migliore soluzione web

Volete potenziare il vostro sito web con il nostro prodotto?

Visita il pacchetto di elementi

Esplora il nostro plugin completo

Prodotti

Installazione

Valutazioni