Scarica un design di commutazione dei prezzi mensili/annuali GRATUITO per Divi

Quando decidi di mostrare i piani tariffari sul tuo sito web, ci sono un paio di modi per affrontarlo. Uno degli approcci più popolari là fuori è la creazione di un interruttore tariffario mensile/annuale che consente agli utenti di navigare facilmente tra i diversi piani tariffari in base al modo in cui scelgono di fatturare. Nel tutorial di oggi, ti mostreremo come far funzionare l'interruttore dei prezzi con Divi. Ricreeremo uno splendido esempio da zero e potrai anche scaricare il file JSON gratuitamente!

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 design di commutazione dei prezzi mensili/annuali

Per mettere le mani sul design gratuito di attivazione/disattivazione dei prezzi mensili/annuali, devi 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!

Aggiungi la sezione n. 1

Colore di sfondo

Inizia aggiungendo una prima sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e aggiungi un colore di sfondo.

• Colore di sfondo: #ffad72

Divisore inferiore

Passa alla scheda di progettazione e inserisci un divisore inferiore successivo.

• Stile divisore: trova nell'elenco
• Altezza divisore: 10vw

Spaziatura

Aggiungi anche un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 5vw
• Imbottitura inferiore: 10vw

ID CSS

E aggiungi un ID CSS alla sezione.

• ID CSS: sezione toggle

Aggiungi nuova riga

Struttura della colonna

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

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 30vw (desktop), 45vw (tablet), 50vw (telefono)
• Larghezza massima: 100%

Spaziatura

Sbarazzati dell'imbottitura superiore e inferiore predefinita in seguito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Frontiera

E modifica anche le impostazioni del bordo.

• Angoli arrotondati: 50vw (tutti gli angoli)
• Larghezza bordo: 1px
• Colore bordo: #e8e8e8

Schermo

Per assicurarci che entrambe le colonne vengano visualizzate l'una accanto all'altra su schermi di dimensioni inferiori, aggiungeremo una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! L'unico modulo di cui abbiamo bisogno nella colonna 1 è un modulo di testo. Inserisci alcuni contenuti a tua scelta.

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo come segue:

• Carattere del testo: Montserrat
• Dimensione del testo: 1vw (desktop), 1.5vw (tablet), 2vw (telefono)
• Allineamento del testo: Centro
• Colore del testo: chiaro

Spaziatura

Modifica anche i valori di riempimento superiore e inferiore su diverse dimensioni dello schermo.

• Imbottitura superiore: 2vw (Desktop), 3vw (Tablet), 4vw (Telefono)
• Imbottitura inferiore: 2vw (desktop), 3vw (tablet), 4vw (telefono)

ID e classe CSS

E assegna un ID CSS e una classe al modulo di testo.

• ID CSS: voce-piano-prezzi-1
• Classe CSS: cursore-elemento-prezzo

Clona modulo testo e posiziona duplicato nella colonna 2

Una volta completato il modulo di testo nella colonna 1, puoi clonarlo una volta e posizionare il duplicato nella colonna 2.

Modifica contenuto

Assicurati di modificare il contenuto.

Modifica ID CSS

E usa un ID CSS diverso.

• ID CSS: voce-piano-prezzi-2

Aggiungi sezione #2

Colore di sfondo

Avanti con la seconda sezione. Aggiungi il seguente colore di sfondo:

• Colore di sfondo: #6b63dd

Spaziatura

Quindi, vai alle impostazioni di spaziatura della sezione e aggiungi alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore: 7vw
• Imbottitura inferiore: 15vw
• Imbottitura sinistra: 21vw (desktop), 10vw (tablet e telefono)
• Imbottitura destra: 21vw (desktop), 10vw (tablet e telefono)

ID CSS

Aggiungi anche un ID CSS alla sezione.

• ID CSS: prezzo-1

Aggiungi riga n. 1

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 e modifica le impostazioni di dimensionamento.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Frontiera

Quindi, vai alle impostazioni di spaziatura e applica le seguenti impostazioni del bordo:

• Larghezza bordo destro: 1px
• Larghezza bordo sinistro: 1px
• Larghezza bordo superiore: 0px
• Larghezza bordo inferiore: 0px
• Colore del bordo: rgba (255,255,255,0)

Schermo

Assicurati che le colonne appaiano una accanto all'altra su schermi di dimensioni più piccole aggiungendo una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Impostazioni colonna 2

Spaziatura

Una volta completate le impostazioni generali della riga, apri le impostazioni della colonna 2 e aggiungi un riempimento personalizzato in alto e in basso.

• Imbottitura superiore: 1vw
• Imbottitura inferiore: 4vw

Frontiera

Usa anche un bordo sulla colonna 2.

• Larghezza bordo destro: 1px
• Colore bordo destro: #ffffff

Impostazioni colonna 3

Spaziatura

Passa alle impostazioni della terza colonna e aggiungi alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 1vw
• Imbottitura inferiore: 4vw

