Cum să creați o pagină de produs curată și îndrăzneață cu modulele WooCommerce ale Divi (descărcare gratuită!)

Paginile cu produse îndrăznețe au un mod special de a atrage atenția vizitatorilor. Și cu noua actualizare a modulelor WooCommerce Divi, puteți transforma rapid vechea pagină a produsului într-una curată și îndrăzneață, pe care atât dvs., cât și vizitatorilor dvs. o veți iubi. În tutorialul de astăzi, vom recrea o pagină de produs îndrăzneață de la zero și veți putea descărca gratuit fișierul JSON! Acest tutorial arată cât de versatile sunt noile module WooCommerce ale Divi și cum puteți crea un site de e-commerce extrem de profesionist în cel mai scurt timp.

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.

Descărcați aspectul paginii produsului Clean & Bold GRATUIT

Pentru a pune mâna pe aspectul gratuit al paginii produsului erou curat și îndrăzneț, 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!

Abonați-vă la canalul nostru Youtube

1. Adăugați / Deschideți produsul WooCommerce

Detalii produs

Deschideți un produs existent sau creați unul nou. Dacă doriți să obțineți exact același rezultat așa cum se arată în previzualizarea acestui post, asigurați-vă că adăugați următoarele detalii despre produs:

• Titlu
• scurta descriere
• descriere lungă
• Categorie
• Imagine prezentată
• Preț

Activați Divi Builder și modificați setările paginii de produs

După ce ați completat detaliile produsului, activați Divi și schimbați aspectul paginii în „Lățime completă”.

Treceți la Visual Builder

Continuați trecând la Visual Builder.

Eliminați secțiunea produs original de pe pagina

Acolo, veți vedea informațiile originale despre pagina produsului reunite într-o singură secțiune. Vom recrea designul curat și îndrăzneț de la zero, așa că nu ezitați să ștergeți această secțiune.

2. Creați o pagină de produs Clean & Bold folosind Visual Builder al Divi

Adăugați secțiunea 1 regulată

Spațiere

E timpul să începem să creăm pagina noastră de produse îndrăznețe! Adăugați o nouă secțiune obișnuită și modificați setările de spațiere a secțiunii.

• Căptușeală superioară: 200 px
• Căptușeală inferioară: 0 px

Revărsări

Pentru a vă asigura că nimic nu depășește containerul secțiunii și că nu are loc derularea orizontală pe pagină, ascundeți revărsările secțiunii în setările de vizibilitate.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați rând

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândului și modificați culoarea de fundal a rândului.

• Culoare fundal: # f4f4f4

Dimensionare

Modificați și lățimea maximă a rândului.

• Lățime maximă: 1000 px

Spațiere

Apoi, accesați setările de spațiere și adăugați câteva umpluturi personalizate în partea de sus și de jos.

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

Frontieră

Adăugăm raza de margine „50 px” și la colțurile din stânga sus și din dreapta.

Revărsări

Completați setările rândului făcând vizibile revărsările.

• Overflow orizontal: vizibil
• Overflow vertical: vizibil

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

Conținut dinamic

E timpul să începeți să adăugați module! Primul modul de care avem nevoie este modulul Woo Breadcrumb.

• Produs: Acest produs

Setări text

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

• Font text: Text Crimson
• Greutatea fontului textului: Bold
• Stil de text text: majuscule
• Dimensiune text: 20 px
• Spațiere scrisoare text: 4 px

Setări text link

Modifică și setările textului linkului.

• Link Font Greutate: ușor
• Culoare text link: # e02b20

Spațiere

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

• Marja inferioară: 80 px
• Marja stângă: 50 px (desktop și tabletă), 20 px (telefon)
• Marja dreaptă: 50 px (desktop și tabletă), 20 px (telefon)

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

Conținut dinamic

Următorul și ultimul modul de care avem nevoie în această coloană este modulul Woo Title.

• Produs: Acest produs

Setări text titlu

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

• Titlu Font: Montserrat
• Titlu Greutate font: greu
• Alinierea textului titlului: centru
• Culoare text titlu: # 000000
• Dimensiune text titlu: 250 px (desktop), 150 px (tabletă), 80 px (telefon)
• Înălțimea liniei de titlu: 0.9em

Spațiere

Măriți lățimea modulului prin adăugarea unor margini negative la stânga și la dreapta.

• Marja stângă: -150 px (desktop), -100 px (tabletă), -50 px (telefon)
• Marja dreaptă: -150 px (desktop), -100 px (tabletă), -50 px (telefon)

Adăugați secțiunea regulată nr. 2

Spațiere

Adăugați o altă secțiune chiar sub cea anterioară. Modificați valorile de umplere a secțiunii după cum urmează:

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

Adăugați rând

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândului și modificați culoarea de fundal a rândului.

• Culoare fundal: # f4f4f4

Dimensionare

Măriți lățimea maximă a rândului în continuare.

• Lățime maximă: 1000 px

Spațiere

Adăugați și o umplutură personalizată de fund.

• Căptușeală inferioară: 150 px

Frontieră

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

Revărsări

Completați setările rândului asigurându-vă că deversările sunt vizibile.

• Overflow orizontal: vizibil
• Overflow vertical: vizibil

Setări coloana 1

Imagine de fundal dinamică

