Cum să modelați un frumos tabel de prețuri în Divi

Tabelele de prețuri sunt adesea principalul CTA al unei pagini. De aceea este important să le coafați corespunzător. Cu Divi, puteți lua multe rânduri și puteți crea tabele de prețuri exact așa cum le imaginați. Pentru a vă oferi ceva de gândit, am creat un tabel de prețuri uimitor pe care îl puteți utiliza pentru orice tip de site web la care lucrați. Vă vom ghida prin crearea rezultatului de la A la Z folosind doar opțiunile încorporate ale Divi.

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 imaginile

Pentru a pune mâinile pe imaginile utilizate în acest tutorial, va trebui mai întâi să o 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 de 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!

Cum să modelați un frumos tabel de prețuri în Divi

Abonați-vă la canalul nostru Youtube

Să începem să creăm!

Adăugați o secțiune nouă

Fundal de gradient

Creați o pagină nouă și adăugați o secțiune obișnuită folosind următorul fundal de gradient:

• Culoare 1: #ffffff
• Culoare 2: # 353272
• Poziția inițială: 50%
• Poziție finală: 50%

Spațiere

Apoi, accesați setările de spațiere ale secțiunii și modificați marja personalizată și valorile de umplere.

• Marja inferioară: 50 px (desktop), 20 px (tabletă și telefon)
• Marja stângă: 50 px (desktop), 20 px (tabletă și telefon)
• Marja dreaptă: 50 px (desktop), 20 px (tabletă și telefon)
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un rând nou

Structura coloanei

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

Dimensionare

Fără a adăuga încă module, deschideți setările de rând și modificați setările de dimensionare în fila de proiectare.

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

Spațiere

Apoi, accesați setările de spațiere și adăugați câteva valori de umplere personalizate.

• Căptușeală superioară: 94 px
• Căptușeală inferioară: 177 px
• Căptușire stângă: 150 px (desktop), 30 px (tabletă și telefon)
• Căptușeală dreaptă: 150 px (desktop), 30 px (tabletă și telefon)
• Coloana 1, 2 și 3 Căptușeala stângă: 10 px
• Coloana 1, 2 și 3 Căptușeala dreaptă: 10 px

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

Adauga continut

E timpul să începeți să adăugați module! Personalizăm tabelul de prețuri pe care dorim să îl creăm utilizând diferite module. Primul modul de care avem nevoie este un modul de text. Adăugați numele primului tip de membru în caseta de conținut.

Culoare de fundal

După ce ați adăugat conținutul, accesați setările de fundal și adăugați o culoare albă de fundal.

• Culoare fundal: #ffffff

Imagine de fundal

Treceți la fila imagine de fundal și încărcați fișierul „ divi-beautiful-pricing-table-background-pattern-1.png ” pe care îl puteți găsi în folderul de descărcare care a fost partajat la începutul acestei postări.

• Dimensiunea imaginii de fundal: copertă
• Poziția imaginii de fundal: Centrul de sus
• Repetarea imaginii de fundal: fără repetare

Setări text

Modificați setările de text în continuare.

• Greutatea fontului textului: Ultra Bold
• Culoarea textului: #ffffff
• Dimensiune text: 80 px
• Spațiere scrisoare text: -3px
• Înălțimea liniei de text: 1em

Spațiere

Și adăugați câteva valori de marjă și umplere personalizate.

• Marja superioară: 5vw (desktop), 0vw (tabletă și telefon)
• Căptușeală superioară: 20 px
• Căptușeală inferioară: 200 px

Frontieră

Continuați adăugând „20 px” în colțurile din stânga sus și din dreapta.

Box Shadow

În plus, dați modulului Text o umbră de casetă subtilă.

• Box Shadow Vertical Position: -20px
• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -10px
• Culoare umbră: rgba (0,0,0,0,15)

Adăugați modulul buton la coloana 1

Adăugați o copie

Al doilea modul de care vom avea nevoie în coloana 1 este un modul buton. Adăugați o copie la alegere.

Aliniere buton

Apoi, accesați setările de aliniere și schimbați alinierea în centru.

