Cum se creează tabele de tarifare orizontale cu Divi

Tabelele de prețuri orizontale sunt o modalitate excelentă de a promova produse cu o mulțime de caracteristici. Și, cu noul aspect al celor cinci coloane Divi, acest lucru este surprinzător de ușor de realizat. Cu toate acestea, la fel ca în cazul oricărui aspect care are cinci sau mai multe coloane, provocarea vine de a face aspectul receptiv, astfel încât să arate bine și pe mobil. În acest tutorial, vă voi arăta cum să creați tabele de tarifare orizontale care să arate grozav pe toate dispozitivele. Și, chiar vă voi arăta cât de ușor este să vă copiați tabelele de prețuri orizontale și să folosiți noi funcții de design, cum ar fi „găsiți și înlocuiți” pentru a schimba rapid schema de culori a fiecărui tabel în câteva clicuri.

Să începem.

Trage cu ochiul

Noțiuni de bază

Pentru acest tutorial, tot ce veți avea nevoie este Divi. Și vom folosi Visual Builder. Întrucât vom construi tabelele de la zero, va trebui să creați o pagină nouă, să implementați constructorul vizual și apoi să selectați opțiunea „Construiți aspectul de la zero”.

După aceea, sunteți gata să începeți. Hai să o facem!

Configurarea rândului cu cinci coloane pentru tabelele de tarifare orizontale

Pentru început, să oferim un aspect cu cinci coloane secțiunii care deja ne așteaptă în constructorul vizual.

Înainte de a începe să adăugăm module, să actualizăm setările secțiunii pentru a avea o lățime personalizată fără nicio umplutură de sus sau de jos.

Lățime: 1200 px
Alinierea secțiunii: centru
Căptușeală personalizată: 0 px sus, 0 px jos

Apoi accesați setările rândului pentru a da rapid o culoare de fundal rândului dvs. și, de asemenea, celor trei coloane din mijloc, după cum urmează:

Culoare fundal: # 00cbc9
Coloana 2 Culoare fundal: # 00cbc9
Coloana 3 Culoare fundal: #eeeeee
Coloana 4 Culoare fundal: #eeeeee

Apoi actualizați dimensiunea după cum urmează:

Faceți acest rând lățime completă: DA
Lățimea jgheabului: 1
Egalizați înălțimile coloanei: DA

Va trebui să revenim la setările de rând într-un pic pentru a actualiza spațiul, dar deocamdată să începem să adăugăm blurbs la fiecare dintre coloanele noastre pentru conținut.

Completarea coloanelor cu module de conținut

Titlul produsului

În prima coloană, adăugați un modul text cu următorul antet în caseta de conținut (sub fila text):

<h2>Starter</h2>

Acesta va servi ca loc pentru titlul planului sau produsului pe care îl prezentați. În acest exemplu, acesta ar fi un plan „Starter” de un fel.

Apoi actualizați următoarele setări de proiectare:

Rubrica 2 Stil font: TT
Rubrica 2 Culoarea textului: #ffffff
Rubrica 2 Dimensiune text: 38 px
Căptușeală personalizată (desktop): 90% sus, 90% jos, 10% stânga
Căptușeală personalizată (tabletă): 30% sus, 30% jos

Adăugați Blurbs pentru titlurile categoriei de funcții

În a doua coloană, adăugați un modul blurb. Apoi ștergeți textul de completare din caseta de conținut și lăsați singur textul titlului. Apoi alegeți să utilizați o pictogramă în locul unei imagini și actualizați pictograma cu una la alegere.

Treceți la fila de proiectare și actualizați restul setărilor după cum urmează:

Culoare pictogramă: # 00cbc9
Plasare imagine / pictogramă: stânga
Dimensiune text titlu: 16 px
Căptușeală personalizată: 2vw jos
Lățimea marginii rândului inferior: 4 px
Culoarea chenarului inferior: #cccccc

Deoarece acest design de blurb va fi folosit ca titlu de categorie de caracteristici în coloanele 2, 3 și 4, puteți copia modulul de blurb și lipiți-l în a doua și a treia coloană.

Îmi dau seama că spațierea nu prea arată chiar acum. Și s-ar putea să fiți tentați să adăugați o anumită spațiere la nivelul modulului, dar pentru acest design, mi se pare mai ușor să faceți ajustări ale spațiului la nivelul coloanei (sub setările rândurilor). Vom ajunge la asta mai târziu.

Adăugați module de text pentru o listă de descrieri de caracteristici

Apoi Adăugați un modul text sub textul din coloana a doua. Apoi adăugați următorul cod html al tabelului în caseta de conținut:

• descrierea caracteristicii merge aici.
• descrierea caracteristicii merge aici.
• descrierea caracteristicii merge aici.
• descrierea caracteristicii merge aici.

Tip de stil de listă neordonat: pătrat
Indentare element de listă neordonată: 4 px
Căptușeală personalizată: 20 px sus, 20 px jos, 5% stânga, 5% dreapta

