Cum să prezentați în mod creativ produse populare pe pagina dvs. de destinație Divi

Când afișați produse populare pe o pagină de destinație, nu este important doar să alegeți produsele potrivite, ci și să le afișați atractiv. Cu noile module WooCommerce ale Divi, nenumărate noi posibilități de proiectare au căzut în poala noastră. Pentru a vă ajuta să vă inspirați, vom recrea un design popular de produs frumos și elegant, pe care îl puteți utiliza pentru următoarea dvs. pagină de destinație Divi. 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

Static

Planare

Mobil

Descărcați GRATUIT aspectul produselor populare

Pentru a pune mâna pe aspectul gratuit de produse populare, 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 o secțiune nouă

Spațiere

Începeți prin adăugarea unei secțiuni obișnuite la o pagină nouă sau una existentă. Deschideți setările secțiunii și reglați valorile de umplere de sus și de jos în consecință:

• Căptușeală superioară: 8vw
• Căptușeală inferioară: 8vw

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind 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 ale rândului.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 85vw
• Lățime maximă: 100%

Adăugați modulul Woo Image în coloană

Conținut dinamic

E timpul să începeți să adăugați module! Primul modul de care avem nevoie este modulul Woo Image. Selectați produsul pe care doriți să îl afișați.

Imagine

Treceți la fila de proiectare și modificați setările imaginii.

• Imagine Colțuri rotunjite: 20 px (Toate colțurile)

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0,3)

Adăugați modulul Woo Title în coloană

Conținut dinamic

Următorul modul de care avem nevoie este modulul Woo Title. Selectați un produs la alegere.

Setări text titlu

Modificați setările textului titlului modulului după cum urmează:

• Titlu Nivel antet: H3
• Titlu Font: Prata
• Dimensiune text titlu: 3vw (desktop), 5vw (tabletă), 7vw (telefon)

Spațiere

Completați setările modulului adăugând câteva valori de marjă personalizate pe diferite dimensiuni de ecran.

• Marja superioară: 7vw (desktop), 14vw (tabletă și telefon)
• Marja inferioară: 2vw (desktop), 4vw (tabletă și telefon)
• Marja stângă: 2vw (desktop), 5vw (tabletă și telefon)
• Marja dreaptă: 2vw (desktop), 5vw (tabletă și telefon)

Adăugați modulul de descriere Woo în coloană

Conținut dinamic

Treceți la următorul modul, care este modulul de descriere Woo. Selectați un produs la alegere.

Setări text

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

• Font text: Montserrat
• Dimensiune text: 0,8vw (desktop), 1,6vw (tabletă), 2vw (telefon)
• Înălțimea liniei textului: 1,8em

Spațiere

Jucați-vă și cu valorile de marjă personalizate pe diferite dimensiuni ale ecranului.

• Marja superioară: 2vw (desktop), 4vw (tabletă și telefon)
• Marja inferioară: 2vw (desktop), 4vw (tabletă și telefon)
• Marja stângă: 2vw (desktop), 5vw (tabletă și telefon)
• Marja dreaptă: 2vw (desktop), 5vw (tabletă și telefon)

Adăugați modulul Adăugați în coș în coloană

Conținut dinamic

Chiar sub modulul Woo Description, vom adăuga un modul Woo Add To Cart. Selectați un produs la alegere.

Setări de câmpuri implicite

Treceți la fila de proiectare a modulului și modificați setările câmpurilor după cum urmează:

• Culoarea fundalului câmpurilor: #ffffff
• Culoare text câmpuri: # 3d3d3d
• Fields Font: Montserrat

• Lățimea chenarului câmpurilor: 0 px
• Culoarea chenarului câmpurilor: # 3d3d3d

Plasați cursorul pe setările câmpurilor

Modificați lățimea chenarului la cursor.

• Lățimea chenarului câmpurilor: 1 px

Setări implicite pentru butoane

Deschideți apoi setările butonului și stilizați butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 3vw (tabletă), 4vw (telefon)
• Culoarea textului butonului: # 3d3d3d
• Culoarea fundalului butonului: #FFFFFF
• Lățimea chenarului butonului: 0 px
• Culoarea chenarului butonului: # 3d3d3d

• Buton Font: Prata

• Căptușeală superioară: 0,5vw
• Căptușeală inferioară: 0,5vw
• Garnitura stânga: 2vw
• Garnitura dreapta: 2vw

Setări buton hover

Schimbați lățimea chenarului butonului la cursor.

• Lățimea chenarului butonului: 1 px

Spațiere

Apoi, mergeți la spațiere și adăugați câteva valori de marjă personalizate pe diferite dimensiuni de ecran.

• Marja inferioară: 7vw (desktop), 14vw (tabletă și telefon)
• Marja stângă: 2vw (desktop), 5vw (tabletă și telefon)
• Marja dreaptă: 2vw (desktop), 5vw (tabletă și telefon)

Setări implicite ale chenarului

Modificați și setările de margine ale modulului.

• Lățimea marginii inferioare: 1 px
• Culoarea chenarului inferior: # 3d3d3d

Plasați cursorul pe setările de margine

Și îndepărtați lățimea chenarului în cursă.

• Lățimea marginii inferioare: 0 px

Adăugați modulul de preț Woo în coloană

