Cum să utilizați în mod creativ modulul de comutare Divi pentru a prezenta planurile de prețuri

Când vine vorba de prezentarea planurilor de prețuri pe site-ul dvs. web, puteți lua multe rânduri și puteți crea pagini sau secțiuni de prețuri absolut uimitoare și atractive. Când creați un site web cu Divi, cel mai probabil veți alege modulul Tabele de prețuri. Acest modul vă permite să adăugați rapid tabele de prețuri și să le stilizați după cum doriți. Dar dacă doriți să adăugați mai multă interacțiune la această secțiune specială a paginii dvs., puteți utiliza și modulul Toggle pentru a afișa planurile de tarifare la clic. Aceasta este o modalitate excelentă de a evidenția un plan de prețuri specific, păstrând starea sa deschisă și închizând celelalte două.

În acest tutorial, vă vom arăta pas cu pas cum să creați un superb design de comutare a tabelelor de tarifare utilizând modulul Toggle Divi. Odată ce veți obține abordarea, veți putea crea tot felul de planuri de comutare a prețurilor la clic pentru orice tip de site web pe care îl creați.

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.

Să începem să creăm!

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

Spațiere

Creați o pagină nouă sau deschideți una existentă folosind Visual Builder al Divi. Adăugați o nouă secțiune la pagină, deschideți setările secțiunii și adăugați o umplutură personalizată în partea de sus și de jos pentru a crea spațiu în partea de sus și de jos a secțiunii.

• Căptușeală superioară: 160 px
• Căptușeală inferioară: 160 px

Adăugați rândul # 1

Structura coloanei

După ce ați terminat modificarea setărilor de spațiere a secțiunii, puteți continua și adăuga un nou rând folosind următoarea structură de coloane:

Adăugați un modul de text

Adauga continut

Nu este nevoie să modificați rândul, așa că mergeți mai departe și adăugați imediat un modul de text. Introduceți un conținut H2 la alegere în caseta de conținut a modulului.

Setări text antet

Continuați accesând fila de proiectare și modificați setările pentru textul antetului.

• Rubrica 2 Font: Didact Gothic
• Rubrica 2 Greutate font: Regular
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: # 000000
• Rubrica 2 Dimensiune text: 40 px
• Rubrica 2 Spațierea literelor: -1 px

Adăugați un modul divizor

Vizibilitate

Adăugați un modul divizor chiar sub modulul text pe care l-ați adăugat și modificat în pașii anteriori. Asigurați-vă că este activată opțiunea „Show Divider” din modulul Divider.

• Show Divider: Da

Culoare

Continuați accesând fila Design și modificați culoarea separatorului.

• Culoare: # 000000

Dimensionare

Modificați lățimea modulului și în setările de dimensionare.

• Lățime: 39%
• Alinierea modulului: centru

Spațiere

Adăugați și câteva margini personalizate de jos.

• Marja inferioară: 50 px

Adăugați rândul # 2

Structura coloanei

Am terminat de modificat primul rând și modulele sale. Este timpul să adăugați un rând nou folosind următoarea structură de coloane:

Coloana 1 Gradient Background

Fără a adăuga încă module, deschideți setările rândurilor și adăugați un fundal de gradient în coloana 1.

• Culoare 1: # 00fff2
• Culoare 2: rgba (255,255,255,0)
• Coloana 1 Tip de gradient: Radial
• Coloana 1 Direcție radială: jos dreapta
• Coloana 1 Poziție inițială: 30%
• Coloana 1 Poziție finală: 30%

Coloana 2 Fundal gradient

Faceți același lucru și pentru a doua coloană.

• Culoare 1: # fce96f
• Culoare 2: rgba (255,255,255,0)
• Coloana 2 Tip de gradient: Radial
• Coloana 2 Direcție radială: sus dreapta
• Coloana 2 Poziție de start: 40%
• Coloana 2 Poziție finală: 40%

Coloana 3 Gradient Background

În mod similar, adăugați un fundal de gradient la a treia coloană folosind următoarele setări:

• Culoare 1: # a659ff
• Culoare 2: rgba (255,255,255,0)
• Coloana 3 Tip de gradient: Radial
• Coloana 3 Direcție radială: Jos
• Coloana 3 Poziția inițială: 30%
• Coloana 2 Poziție finală: 30%

Dimensionare

După ce ați terminat de adăugat fundalul de gradient, treceți la fila de proiectare și modificați setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 2

Adăugați modulul de comutare la coloana 1

Adauga continut

E timpul să începeți să creați diferite planuri de prețuri! Adăugați un nou modul de comutare la prima coloană și introduceți un titlu. Pentru a stiliza diferitele elemente din caseta de conținut, am folosit câteva etichete HTML suplimentare. Continuați și copiați următoarele rânduri și adăugați-le în fila Text a casetei dvs. de conținut:

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

Stat

Puteți alege dacă doriți ca starea modulului Toggle să fie deschis sau închis. Pentru a putea vedea toate modificările pe care le faceți în restul tutorialului, vă recomand să păstrați starea „deschisă” până când ați terminat de modificat toate setările de proiectare.

Culoare de fundal

Continuați accesând setările de fundal ale modulului Toggle și adăugați o culoare de fundal albă.

• Culoare fundal: #ffffff

Setări pictograme

Schimbați culoarea pictogramei în fila de proiectare următoare.

• Culoare pictogramă: # 000000

Comutați la setări

Și modificați Deschideți comuta Culoarea fundalului și în setările de comutare.

• Deschideți comutați Culoarea fundalului: rgba (255,255,255,0)

Setări text titlu

Apoi, faceți câteva modificări la setările textului titlului.

• Titlu Font: Didact Gothic
• Greutatea fontului titlului: Bold
• Culoare text titlu: # 000000
• Dimensiune text titlu: 3,5vw (desktop), 60 px (tabletă), 40 px (telefon)

Setări text corp

Modificați și setările pentru textul corpului.

• Font corp: Didact Gothic
• Alinierea textului corpului: stânga
• Culoarea textului corpului: # 000000
• Dimensiunea textului corpului: 18 px
• Înălțimea liniei corpului: 1,5em

Clonați comutați modulul de două ori și plasați-le în cele două coloane rămase

După ce ați terminat de modificat modulul Toggle din coloana 1, puteți merge mai departe și îl puteți clona de două ori și puteți plasa duplicatele în cele două coloane rămase.

Modificare copiere

Asigurați-vă că modificați toată copia duplicatelor și ați terminat!

previzualizare

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

Gânduri finale

În acest tutorial, v-am arătat o abordare creativă cu privire la utilizarea modulului Toggle Divi pentru a prezenta planurile de tarifare pe site-ul dvs. web. Acesta este un mod excelent de a interacționa cu vizitatorii și de a vă ridica stilul de design. Face mai ușor să evidențiați un anumit plan de prețuri în secțiunea dvs., menținând unul deschis și celelalte două opțiuni închise. Puteți utiliza această abordare pentru orice tip de site web pe care îl creați. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!