După ce ați completat setările generale de rând, deschideți setările coloanei 1 și adăugați imaginea prezentată a produsului pe fundal folosind conținut dinamic.

• Imagine de fundal: Imagine prezentată

Spațiere

Adăugați niște umplutură de jos în coloana următoare. Aceasta va permite ca imaginea de fundal să se afișeze.

• Căptușeală inferioară: 370 px (desktop), 690 px (tabletă), 380 px (telefon)

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

Adauga continut

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

Culoare de fundal

Schimbați apoi culoarea de fundal a modulului.

• Culoare fundal: # E02B20

Setări text

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

• Font text: Montserrat
• Greutatea fontului textului: Ultra Bold
• Aliniere text: centru
• Culoarea textului: #FFFFFF
• Dimensiune text: 30 px
• Înălțimea liniei de text: 1em

Dimensionare

Reduceți dimensiunea modulului în setările de dimensionare următoare.

• Lățime: 280 px

Spațiere

Și transformați modulul într-un pătrat adăugând câteva valori de umplere personalizate. De asemenea, creăm o suprapunere superioară și stângă utilizând marja negativă.

• Marja superioară: -120 px
• Marja stângă: -120px
• Căptușeală superioară: 110 px
• Căptușeală inferioară: 110 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Frontieră

Pentru a transforma pătratul într-un cerc, vom adăuga o rază de margine „500 px” la fiecare dintre colțurile modulului.

Transformare Rotire

Vom roti și modulul.

• Stânga: 330 grade

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

Adăugați conținut H2

Trecem la a doua coloană! Acolo, primul modul de care avem nevoie este un modul de text obișnuit. Introduceți un conținut H2 la alegere.

Setări text H2

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

• Rubrica 2 Font: Montserrat
• Rubrica 2 Dimensiune text: 35 px

Spațiere

Adăugați câteva valori de marjă personalizate în continuare.

• Marja superioară: -70 px (desktop), 100 px (tabletă și telefon)
• Marja stângă: 100 px (desktop), 20 px (tabletă și telefon)
• Marja dreaptă: 20 px (tabletă și telefon)

Adăugați modulul de descriere Woo în coloana 2

Conținut dinamic

Al doilea modul de care avem nevoie în coloana 2 este modulul de descriere Woo.

• Produs: Acest produs
• Tipul descrierii: scurtă descriere

Setări text

Modificați setările de text ale modulului în consecință:

• Font text: Text Crimson
• Dimensiune text: 19 px
• Înălțimea liniei textului: 1,8em
• Alinierea textului: justificați

Spațiere

Modificați valorile spațierii modulului în continuare.

• Marja inferioară: 50 px
• Marja stângă: 100 px (desktop), 20 px (tabletă și telefon)
• Marja dreaptă: -100 px (desktop), 20 px (tabletă și telefon)

Adăugați modulul de preț Woo în coloana 2

Conținut dinamic

Treceți la următorul modul, care este modulul Woo Price.

• Produs: Acest produs

Setări text preț

Modificați setările pentru textul prețului după cum urmează:

• Preț Font: Montserrat
• Prețul Greutate font: greu
• Culoare text preț: # 000000
• Preț Dimensiune text: 50 px

Spațiere

Schimbați apoi setările de spațiere.

• Marja inferioară: 50 px
• Marja stângă: 100 px (desktop), 20 px (tabletă și telefon)
• Marja dreaptă: 20 px (tabletă și telefon)

Adăugați Woo Add to Cart Module în coloana 2

Conținut dinamic

Următorul și ultimul modul de care avem nevoie pentru a finaliza acest design este modulul Woo Add To Cart.

• Produs: Acest produs

Setări text

Schimbați fontul textului din setările textului.

• Font text: Montserrat

Setări câmpuri

Modificați apoi setările câmpurilor.

• Culoarea fundalului câmpului: #ffffff
• Culoare text câmpuri: # 000000
• Căptușeală superioară: 66 px
• Căptușeală inferioară: 66 px
• Fields Font: Montserrat
• Greutatea fontului Fields: Greu

• Toate colțurile: 5 px
• Lățimea marginii câmpurilor de jos: 3 px
• Culoarea chenarului câmpurilor: # e02b20

Setări buton

Continuați stilizând butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # E02B20
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 5 px
• Buton Font: Montserrat
• Buton Font Greutate: Ultra Bold
• Stilul fontului butonului: majuscule

• Căptușeală superioară: 50 px
• Căptușeală inferioară: 50 px
• Căptușeală stângă: 100 px (desktop), 50 px (tabletă), 20 px (telefon)
• Umplutură dreaptă: 100 px (desktop), 50 px (tabletă), 20 px (telefon)
• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (0,0,0,0,3)

Spațiere

Finalizați proiectarea modulului adăugând câteva valori ale marginii stânga și dreapta pe dimensiuni mai mici ale ecranului și ați terminat!

• Marja stângă: 20 px (tabletă și telefon)
• Marja dreaptă: 20 px (tabletă și telefon)

previzualizare

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

Gânduri finale

În această postare, v-am arătat cum să creați o pagină uimitoare a produsului îndrăzneț, cu un aspect curat și simțindu-l folosind noile module WooCommerce ale Divi. Paginile cu produse îndrăznețe au un mod unic de a vă pune produsul în centrul atenției. 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.