Come creare tabelle dei prezzi orizzontali con Divi

Le tabelle dei prezzi orizzontali sono un ottimo modo per promuovere prodotti con molte funzionalità. E, con il nuovo layout a cinque colonne di Divi, questo è sorprendentemente facile da fare. Tuttavia, come con qualsiasi layout che ha cinque o più colonne, la sfida consiste nel rendere il layout reattivo in modo che abbia un bell'aspetto anche sui dispositivi mobili. In questo tutorial, ti mostrerò come creare tabelle dei prezzi orizzontali che abbiano un bell'aspetto su tutti i dispositivi. E ti mostrerò anche quanto sia facile duplicare le tue tabelle dei prezzi orizzontali e utilizzare nuove funzionalità di design come "trova e sostituisci" per cambiare rapidamente la combinazione di colori di ciascuna delle tue tabelle in pochi clic.

Iniziamo.

Sbirciata

Iniziare

Per questo tutorial, tutto ciò di cui avrai bisogno è Divi. E useremo il Visual Builder. Poiché creeremo le tabelle da zero, dovrai creare una nuova pagina, distribuire il visual builder e quindi selezionare l'opzione "Crea layout da zero".

Dopodiché, sei pronto per iniziare. Facciamolo!

Impostazione della riga a cinque colonne per le tabelle dei prezzi orizzontali

Per cominciare, diamo un layout a cinque colonne alla sezione che ci sta già aspettando nel visual builder.

Prima di iniziare ad aggiungere qualsiasi modulo, aggiorniamo le impostazioni della sezione per avere una larghezza personalizzata senza alcun riempimento superiore o inferiore.

Larghezza: 1200 px
Allineamento della sezione: Centro
Imbottitura personalizzata: 0px in alto, 0px in basso

Quindi vai alle impostazioni della riga per dare rapidamente un colore di sfondo alla tua riga e anche alle tre colonne centrali come segue:

Colore di sfondo: #00cbc9
Colore di sfondo della colonna 2: #00cbc9
Colore di sfondo della colonna 3: #eeeeee
Colore di sfondo della colonna 4: #eeeeee

Quindi aggiorna il dimensionamento come segue:

Rendi questa riga a larghezza intera: S
Larghezza grondaia: 1
Equalizza le altezze delle colonne: S

Avremo bisogno di tornare tra un po' alle impostazioni delle righe per aggiornare la spaziatura, ma per ora iniziamo ad aggiungere i blurb a ciascuna delle nostre colonne per il contenuto.

Riempire le colonne con moduli di contenuto

Il titolo del prodotto

Nella prima colonna, aggiungi un modulo di testo con la seguente intestazione nella casella del contenuto (sotto la scheda di testo):

<h2>Starter</h2>

Questo servirà come punto per il titolo del tuo piano o prodotto che stai presentando. In questo esempio, questo sarebbe un piano "Starter" di qualche tipo.

Quindi aggiorna le seguenti impostazioni di progettazione:

Stile carattere titolo 2: TT
Colore testo titolo 2: #ffffff
Intestazione 2 Dimensioni del testo: 38 px
Imbottitura personalizzata (desktop): 90% in alto, 90% in basso, 10% a sinistra
Imbottitura personalizzata (tablet): 30% superiore, 30% inferiore

Aggiungi blurb per i titoli delle categorie di funzionalità

Nella seconda colonna, aggiungi un modulo blurb. Quindi elimina il testo di riempimento nella casella del contenuto e lascia solo il testo del titolo. Quindi scegli di utilizzare un'icona invece di un'immagine e aggiorna l'icona con una a tua scelta.

Passa alla scheda Progettazione e aggiorna il resto delle impostazioni come segue:

Colore icona: #00cbc9
Posizionamento immagine/icona: a sinistra
Dimensione del testo del titolo: 16px
Imbottitura personalizzata: 2vw Bottom
Larghezza bordo riga inferiore: 4 px
Colore bordo inferiore: #cccccc

Dal momento che questo disegno della descrizione verrà utilizzato come titolo di una categoria di caratteristiche nelle colonne 2, 3 e 4, puoi copiare il modulo della descrizione e incollarlo nella seconda e nella terza colonna.

Mi rendo conto che la distanza non sembra molto buona in questo momento. E potresti essere tentato di aggiungere un po' di spazio a livello di modulo, ma per questo progetto trovo più facile apportare modifiche alla spaziatura a livello di colonna (sotto le impostazioni di riga). Ci arriveremo più tardi.

Aggiungi moduli di testo per un elenco di descrizioni delle funzioni

Avanti Aggiungi un modulo di testo sotto il blurb nella seconda colonna. Quindi aggiungi il seguente codice html della tabella nella casella del contenuto:

• la descrizione della funzione va qui.
• la descrizione della funzione va qui.
• la descrizione della funzione va qui.
• la descrizione della funzione va qui.

Tipo di stile elenco non ordinato: quadrato
Rientro elemento elenco non ordinato: 4px
Imbottitura personalizzata: 20px in alto, 20px in basso, 5% a sinistra, 5% a destra