Aggiungi divisore alla colonna 1

Visibilità

È ora di iniziare ad aggiungere moduli! Il primo modulo e l'unico modulo di cui abbiamo bisogno nella colonna 1 è un modulo divisore. Assicurati di disabilitare l'opzione "Mostra divisore". Abbiamo solo bisogno di questo modulo per assicurarci che il resto del design rimanga intatto.

• Mostra divisore: No

Aggiungi il modulo di testo n. 1 alla colonna 2

Aggiungi contenuto H3

Passa alla colonna 2 e aggiungi un modulo di testo con alcuni contenuti H3 a tua scelta.

Impostazioni testo H3

Modificare le impostazioni del testo H3 come segue:

• Intestazione 3 Carattere: Montserrat
• Intestazione 3 Allineamento del testo: Centro
• Colore testo titolo 3: #ffffff
• Titolo 3: Dimensione testo: 2vw (desktop), 3vw (tablet), 3.5vw (telefono)
• Intestazione 3 spaziatura lettere: -1px

Aggiungi il modulo di testo n. 2 alla colonna 2

Aggiungi contenuto

Aggiungi un altro modulo di testo proprio sotto il precedente e inserisci alcuni contenuti a tua scelta.

Impostazioni testo

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

• Carattere del testo: Montserrat
• Peso del carattere del testo: ultraleggero
• Colore del testo: #ffffff
• Dimensione del testo: 2vw (desktop), 3vw (tablet), 3.5vw (telefono)
• Altezza riga di testo: 1em
• Allineamento del testo: Centro

Spaziatura

Aggiungi anche un margine superiore personalizzato.

• Margine superiore: 0,5 vw

Clona entrambi i moduli e posiziona i duplicati nella colonna 3

Una volta completati i moduli nella colonna 2, puoi clonarli entrambi e posizionare i duplicati nella colonna 3.

Modifica contenuto

Assicurati di modificare il contenuto di ogni duplicato.

Aggiungi riga #2

Struttura della colonna

Alla seconda fila nella sezione 2! Scegli la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Successivamente, rimuovi l'imbottitura superiore e inferiore predefinita.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Frontiera

E applica un bordo.

• Larghezza bordo superiore: 0px
• Larghezza bordo destro: 1px
• Larghezza bordo inferiore: 1px
• Larghezza bordo sinistro: 1px
• Colore bordo: #8882dd

Schermo

Assicurati che le colonne appaiano una accanto all'altra su schermi di dimensioni più piccole aggiungendo una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Impostazioni colonna 1

Spaziatura

Continua aprendo le impostazioni della colonna 1 e applica alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore: 3vw (desktop), 5vw (tablet e telefono)
• Imbottitura inferiore: 3vw (desktop), 5vw (tablet e telefono)

Frontiera

Aggiungi anche un bordo destro alla colonna.

• Larghezza bordo destro: 1px
• Colore bordo destro: #8882dd

Impostazioni colonna 2

Spaziatura

Passa alla seconda colonna e modifica le impostazioni di spaziatura.

• Imbottitura superiore: 3vw (desktop), 5vw (tablet e telefono)
• Imbottitura inferiore: 3vw (desktop), 5vw (tablet e telefono)

Frontiera

Aggiungi un bordo destro successivo.

• Larghezza bordo destro: 1px
• Colore bordo destro: #ffffff

Impostazioni colonna 3

Spaziatura

Quindi, apri le impostazioni della colonna 3 e aggiungi alcuni valori di riempimento superiore e inferiore personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore: 3vw (desktop), 5vw (tablet e telefono)
• Imbottitura inferiore: 3vw (desktop), 5vw (tablet e telefono)

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

Una volta completate le impostazioni di riga e colonna, è il momento di iniziare ad aggiungere moduli. Aggiungi un modulo di testo alla colonna 1 e inserisci del contenuto a tua scelta.

Impostazioni testo

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

• Carattere del testo: Montserrat
• Colore del testo: #ffffff
• Dimensione del testo: 1vw (desktop), 1.5vw (tablet), 2vw (telefono)
• Allineamento del testo: Centro

Aggiungi modulo di testo alla colonna 2

Aggiungi simbolo alla casella del contenuto

Nella seconda colonna, avremo bisogno di un altro modulo di testo. Aggiungi il simbolo "✓" alla casella del contenuto.

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo come segue:

• Colore del testo: #ffad72
• Dimensione del testo: 2vw (desktop), 3vw (tablet), 4vw (telefono)
• Altezza riga di testo: 1em
• Allineamento del testo: Centro

Clona modulo testo e posiziona duplicato nella colonna 3

Una volta completato il modulo di testo nella colonna 2, puoi clonarlo e posizionare il duplicato nella colonna 3.

Simbolo alternativo e colore del testo

A seconda della funzionalità che stai mostrando, potresti voler cambiare il simbolo in "✗". Usa anche un colore del testo diverso.