Acum, așa cum am făcut pentru blurbs, mergeți mai departe și copiați modulul text și lipiți-l sub fiecare dintre modulele blurb din coloanele 3 și 4.

Adăugarea prețului și a butonului la ultima coloană

În ultima coloană (coloana cinci), voi folosi un modul de tabel de prețuri pentru a obține proiectarea textului de tarifare cu semnul dolar. Asta este tot ce ne trebuie cu adevărat din modulul Tabelele de prețuri, așa că voi elimina restul conținutului și elementelor de design, lăsând textul de preț și semnul de dolar. Aș putea folosi butonul care este inclus în modulul de tabele de prețuri, dar acest lucru a fost puțin mai dificil de făcut o magie receptivă pe tabletă (veți vedea ce vreau să spun mai târziu). Așa că voi folosi și un modul buton.

Continuați și adăugați modulul Tabelele de prețuri în a cincea coloană. Ștergeți unul dintre cele două tabele incluse în mod implicit făcând clic pe pictograma coș de gunoi din dreapta unuia dintre ele.

Apoi, scăpați de culoarea fundalului adăugând un cod de culoare complet transparent.

Culoare fundal: rgba (255,255,255,0)

Apoi actualizați următoarele:

Culoarea fundalului antetului tabelului: rgba (255,255,255,0)
Culoare text monedă și frecvență: #ffffff
Monedă și frecvență Dimensiune text: 30 px
Culoare text preț: #ffffff
Lățimea chenarului: 0 px
Marjă personalizată (tabletă): -100% Corect
Marjă personalizată (smartphone): 0% dreapta
Căptușeală personalizată: 0 px sus, 10 px jos, 0 px stânga, 0 px dreapta

Acum, accesați setările individuale ale tabelului făcând clic pe pictograma roată din stânga meniului individual de afișare a tabelului.

Acum ștergeți conținutul implicit pentru titlu, subtitrare și conținut. Aceasta va lăsa doar textul valutar și al prețului.

Acum știu la ce vă gândiți în acest moment. Ce trebuie să faceți cu acea linie de frontieră sub textul prețului? Ei bine, există un mic fragment de css personalizat pentru asta. Accesați fila avansată și adăugați următorul CSS în caseta de intrare Pricing Top:

Cele mai bune prețuri:

border: none;

Acum acesta este modul în care eliminați cu succes tabelul de prețuri doar pentru simbolul de preț și textul valutar!

Pentru buton, adăugați un modul buton sub modulul Tabelelor de prețuri și actualizați următoarele:

Aliniere buton: centru
Culoarea textului: deschis
Marjă personalizată (tabletă): -100% Corect
Marjă personalizată (smartphone): 0% dreapta

Marja personalizată se va potrivi cu marja pe care am adăugat-o la modulul de tabele de prețuri pentru a obține un modul de lățime completă pe tabletă. Deoarece aspectul cu cinci coloane de pe tabletă va pune a cincea coloană pe partea stângă a unui aspect cu două coloane, tragerea modulului cu -100% spre dreapta va forța modulul pe lățimea completă a rândului.

Adăugarea designului săgeții și a spațiului sensibil al coloanelor

Adăugarea săgeții prin stratificarea gradienților

Pentru a crea efectul de proiectare a săgeții în prima coloană, vom stabili două fundaluri de gradient. Primul fundal de gradient va fi adăugat la nivelul coloanei. Pe următorul îl vom adăuga mai târziu la nivelul modulului.

Pentru a adăuga fundalul de gradient, accesați setările de rând și adăugați următoarele:

Coloana 1 Gradient Fundal Culoare stânga: rgba (255,255,255,0)
Coloana 1 Gradient de fundal Culoare dreaptă: #eeeeee (aceasta ar trebui să se potrivească cu culoarea de fundal a coloanei 2)
Direcția gradientului: -245 grade
Poziția inițială: 75%
Poziție finală: 0%

Salvați setările și treceți la setările modulului de text din coloana unu. Aici vom adăuga al doilea strat de gradient de fundal pentru a finaliza săgeata. Actualizați următoarele:

Coloana 1 Gradient Background Culoare stânga: #eeeeee
Coloana 1 Gradient Fundal Culoare dreaptă: rgba (255,255,255,0)
Direcția gradientului: 245 de grade
Poziția inițială: 25%
Poziție finală: 0%

Observați că valorile sunt la fel opuse una față de cealaltă. De exemplu, ordinea culorilor s-a schimbat, 245 de grade s-au schimbat de la negativ la pozitiv, iar 75% este acum 25% (diferența). Acesta este modul în care obțineți laturile punctului săgeții să fie perfect simetrice.

Distanțarea rândului și a coloanelor

Reveniți la setările de rând și să ajustăm spațiul rândului și al coloanelor noastre actualizând următoarele:

Împletire personalizată: 0 px sus, 0 px jos, 0 px stânga, 0 px dreapta
Căptușeală personalizată 2: 5% sus, 5% jos, 2% stânga, 2% dreapta
Căptușeală personalizată 3: 5% sus, 5% jos, 2% stânga, 2% dreapta
4 capitonaje personalizate: 5% sus, 5% jos, 2% stânga, 2% dreapta
Căptușeală personalizată 5: 10% sus, 10% jos

S-ar putea să vă întrebați de ce nu am folosit doar o lățime de 2 rigole și am terminat cu ea. Ei bine, asta pentru că am vrut să maximizez spațiul din coloanele care conțin text cât mai mult posibil pentru a îmbunătăți lizibilitatea pe toate dispozitivele. Fiecare mic spațiu pe care îl putem economisi. De aceea, marginile dintre coloane sunt create cu procente de umplere la stânga și la dreapta.

Duplicarea tabelului pentru tabele noi și scheme de culori

Evident, veți dori să aveți mai multe tabele de prețuri orizontale pe care utilizatorii să le poată compara. Pentru a crea al doilea tabel de prețuri, copiați întreaga secțiune care conține primul tabel pe care l-ați creat.

Apoi deschideți setările Rând și treceți cu mouse-ul peste culoarea de fundal și faceți clic pe Găsiți și înlocuiți.

Sub „În cadrul” alegeți „Această secțiune”.
Sub „Înlocuiți lățimea”, adăugați culoarea: # f84f51
Apoi bifați caseta pentru Înlocuiți toate valorile găsite în secțiune (nu doar culoarea de fundal).

Apoi faceți clic pe Înlocuire și urmăriți cum se întâmplă magia. Acesta este un mod rapid și ușor de a schimba toate instanțele culorii anterioare cu o culoare nouă.

Nu uitați să salvați setările rândului înainte de a ieși pentru a salva modificările.

Acum aveți un nou tabel cu o nouă schemă de culori.

Repetați acest proces din nou pentru a adăuga un alt tabel cu culoarea: # bdc958

Realizarea unui tabel recomandat

Pentru a face ca unul dintre tabelele dvs. să pară prezentat și să iasă puțin în evidență, puteți adăuga o umbră de casetă la secțiunea care ține masa, precum și puteți schimba culoarea gri folosită pentru fundalurile și gradientele coloanelor într-o culoare albă frumoasă.

Pentru aceasta, accesați setările secțiunii pentru a doua secțiune (cea din mijloc) și actualizați următoarele:

Box Shadow: vezi captura de ecran
Box Shadow Vertical Position: 0px
Puterea neclarității umbrei cutiei: 80 px

Pentru a înlocui culoarea de fundal gri, accesați setările rândului și găsiți culoarea de fundal a coloanei 2 (#eeeeee). Faceți clic dreapta pe el și faceți clic pe „găsiți și înlocuiți”. Actualizați următoarele:

Sub „În cadrul” alegeți „Această secțiune”.
Sub „Înlocuiți lățimea”, adăugați culoarea: #ffffff
Apoi bifați caseta pentru Înlocuiți toate valorile găsite în secțiune (nu doar culoarea de fundal).
Apoi faceți clic pe „Înlocuiți”.

Folosind Găsire și Înlocuire pentru a testa fonturile

Dacă doriți să utilizați un font diferit în întregul tabel, puteți testa cu ușurință altele folosind funcția „Găsiți și înlocuiți”. Am lăsat în mod intenționat fontul implicit pentru toate modulele pentru a face acest proces ușor. Pentru a schimba fontul pentru întreaga pagină de tabele, tot ce trebuie să faceți este să deschideți setările modulului text în prima coloană a oricărei secțiuni de tabel (de fapt poate fi orice modul care utilizează fontul implicit de pe pagina dvs.). Apoi faceți clic dreapta pe fontul Heading 2 utilizat și selectați „Găsiți și înlocuiți”. Apoi actualizați următoarele:

Sub „În interior” păstrați „Această pagină”.
Sub „Înlocuiți lățimea”, selectați un font (folosesc Roboto Condensed).
Apoi bifați caseta pentru Înlocuiți toate valorile găsite în secțiune (sau nu ați putut să o bifați pentru a înlocui toate fonturile h2).
Apoi faceți clic pe „Înlocuiți”.

Acum toate fonturile au fost modificate pe întreaga pagină.

Asta e! Acum, tabelele de prețuri orizontale sunt complete.

Să verificăm rezultatul.

Reglarea în cinci coloane de pe tabletă și smartphone funcționează de asemenea frumos.

Gânduri finale

Aspectul cu cinci coloane al lui Divi, împreună cu caracteristicile de design puternice disponibile în Visual Builder, vă permit să creați câteva tabele de prețuri orizontale frumoase. Iar reglarea culorilor și a fonturilor pe tot parcursul utilizării Găsiți și înlocuiți este o economie excelentă de timp, îmbunătățind cu atât mai mult procesul de proiectare. Sper că veți găsi tutorialul atât informativ, cât și inspirațional.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!