Ora, come abbiamo fatto per i blurb, vai avanti e copia il modulo di testo e incollalo sotto ciascuno dei moduli blurb nelle colonne 3 e 4.

Aggiunta del prezzo e del pulsante all'ultima colonna

Nell'ultima colonna (colonna cinque), utilizzerò un modulo di tabella dei prezzi per ottenere il design del testo dei prezzi con il simbolo del dollaro. Questo è tutto ciò di cui abbiamo veramente bisogno dal modulo delle tabelle dei prezzi, quindi eliminerò il resto del contenuto e degli elementi di design, lasciando il testo dei prezzi e il simbolo del dollaro. Potrei usare il pulsante incluso nel modulo delle tabelle dei prezzi, ma questo è stato un po 'più difficile da fare con la magia reattiva sul tablet (vedrai cosa intendo più avanti). Quindi userò anche un modulo pulsante.

Vai avanti e aggiungi il modulo Tabelle prezzi alla quinta colonna. Elimina una delle due tabelle incluse per impostazione predefinita facendo clic sull'icona del cestino a destra di una di esse.

Quindi elimina il colore di sfondo aggiungendo un codice colore completamente trasparente.

Colore di sfondo: rgba (255,255,255,0)

Quindi aggiorna quanto segue:

Colore di sfondo dell'intestazione della tabella: rgba (255,255,255,0)
Colore del testo di valuta e frequenza: #ffffff
Valuta e frequenza Dimensioni del testo: 30 px
Colore testo prezzo: #ffffff
Larghezza bordo: 0px
Margine personalizzato (tablet): -100% corretto
Margine personalizzato (smartphone): 0% a destra
Imbottitura personalizzata: 0px in alto, 10px in basso, 0px a sinistra, 0px a destra

Ora vai alle impostazioni dei singoli tavoli facendo clic sull'icona a forma di ingranaggio a sinistra del menu di visualizzazione dei singoli tavoli.

Ora elimina il contenuto predefinito per Titolo, Sottotitolo e Contenuto. Questo lascerà solo la valuta e il testo del prezzo.

Ora so cosa stai pensando a questo punto. Cosa fare con quella linea di confine sotto il testo del prezzo? Bene, c'è un piccolo frammento di css personalizzato per questo. Vai alla scheda Avanzate e aggiungi il seguente CSS alla casella di input Pricing Top:

Prezzi in alto:

border: none;

Ora è così che hai sventrato con successo la tabella dei prezzi solo per il testo dei prezzi e il simbolo della valuta!

Per il pulsante, aggiungi un modulo pulsante sotto il modulo Tabelle prezzi e aggiorna quanto segue:

Allineamento dei pulsanti: centro
Colore del testo: chiaro
Margine personalizzato (tablet): -100% corretto
Margine personalizzato (smartphone): 0% a destra

Il margine personalizzato corrisponderà al margine che abbiamo aggiunto al modulo delle tabelle dei prezzi per ottenere un modulo a larghezza intera su tablet. Poiché il layout a cinque colonne sul tablet metterà la quinta colonna sul lato sinistro di un layout a due colonne, spostando il modulo di -100% a destra lo forzerà all'intera larghezza della riga.

Aggiunta del design della freccia e della spaziatura reattiva delle colonne

Aggiungere la freccia sovrapponendo i gradienti

Per creare l'effetto del design della freccia nella prima colonna sovrapporremo due sfondi sfumati. Il primo sfondo sfumato verrà aggiunto a livello di colonna. Aggiungeremo il prossimo in seguito a livello di modulo.

Per aggiungere lo sfondo sfumato, vai alle impostazioni della riga e aggiungi quanto segue:

Colore di sfondo sfumato della colonna 1 a sinistra: rgba(255,255,255,0)
Colore sfondo sfumato colonna 1 a destra: #eeeeee (questo dovrebbe corrispondere al colore di sfondo della colonna 2)
Direzione gradiente: -245 gradi
Posizione di partenza: 75%
Posizione finale: 0%

Salva le impostazioni e passa alle impostazioni del modulo di testo nella prima colonna. Qui è dove aggiungeremo il secondo livello di sfumatura di sfondo per completare la freccia. Aggiorna quanto segue:

Colore sfondo sfumato colonna 1 a sinistra: #eeeeee
Colore sfondo sfumato colonna 1 a destra: rgba(255,255,255,0)
Direzione gradiente: 245 gradi
Posizione di partenza: 25%
Posizione finale: 0%

Notare che i valori sono ugualmente opposti l'uno all'altro. Ad esempio, l'ordine dei colori è cambiato, il 245 gradi è passato da negativo a positivo e il 75% ora è 25% (la differenza). In questo modo ottieni che i lati della punta della freccia siano perfettamente simmetrici.

Spaziatura della riga e delle colonne

Torna alle impostazioni delle righe e regoliamo la spaziatura delle nostre righe e colonne aggiornando quanto segue:

