Descărcați gratuit un design de comutare lunară / anuală pentru Divi

Când decideți să prezentați planurile de prețuri pe site-ul dvs. web, există câteva modalități de abordare a acestuia. Una dintre cele mai populare abordări de acolo este crearea unei comutări lunare / anuale a prețurilor, care permite utilizatorilor să navigheze cu ușurință prin diferitele planuri de tarifare în funcție de modul în care aleg să factureze. În tutorialul de astăzi, vă vom arăta cum să faceți ca funcția de comutare a prețurilor să funcționeze cu Divi. Vom recrea un exemplu uimitor de la zero și 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 designul lunar / anual al prețului

Pentru a pune mâna pe designul gratuit de comutare lunară / anuală, 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!

Să începem să recreăm!

Adăugați secțiunea nr. 1

Culoare de fundal

Începeți prin adăugarea unei prime secțiuni la pagina la care lucrați. Deschideți setările secțiunii și adăugați o culoare de fundal.

• Culoare fundal: # ffad72

Separator inferior

Treceți la fila de proiectare și introduceți un separator inferior.

• Stil divizor: Găsiți în listă
• Înălțimea împărțitorului: 10vw

Spațiere

Adăugați și o umplutură personalizată, de sus și de jos.

• Căptușeală superioară: 5vw
• Căptușeală inferioară: 10vw

ID CSS

Și adăugați un ID CSS în secțiune.

• ID CSS: secțiune de comutare

Adăugați un rând nou

Structura coloanei

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

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a ecranului.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 30vw (desktop), 45vw (tabletă), 50vw (telefon)
• Lățime maximă: 100%

Spațiere

Scăpați de umplutura implicită de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Frontieră

Și modificați și setările de margine.

• Colțuri rotunjite: 50vw (toate colțurile)
• Lățimea chenarului: 1 px
• Culoare margine: # e8e8e8

Afişa

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

display: flex;

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

Adauga continut

E timpul să începeți să adăugați module! Singurul modul de care avem nevoie în coloana 1 este un modul de text. Introduceți un conținut la alegere.

Setări text

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

• Font text: Montserrat
• Dimensiune text: 1vw (desktop), 1,5vw (tabletă), 2vw (telefon)
• Aliniere text: centru
• Culoarea textului: deschis

Spațiere

Modificați valorile de umplere de sus și de jos pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 2vw (desktop), 3vw (tabletă), 4vw (telefon)
• Căptușeală inferioară: 2vw (desktop), 3vw (tabletă), 4vw (telefon)

ID și clasă CSS

Și atribuiți un ID CSS și o clasă modulului text.

• CSS ID: pricing-plan-item-1
• Clasa CSS: cursor-element-cursor

Clonați modulul text și plasați duplicatul în coloana 2

După ce ați completat modulul de text din coloana 1, îl puteți clona o dată și plasa duplicatul în coloana 2.

Schimbați conținutul

Asigurați-vă că schimbați conținutul.

Schimbați ID-ul CSS

Și utilizați un alt ID CSS.

• ID CSS: pricing-plan-item-2

Adăugați secțiunea 2

Culoare de fundal

Trecem la a doua secțiune. Adăugați următoarea culoare de fundal:

• Culoare fundal: # 6b63dd

Spațiere

Apoi, accesați setările de spațiere a secțiunii și adăugați câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 7vw
• Căptușeală inferioară: 15vw
• Căptușeală stângă: 21vw (desktop), 10vw (tabletă și telefon)
• Căptușeală dreaptă: 21vw (desktop), 10vw (tabletă și telefon)

ID CSS

Adăugați și un ID CSS la secțiune.

• ID CSS: preț-1

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ândului și modificați setările de dimensionare.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Frontieră

Apoi, accesați setările de spațiere și aplicați următoarele setări de margine:

• Lățimea marginii drepte: 1 px
• Lățimea marginii stângi: 1 px
• Lățimea marginii superioare: 0 px
• Lățimea marginii inferioare: 0 px
• Culoare margine: rgba (255,255,255,0)

Afişa

Asigurați-vă că coloanele apar una lângă cealaltă pe dimensiuni de ecran mai mici, adăugând o singură linie de cod CSS la elementul principal al rândului.

display: flex;

Setări coloana 2

Spațiere

După ce ați finalizat setările generale de rând, deschideți setările coloanei 2 și adăugați câteva umpluturi personalizate în partea de sus și de jos.

• Căptușeală superioară: 1vw
• Căptușeală inferioară: 4vw

Frontieră

Utilizați, de asemenea, o margine pe coloana 2.

