Trasformare le colonne in piani tariffari con Divi

Le nuove opzioni per le colonne di Divi hanno portato un sacco di nuove possibilità di design ai nostri flussi di lavoro. Aiutano a unire più moduli senza dover toccare nessuna singola riga di codice CSS. In questo post, trasformeremo le colonne in piani tariffari utilizzando solo le opzioni integrate di Divi. Giocheremo anche con le opzioni di trasformazione al passaggio del mouse della colonna per ottenere alcuni straordinari effetti al passaggio del mouse. Potrai anche scaricare gratuitamente il JSON!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il layout dei piani tariffari della colonna

Per mettere le mani sul layout dei piani tariffari a colonna gratuita, 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 i file

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.

SCARICA

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!

Iniziamo a ricreare!

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione

Sfondo sfumato

Aggiungi una nuova sezione normale alla pagina su cui stai lavorando e apri le impostazioni della sezione. Vai alle impostazioni dello sfondo e aggiungi uno sfondo sfumato lineare:

• Colore 1: #ededed
• Colore 2: #ffffff
• Posizione di partenza: 30%
• Posizione finale: 30%

Spaziatura

Stiamo anche aggiungendo un po' di imbottitura superiore e inferiore alla sezione.

• Imbottitura superiore: 200 px
• Imbottitura inferiore: 200 px

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga, vai alla scheda Avanzate e modifica le impostazioni di dimensionamento di conseguenza:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 80% (desktop e tablet), 90% (telefono)
• Larghezza massima: 1400 px (desktop), 90% (tablet), 100% (telefono)

Impostazioni colonna 1

Dovremo anche modificare le impostazioni della colonna, iniziando dalla prima. Apri le impostazioni della colonna 1.

Sfondo sfumato

Applica il seguente sfondo sfumato alla colonna 1:

• Colore 1: #f7f7f7
• Colore 2: #ffffff
• Tipo di gradiente: radiale
• Direzione radiale: In basso
• Posizione di partenza: 31%
• Posizione finale: 31%

Frontiera

Aggiungi anche il raggio del bordo '20px' alla colonna.

Scatola ombra

E per creare un po' di profondità sulla pagina, aggiungeremo anche un'ombra sottile.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.11)

Scala di trasformazione predefinita

Come puoi notare nell'anteprima di questo post, le colonne sono leggermente trasformate. Vai alle impostazioni di trasformazione e assicurati che l'opzione di scala di trasformazione rimanga "100%" nel suo stato predefinito.

• Fondo: 100%
• Destra: 100%

Scala di trasformazione al passaggio del mouse

Modifica i valori della scala di trasformazione al passaggio del mouse.

• Fondo: 120%
• Destra: 120%

Trasformazione predefinita Traduci

Stiamo anche spostando leggermente la colonna a destra sul desktop utilizzando le impostazioni di conversione di trasformazione. Aggiungi i seguenti input:

• In basso: 34 pixel (desktop), 0 pixel (tablet e telefono)
• Destra: 0px

Passa al passaggio del mouse Trasforma Traduci

Riporta i valori di traduzione della trasformazione alla normalità al passaggio del mouse.

• In basso: 0px
• Destra: 0px

Trasformazione predefinita Ruota

Passa alle impostazioni di rotazione della trasformazione e aggiungi il seguente valore a sinistra:

• Sinistra: 352deg (desktop), 0deg (tablet e telefono)

Al passaggio del mouse Trasforma Ruota

Riporta il valore a '0deg' al passaggio del mouse.

• Sinistra: 0°

straripamenti

Più avanti in questo post, aggiungeremo un pulsante in fondo alla colonna. Quel pulsante si sovrapporrà al bordo inferiore della colonna. Per renderlo possibile, dovremo rendere visibili gli overflow della nostra colonna.

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Indice Z predefinito

Successivamente, cambia l'indice z della colonna su diverse dimensioni dello schermo. Questo ci aiuterà a mantenere l'impilamento in ordine.

• Indice Z: 9 (desktop), 11 (tablet e telefono)

Indice Z al passaggio del mouse

Al passaggio del mouse, vogliamo che la colonna appaia sopra le altre. Per fare in modo che ciò accada, aumenteremo l'indice z al passaggio del mouse.

• Indice Z: 11

