Creare una tabella prezzi mese/anno con Divi è il sogno di molti, non solo di chi possiede un sito commerciale. Vuoi proporre i tuoi servizi e comunicare subito ai tuoi utenti quali saranno i costi sia al mese sia all’anno? La nostra guida si occupa proprio di questo! Come fare una tabella prezzi mese/anno con Divi è molto semplice, ma richiede alcuni accorgimenti particolari. Per questo abbiamo realizzato questo tutorial pensando agli utenti più avanzati, che conoscono già il tema di Elegant Themes e che cercano di personalizzare una delle pagine più importanti per professionisti e portali di vendita. Se invece stai cercando una guida su come costruire una tabella prezzi automatica con Divi, ti rimandiamo all’articolo apposito.

Anteprima

Prima di analizzare nel dettaglio il nostro tutorial passo passo, vogliamo mostrarti subito quale sarà il risultato che potrai ottenere. Come sempre, ricorda che i colori che abbiamo scelto sono solo indicativi e che puoi personalizzarli come meglio credi. Puoi fare aggiunte, modifiche, ampliamenti… tutto! Spazio alla tua creatività! Qui sotto trovi il video su come creare una tabella prezzi mese/anno con Divi in versione Desktop. Nell’immagine di copertina invece ti mostriamo il risultato sia per il Tablet sia per lo Smartphone.

Come creare una tabella prezzi mese/anno: la prima sezione

Come sempre partiamo con il piede giusto e pensiamo allo sfondo da usare nella prima sezione, dove mostreremo la possibilità di scegliere se calcolare il prezzo finale del nostro prodotto a base mensile oppure annuale. In Contenuti/Sfondo impostiamo un background blu scuro: #000844. In Design/Modulo Separatore aggiungiamo invece un elmento In fondo con uno spessore da 10vw, come nell’immagine qui sotto.

In Spaziatura aumentiamo invece il padding In Cima fino a 5vw, mentre In Fondo diamo un valore di 10vw. Prima di chiudere le impostazioni, scriviamo toggle-section nel box dell’ID CSS che troviamo in Avanzate/ID & Classi CSS.

La prima riga

Passiamo ora alla prima riga: scegliamo il layout da due box. Prima di passare al contenuto, facciamo alcuni cambiamenti alle impostazioni della riga. In Design/Dimensionamento attiviamo Personalizzate Grondaia Larghezza e portiamo la Spaziatura Colonne fino a 1. Larghezza Massima e Larghezza massima dovranno avere invece i seguenti parametri:

  • Larghezza Massima 30vw (Desktop), 45vw (Tablet) e 50vw (Telefono)
  • Larghezza massima 100%

In Spaziatura invece portiamo a 0px sia il padding In Cima sia In Fondo. Per dare una forma ovale al bordo, spostiamoci nell’apposita sezione e inseriamo come valore 50vw per tutti e quattro i lati. Lo spessore dovrà invece essere da 1px, mentre il colore #e8e8e8, ovvero un grigio molto chiaro. In Avanzate, apriamo il sottomenù CSS personalizzato e scriviamo una regola per l’Elemento Principale.

display: flex;

Le colonne

Adesso siamo pronti per andare un po’ più a fondo: vediamo come creare una tabella prezzi mese/anno con Divi. Nella prima colonna dovremo inserire un modulo di testo, scrivendo la parola o frase che preferiamo. Per esempio un semplice “Mensile” può andare bene. In Testo scegliamo Montserrat come tipo di carattere. La dimensione dovrà essere:

  • 1.7vw (Desktop), 2vw (Tablet) 3vw (Telefono)

Allineamento centrale, colore chiaro. In Spaziatura, aumentiamo il padding:

  • In Cima e In Fondo 2vw (Desktop), 3vw (Tablet), 4vw (Telefono)

Prima di chiudere, inseriamo dei valori per il campo ID & Classi CSS che troviamo nella scheda Avanzate, come nell’immagine che trovi qui sotto.

Ora possiamo copiare il modulo che abbiamo appena creato e incollarlo nella seconda colonna. Attenzione: dobbiamo modificare il testo da “Mensile” ad “Annuale”. Dovremo inoltre assegnare un CSS ID diverso, andando in Avanzate/CSS ID & Classi:

pricing-plan-item-2

Seconda sezione

Pensiamo al corpo della nostra tabella prezzi mese/anno con Divi. Ci serve un’altra sezione, da aggiungere al di sotto della precedente. Scegliamo l’opzione Standard e modifichiamo subito lo sfondo, prima di aggiungere altri elementi. Il colore è #6b63dd. Andiamo in Design/Spaziatura e cambiamo il padding:

  • In Cima 7vw
  • In Fondo 15vw
  • Sinistra e Destra: 21vw (Desktop), 10vw (Tablet e Telefono)

