Cum se creează calcule automate ale prețurilor cu Divi (folosind JQuery)

Unele persoane ezită să-și prezinte prețurile serviciilor pe site-ul lor web. Dar, oricât de mult îi poate speria pe unii vizitatori, arată și încredere și expertiză. A fi transparent cu prețurile dvs. vă ajută să atrageți clienții potriviți cu un buget cu care puteți lucra. În tutorialul de astăzi, vă vom arăta cum să creați un design uimitor de calcul al prețului pe care îl puteți utiliza pentru următorul dvs. proiect Divi. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați GRATUIT aspectul calculelor de preț

Pentru a pune mâna pe aspectul gratuit al calculelor de preț, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Nu uitați să adăugați și codul JQuery pe site-ul dvs. web! Puteți găsi codul la sfârșitul acestui tutorial.

Să începem să recreăm!

Adăugați secțiunea nr. 1

Culoare de fundal

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Deschideți setările secțiunii și schimbați culoarea de fundal.

• Culoare fundal: # f8c5ac

Separator inferior

Adăugați un separator inferior în secțiunea următoare.

• Stil divizor: Găsiți în listă
• Flip divizor: vertical

Spațiere

Adăugați și niște umplutură de fund.

• Căptușeală inferioară: 130 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Adăugați modulul de text nr. 1 în coloană

Adăugați conținut H2

Adăugați primul modul de text în coloana dvs. și introduceți conținut H2 la alegere.

Setări text H2

Treceți la fila de proiectare și modificați setările de text H2 în consecință:

• Rubrica 2 Font: Montserrat
• Titlul 2 Greutate font: Semi Bold
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: # 0f1c4d
• Titlul 2 Dimensiune text: 57 px (desktop), 35 px (tabletă), 30 px (telefon)
• Rubrica 2 Spațierea literelor: -2 px

Adăugați modulul de text nr. 2 în coloană

Adauga continut

Adăugați un alt modul de text chiar sub cel precedent și introduceți un conținut la alegere.

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Montserrat
• Aliniere text: centru
• Culoarea textului: # 0f1c4d
• Dimensiune text: 22 px (desktop), 18 px (tabletă), 16 px (telefon)

Adăugați modulul divizor în coloană

Vizibilitate

Următorul și ultimul modul necesar în această coloană este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Treceți la fila de proiectare și schimbați culoarea liniei în alb.

• Culoare linie: #ffffff

Dimensionare

Modificați și lățimea separatorului.

• Lățime: 12%

Adăugați secțiunea 2

Culoare de fundal

La următoarea parte a designului! Adăugați o nouă secțiune și modificați culoarea de fundal.

• Culoare fundal: # 0f1c4d

Spațiere

Adăugați câteva căptușeli personalizate în partea de sus și de jos.

• Căptușeală superioară: 70 px
• Căptușeală inferioară: 130 px

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor și modificați lățimea pe dimensiuni mai mici ale ecranului.

• Lățime: 80% (desktop), 90% (tabletă și telefon)

Spațiere

Adăugați câteva umpluturi de fund personalizate în continuare.

• Căptușeală inferioară: 70 px (desktop), 20 px (tabletă), 0 px (telefon)

Frontieră

Adăugați și un chenar inferior la rând.

• Lățimea marginii inferioare: 1 px
• Culoare margine inferioară: #ffffff

Afişa

Și, în sfârșit, pentru a ne asigura că toate coloanele sunt afișate una lângă cealaltă, vom adăuga o linie de cod CSS la elementul principal al rândului.

display: flex;

Adăugați Blurb Module la coloana 1

Selectați pictograma

E timpul să începeți să adăugați module! Adăugați un modul Blurb în coloana 1 și selectați o pictogramă la alegere.

Setări implicite pentru pictograme

Treceți la fila de proiectare și modificați setările pictogramei în consecință:

• Culoare pictogramă: # f7f7f7
• Pictogramă cerc: Da
• Pictogramă cerc: # f8c5ac
• Plasarea pictogramelor: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 96 px (desktop), 20 px (tabletă și telefon)

Plasați cursorul pe setările pictogramei

Modificați culoarea pictogramei la cursor.

• Culoare pictogramă: # 000000

ID CSS

Introduceți și un ID CSS.

• ID CSS: price-item-click-1

Adăugați modulul de text nr. 1 în coloana 2

Adăugați conținut H3

Trecem la a doua coloană! Adăugați primul modul de text și introduceți conținut H3.

Setări text H3

Treceți la fila de proiectare și modificați setările de text H3 în consecință:

• Rubrica 3 Font: Montserrat
• Titlul 3 Greutate font: Semi Bold
• Rubrica 3 Culoarea textului: # f8c5ac
• Titlul 3 Dimensiune text: 40 px (desktop), 25 px (tabletă), 18 px (telefon)
• Rubrica 3 Spațierea literelor: -1 px
• Rubrica 3 Înălțimea liniei: 1.1em

Adăugați modulul de text nr. 2 în coloana 2

Adauga continut

Adăugați un alt modul de text în coloana 2 cu un conținut la alegere.

Setări text

Treceți la fila de proiectare și modificați setările de text.

• Font text: Montserrat
• Greutatea fontului textului: ultra ușoară
• Culoarea textului: # f8c5ac
• Dimensiune text: 23 px (desktop), 18 px (tabletă), 14 px (telefon)
• Spațiere scrisoare text: -1 px
• Înălțimea liniei textului: 1.1em

Adăugați un modul de text în coloana 3

Adăugați preț la caseta de conținut

La a treia coloană! Adăugați un modul de text și plasați prețul în caseta de conținut.

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Montserrat
• Greutate font text: greu
• Aliniere text: centru
• Culoarea textului: #ffffff
• Dimensiune text: 40 px (desktop), 25 px (tabletă), 18 px (telefon)

ID și clasă CSS

Treceți la fila avansată și adăugați un ID CSS și o clasă CSS.

• ID CSS: preț-1
• Clasa CSS: price-hide-first

Clonați rândul de câte ori este necesar

După ce ați completat rândul și toate modulele din acesta, puteți clona rândul de câte ori doriți.

Schimbați ID-urile CSS ale modulului Blurb duplicat

Modificați codul CSS al fiecărui nou modul Blurb în consecință:

• Blurb Module 1: price-item-click-1
• Blurb Module 2: price-item-click-2
• Blurb Module 3: price-item-click-3
• ...

Schimbați prețul și codurile CSS ale modulului de text duplicat

Faceți același lucru pentru prețul modulului text din a treia coloană a fiecărui rând.

• Preț 1: preț-1
• Preț 2: preț-2
• Preț 3: preț-3
• ...

Adăugați un rând nou

Structura coloanei

Adăugați un alt rând în secțiunea dvs. utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor și modificați lățimea pe dimensiuni mai mici ale ecranului.

• Lățime: 80% (desktop), 90% (tabletă și telefon)

Afişa

Pentru a ne asigura că toate coloanele apar una lângă cealaltă pe dimensiuni de ecran mai mici, vom adăuga și o singură linie de cod CSS la elementul principal al rândului.

display: flex;

Adăugați un modul de cod în coloana 1

Introduceți codul CSS

Continuați adăugând un modul de cod la prima coloană a rândului și introduceți următoarele linii de cod CSS:

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

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

Adăugați un modul de text în coloana 2

Adauga continut

Treceți la a doua coloană și adăugați un nou modul de text cu un conținut la alegere.

Setări text

Modificați setările de text în consecință:

• Font text: Montserrat
• Greutatea fontului textului: ultra ușoară
• Culoarea textului: # f8c5ac
• Dimensiune text: 23 px (desktop), 18 px (tabletă), 14 px (telefon)
• Spațiere scrisoare text: -1 px
• Înălțimea liniei textului: 1.1em

Adăugați un modul de text gol în coloana 3

Lăsați caseta de conținut goală

Treceți la următoarea și ultima coloană. Adăugați un modul de text și asigurați-vă că caseta de conținut rămâne goală.

Setări text

Treceți la fila de proiectare și modificați setările de text după cum urmează:

• Font text: Montserrat
• Greutate font text: greu
• Aliniere text: centru
• Culoarea textului: #ffffff
• Dimensiune text: 40 px (desktop), 25 px (tabletă), 18 px (telefon)

ID CSS

Completați setările modulului adăugând un ID CSS.

• CSS ID: total-price-cal

Adăugați JQuery la Opțiunile temei Divi

Accesați fila Integrare

Acum, după ce am finalizat proiectarea, este timpul să facem funcționalitatea să funcționeze folosind un cod JQuery. Dacă doriți să adăugați calculele de preț la o singură pagină, puteți plasa codul într-un modul de cod. Cu toate acestea, dacă îl utilizați pe mai multe pagini, accesați Opțiunile temei Divi și selectați fila de integrare.

Adăugați cod JQuery la Etichetele principale

Introduceți următoarele rânduri de cod JQuery între etichetele de script și ați terminat:

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

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați un design uimitor de calcul al prețului cu Divi. Acesta este un mod minunat de a le arăta vizitatorilor la ce preț încep serviciile dvs. și vă ajută să atrageți publicul potrivit. Puteți utiliza această abordare pentru orice proiect de calcul al prețului pe care îl creați pentru următorul dvs. proiect Divi! Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.