Diamo subito il merito per la creazione dell’articolo su come fare una tabella prezzi con calcolo automatico con Divi & Jquery al legittimo proprietario: Donjete Vuniqi di Elegant Themes. Come avrai intuito, questa mini guida non è originale e nasce dalla volontà di dare supporto a chi si destreggia a fatica con l’inglese e vuole comunque imparare a creare contenuti affascinanti con il tema più splendente dell’universo WordPress.

Bando alle ciance! Se sei alla ricerca di un modo per mostrare i prezzi dei tuoi servizi, consulenze o prodotti in modo chiaro, sei atterrato sul sito giusto. Troverai di sicuro il contenuto di questo post di sicuro molto interessante. La verità è che alcuni imprenditori, amatoriali o professionisti, preferiscono mantenere l’anonimato anche in questo caso, forse per la paura di perdere visitatori e potenziali clienti.

Partiamo subito alla grande e scopriamo il risultato finale, sia il layout per il Desktop sia quello per il Mobile.

Scarica il Layout del Calcolatore di prezzi

Hai fretta e vuoi aggiungere subito alla tua Libreria la Calcolatrice dinamica creata con Divi? Ti basta iscriverti alla newsletter inserendo i tuoi dati nel form qui sotto per poter accedere all’istante al contenuto esclusivo.

Crea un design di calcolo per i prezzi del tuo sito

Usa il builder visivo e costruisci la tua pagina sul front-end di Divi, aggiungendo subito una sezione. Cliccando sulla rotella in alto a sinistra del box blu, accederai alle impostazioni generali. Rimani su contenuti e seleziona la voce sfondo (o background se hai la versione in inglese). Inserisci il codice del colore, in questo caso azzurro: #8fc7ff. Non chiudere la finestra e clicca invece su design che trovi in alto e scorri fino alla seconda voce, modulo separatore. Clicca su in fondo e poi sul menu a tendina che trovi al di sotto di stile divisore, scegliendo la terz’ultima opzione. Quella con un unico triangolino, per intenderci. Scorri un po’ più sotto fino a modulo separatore e troverai una specie di doppia clessidra: dovrai selezionare solo quella orizzontale.

Adesso puoi spostarti su spaziatura (o spacing) e inserisci 130px nella casella di padding ‘in fondo’ (o bottom).

La struttura: nuova riga e intestazione

Puoi dare l’okay alla finestra e inserire una riga grazie al pulsantino verde. Scegli un unico modulo, tipologia testo. Inserisci una frase a piacere in H2: noi abbiamo scelto ‘Ok, il prezzo è giusto’ alla Iva Zanicchi. Ora vai su design e poi testo del sottotitolo, facendo attenzione a selezionare H2, ovvero l’heading che ci interessa.

  • Intestazione Font: Montserrat
  • Luce Soffusa: Semi Bold
  • Allineamento: centrato
  • Colore: #0f1c4d

Rimani su questa voce e fai apparire il sottomenu spostandoti con il cursore. Clicca sull’icona a forma di cellulare e inserisci i seguenti parametri per la dimensione del testo: 57px (Desktop), 35px (Tablet) e 30px (Phone). La spaziatura fra le lettere, che trovi al di sotto, dovrà invece essere -2px.

Secondo modulo di testo

Adesso puoi inserire un altro modulo di testo cliccando sull’icona + grigia e scrivi una frase a tuo piacimento. Nel nostro caso, abbiamo scelto ‘A me gli occhi’. Poi spostati sulla categoria design e apri il sottomenu di testo:

  • Font: Montserrat
  • Allineamento: centrato
  • Colore: #0f1c4d
  • Dimensione: 22px (Desktop), 18px (Tablet), 16px (Phone)

Modulo di divisione

Cliccando sempre sul + grigio, potrai inserire un nuovo modulo, selezionando il modulo separatore. Rendi visibile l’elemento e usa il bianco come colore, spostandoti nella categoria Design.  Alla voce dimensionamento inserisci 12% per la larghezza massima (la seconda), ovvero il width. Scegli poi l’allineamento centrale per fare in modo che scritte e divisore siano allineati.

Una nuova sezione

