Come utilizzare in modo creativo il modulo di commutazione di Divi per mostrare i piani tariffari

Quando si tratta di mostrare piani tariffari sul tuo sito web, puoi fare molti turni e creare pagine o sezioni dei prezzi assolutamente sorprendenti e attraenti. Quando crei un sito Web con Divi, molto probabilmente sceglierai il modulo Tabelle prezzi. Questo modulo ti consente di aggiungere rapidamente tabelle dei prezzi e modellarle come preferisci. Ma se vuoi aggiungere più interazione a questa particolare sezione della tua pagina, puoi anche utilizzare il modulo Toggle per mostrare i piani tariffari al clic. Questo è un ottimo modo per evidenziare un piano tariffario specifico mantenendo il suo stato aperto e chiudendo gli altri due.

In questo tutorial, ti mostreremo passo dopo passo come creare uno splendido design di tabella dei prezzi di commutazione utilizzando il modulo di commutazione di Divi. Una volta ottenuto l'approccio, sarai in grado di creare tutti i tipi di piani tariffari di commutazione al clic per qualsiasi tipo di sito Web che crei.

Arriviamo ad esso!

Anteprima

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

Iniziamo a creare!

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione

Spaziatura

Crea una nuova pagina o aprine una esistente utilizzando Visual Builder di Divi. Aggiungi una nuova sezione alla pagina, apri le impostazioni della sezione e aggiungi un riempimento personalizzato in alto e in basso per creare uno spazio nella parte superiore e inferiore della sezione.

• Imbottitura superiore: 160 px
• Imbottitura inferiore: 160 px

Aggiungi riga n. 1

Struttura della colonna

Una volta che hai finito di modificare le impostazioni di spaziatura delle sezioni, puoi andare avanti e aggiungere una nuova riga usando la seguente struttura di colonne:

Modulo Aggiungi testo

Aggiungi contenuto

Non è necessario apportare modifiche alla riga, quindi vai avanti e aggiungi subito un modulo di testo. Immettere alcuni contenuti H2 a scelta nella casella dei contenuti del modulo.

Impostazioni del testo dell'intestazione

Continua andando alla scheda Design e modifica le impostazioni del testo dell'intestazione.

• Intestazione 2 Font: Didact Gothic
• Intestazione 2 Peso del carattere: normale
• Intestazione 2 Allineamento del testo: Centro
• Colore testo titolo 2: #000000
• Intestazione 2 Dimensioni del testo: 40 px
• Intestazione 2 Spaziatura lettere: -1px

Aggiungi modulo divisore

Visibilità

Aggiungi un modulo divisore proprio sotto il modulo di testo che hai aggiunto e modificato nei passaggi precedenti. Assicurati che l'opzione "Mostra divisore" del modulo divisore sia abilitata.

• Mostra divisore: Sì

Colore

Continua andando alla scheda Design e cambia il colore del divisore.

• Colore: #000000

Dimensionamento

Modifica anche la larghezza del modulo nelle impostazioni di dimensionamento.

• Larghezza: 39%
• Allineamento del modulo: Centro

Spaziatura

Aggiungi anche un margine inferiore personalizzato.

• Margine inferiore: 50 px

Aggiungi riga #2

Struttura della colonna

Abbiamo finito di modificare la prima riga e i suoi moduli. È ora di aggiungere una nuova riga utilizzando la seguente struttura di colonne:

Sfondo sfumato colonna 1

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi uno sfondo sfumato alla colonna 1.

• Colore 1: #00fff2
• Colore 2: RGB (255,255,255,0)
• Colonna 1 Tipo di gradiente: radiale
• Colonna 1 Direzione radiale: in basso a destra
• Colonna 1 Posizione iniziale: 30%
• Posizione finale della colonna 1: 30%

Sfondo sfumato colonna 2

Fai lo stesso anche per la seconda colonna.

• Colore 1: #fce96f
• Colore 2: RGB (255,255,255,0)
• Tipo di gradiente colonna 2: radiale
• Colonna 2 Direzione radiale: in alto a destra
• Colonna 2 Posizione iniziale: 40%
• Posizione finale della colonna 2: 40%

Sfondo sfumato colonna 3

Allo stesso modo, aggiungi uno sfondo sfumato alla terza colonna utilizzando le seguenti impostazioni:

• Colore 1: #a659ff
• Colore 2: RGB (255,255,255,0)
• Tipo di gradiente colonna 3: radiale
• Colonna 3 Direzione radiale: In basso
• Colonna 3 Posizione iniziale: 30%
• Posizione finale colonna 2: 30%

Dimensionamento

Dopo aver aggiunto lo sfondo sfumato, passa alla scheda Design e modifica le impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 2

Aggiungi modulo di commutazione alla colonna 1

Aggiungi contenuto

È ora di iniziare a creare diversi piani tariffari! Aggiungi un nuovo modulo di commutazione alla prima colonna e inserisci un titolo. Per dare uno stile ai diversi elementi nella casella del contenuto, abbiamo utilizzato alcuni tag HTML aggiuntivi. Vai avanti e copia le seguenti righe e aggiungile alla scheda Testo della casella del contenuto:

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

Stato

Puoi scegliere se vuoi che lo stato del modulo Toggle sia aperto o chiuso. Per essere in grado di vedere tutte le modifiche apportate durante il resto del tutorial, ti consiglio di mantenere lo stato "aperto" fino a quando non hai finito di modificare tutte le diverse impostazioni di progettazione.

Colore di sfondo

Continua andando alle impostazioni di sfondo del modulo Toggle e aggiungi un colore di sfondo bianco.

• Colore di sfondo: #ffffff

Impostazioni icona

Cambia il colore dell'icona nella scheda Design successivo.

• Colore icona: #000000

Attiva/disattiva impostazioni

E modifica anche il colore di sfondo Apri/disattiva nelle impostazioni di commutazione.

• Apri Toggle Colore di sfondo: rgba (255,255,255,0)

Impostazioni del testo del titolo

Quindi, apporta alcune modifiche alle impostazioni del testo del titolo.

• Carattere del titolo: Didact Gothic
• Peso del carattere del titolo: grassetto
• Colore del testo del titolo: #000000
• Dimensione del testo del titolo: 3.5vw (desktop), 60px (tablet), 40px (telefono)

Impostazioni del corpo del testo

Modifica anche le impostazioni del testo del corpo.

• Carattere del corpo: Didact Gothic
• Allineamento del corpo del testo: a sinistra
• Colore del corpo del testo: #000000
• Dimensione del testo del corpo: 18px
• Altezza della linea del corpo: 1,5 em

Clona il modulo attiva/disattiva due volte e posizionalo nelle due colonne rimanenti

Una volta che hai finito di modificare il modulo Toggle nella colonna 1, puoi andare avanti e clonarlo due volte e posizionare i duplicati nelle due colonne rimanenti.

Cambia copia

Assicurati di cambiare tutta la copia dei duplicati e il gioco è fatto!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato del design che abbiamo creato su schermi di diverse dimensioni.

Pensieri finali

In questo tutorial, ti abbiamo mostrato un approccio creativo all'utilizzo del modulo Toggle di Divi per mostrare i piani tariffari sul tuo sito web. Questo è un ottimo modo per interagire con i visitatori ed elevare il tuo stile di design. Semplifica l'evidenziazione di un piano tariffario specifico nella tua sezione mantenendo quello aperto e le altre due opzioni chiuse. Puoi utilizzare questo approccio per qualsiasi tipo di sito web che stai costruendo. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!