Anche in questo caso diamo un valore al CSS ID.

pricing-1

Seconda riga

Pensiamo al corpo della nostra tabella. Ci serve una nuova riga, questa volta da tre box. In questo modo potremo mostrare il tipo di prodotto, se è previsto o meno dal piano o abbonamento e il suo costo. Prima di pensare ai moduli, facciamo delle variazioni in Dimensionamento:

  • Personalizza Grondaia Larghezza – Attivo
  • Spaziatura colonne – 1
  • Eguaglia Altezze – Attivo
  • Larghezza Massima – 100%
  • Larghezza massima – 100%

Puoi orientarti con facilità grazie all’immagine che trovi qui di seguito.

Passiamo a Spaziatura e portiamo a 0px sia il padding In Cima sia In Fondo. Pensiamo al Bordo. Pensiamo prima allo Stile a Destra e a Sinistra e aumentiamo lo spessore di entrambi a 1px. Sopra e Sotto invece dovranno essere a 0px. In questi ultimi due casi, il colore dovrà essere rgba(255,255,255,0), ovvero trasparente. Lasciamo invece il nero per gli altri due. Infine pensiamo al CSS personalizzato in Avanzate e scriviamo il nostro caro codice in Elemento Principale:

display: flex;

Torniamo in Contenuti e clicchiamo sulla rotellina delle impostazioni della seconda colonna, poi trasferiamoci nella scheda Design e inseriamo 1vw per il padding In Cima e 4vw per In Fondo. Rendiamo visibile anche il Bordo grazie alla voce apposita, aumentando fino a 1px lo spessore del bordo destro. Il colore deve essere bianco (#ffffff). Torniamo in Contenuti e scegliamo le impostazioni della terza colonna. Modifichiamo solo la spaziatura portando a 1vw il padding In Cima e 4vw quello In Fondo.

I contenuti delle colonne

Il nostro tutorial su come creare una tabella prezzi mese/anno con Divi non può che continuare con i moduli che inseriremo in questa riga. Nella prima colonna dovremo inserire un Modulo Separatore, che non dovrà però essere visibile. Per farlo, dovremo solo assicurarci di disattivare la casella Mostra Separatore che troviamo in Contenuti/Visibilità. Per la seconda colonna ci serve invece un modulo di testo, in cui inseriremo una parola in H3. Per esempio “Base“, come nell’immagine che trovi qui sotto.

Passiamo a Design/Testo del sottotitolo, clicchiamo su H3 e facciamo questi cambiamenti:

  • Font Montserrat
  • Allineamento Centrale
  • Dimensioni 2vw (Desktop), 3vw (Tablet), 3.5vw (Telefono)
  • Spaziatura lettere -1px

Ci serve un altro modulo di testo, da inserire subito al di sotto del precedente. Possiamo inserire il prezzo che ci interessa e poi andare in Design/Testo per aggiungere questi valori:

  • Font Montserrat
  • Luce Soffusa Magro
  • Colore #ffffff
  • Dimensioni 2vw (Desktop), 3vw (Tablet), 3.5vw (Telefono)
  • Interlinea 1em
  • Allineamento Centrale

In Spaziatura portiamo a 0.5vw il margine In Cima. Dopo aver salvato, cloniamo entrambi i moduli testo e spostiamo le copie nella terza colonna. Ricordiamoci però di cambiare il contenuto all’interno. Visto che prima abbiamo scelto Base per il costo più elementare della nostra offerta, adesso possiamo scegliere per esempio “Pro” ed aumentare anche il prezzo corrispondente.

Terza riga

Dovremo inserire di certo altri costi e prodotti. Senza impazzire troppo, possiamo duplicare la riga e cancellare subito dopo i quattro moduli di testo. Modifichiamo alcuni parametri della riga: in Contenuti troviamo la struttura della colonna. Clicchiamo sulla rotellina della prima e portiamo il padding a 3vw in Design/Spaziatura, sia per In Cima sia per In Fondo. In Bordo scegliamo invece di mostrare solo il lato destro, portando lo spessore a 1px e di colore #8882dd.

Torniamo nelle Impostazioni generali della riga, scegliamo la seconda colonna e modifichiamo Design/Spaziatura. Il padding In Cima e In Fondo dovrà essere il seguente:

  • 3vw (Desktop), 5vw (Tablet e Telefono)

Dovremo fare gli stessi cambiamenti anche per la terza colonna, aggiungendo il padding che abbiamo appena visto. Ora possiamo salvare e pensare solo alla prima colonna, dove troviamo già un modulo. Non ci serve però il Separatore, quindi cancelliamolo e inseriamo un modulo di testo. Andiamo in Design e facciamo i seguenti cambiamenti:

  • Font Montserrat
  • Colore #ffffff
  • Dimensioni 1.5vw (Desktop), 2vw (Tablet), 3vw (Telefono)
  • Allineamento Centrale

Nella seconda colonna inseriamo un modulo testo, scriviamo il simbolo ✓ e passiamo subito a Design/Testo:

  • Colore: #edf000
  • Dimensione 2vw (Desktop), 3vw (Tablet), 4vw (Telefono)
  • Interlinea 1em (Desktop), 0em (Tablet), 0.1em (Telefono)
  • Allineamento centrale

Duplichiamo e spostiamo la copia del modulo nella terza colonna.

L’alternativa

A seconda delle opzioni che vorrai o non vorrai, puoi cambiare il simbolo appena scelto con una ✗, magari con un colore differente. Per esempio un rosso scuro #890000. Va da sè che possiamo duplicare le righe tutte le volte che vogliamo. Finito l’elenco di cui abbiamo bisogno, possiamo pensare alla riga finale.

Ultima riga

Cloniamo un’ultima volta la riga e cambiamo il bordo, lasciando il resto invariato. Togliamo lo spessore al bordo superiore e inferiore, portiamo a 1px quello destro e sinistro e come colore scegliamo un trasparente rgba(255,255,255,0). Torniamo in Contenuti e cambiamo le impostazioni della seconda colonna, azzerando il padding dato in precedenza in Design/Spaziatura. Portiamo invece solo In Cima a 4vw, per tutti e tre i tipi di dispositivi. Cambiamo poi il colore del bordo della seconda colonna, cambiando il bianco con un grigio #eaeaea. Prima di ritornare alla prima colonna, modifichiamo i valori in Spaziatura anche per la terza colonna.

Ricordi che all’inizio della tabella, nella prima riga, abbiamo inserito un modulo separatore? Puoi clonarlo e posizionarlo nella prima colonna di quest’ultima riga.

I pulsanti

Vediamo la parte conclusiva della nostra guida su come creare una tabella prezzi mese/anno con Divi. Questa volta non inseriremo dei classici moduli di testo, ma i pulsanti. Inseriamone uno nella seconda colonna e scriti “Acquista”. Poi vai in Design/Pulsante, attiva la casella Usa stili personalizzati e modifica questi valori:

  • Dimensioni 2vw (Desktop e Tablet), 3vw (Telefono)
  • Colore #ffffff
  • Bordo 0px
  • Border Radius 50vw
  • Font Montserrat

Alla voce Bordo, aggiungi un po’ di padding:

  • In Cima e In Fondo 1vw (Desktop), 1.5 (Tablet e Telefono)
  • Sinistra e Destra (4vw (Desktop), 6vw (Tablet e Telefono)

Duplicato sezione e cambiamenti

Poi clona l’intera sezione, in modo da avere due copie della stessa tabella. Dovrai solo cambiare il prezzo dei servizi oppure tutto ciò che vuoi. Ricordati di modificare anche CSS ID in pricing-2 e inserisci hide-section-2 in CSS Class, sempre nella scheda Avanzate/ID & Classi CSS.  Poi ritorna all’inizio della pagina e aggiungi una nuova riga all’interno della prima sezione, subito al di sopra del box Mensile/Annuale che abbiamo creato in precedenza.

 

Inserisci un modulo codice e scrivi queste righe all’interno:

<style>
.pricing-item-cursor {
cursor: pointer;
}
 
.hide-section-2 {
display: none;
}
 
.active-pricing-plan {
color: #6b63dd !important;
background-color: #fff;
}</style>

Aggiungi un altro modulo identico e scrivi queste righe di codice in Javascript:

<script>
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);
 
$pricingselect.show().siblings().hide();
$('#toggle-section').show();
 
$('[id*="pricing-plan"]').removeClass("active-pricing-plan");
$(this).addClass('active-pricing-plan');
 
});
});
</script>

Adesso salva ed esci dal Builder: visualizza la pagina e prova le funzionalità. Il gioco è fatto!

Conclusioni

Abbiamo visto tutti i passaggi necessari della guida su come creare una tabella prezzi mese/anno con Divi. Hai trovato ciò che stavi cercando? Oppure sei ancora a caccia di qualche idea? Scrivici che cosa ne pensi in un commento, utilizzando l’apposita sezione che trovi all’interno di questa pagina. Se desideri qualcosa di specifico, puoi illustrarci il tuo progetto. Cercheremo di risponderti in tempo breve per trovare insieme una soluzione ideata su misura per te!

0 0 votes
Article Rating