• Aliniere buton: centru

Setări buton

Vom continua făcând câteva modificări la aspectul butonului în setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Culoarea textului butonului: #ffffff
• Culoare 1: # 6932ff
• Culoare 2: # 30acf4
• Direcția gradientului: 100 grade

• Lățimea chenarului butonului: 0 px
• Distanța dintre litere și butoane: -2 px
• Greutatea fontului: Ultra Bold

Spațiere

Apoi, adăugați niște căptușeală la buton pentru a face să arate frumos și aplicați marja superioară negativă pentru a crea o suprapunere cu modulul anterior din coloană.

• Marja superioară: -54 px
• Căptușeală superioară: 10 px
• Căptușeală inferioară: 10 px
• Căptușeală stângă: 30 px
• Căptușeală dreaptă: 30 px

Box Shadow

Nu în ultimul rând, adăugați o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -14px
• Culoare umbră: rgba (0,0,0,0,3)

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

Adauga continut

Următorul modul de care avem nevoie este un alt modul de text cu prețul tipului de membru.

Culoare de fundal

După ce ați adăugat prețul, accesați setările de fundal și aplicați o culoare de fundal alb.

• Culoare fundal: #ffffff

Setări text

Schimbați apoi setările de text.

• Greutatea fontului textului: Ultra Bold
• Culoare text: rgba (0,0,0,0,05)
• Dimensiune text: 120 px
• Înălțimea liniei de text: 1em

Spațiere

Și aplicați câteva valori de umplere personalizate în setările de spațiere.

• Căptușeală superioară: 100 px
• Căptușeală inferioară: 100 px
• Garnitura stânga: 80 px

Frontieră

Apoi, accesați setările de margine și adăugați „30 px” în colțurile din stânga și din dreapta jos.

Box Shadow

Nu în ultimul rând, acordați modulului o umbră de cutie.

• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 2 px
• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: 0 px
• Culoare umbră: rgba (0,0,0,0.21)

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

Adauga continut

Următorul și ultimul modul de care avem nevoie în coloana 1 este un alt modul de text. Adăugați prețul tipului de membru în caseta de conținut.

Setări text

Schimbați apoi setările de text.

• Greutatea fontului textului: Ultra Bold
• Culoarea textului: # 000000
• Dimensiune text: 50 px
• Înălțimea liniei de text: 1em

Spațiere

Și creați o suprapunere între acest modul și cel anterior jucând cu valorile de spațiere personalizate.

• Marja superioară: -180 px
• Marja inferioară: 180 px (tabletă și telefon)
• Căptușeală stângă: 100 px

Clonați toate modulele din coloana 1 De două ori și plasați duplicatele în coloanele rămase

Odată ce ați terminat de modificat modulele din coloana 1, puteți continua și clona fiecare dintre module de două ori și plasa duplicatele în cele două coloane rămase.

Schimbați conținutul modulelor din coloană

Modificați conținutul duplicatelor în funcție de celelalte două tipuri de membri pe care le partajați pe site-ul dvs. web.

Modificați tabelul de prețuri din coloana 2

Schimbați imaginea de fundal a modulului de text nr. 1

De asemenea, evidențiem tabelul de prețuri de mijloc. Deschideți primul modul de text din coloana 2 și schimbați imaginea de fundal în fișierul „ divi-beautiful-pricing-table-background-pattern-2.png ” pe care îl puteți găsi în folderul de descărcare.

Eliminați marja superioară a modulului de text nr. 1

Pentru a sublinia acest tip de membru, vom elimina marginea superioară a primului modul de text din setările de spațiere.

Schimbați fundalul gradientului butonului

De asemenea, vom asorta noua imagine de fundal folosind un alt fundal de gradient pentru modulul Buton.

• Culoare 1: # fb32ff
• Culoare 2: # ff304f
• Direcția gradientului: 100 grade

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ă stilizați un tabel de prețuri frumos pentru următorul dvs. proiect Divi. V-am ghidat pas cu pas prin tutorial și am obținut un rezultat uimitor folosind doar opțiunile integrate 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.