Come modellare una bella tabella dei prezzi in Divi
Pubblicato: 2018-12-28Le tabelle dei prezzi sono spesso il CTA principale di una pagina. Ecco perché è importante modellarli correttamente. Con Divi, puoi fare molti turni e creare tabelle dei prezzi esattamente come le immagini. Per darti spunti di riflessione, abbiamo creato una straordinaria tabella dei prezzi che puoi utilizzare per qualsiasi tipo di sito web su cui stai lavorando. Ti guideremo attraverso la creazione del risultato dalla A alla Z utilizzando solo le opzioni integrate di Divi.
Arriviamo ad esso!
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica le immagini GRATIS
Per mettere le mani sulle immagini che vengono utilizzate all'interno di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Come modellare una bella tabella dei prezzi in Divi
Iscriviti al nostro canale Youtube
Iniziamo a creare!
Aggiungi nuova sezione
Sfondo sfumato
Crea una nuova pagina e aggiungi una sezione regolare utilizzando il seguente sfondo sfumato:
- Colore 1: #ffffff
- Colore 2: #353272
- Posizione di partenza: 50%
- Posizione finale: 50%
Spaziatura
Quindi, vai alle impostazioni di spaziatura della sezione e modifica il margine personalizzato e i valori di riempimento.
- Margine inferiore: 50 pixel (desktop), 20 pixel (tablet e telefono)
- Margine sinistro: 50 pixel (desktop), 20 pixel (tablet e telefono)
- Margine destro: 50 px (desktop), 20 px (tablet e telefono)
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi nuova riga
Struttura della colonna
Una volta che hai finito di modificare le impostazioni della sezione, puoi andare avanti e aggiungere una nuova riga usando la seguente struttura a colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni di riga e modifica le impostazioni di dimensionamento nella scheda di progettazione.
- Rendi questa riga a larghezza intera: Sì
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
Spaziatura
Quindi, vai alle impostazioni di spaziatura e aggiungi alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 94 px
- Imbottitura inferiore: 177 px
- Imbottitura sinistra: 150 px (desktop), 30 px (tablet e telefono)
- Imbottitura destra: 150 px (desktop), 30 px (tablet e telefono)
- Imbottitura sinistra delle colonne 1, 2 e 3: 10 px
- Imbottitura destra delle colonne 1, 2 e 3: 10 px
Aggiungi il modulo di testo n. 1 alla colonna 1
Aggiungi contenuto
È ora di iniziare ad aggiungere moduli! Stiamo personalizzando la tabella dei prezzi che vogliamo creare utilizzando vari moduli. Il primo modulo di cui avremo bisogno è un modulo di testo. Aggiungi il nome del primo tipo di appartenenza nella casella del contenuto.
Colore di sfondo
Dopo aver aggiunto il contenuto, vai alle impostazioni dello sfondo e aggiungi un colore di sfondo bianco.
- Colore di sfondo: #ffffff
Immagine di sfondo
Passa alla scheda dell'immagine di sfondo e carica il file ' divi-beautiful-pricing-table-background-pattern-1.png ' che puoi trovare nella cartella di download che è stata condivisa all'inizio di questo post.
- Dimensione immagine di sfondo: copertina
- Posizione immagine di sfondo: in alto al centro
- Ripetizione immagine di sfondo: nessuna ripetizione
Impostazioni testo
Modificare le impostazioni del testo successivamente.
- Peso del carattere del testo: Ultra grassetto
- Colore del testo: #ffffff
- Dimensione del testo: 80px
- Spaziatura delle lettere del testo: -3px
- Altezza riga di testo: 1em
Spaziatura
E aggiungi alcuni margini personalizzati e valori di riempimento.
- Margine superiore: 5vw (desktop), 0vw (tablet e telefono)
- Imbottitura superiore: 20px
- Imbottitura inferiore: 200 px
Frontiera
Continua aggiungendo "20px" negli angoli in alto a sinistra e a destra.
Scatola ombra
Per finire, dai al modulo di testo un'ombra sottile.
- Posizione verticale dell'ombra del riquadro: -20 px
- Intensità della sfocatura dell'ombra della scatola: 80 px
- Forza di diffusione dell'ombra della scatola: -10px
- Colore ombra: rgba(0,0,0,0.15)
Aggiungi modulo pulsante alla colonna 1
Aggiungi copia
Il secondo modulo di cui avremo bisogno nella colonna 1 è un modulo pulsante. Aggiungi qualche copia a tua scelta.
Allineamento dei pulsanti
Quindi, vai alle impostazioni di allineamento e modifica l'allineamento al centro.
- Allineamento dei pulsanti: centro
Impostazioni dei pulsanti
Continueremo apportando alcune modifiche all'aspetto del pulsante nelle impostazioni del pulsante.
- Usa stili personalizzati per il pulsante: Sì
- Colore del testo del pulsante: #ffffff
- Colore 1: #6932ff
- Colore 2: #30acf4
- Direzione del gradiente: 100 gradi
- Larghezza bordo pulsante: 0px
- Spaziatura lettere pulsante: -2px
- Peso del carattere: Ultra grassetto
Spaziatura
Quindi, aggiungi un po' di riempimento al pulsante per renderlo bello e applica il margine superiore negativo per creare una sovrapposizione con il modulo precedente nella colonna.
- Margine superiore: -54px
- Imbottitura superiore: 10px
- Imbottitura inferiore: 10px
- Imbottitura sinistra: 30px
- Imbottitura destra: 30px
Scatola ombra
Ultimo ma non meno importante, aggiungi un'ombra sottile.
- Intensità della sfocatura dell'ombra della scatola: 80 px
- Forza di diffusione dell'ombra della scatola: -14px
- Colore ombra: rgba(0,0,0,0.3)
Aggiungi il modulo di testo n. 2 alla colonna 1
Aggiungi contenuto
Il prossimo modulo di cui avremo bisogno è un altro modulo di testo con il prezzo del tipo di abbonamento.
Colore di sfondo
Una volta aggiunto il prezzo, vai alle impostazioni dello sfondo e applica un colore di sfondo bianco.
- Colore di sfondo: #ffffff
Impostazioni testo
Modifica le impostazioni del testo in seguito.
- Peso del carattere del testo: Ultra grassetto
- Colore del testo: rgba(0,0,0,0.05)
- Dimensione del testo: 120 px
- Altezza riga di testo: 1em
Spaziatura
E applica alcuni valori di riempimento personalizzati nelle impostazioni di spaziatura.
- Imbottitura superiore: 100 px
- Imbottitura inferiore: 100 px
- Imbottitura sinistra: 80px
Frontiera
Quindi, vai alle impostazioni del bordo e aggiungi "30px" negli angoli in basso a sinistra e a destra.
Scatola ombra
Ultimo ma non meno importante, dai al modulo un'ombra di scatola.
- Posizione orizzontale dell'ombra del riquadro: 0px
- Posizione verticale dell'ombra del riquadro: 2px
- Intensità della sfocatura dell'ombra della scatola: 80 px
- Forza di diffusione dell'ombra della scatola: 0px
- Colore ombra: rgba(0,0,0,0.21)
Aggiungi il modulo di testo n. 3 alla colonna 1
Aggiungi contenuto
Il prossimo e ultimo modulo di cui abbiamo bisogno nella colonna 1 è un altro modulo di testo. Aggiungi il prezzo del tipo di abbonamento alla casella del contenuto.
Impostazioni testo
Modifica le impostazioni del testo in seguito.
- Peso del carattere del testo: Ultra grassetto
- Colore del testo: #000000
- Dimensione del testo: 50px
- Altezza riga di testo: 1em
Spaziatura
E crea una sovrapposizione tra questo modulo e il precedente giocando con i valori di spaziatura personalizzati.
- Margine superiore: -180 px
- Margine inferiore: 180 px (tablet e telefono)
- Imbottitura sinistra: 100 px
Clona tutti i moduli nella colonna 1 due volte e posiziona i duplicati nelle colonne rimanenti
Una volta che hai finito di modificare i moduli nella colonna 1, puoi andare avanti e clonare ciascuno dei moduli due volte e posizionare i duplicati nelle due colonne rimanenti.
Modifica il contenuto dei moduli nella colonna
Modifica il contenuto dei duplicati in base agli altri due tipi di abbonamento che stai condividendo sul tuo sito web.
Modifica tabella prezzi nella colonna 2
Modifica l'immagine di sfondo del modulo di testo n. 1
Evidenziamo anche la tabella dei prezzi medi. Apri il primo modulo di testo nella colonna 2 e cambia l'immagine di sfondo nel file ' divi-beautiful-pricing-table-background-pattern-2.png ' che puoi trovare nella cartella di download.
Rimuovi il margine superiore del modulo di testo n. 1
Per enfatizzare questo tipo di appartenenza, rimuoveremo il margine superiore del primo modulo di testo nelle impostazioni di spaziatura.
Cambia sfondo sfumato pulsante
Abbineremo anche la nuova immagine di sfondo utilizzando un altro sfondo sfumato per il modulo pulsante.
- Colore 1: #fb32ff
- Colore 2: #ff304f
- Direzione del gradiente: 100 gradi
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come modellare una bella tabella dei prezzi per il tuo prossimo progetto Divi. Ti abbiamo guidato passo dopo passo attraverso il tutorial e abbiamo ottenuto un risultato straordinario utilizzando solo le opzioni integrate di Divi! Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto.