Unii oameni ezită să afișeze prețurile serviciilor lor pe site-ul lor site-ul web. Dar oricât de mult i-ar putea speria pe unii vizitatori, arată, de asemenea, încredere și expertiză. A fi transparent cu privire la prețuri vă permite 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 calculator de preț pe care îl puteți utiliza pentru următorul dvs. proiect Divi. De asemenea, puteți descărca fișierul JSON gratuit!
Să mergem.
studiu
Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra modului în care arată pe diferite dimensiuni de ecran.
Să începem să recreăm!
Adăugați secțiunea #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 de fundal: #f8c5ac
Divizor inferior
Adăugați un separator inferior la secțiunea următoare.
- Stil de separare: căutați în listă
- Flip Divider: vertical
spaţierea
De asemenea, adăugați niște căptușeală în partea de jos.
- Umplutură de fundal: 130px
Adăugați o linie nouă
Structura coloanei
Continuați să adăugați un rând nou folosind următoarea structură a coloanelor:
Adăugați modulul text # 1 la coloană
Adăugați conținut H2
Adăugați primul modul de text în coloana dvs. și introduceți conținutul H2 la alegere.
Setări text H2
Comutați la fila Design și modificați setările de text H2 în consecință:
- Secția 2 Poliție: Montserrat
- Titlul 2 Font: Semi Bold
- Titlul 2 Alinierea textului: centru
- Titlul 2 Culoare text: #0f1c4d
- Titlu 2 Dimensiune text: 57 pixeli (desktop), 35 pixeli (tabletă), 30 pixeli (telefon)
- Titlul 2 Spațierea literelor: -2px
Adăugați modulul text # 2 la coloană
Adăugați conținut
Adăugați un alt modul de text chiar sub cel anterior și introduceți conținutul dorit.
Setări text
Treceți la fila Proiectare și modificați setările de text în consecință:
- Font text: Montserrat
- Alinierea textului: centru
- Culoarea textului: #0f1c4d
- Dimensiunea textului: 22px (desktop), 18px (tabletă), 16px (telefon)
Adăugați un modul de divizare în coloană
vizibilitate
Următorul și ultimul modul necesar în această coloană este un modul de divizare. Asigurați-vă că opțiunea „Afișați separatorul” este activată.
- Afișează separatorul: Da
Ligne
Comutați la fila Design și schimbați culoarea conturului în alb.
- Culoarea liniei: #ffffff
dimensionarea
Schimbați și lățimea separatorului.
- Lățime: 12%
Adăugați secțiunea #2
Culoare de fundal
Să trecem la restul desenului! Adăugați o nouă secțiune și schimbați culoarea de fundal.
- Culoare de fundal: #0f1c4d
spaţierea
Apoi adăugați niște căptușeală personalizată în partea de sus și de jos.
- Încadrare superioară: 70px
- Umplutură de fundal: 130px
Adăugați rândul 1
Structura coloanei
Continuați prin adăugarea unui nou rând la secțiune folosind următoarea structură de coloane:
dimensionarea
Fără a adăuga încă module, deschideți setările de rând și modificați lățimea pe ecran de dimensiuni mai mici.
- Lățime: 80% (desktop), 90% (tabletă și telefon)
spaţierea
În continuare, adăugați niște umplutură de jos personalizată.
- Umplutură în partea de jos: 70px (desktop), 20px (tabletă), 0px (telefon)
frontieră
De asemenea, adăugați un chenar de jos la linie.
- Lățimea marginii de jos: 1px
- Culoarea marginii de jos: #ffffff
afficher
În cele din urmă, pentru a ne asigura că toate coloanele sunt afișate una lângă alta, vom adăuga o linie de cod CSS la elementul principal al rândului.
afișare: flex;
Adăugați modulul Blurb la coloana 1
Selectați pictograma
Este timpul să începeți să adăugați module! Adăugați un modul Blurb la coloana 1 și selectați pictograma dorită.
Setări implicite ale pictogramei
Treceți la fila Proiectare și modificați setările pictogramei în consecință:
- Culoare pictogramă: # f7f7f7
- Pictograma cerc: da
- Pictogramă cerc: #f8c5ac
- Poziționarea pictogramei: Sus
- Utilizați dimensiunea fontului pictogramei: Da
- Dimensiunea fontului pictogramei: 96px (desktop), 20px (tabletă și telefon)
Plasați cursorul peste setările pictogramei
Schimbați culoarea pictogramei cu mouse-ul.
- Culoare pictogramă: # 000000
identificator CSS
De asemenea, introduceți un ID CSS.
- ID CSS: price-item-click-1
Adăugați modulul text # 1 la coloana 2
Adăugați conținut H3
Pe coloana a doua! Adăugați primul modul de text și introduceți conținut H3.
Setări text H3
Comutați la fila Design și modificați setările de text H3 în consecință:
- Secția 3 Poliție: Montserrat
- Titlu 3 Fonturi: Semi-negru
- Titlul 3 Culoare text: #f8c5ac
- Titlu 3 Dimensiune text: 40 pixeli (desktop), 25 pixeli (tabletă), 18 pixeli (telefon)
- Spațiere dintre litere de titlu 3: -1px
- Titlul 3 Înălțimea liniei: 1.1 em
Adăugați modulul text # 2 la coloana 2
Adăugați conținut
Adăugați un alt modul de text în coloana 2 cu conținutul dorit.
Setări text
Comutați la fila Design și modificați setările de text.
- Font text: Montserrat
- Greutatea fontului textului: ultra ușoară
- Culoarea textului: #f8c5ac
- Dimensiunea textului: 23px (desktop), 18px (tabletă), 14px (telefon)
- Spațiere între litere: -1px
- Înălțimea liniei de text: 1.1em
Adăugați un modul text la coloana 3
Adăugați un preț la conținut
Să trecem la a treia coloană! Adăugați un modul text și plasați prețul în zona de conținut.
Setări text
Treceți la fila Proiectare și modificați setările de text în consecință:
- Font text: Montserrat
- Greutatea fontului textului: Greu
- Alinierea textului: centru
- Culoarea textului: #ffffff
- Dimensiunea textului: 40px (desktop), 25px (tabletă), 18px (telefon)
Clasa și identificatorul CSS
Comutați la fila avansată și adăugați un ID CSS și o clasă CSS.
- ID CSS: preț-1
- Clasa CSS: price-hide-first
Duplicați linia de câte ori este necesar
Odată ce ați completat rândul și toate modulele din el, îl puteți duplica de câte ori doriți.
Editați codurile CSS duplicate ale modulelor Blurb
Schimbați ID-ul CSS al fiecărui modul Blurb nou în consecință:
- Modul Blurb 1: preț-articol-clic-1
- Modulul Blurb 2: preț-articol-clic-2
- Modulul Blurb 3: preț-articol-clic-3
- ...
Modificați prețul modulului de text duplicat și codurile CSS
Faceți același lucru pentru modulul de text al prețului din a treia coloană a fiecărui rând.
- Preț 1: preț-1
- Preț 2: preț-2
- Preț 3: preț-3
- ...
Adăugați o linie nouă
Structura coloanei
Adăugați un alt rând la secțiunea dvs. utilizând următoarea structură de coloane:
dimensionarea
Fără a adăuga încă module, deschideți setările de rând și modificați lățimea pe ecran de dimensiuni mai mici.
- Lățime: 80% (desktop), 90% (tabletă și telefon)
afficher
Pentru a ne asigura că toate coloanele apar una lângă alta pe ecran de dimensiuni mai mici, vom adăuga, de asemenea, o singură linie de cod CSS la elementul rândul principal.
afișare: flex;
Adăugați un modul de cod la coloana 1
Introduceți cod CSS
Continuați prin adăugarea unui modul de cod în prima coloană a rândului și inserarea următoarelor linii de cod CSS:
.price-hide-first {
display: none;
}
.price-item-active .et-pb-icon {
color: black !important;
}
Adăugați un modul text la coloana 2
Adăugați conținut
Treceți la a doua coloană și adăugați un nou modul de text cu conținutul dorit.
Setări text
Modificați setările textului în consecință:
- Font text: Montserrat
- Greutatea fontului textului: ultra ușoară
- Culoarea textului: #f8c5ac
- Dimensiunea textului: 23px (desktop), 18px (tabletă), 14px (telefon)
- Spațiere între litere: -1px
- Înălțimea liniei de text: 1.1em
Adăugați un modul de text gol la coloana 3
Lăsați conținutul gol
Să trecem la ultima coloană. Adăugați un modul de text și asigurați-vă că zona de conținut rămâne goală.
Setări text
Comutați la fila Design și modificați setările de text după cum urmează:
- Font text: Montserrat
- Greutatea fontului textului: Greu
- Alinierea textului: centru
- Culoarea textului: #ffffff
- Dimensiunea textului: 40px (desktop), 25px (tabletă), 18px (telefon)
identificator CSS
Completați setările modulului adăugând un identificator CSS.
- ID CSS: total-price-cal
Adăugați opțiuni de temă JQuery la Divi
Accesați fila de integrare
Acum că designul este complet, este timpul să îl faceți să funcționeze cu ceva cod JQuery. Dacă doriți să adăugați calculele de preț pe 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țiunea Divi tema și selectați fila Integrare.
Adăugați codul JQuery la etichetele Head
Introduceți următoarele rânduri de cod JQuery între etichetele de script si ai terminat:
jQuery(funcție($){ $('[id*="preț-articol-clic"]').click(funcție() { 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,' ')); }); dacă (suma > 0){ $("#total-price-cal").show(); $("#total-price-cal").text("$" + sum + "k"); } else { $("#total-price-cal").hide(); } }); });
studiu
Acum, după ce s-au făcut toți pașii, să aruncăm o privire finală asupra a ceea ce s-a întâmplat cu diferite dimensiuni de ecran.
Ultimele gânduri
În acest articol, v-am arătat cum să creați un model de preț excepțional cu Divi. Aceasta este o modalitate grozavă de a vă arăta vizitatori la ce preț încep serviciile tale și atrag publicul potrivit. Puteți utiliza această abordare pentru orice calcul de preț 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.