Conținut dinamic

Ultimul modul de care avem nevoie în coloană este un modul Woo Price. Selectați un produs la alegere.

Setări text titlu

Treceți la fila de proiectare a modulului și modificați setările textului de preț în consecință:

• Font text text: Montserrat
• Preț Text Font Greutate: ușor
• Culoare text preț: # 333333
• Preț Dimensiune text: 2vw (desktop), 4vw (tabletă), 6vw (telefon)
• Înălțimea liniei de preț: 1.8em

Spațiere

Modificați și valorile de marjă.

• Marja inferioară: 5vw
• Marja stângă: 2vw (desktop), 5vw (tabletă și telefon)
• Marja dreaptă: 2vw (desktop), 5vw (tabletă și telefon)

Clonați coloana de două ori

După ce ați completat coloana și toate modulele din ea, puteți clona întreaga coloană de două ori.

Schimbați structura coloanei rândurilor

Schimbați apoi structura coloanei rândului.

Schimbați tot conținutul dinamic

Continuați prin schimbarea întregului conținut dinamic din coloanele 2 și 3 cu alte produse la alegere.

Schimbați spațiul modulului coloanei 2

Woo Title Module

Modulele din a doua coloană necesită câteva modificări suplimentare de spațiu. Începeți cu modulul Woo Title.

• Marja stângă: 5vw (toate dispozitivele)
• Marja dreaptă: 5vw (toate dispozitivele)

Modul Woo Description

Modificați setările de spațiere ale modulului Woo Description Module.

• Marja superioară: 4vw (toate dispozitivele)
• Marja inferioară: 4vw (toate dispozitivele)
• Marja stângă: 5vw (toate dispozitivele)
• Marja dreaptă: 5vw (toate dispozitivele

Woo Modul Adăugați în coș

Treceți la setările de spațiere ale modulului Woo Add To Cart.

• Marja stângă: 5vw (toate dispozitivele)
• Marja dreaptă: 5vw (toate dispozitivele)

Modul Woo Price

Și completați coloana 2 module modificând și setările de spațiere ale modulului Woo Price Module.

• Marja stângă: 5vw (toate dispozitivele)
• Marja dreaptă: 5vw (toate dispozitivele)

Stiluri de coloană

Toate coloanele

Culoare de fundal

Acum, că avem toate modulele la locul lor, putem începe să coafăm coloanele. Fiecare dintre coloane are nevoie de o culoare albă de fundal.

• Culoare fundal: #ffffff

Frontieră

Puteți adăuga „20px” și la colțurile fiecărei coloane.

• Colțuri rotunjite: 20 px (toate colțurile)

Coloanele 1 și 3

Default Box Shadow

Continuați adăugând o umbră de casetă implicită în coloana 1 și 3.

• Box Shadow Vertical Position: 22 px
• Box Shadow Shadow Blur Forța: 150 px
• Culoare umbră: rgba (0,0,0,0) (Desktop), rgba (0,0,0,0,1) (tabletă și telefon)

Hover Box Shadow

Schimbați culoarea umbrei cu mouse-ul pe hover.

• Culoare umbră: rgba (0,0,0,0.27)

Filtre implicite

Apoi, accesați setările filtrelor și adăugați o neclaritate la ambele coloane 1 și 3.

• Estompare: 4 px (desktop), 0 px (tabletă și telefon)

Treceți cu mouse-ul peste filtre

Îndepărtați neclaritatea la cursă.

• Estompare: 0 px

Indice Z implicit

Atribuiți aceeași valoare implicită a indexului coloanelor următoare.

• Indicele Z: 9

Plasați cursorul Z index

Și creșteți același indice z pe hover.

• Indicele Z: 12

Doar coloana 1

Transformă Traducere

Continuați schimbând poziția coloanei 1 folosind opțiunea de transformare a transformării.

• Dreapta: 7vw (desktop), 0vw (tabletă și telefon)
• Partea de jos: 2vw (desktop), 0vw (tabletă și telefon)

Doar în coloana 3

Transformă Traducere

Deschideți apoi coloana 3 transformați setările și aplicați următoarele setări:

• Dreapta: 7vw (desktop), 0vw (tabletă și telefon)
• Partea de jos: -2vw (desktop), 0vw (tabletă și telefon)

Doar coloana 2

Box Shadow

Treceți la setările coloanei 2 și aplicați o umbră de casetă subtilă.

• Box Shadow Vertical Position: 22 px
• Puterea neclarității umbrei cutiei: 150 px
• Culoare umbră: rgba (0,0,0,0,27) (Desktop), rgba (0,0,0,0,1) (tabletă și telefon)

Indicele Z

Nu în ultimul rând, modificați indexul z al coloanei a doua și ați terminat!

• Indicele Z: 11

previzualizare

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

Desktop

Static

Planare

Mobil

Gânduri finale

În această postare, v-am arătat cum să prezentați elegant produse populare pe pagina dvs. de destinație Divi. V-am arătat, pas cu pas, cum să creați un rezultat frumos folosind doar opțiunile integrate Divi. Acest exemplu de proiectare arată cât de versatile sunt noile module WooCommerce ale Divi și cum puteți crea design web uimitor de eCommerce în cel mai scurt timp. 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.