• Lățimea marginii drepte: 1 px
• Culoare margine dreaptă: #ffffff

Coloana 3 Setări

Spațiere

Treceți la setările celei de-a treia coloane și adăugați câteva valori de umplere personalizate.

• Căptușeală superioară: 1vw
• Căptușeală inferioară: 4vw

Adăugați divizor în coloana 1

Vizibilitate

E timpul să începeți să adăugați module! Primul modul și singurul modul de care avem nevoie în coloana 1 este un modul divizor. Asigurați-vă că dezactivați opțiunea „Afișează divizorul”. Avem nevoie doar de acest modul pentru a ne asigura că restul designului rămâne intact.

• Show Divider: Nu

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

Adăugați conținut H3

Treceți la coloana 2 și adăugați un modul de text cu un conținut H3 la alegere.

Setări text H3

Modificați setările de text H3 după cum urmează:

• Rubrica 3 Font: Montserrat
• Titlul 3 Aliniere text: centru
• Rubrica 3 Culoarea textului: #ffffff
• Rubrica 3 Dimensiune text: 2vw (Desktop), 3vw (Tabletă), 3,5vw (Telefon)
• Rubrica 3 Spațierea literelor: -1 px

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

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
• Greutatea fontului textului: ultra ușoară
• Culoarea textului: #ffffff
• Dimensiune text: 2vw (desktop), 3vw (tabletă), 3,5vw (telefon)
• Înălțimea liniei de text: 1em
• Aliniere text: centru

Spațiere

Adăugați și o marjă de sus personalizată.

• Marja superioară: 0,5vw

Clonați ambele module și plasați duplicatele în coloana 3

După ce ați completat modulele din coloana 2, le puteți clona pe ambele și puteți plasa duplicatele în coloana 3.

Schimbați conținutul

Asigurați-vă că modificați conținutul fiecărui duplicat.

Adăugați rândul # 2

Structura coloanei

Pe al doilea rând din secțiunea 2! Alegeți următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați umplutura implicită de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Frontieră

Și aplică o margine.

• Lățimea marginii superioare: 0 px
• Lățimea marginii drepte: 1 px
• Lățimea marginii inferioare: 1 px
• Lățimea marginii stângi: 1 px
• Culoare margine: # 8882dd

Afişa

Asigurați-vă că coloanele apar una lângă cealaltă pe dimensiuni de ecran mai mici, adăugând o singură linie de cod CSS la elementul principal al rândului.

display: flex;

Setări coloana 1

Spațiere

Continuați deschizând setările coloanei 1 și aplicați câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 3vw (desktop), 5vw (tabletă și telefon)
• Căptușeală inferioară: 3vw (desktop), 5vw (tabletă și telefon)

Frontieră

Adăugați și o margine dreaptă la coloană.

• Lățimea marginii drepte: 1 px
• Culoare margine dreaptă: # 8882dd

Setări coloana 2

Spațiere

Treceți la a doua coloană și modificați setările de spațiere.

• Căptușeală superioară: 3vw (desktop), 5vw (tabletă și telefon)
• Căptușeală inferioară: 3vw (desktop), 5vw (tabletă și telefon)

Frontieră

Adăugați o margine dreaptă în continuare.

• Lățimea marginii drepte: 1 px
• Culoare margine dreaptă: #ffffff

Coloana 3 Setări

Spațiere

Apoi, deschideți setările coloanei 3 și adăugați câteva valori de umplere sus și jos personalizate pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 3vw (desktop), 5vw (tabletă și telefon)
• Căptușeală inferioară: 3vw (desktop), 5vw (tabletă și telefon)

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

Adauga continut

După ce ați completat setările de rând și coloană, este timpul să începeți să adăugați module. Adăugați un modul de text în coloana 1 ș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
• Culoarea textului: #ffffff
• Dimensiune text: 1vw (desktop), 1,5vw (tabletă), 2vw (telefon)
• Aliniere text: centru

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

Adăugați simbolul în caseta de conținut

În a doua coloană, vom avea nevoie de un alt modul de text. Adăugați simbolul „✓” în caseta de conținut.

Setări text

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

• Culoare text: # ffad72
• Dimensiune text: 2vw (desktop), 3vw (tabletă), 4vw (telefon)
• Înălțimea liniei de text: 1em
• Aliniere text: centru

Clonați modulul text și plasați duplicatul în coloana 3

După ce ați completat modulul de text din coloana 2, îl puteți clona și plasa duplicatul în coloana 3.

Simbol alternativ și culoare text

În funcție de caracteristica pe care o expuneți, poate doriți să schimbați simbolul în „✗”. Folosiți și o culoare de text diferită.