transizioni

Stiamo anche creando una transizione graduale aumentando la durata della transizione nelle impostazioni delle transizioni.

• Durata della transizione: 500 ms

Impostazioni colonna 2

Alla seconda colonna! Vai avanti e apri le impostazioni della colonna.

Sfondo sfumato

Applica le seguenti impostazioni di sfondo sfumato:

• Colore 1: #fff200
• Colore 2: #ffffff
• Tipo di gradiente: radiale
• Direzione radiale: In basso
• Posizione di partenza: 31%
• Posizione finale: 31%

Frontiera

Aggiungi '20px' del raggio del bordo successivo.

Scatola ombra

Insieme a un'ombra sottile della scatola.

• Forza sfocatura ombra scatola: 50 px
• Colore ombra: rgba(0,0,0,0.14)

Scala di trasformazione predefinita

La seconda colonna è il nostro piano tariffario in primo piano. Per assicurarci che ciò non passi inosservato, aumenteremo la dimensione della colonna nelle impostazioni della scala di trasformazione.

• In basso: 112% (desktop), 100% (tablet e telefono)
• Destra: 112% (desktop), 100% (tablet e telefono)

Scala di trasformazione al passaggio del mouse

Modifica i valori della scala di trasformazione al passaggio del mouse.

• Fondo: 120%
• Destra: 120%

straripamenti

Modificare successivamente gli overflow orizzontali e verticali.

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Indice Z predefinito

Quindi, vai alle impostazioni di visibilità e aumenta l'indice z della colonna.

• Indice Z: 10

Indice Z al passaggio del mouse

Modifica l'indice z al passaggio del mouse.

• Indice Z: 12

transizioni

E aumenta la durata della transizione nelle impostazioni delle transizioni.

• Durata della transizione: 500 ms

Impostazioni colonna 3

Alla terza e ultima colonna! Apri le impostazioni della colonna.

Sfondo sfumato

Vai alle impostazioni dello sfondo e aggiungi il seguente sfondo sfumato:

• Colore 1: #f7f7f7
• Colore 2: #ffffff
• Tipo di gradiente: radiale
• Direzione radiale: In basso
• Posizione di partenza: 31%
• Posizione finale: 31%

Frontiera

Aggiungi il raggio del bordo "20px" successivo.

Scatola ombra

Insieme a un'ombra sottile della scatola.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.11)

Scala di trasformazione predefinita

È ora di trasformare la colonna! Assicurati che i valori di scala di trasformazione predefiniti rimangano '100%'.

• Fondo: 100%
• Destra: 100%

Scala di trasformazione al passaggio del mouse

Modifica questi valori al passaggio del mouse.

• Fondo: 120%
• Destra: 120%

Trasformazione predefinita Traduci

Stiamo anche spostando la colonna a sinistra sul desktop applicando alcuni valori di traduzione di trasformazione personalizzati.

• In basso: -34 px (desktop), 0 px (tablet e telefono)
• Destra: 0px

Passa al passaggio del mouse Trasforma Traduci

Riporta i valori a "0px" al passaggio del mouse.

• In basso: 0px
• Destra: 0px

Trasformazione predefinita Ruota

Continua ruotando la colonna nel suo stato predefinito.

• Sinistra: 8deg (desktop), 0deg (tablet e telefono)

Al passaggio del mouse Trasforma Ruota

Cambia il valore di rotazione della trasformazione a sinistra su "0px" al passaggio del mouse.

• Sinistra: 0°

straripamenti

Assicurati che gli overflow siano visibili successivamente.

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Indice Z predefinito

Quindi, vai alle impostazioni di visibilità e assicurati che l'indice z predefinito sia 9.

• Indice Z: 9

Indice Z al passaggio del mouse

Modifica l'indice z al passaggio del mouse.

• Indice Z: 11

transizioni

E aumenta la durata della transizione nelle impostazioni delle transizioni.

• Durata della transizione: 500 ms

Aggiungi modulo Blurb alla colonna 1

Aggiungi titolo

È ora di iniziare ad aggiungere moduli alla prima colonna! Aggiungi un nuovo modulo Blurb e inserisci un titolo.

Seleziona icona

Seleziona un'icona successiva.

Impostazioni icona

Passa alla scheda Design e modifica le impostazioni dell'icona di conseguenza:

• Colore icona: #000000
• Posizionamento delle icone: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 50 px

Impostazioni del titolo

Modifica le impostazioni del testo del titolo in seguito.

• Carattere del titolo: Poppins
• Allineamento del testo del titolo: al centro
• Colore del testo del titolo: #000000
• Dimensione del testo del titolo: 27px

Spaziatura

E aggiungi anche un margine superiore.

• Margine superiore: 80 px

Aggiungi modulo divisore alla colonna 1

Visibilità

Al secondo modulo, che è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Passa alla scheda Design e cambia il colore del divisore in nero.

• Colore linea: #000000

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Peso del divisore: 6px
• Larghezza: 14%
• Allineamento del modulo: Centro
• Altezza: 0px

Spaziatura

Infine, aggiungi un margine superiore.

• Margine superiore: 50 px

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi contenuto

Continua aggiungendo un modulo di testo proprio sotto il modulo divisore e inserisci alcuni contenuti a tua scelta.

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Poppins
• Peso del carattere del testo: leggero
• Allineamento del testo: Centro
• Colore del testo: #4f4f4f
• Altezza riga di testo: 2,3 em

Spaziatura

Aggiungi anche alcuni margini personalizzati e valori di riempimento.

• Margine superiore: 50 px
• Imbottitura superiore: 10px
• Imbottitura inferiore: 10px

Aggiungi il modulo di testo n. 2 alla colonna 1

Aggiungi contenuto

Proprio sotto il precedente modulo di testo, avremo bisogno di un altro modulo di testo. Inserisci alcuni contenuti a tua scelta.

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Poppins
• Peso del carattere del testo: pesante
• Allineamento del testo: Centro
• Colore del testo: #000000
• Dimensione del testo: 47px
• Altezza riga di testo: 1em

Spaziatura

Aggiungi anche un margine superiore e inferiore personalizzato.

• Margine superiore: 50 px
• Margine inferiore: 80 px

Aggiungi modulo pulsante alla colonna 1

Aggiungi copia

Il modulo successivo e ultimo di cui abbiamo bisogno nella colonna 1 è un modulo pulsante. Inserisci una copia a tua scelta.

Allineamento

Vai alla scheda Design e modifica l'allineamento del pulsante al centro.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Stile anche il pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 17 px
• Colore del testo del pulsante: #000000
• Colore di sfondo del pulsante: #FFFFFF
• Larghezza bordo pulsante: 0px
• Raggio del bordo del pulsante: 100 px
• Carattere pulsante: Poppins
• Peso del carattere del pulsante: grassetto

Spaziatura

Aggiungeremo anche alcuni margini personalizzati e valori di riempimento.

• Margine superiore: 50 px
• Margine inferiore: -40 px
• Imbottitura superiore: 23px
• Imbottitura inferiore: 23px
• Imbottitura sinistra: 70px
• Imbottitura destra: 70px

Scatola ombra

E lo completeremo dando al modulo pulsante una sottile ombra di scatola.

• Forza sfocatura ombra scatola: 50 px
• Colore ombra: rgba(0,0,0,0.3)

Clona tutti i moduli due volte e posiziona i duplicati nelle colonne rimanenti

Una volta completati tutti i moduli nella colonna 1, puoi clonarli due volte e posizionare i duplicati nelle due colonne rimanenti della riga.

Cambia icone e titoli Blurb

Assicurati di modificare le icone e i titoli del blurb per ogni duplicato.

Modifica il contenuto del modulo di testo

Insieme al contenuto del modulo di testo.

Pulsante Cambia #2

Ultimo ma non meno importante, apri il pulsante nella colonna 2 e modifica le impostazioni del pulsante. Una volta completato questo passaggio, il gioco è fatto!

• Colore del testo del pulsante: #FFFFFF
• Colore di sfondo del pulsante: # 8300E9

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 trasformare le colonne in piani tariffari utilizzando le nuove opzioni per le colonne di Divi. Puoi personalizzare i piani tariffari senza dover toccare una sola riga di codice CSS! Questo tutorial mostra solo come le nuove opzioni di colonna ti aiutano a unire diversi moduli in un bel design. Se hai domande o suggerimenti, non esitare a lasciarli nella sezione commenti qui sotto!

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.