• Colore del testo: #ffffff

Clona fila tutte le volte che vuoi

Una volta completata l'intera riga, puoi clonarla tutte le volte che vuoi, a seconda di quante caratteristiche vuoi mostrare.

Aggiungi riga #3

Struttura della colonna

L'ultima riga che aggiungeremo alla seconda sezione contiene la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Successivamente, rimuovi l'imbottitura superiore e inferiore predefinita.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Frontiera

Aggiungi anche un bordo.

• Larghezza bordo superiore: 0px
• Larghezza bordo inferiore: 0px
• Larghezza bordo destro: 1px
• Larghezza bordo sinistro: 1px
• Colore del bordo: rgba (255,255,255,0)

Schermo

E assicurati che le colonne appaiano una accanto all'altra su schermi di dimensioni più piccole aggiungendo una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Impostazioni colonna 2 e 3

Spaziatura

Continua aggiungendo un margine superiore a entrambe le colonne 2 e 3.

• Imbottitura superiore: 4vw

Bordo colonna 2

Aggiungi anche un bordo destro alla colonna 2.

• Larghezza bordo destro: 1px
• Colore bordo destro: #eaeaea

Clona modulo divisore e posiziona nella colonna 1 della nuova riga

Clona il modulo divisore che trovi nella prima riga della sezione e posiziona il duplicato nella prima colonna della nuova riga.

Aggiungi modulo pulsante alla colonna 2

Aggiungi copia

Continua aggiungendo un modulo pulsante alla colonna 2 e inserisci una copia a tua scelta.

Allineamento

Modificare l'allineamento del pulsante nella scheda Progettazione.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

E modificare le impostazioni del pulsante come segue:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 1vw (desktop), 1.5vw (tablet), 2vw (telefono)
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #ffad72
• Larghezza bordo pulsante: 0px

• Raggio del bordo del pulsante: 50vw
• Carattere pulsante: Montserrat

Spaziatura

Aggiungi anche alcuni valori di riempimento personalizzati al modulo pulsanti.

• Imbottitura superiore: 1vw (desktop), 1.5vw (tablet e telefono)
• Imbottitura inferiore: 1vw (desktop), 1.5vw (tablet e telefono)
• Imbottitura sinistra: 4vw (desktop), 6vw (tablet e telefono)
• Imbottitura destra: 4vw (desktop), 6vw (tablet e telefono)

Clona modulo pulsante e posiziona duplicato nella colonna 3

Una volta completato il modulo pulsante nella colonna 2, puoi clonarlo e posizionare il duplicato nella colonna 3.

Clona Sezione #2

Continua clonando l'intera seconda sezione. Assicurati di modificare i valori dei prezzi nei moduli di testo in modo che corrispondano alle opzioni di fatturazione annuale. Questa è la sezione che apparirà quando qualcuno fa clic su "Fatturazione annuale".

Cambia ID CSS e aggiungi classe CSS

Successivamente cambia l'ID CSS della sezione e aggiungi anche una classe CSS.

• ID CSS: prezzo-2
• Classe CSS: hide-section-2

Aggiungi una nuova riga a una colonna all'inizio della sezione n. 1

L'unica cosa rimasta da fare è aggiungere il codice CSS e jQuery per far funzionare la funzionalità. Per fare ciò, aggiungeremo una nuova riga nella parte superiore della sezione 1.

Aggiungi il modulo di codice n. 1 con il codice CSS

Aggiungi un primo modulo di codice e inserisci le seguenti righe di codice CSS:

<style>
.pricing-item-cursor {
cursor: pointer;
}

.hide-section-2 {
display: none;
}

.active-pricing-plan {
color: #6b63dd !important;
background-color: #fff;
}</style>

Aggiungi il modulo di codice n. 2 con il codice JQuery

Aggiungi un altro modulo di codice proprio sotto il precedente, inserisci il codice jQuery in basso tra i tag di script e il gioco è fatto!

jQuery(function($){
  
$('#pricing-plan-item-1').addClass('active-pricing-plan');

$('[id*="pricing-plan-item"]').click(function() {

var selector = $(this).attr('id').replace('-plan-item', '');
var $pricingselect  = $('#' + selector);

  
$('[id*="pricing-"]').not('[id*="pricing-plan"]').hide();
  
$pricingselect.show()
  
$('#toggle-section').show();
  
$('[id*="pricing-plan"]').removeClass("active-pricing-plan");
$(this).addClass('active-pricing-plan');

});
});

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 creare un design di commutazione dei prezzi mensile/annuale con Divi. Questo è un ottimo modo per aggiungere interazione ai tuoi piani tariffari. Oltre ad applicare la tecnica del clic, abbiamo anche progettato un bellissimo piano tariffario a griglia che ti consente di enfatizzare quali funzionalità sono incluse in quali piani. Sei stato anche in grado di scaricare il file JSON gratuitamente. Se hai domande o suggerimenti, non esitare a lasciare un commento 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.