• Culoarea textului: #ffffff

Clonați rândul de câte ori doriți

După ce ați finalizat întregul rând, îl puteți clona de câte ori doriți, în funcție de câte funcții doriți să afișați.

Adăugați rândul # 3

Structura coloanei

Ultimul rând pe care îl vom adăuga la a doua secțiune conține următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați umplutura implicită de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Frontieră

Adăugați și o margine.

• Lățimea marginii superioare: 0 px
• Lățimea marginii inferioare: 0 px
• Lățimea marginii drepte: 1 px
• Lățimea marginii stângi: 1 px
• Culoare margine: rgba (255,255,255,0)

Afişa

Și asigurați-vă că coloanele apar una lângă cealaltă pe dimensiuni de ecran mai mici, adăugând o singură linie de cod CSS la elementul principal al rândului.

display: flex;

Setări coloana 2 și 3

Spațiere

Continuați adăugând o marjă superioară atât în ​​coloana 2, cât și în 3.

• Căptușeală superioară: 4vw

Coloana 2 Border

Adăugați și o margine dreaptă la coloana 2.

• Lățimea marginii drepte: 1 px
• Culoare margine dreaptă: #eaeaea

Clonați modulul divizor și plasați în coloana 1 din rândul nou

Clonați modulul divizor pe care îl puteți găsi în primul rând al secțiunii și plasați duplicatul în prima coloană a noului rând.

Adăugați un modul buton la coloana 2

Adăugați o copie

Continuați adăugând un modul buton în coloana 2 și introduceți o copie la alegere.

Aliniere

Modificați alinierea butoanelor în fila de proiectare.

• Aliniere buton: centru

Setări buton

Și modificați setările butonului după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 1,5vw (tabletă), 2vw (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # ffad72
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 50vw
• Buton Font: Montserrat

Spațiere

Adăugați și câteva valori de umplere personalizate la modulul Buton.

• Căptușeală superioară: 1vw (desktop), 1,5vw (tabletă și telefon)
• Căptușeală inferioară: 1vw (desktop), 1,5vw (tabletă și telefon)
• Căptușire stângă: 4vw (desktop), 6vw (tabletă și telefon)
• Căptușeală dreaptă: 4vw (desktop), 6vw (tabletă și telefon)

Modul buton clonare și plasare duplicat în coloana 3

După ce ați finalizat modulul buton din coloana 2, îl puteți clona și plasa duplicatul în coloana 3.

Clonați secțiunea 2

Continuați clonând întreaga a doua secțiune. Asigurați-vă că modificați valorile de prețuri din modulele text pentru a se potrivi cu opțiunile de facturare anuale. Aceasta este secțiunea care va apărea după ce cineva face clic pe „facturare anuală”.

Schimbați ID-ul CSS și adăugați clasa CSS

Schimbați apoi ID-ul CSS al secțiunii și adăugați și o clasă CSS.

• ID CSS: preț-2
• Clasa CSS: ascunde-secțiunea-2

Adăugați un rând nou cu o coloană la partea de sus a secțiunii nr. 1

Singurul lucru rămas de făcut este adăugarea codului CSS și jQuery pentru ca funcționalitatea să funcționeze. Pentru aceasta, vom adăuga un nou rând în partea de sus a secțiunii 1.

Adăugați modulul de cod # 1 cu codul CSS

Adăugați un prim modul de cod și introduceți următoarele linii de cod CSS:

<style>
.pricing-item-cursor {
cursor: pointer;
}

.hide-section-2 {
display: none;
}

.active-pricing-plan {
color: #6b63dd !important;
background-color: #fff;
}</style>

Adăugați modulul de cod # 2 cu codul JQuery

Adăugați un alt modul de cod chiar sub cel anterior, introduceți codul jQuery de mai jos între etichetele de script și ați terminat!

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

  
$('[id*="pricing-"]').not('[id*="pricing-plan"]').hide();
  
$pricingselect.show()
  
$('#toggle-section').show();
  
$('[id*="pricing-plan"]').removeClass("active-pricing-plan");
$(this).addClass('active-pricing-plan');

});
});

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 de comutare lunară / anuală cu Divi. Acesta este un mod excelent de a adăuga interacțiune la planurile dvs. de stabilire a prețurilor. Pe lângă aplicarea tehnicii de clic, am conceput și un plan de prețuri pentru grilă frumos, care vă permite să subliniați ce caracteristici sunt incluse în ce planuri. Ați putut descărca gratuit fișierul JSON. Dacă aveți întrebări sau sugestii, nu ezitați să 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.