Ormai sai come devi fare: clicca sul + verde e aggiungi un’altra sezione, al di sotto della precedente. Usa il colore #0f1c4d come sfondo. Per la spaziatura (Design), scegli i parametri padding in cima 70px e in fondo 130px. Se non lo hai già fatto, a questo punto crea una riga, questa volta scegliendo la struttura da tre box. Per il passaggio successivo guarda pure l’immagine qui sotto: mantieni invariato l’80% che vedi per la Larghezza Massima (Width) del Desktop, ma aumenta la stessa fino al 90% per Tablet e Telefono.

Aggiungi padding in fondo per la spaziatura: 70px (Desktop), 20px (Tablet), 0px (Phone). Questa volta però aggiungiamo anche il Bordo, scegliendo la penultima opzione per lo stile, 1px di spessore e colore bianco (#ffffff). A questo punto aggiungi una riga di CSS per fare in modo che tutte le colonne rimangano l’una accanto all’altra. Avanzate -> Elemento Principale e scrivi all’interno del box questo codice:

display: flex;

Le colonne

Al posto del solito modulo testo, questa volta inseriremo nella colonna di sinistra della sezione appena creata un modulo Blur(b). Scegli un’icona a tuo piacimento: troverai una vasta selezione in Contenuti -> Immagine & Icona. Come puoi vedere dalla pic, abbiamo scelto di seguire la guida originale.

Nel tab Design, vai sotto la voce Immagine & Icona e inserisci questi parametri:

  • Colore icona: #f7f7f7
  • Icona con cerchio: sì
  • Colore del cerchio: #8fc7ff
  • Posizionamento icona: in cima
  • Usa dimensione personalizzata: sì
  • Dimensione: 96px (Desktop), 20px (Tablet e Telefono)

Come avrai già notato, il colore del cerchio corrisponde a quello della prima sezione che abbiamo creato in questo articolo. Così potremo creare un effetto armonico fra i vari elementi, alternando pochi colori e regalando una sensazione di pulizia e leggerezza ai nostri utenti. Adesso ritorna all’inizio della finestra e seleziona Hover, inserendo il colore #0c71c3 per il cerchio.

Può essere che tu sia ancora agli inizi e non sappia come attivare l’Hover, o librarsi secondo la traduzione strampalata in italiano.

Nella categoria Avanzate trovi invece la voce CSS Id & Classes: scrivi price-item-click-1 nella striga dedicata al CSS ID.

Seconda colonna: doppio modulo di testo

Spostiamoci adesso sulla seconda colonna e aggiungiamo un modulo di testo. All’interno scrivi ciò che vuoi in H3. Nella categoria Design invece impostiamo i parametri corretti, dal font fino alle dimensioni. Ricordati che abbiamo inserito un’intestazione, quindi dovrai modificare le voci del Testo Sottotitolo, non del testo semplice:

  • Font: Montserrat
  • Luce: Semi bold
  • Colore: #8fc7ff
  • Dimensione: 40px (Desktop), 22px (Tablet), 18px (Mobile)
  • Spazio: -1px
  • Interlinea: 1.1 em

Finito questo passaggio, aggiungiamo un altro modulo di testo al di sotto del precedente. Anche in questo caso il testo sarà a tuo piacimento, ma ricordati che andremo a modificare un paragrafo, quindi i parametri seguenti andranno inseriti in Design, all’interno della prima voce di testo:

  • Font: Montserrat
  • Luce: Magro (Ultra Light)
  • Colore: #8fc7ff
  • Dimensione: 23px (Desktop), 18 px (Tablet), 14px (Mobile)
  • Spazio: -1px
  • Interlinea: 1.1em

Terza colonna: il prezzo

Nel secondo spazio della nostra solita riga, inseriamo un altro modulo di testo. In questo caso quello che vorrai scrivere riguarda il costo del tuo prodotto o servizio. Nel nostro caso 10€. Come al solito andiamo a modificare la struttura della scritta:

  • Font: Montserrat
  • Luce: Pesante (Heavy)
  • Colore: #ffffff
  • Dimensione: 40px (Desktop), 25 px (Tablet), 18px (Mobile)
  • Allineamento: centrato

Nella categoria avanzate, CSS ID & Classi, scrivi price-1 come ID e price-hide-first come classe. Non ti preoccupare se in questo momento non hai ben chiaro perchè introduciamo strane scritte di stile oppure se vedi alcuni dislivelli fra le varie scritte. Ci arriveremo fra poco! Intanto cloniamo la riga per due volte: puoi vedere grazie all’immagine quale sarà il risultato.

Andremo però a modificare il CSS ID della prima colonna, in modo da avere:

  • Primo Blur(b): price-item-click-1
  • Secondo Blur(b): price-item-click-2
  • Terzo Blur(b): price-item-click-3

Se deciderai di inserire altri moduli o clonare più di tre volte la riga, dovrai ricordati di inserire gli altri CSS ID seguendo l’esempio che abbiamo appena visto.

Facciamo quindi la stessa cosa anche per la terza colonna:

  • price-1
  • price-2
  • price-3

Seconda riga:

Creiamo un’altra riga, al di sotto della precedente, senza inserire per ora alcun tipo di modulo. Modifichiamo invece la Larghezza Massima nella scheda Design -> Dimensionamento, inserendo i parametri: 80% (Desktop), 90% (Tablet e Mobile). Nella scheda Avanzate -> CSS Personalizzato, scriviamo invece il nostro sempreverde

display: flex;

Le colonne

Adesso possiamo lavorare all’interno della riga. Questa volta invece di usare il solito modulo che abbiamo usato fino ad ora, selezioniamo il modulo codice.

<style>
.price-hide-first {
display: none;
}
 
.price-item-active .et-pb-icon {
color: black !important;
}
</style>

Nella seconda colonna invece inseriamo il classico testo, scriviamo ciò che riteniamo più opportuno e trasformiamo le sue caratteristiche:

  • Font: Montserrat
  • Stile: Magro
  • Colore: #8fc7ff
  • Dimensione: 23px (Desktop), 18px (Tablet), 14px (Mobile)
  • Spazio: -1px
  • Interlinea: 1.1em

Nella terza colonna inseriamo un modulo testo vuoto con queste caratteristiche:

  • Font: Montserrat
  • Stile: pesante
  • Allineamento: centro
  • Colore: #ffffff
  • Dimensione: 40px (Desktop), 25px (Tablet), 18px (Mobile)

Alla voce CSS-ID scriviamo invece total-price-cal.

Aggiungere JQuery alle Opzioni di Divi

Abbiamo appena completato la parte del design ed ora possiamo iniziare a lavorare sul funzionamento della calcolatrice. Questa scelta dovrà essere operata però solo quando abbiamo a che fare con più di una pagina, altrimenti sarà bene inserire JQuery in un modulo Codice. Se invece abbiamo bisogno di agire a livello globale, dovremo spostarci sulle Opzioni del Tema, categoria Integrazione, subito dopo il tag <head>.

jQuery(function($){
  $('[id*="price-item-click"]').click(function() {
    var selector = $(this).attr('id').replace('-item-click', '');
    var $price   = $('#' + selector);
    var sum = 0;
    $price.toggle();
    $price.toggleClass('price-active');
    $(this).toggleClass('price-item-active');
    $('.price-active').each(function(){
    sum += parseFloat($(this).text().replace(/\D/g,''));
    });
    if (sum > 0){
    $("#total-price-cal").show();
        $("#total-price-cal").text("$" + sum + "k");
    }
    else {
    $("#total-price-cal").hide();
    }
  });
});

Attenzione: all’inizio ed alla fine del codice che trovi qui sopra, dovrai ricordarti di aggiungere anche il tag script: <script> subito prima del codice e </script> in fondo.

Conclusioni

Abbiamo visto come creare un calcolatore di prezzi con DIVI che funzioni in modo automatico. Puoi utilizzare questo tipo di Layout per arricchire le tue pagine, landing page e anche i tuoi articoli speciali. Ti aiuterà di sicuro a migliorare l’esperienza dell’utente durante la navigazione ed offrirai un servizio utile, interessante e di design. Per qualsiasi informazione o dubbio, lascia un commento qui sotto utilizzando la sezione apposita.

0 0 votes
Article Rating