Come creare calcoli automatici dei prezzi con Divi (usando JQuery)

Alcune persone esitano a mostrare i prezzi dei loro servizi sul loro sito web. Ma per quanto possa spaventare alcuni visitatori, mostra anche fiducia e competenza. Essere trasparenti con i tuoi prezzi ti aiuta ad attirare i clienti giusti con un budget con cui puoi lavorare. Nel tutorial di oggi, ti mostreremo come creare uno straordinario design per il calcolo del prezzo che puoi utilizzare per il tuo prossimo progetto Divi. Potrai anche scaricare gratuitamente il file 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 calcoli dei prezzi

Per mettere le mani sul layout di calcolo del prezzo gratuito, 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!

Non dimenticare di aggiungere anche il codice JQuery al tuo sito web! Puoi trovare il codice alla fine di questo tutorial.

Iniziamo a ricreare!

Aggiungi la sezione n. 1

Colore di sfondo

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e cambia il colore di sfondo.

• Colore di sfondo: #f8c5ac

Divisore inferiore

Aggiungi un divisore inferiore alla sezione successiva.

• Stile divisore: trova nell'elenco
• Capovolgimento divisore: verticale

Spaziatura

Aggiungi anche un po' di imbottitura sul fondo.

• Imbottitura inferiore: 130 px

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto H2

Aggiungi il primo modulo di testo alla tua colonna e inserisci alcuni contenuti H2 a tua scelta.

Impostazioni testo H2

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

• Intestazione 2 Carattere: Montserrat
• Peso del carattere dell'intestazione 2: semi grassetto
• Intestazione 2 Allineamento del testo: Centro
• Colore testo titolo 2: #0f1c4d
• Titolo 2: Dimensioni testo: 57 px (desktop), 35 px (tablet), 30 px (telefono)
• Intestazione 2 Spaziatura lettere: -2px

Aggiungi il modulo di testo n. 2 alla colonna

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
• Allineamento del testo: Centro
• Colore del testo: #0f1c4d
• Dimensioni del testo: 22 px (desktop), 18 px (tablet), 16 px (telefono)

Aggiungi modulo divisore alla colonna

Visibilità

Il modulo successivo e ultimo necessario in questa colonna è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Passa alla scheda Design e cambia il colore della linea in bianco.

• Colore linea: #ffffff

Dimensionamento

Modifica anche la larghezza del divisore.

• Larghezza: 12%

Aggiungi sezione #2

Colore di sfondo

Alla prossima parte del design! Aggiungi una nuova sezione e cambia il colore di sfondo.

• Colore di sfondo: #0f1c4d

Spaziatura

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

• Imbottitura superiore: 70px
• Imbottitura inferiore: 130 px

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 la larghezza su schermi di dimensioni più piccole.

• Larghezza: 80% (desktop), 90% (tablet e telefono)

Spaziatura

Aggiungi successivamente un'imbottitura inferiore personalizzata.

• Imbottitura inferiore: 70 pixel (desktop), 20 pixel (tablet), 0 pixel (telefono)

Frontiera

Aggiungi anche un bordo inferiore alla riga.

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

Schermo

Infine, per assicurarci che tutte le colonne siano visualizzate una accanto all'altra, aggiungeremo una riga di codice CSS all'elemento principale della riga.

display: flex;

Aggiungi modulo Blurb alla colonna 1

Seleziona icona

È ora di iniziare ad aggiungere moduli! Aggiungi un modulo Blurb alla colonna 1 e seleziona un'icona a tua scelta.

Impostazioni predefinite dell'icona

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

• Colore icona: #f7f7f7
• Icona del cerchio: Sì
• Icona cerchio: #f8c5ac
• Posizionamento delle icone: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 96 px (desktop), 20 px (tablet e telefono)

Impostazioni dell'icona al passaggio del mouse

Modifica il colore dell'icona al passaggio del mouse.

• Colore icona: #000000

ID CSS

Inserisci anche un ID CSS.

• ID CSS: prezzo-elemento-clic-1

Aggiungi il modulo di testo n. 1 alla colonna 2

Aggiungi contenuto H3

Alla seconda colonna! Aggiungi il primo modulo di testo e inserisci alcuni contenuti H3.

Impostazioni testo H3

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

• Intestazione 3 Carattere: Montserrat
• Intestazione 3 Peso del carattere: semi grassetto
• Colore testo titolo 3: #f8c5ac
• Intestazione 3 Dimensioni testo: 40 px (desktop), 25 px (tablet), 18 px (telefono)
• Intestazione 3 spaziatura lettere: -1px
• Intestazione 3 Altezza riga: 1.1em

Aggiungi il modulo di testo n. 2 alla colonna 2

Aggiungi contenuto

Aggiungi un altro modulo di testo alla colonna 2 con un contenuto a tua scelta.

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo.

• Carattere del testo: Montserrat
• Peso del carattere del testo: ultraleggero
• Colore del testo: #f8c5ac
• Dimensioni del testo: 23 px (desktop), 18 px (tablet), 14 px (telefono)
• Spaziatura delle lettere del testo: -1px
• Altezza riga di testo: 1.1em

Aggiungi modulo di testo alla colonna 3

Aggiungi prezzo alla casella dei contenuti

Alla terza colonna! Aggiungi un modulo di testo e inserisci il prezzo nella casella del contenuto.

Impostazioni testo

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

• Carattere del testo: Montserrat
• Peso del carattere del testo: pesante
• Allineamento del testo: Centro
• Colore del testo: #ffffff
• Dimensione del testo: 40 px (desktop), 25 px (tablet), 18 px (telefono)

ID e classe CSS

Passa alla scheda Avanzate e aggiungi un ID CSS e una classe CSS.

• ID CSS: prezzo-1
• Classe CSS: prezzo-nascondi-primo

Clona riga tutte le volte che è necessario

Una volta completata la riga e tutti i moduli in essa contenuti, puoi clonare la riga tutte le volte che desideri.

Modifica gli ID CSS duplicati del modulo Blurb

Modifica di conseguenza l'ID CSS di ogni nuovo modulo Blurb:

• Blurb Modulo 1: prezzo-oggetto-clic-1
• Modulo Blurb 2: prezzo-oggetto-clic-2
• Modulo Blurb 3: prezzo-oggetto-clic-3
• …

Modifica il prezzo del modulo di testo duplicato e gli ID CSS

Fai lo stesso per il modulo di testo del prezzo nella terza colonna di ogni riga.

• Prezzo 1: prezzo-1
• Prezzo 2: prezzo-2
• Prezzo 3: prezzo-3
• …

Aggiungi nuova riga

Struttura della colonna

Aggiungi un'altra riga alla tua sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica la larghezza su schermi di dimensioni più piccole.

• Larghezza: 80% (desktop), 90% (tablet e telefono)

Schermo

Per assicurarci che tutte le colonne appaiano una accanto all'altra su schermi di dimensioni più piccole, aggiungeremo anche una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Aggiungi modulo codice alla colonna 1

Inserisci codice CSS

Continua aggiungendo un Modulo Codice alla prima colonna della riga e inserisci le seguenti righe di codice CSS:

<style>
.price-hide-first {
display: none;
}

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

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

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

Impostazioni testo

Modificare le impostazioni del testo di conseguenza:

• Carattere del testo: Montserrat
• Peso del carattere del testo: ultraleggero
• Colore del testo: #f8c5ac
• Dimensioni del testo: 23 px (desktop), 18 px (tablet), 14 px (telefono)
• Spaziatura delle lettere del testo: -1px
• Altezza riga di testo: 1.1em

Aggiungi modulo di testo vuoto alla colonna 3

Lascia la casella del contenuto vuota

Alla prossima e ultima colonna. Aggiungi un modulo di testo e assicurati che la casella del contenuto rimanga vuota.

Impostazioni testo

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

• Carattere del testo: Montserrat
• Peso del carattere del testo: pesante
• Allineamento del testo: Centro
• Colore del testo: #ffffff
• Dimensione del testo: 40 px (desktop), 25 px (tablet), 18 px (telefono)

ID CSS

Completa le impostazioni del modulo aggiungendo un ID CSS.

• ID CSS: total-price-cal

Aggiungi JQuery alle opzioni del tema Divi

Vai alla scheda Integrazione

Ora che abbiamo completato il design, è il momento di far funzionare la funzionalità utilizzando del codice JQuery. Se desideri aggiungere i calcoli del prezzo a una sola pagina, puoi inserire il codice in un Modulo di codice. Se, tuttavia, lo stai utilizzando su più pagine, vai alle Opzioni del tema Divi e seleziona la scheda di integrazione.

Aggiungi codice JQuery ai tag Head

Inserisci le seguenti righe di codice JQuery tra i tag di script e il gioco è fatto:

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();
    }
  });
});

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 uno straordinario design per il calcolo dei prezzi con Divi. Questo è un ottimo modo per mostrare ai tuoi visitatori a quale prezzo iniziano i tuoi servizi e ti aiuta ad attirare il pubblico giusto. Puoi utilizzare questo approccio su qualsiasi progetto di calcolo dei prezzi che crei per il tuo prossimo progetto Divi! Se hai domande o suggerimenti, assicurati di 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.