Imbottitura personalizzata: 0px in alto, 0px in basso, 0px a sinistra, 0px a destra
Imbottitura personalizzata 2: 5% in alto, 5% in basso, 2% a sinistra, 2% a destra
Imbottitura personalizzata 3: 5% in alto, 5% in basso, 2% a sinistra, 2% a destra
Imbottitura personalizzata 4: 5% in alto, 5% in basso, 2% a sinistra, 2% a destra
Imbottitura personalizzata 5: 10% in alto, 10% in basso

Forse ti starai chiedendo perché non ho usato solo una larghezza di 2 grondaie e ho finito con essa. Bene, questo perché volevo massimizzare il più possibile lo spazio all'interno delle colonne contenenti testo per migliorare la leggibilità su tutti i dispositivi. Ogni piccolo spazio che possiamo risparmiare è importante. Ecco perché i margini tra le colonne vengono creati con percentuali di riempimento sinistro e destro.

Duplicazione della tabella per nuove tabelle e combinazioni di colori

Ovviamente, vorrai avere più tabelle dei prezzi orizzontali che gli utenti possono confrontare. Per creare la seconda tabella dei prezzi, duplica l'intera sezione contenente la prima tabella che hai creato.

Quindi apri le impostazioni della riga e passa con il mouse sul colore di sfondo e fai clic su trova e sostituisci.

In "All'interno" scegli "Questa sezione".
In "Sostituisci larghezza", aggiungi il colore: #f84f51
Quindi seleziona la casella Sostituisci tutti i valori trovati nella sezione (non solo il colore di sfondo).

Quindi fai clic su Sostituisci e osserva la magia accadere. Questo è un modo semplice e veloce per cambiare tutte le istanze del colore precedente con un nuovo colore.

Non dimenticare di salvare le impostazioni della riga prima di uscire per salvare le modifiche.

Ora hai una nuova tabella con una nuova combinazione di colori.

Ripeti di nuovo questo processo per aggiungere un'altra tabella con il colore: #bdc958

Creare un tavolo in primo piano

Per far apparire uno dei tuoi tavoli in primo piano e risaltare un po', puoi aggiungere un'ombra di riquadro alla sezione che contiene il tavolo e cambiare il colore grigio utilizzato per gli sfondi e le sfumature delle colonne in un bel colore bianco.

Per fare ciò, vai alle impostazioni della sezione per la seconda sezione (quella centrale) e aggiorna quanto segue:

Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 0px
Intensità della sfocatura dell'ombra della scatola: 80 px

Per sostituire il colore di sfondo grigio, vai alle impostazioni della riga e trova il colore di sfondo della colonna 2 (#eeeeee). Fare clic destro su di esso e fare clic su "Trova e sostituisci". L'aggiornamento quanto segue:

In "All'interno" scegli "Questa sezione".
In "Sostituisci larghezza", aggiungi il colore: #ffffff
Quindi seleziona la casella Sostituisci tutti i valori trovati nella sezione (non solo il colore di sfondo).
Quindi fare clic su "Sostituisci".

Utilizzo di Trova e sostituisci per testare i caratteri

Se desideri utilizzare un carattere diverso in tutta la tabella, puoi facilmente testarne di diversi utilizzando la funzione "Trova e sostituisci". Ho lasciato intenzionalmente il carattere predefinito per tutti i moduli per rendere questo processo fluido. Per cambiare il carattere per l'intera pagina delle tabelle, tutto ciò che devi fare è aprire le impostazioni del modulo di testo nella prima colonna di qualsiasi sezione della tabella (in realtà può essere qualsiasi modulo che utilizza il carattere predefinito sulla tua pagina). Quindi fare clic con il pulsante destro del mouse sul carattere Intestazione 2 utilizzato e selezionare "Trova e sostituisci". Quindi aggiorna quanto segue:

Sotto "All'interno" mantieni "Questa pagina".
In "Sostituisci larghezza", seleziona un carattere (sto usando Roboto Condensed).
Quindi seleziona la casella Sostituisci tutti i valori trovati nella sezione (oppure non puoi selezionarla per sostituire tutti i caratteri h2).
Quindi fare clic su "Sostituisci".

Ora tutti i caratteri sono stati modificati in tutta la pagina.

Questo è tutto! Ora le tabelle dei prezzi orizzontali sono complete.

Controlliamo il risultato.

Anche la regolazione a cinque colonne su tablet e smartphone funziona magnificamente.

Pensieri finali

Il layout a cinque colonne di Divi, insieme alle potenti funzionalità di progettazione disponibili in Visual Builder, ti consentono di creare bellissime tabelle dei prezzi orizzontali. E la regolazione dei colori e dei caratteri durante l'utilizzo di Trova e sostituisci è un ottimo risparmio di tempo, migliorando ulteriormente il processo di progettazione. Spero che troverai il tutorial sia informativo che di ispirazione.

Non vedo l'ora di sentirti nei commenti.

Saluti!