Cum să creați un design de blocare receptiv pentru paginile de produse Woo cu Divi

Publicat: 2019-11-02

Acum, că poți folosi module Woo în Divi, singura limită este imaginația ta. Fiecare modul dinamic Woo este personalizabil ca toate celelalte module din interiorul constructorului. În această postare, vă vom arăta cum să recreați un design creativ pentru paginile dvs. de produse. Modulele dinamice sunt grupate într-un set creativ care iese în evidență din fundalul întunecat. De asemenea, puteți descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a începe, să aruncăm o privire asupra designului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați designul blocului Responsive GRATUIT

Pentru a pune mâna pe designul blocului de răspuns gratuit, 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

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.

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. Pentru a recrea acest design de stil bloc, va trebui să completați următoarele informații:

  • Titlu
  • Descriere
  • Preț
  • Categorie
  • Atribute
  • Imagine prezentată

Fila atribute este de unde sunt extrase informațiile pentru modulul de informații suplimentare woo. Pentru a adăuga aceste informații, faceți clic pe fila atribute și creați trei atribute personalizate după cum urmează:

  • Atribute:
    • Capacitate: 250 ml / 2 căni de ceai
    • Material: Cupru pur
    • Stare: uzură normală și rupere

Imaginea prezentată trebuie să aibă aceeași culoare de fundal ca și culoarea din design.

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

Când toate detaliile produsului sunt completate, continuați și activați Divi Builder. Schimbați aspectul paginii în „Lățime completă”.

Treceți la Visual Builder

Continuați trecând la Visual Builder.

Ștergeți secțiunea de produs implicită

Deoarece creăm o pagină de produs personalizată, continuați și ștergeți secțiunea implicită de produse woo.

2. Recreați designul blocului responsiv

Adăugați o secțiune nouă

fundal

Primul pas pentru a recrea designul este să adăugați o nouă secțiune. Adăugați un fundal degradat pe diferite dimensiuni de ecran.

  • Fundal: Gradient
  • Culoarea 1: Gri deschis # f2f6f5
  • Culoarea 2: Aproape negru # 313131
  • Direcţie:
    • Desktop: 90%
    • Tabletă + telefon: 180%
  • Start + Finalizare:
    • Desktop: 50%
    • Tabletă: 40%
    • Telefon: 30%

Dimensionare

Reglați setările de dimensionare a secțiunii.

  • Lățime: 100%
  • Lățime maximă: 100%

Spațiere

Eliminați și căptușeala implicită de sus și de jos.

  • Căptușeală sus + jos: 0vw

Vizibilitate

În cele din urmă, ajustați debordurile secțiunii.

  • Vertical + Orizontal Overflow: Ascuns

Adăugați rândul # 1

Structura coloanei

După configurarea secțiunii, adăugați primul rând cu o coloană.

Dimensionare

În fila Design, reglați dimensiunea pentru diferite dimensiuni ale ecranului.

  • Lăţime:
    • Desktop: 50%
    • Tabletă + telefon: 100%
  • Lățime maximă: 100%
  • Alinierea rândurilor: la stânga

Vizibilitate

În cele din urmă, setați deversorul orizontal și vertical la vizibil.

  • Orizontal + Debit vizibil: vizibil

Adăugați Woo Breadcrumb

Conţinut

Adăugați primul modul, modulul woo breadcrumb. Selectați „Acest produs”.

  • Produs: Acest produs

Text

În fila Design, stilizați textul după cum urmează.

  • Font text: Fenix
  • Culoarea textului: maro # 594239
  • Mărimea textului:
    • Desktop: 1vw
    • Tabletă: 2vw
    • Telefon: 3vw

Spațiere

Adăugați câteva valori de spațiere pentru diferite dimensiuni de ecran.

  • Marja superioară: 3vw
  • Marginea stângă:
    • Desktop: 10vw
    • Tabletă + telefon: 20vw

Adăugați Woo Image

Adauga continut

Acum este timpul să adăugați imaginea produsului cu un modul Woo Image. În fila conținut, alegeți „Acest produs”.

  • Produs: Acest produs

Dimensionare

Continuați ajustând dimensiunea modulului.

  • Lățime: 100%

Vizibilitate

În cele din urmă, ascundeți preaplinul.

  • Orizontal + Vertical Overflow: Ascuns

Adăugați rândul # 2

Structura coloanei

Adăugați un al doilea rând cu două coloane.

Dimensionare

Mai întâi, ajustați dimensiunea.

  • Lățimea jgheabului: 1
  • Lăţime:
    • Desktop: 53%
    • Tabletă + telefon: 53%
  • Lățime maximă: 100%
  • Aliniere: Corect

Spațiere

Apoi, valorile spațierii.

  • Marja superioară:
    • Desktop: -47vw
    • Tabletă + telefon: 0vw
  • Marginea stângă:
    • Tabletă: -5vw
    • Telefon: -8vw
  • Căptușeală inferioară:
    • Desktop + Tabletă: 4.1vw
  • Căptușeală stângă:
    • Desktop: 0vw
    • Tabletă: 16vw
    • Telefon: 12vw
  • Garnitura dreapta:
    • Desktop: 0vw
    • Tabletă: 0vw

CSS personalizat

În fila Advanced, adăugați câteva CSS personalizate.

  • Element principal CSS:
    • display: flex; 
display: flex;

Vizibilitate

În cele din urmă, setați revărsările la vizibil.

  • Orizontal + Vertical Deborduri: vizibil

Setări coloana 1

Spațiere

Înainte de a adăuga module, reglați valorile spațierii din coloana 1.

  • Garnitura stânga: 4vw
  • Garnitura dreapta: 0vw

Setări coloana 2

Spațiere

Reglați și valorile spațierii coloanei 2.

  • Căptușeală superioară:
    • Desktop: 7vw
    • Tabletă: 17vw
    • Telefon: 28vw
  • Garnitura dreapta:
    • Desktop + Tabletă: 15vw

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

Adauga continut

Acum este timpul să adăugați modulele. Începeți cu un modul text. Introduceți conținut descriptiv pentru produs.

Text

Apoi, stilizați textul.

  • Font: Fenix
  • Culoare: # f2eed0
  • Mărimea:
    • Desktop: 1,3vw
    • Tabletă: 2.6vw
    • Telefon: 3.8vw
  • Spațierea literelor: 1 px
  • Aliniere: centru

Dimensionare

Reglați dimensiunea modulului pentru diferite dimensiuni de ecran.

  • Lăţime:
    • Desktop: 50%
    • Tabletă: 60%
    • Telefon: 80%

Spațiere

De asemenea, reglați valorile spațierii după cum urmează.

  • Căptușeală superioară + inferioară: 1vw
  • Căptușeala stânga + dreapta: 1vw

Frontieră

Adăugați o margine la modul în consecință.

  • Stiluri de margine: sus + stânga + dreapta
  • Lățimea graniței:
    • Sus + Stânga + Dreapta: 2 px
  • Culoare margine:
    • Sus + Stânga + Dreapta: Cream # f2eed0

Adăugați Woo Title la coloana 1

Adauga continut

Acum, adăugați un modul de titlu woo și alegeți „Acest produs” în fila conținut.

  • Produs: Acest produs

fundal

Pentru a stiliza modulul, adăugați un fundal portocaliu închis.

  • Culoare de fundal
  • Culoare: Cupru Portocaliu # d66b00

Textul titlului

Apoi, modificați setările pentru textul antetului.

  • Titlu Titlu nivel: H1
  • Font: Fenix
  • Culoare: crem # f2eed0
  • Mărimea:
    • Desktop: 2.9vw
    • Tabletă: 7,8vw
    • Telefon: 13.9vw
  • Spațierea literelor H1: 1 px

Dimensionare

În plus, reglați dimensiunea modulului

  • Lățime: 100%

Spațiere

Apoi, adăugați câteva valori de umplere.

  • Căptușeală superioară + inferioară:
    • Desktop: 2vw
    • Tabletă: 3vw
    • Telefon: 4vw
  • Căptușeala stânga + dreapta:
    • Desktop: 2vw
    • Tabletă: 3vw
    • Telefon: 4vw

Frontieră

În cele din urmă, adăugați un chenar după cum urmează.

  • Stiluri de margine: sus + stânga + dreapta
  • Lățimea graniței:
    • Sus + Stânga + Dreapta: 2 px
  • Culoare margine:
    • Sus + Stânga + Dreapta: Cream # f2eed0

Adăugați Woo Description Title la coloana 1

Adauga continut

Sub titlu, adăugați un modul de descriere woo. În fila conținut, alegeți „Acest produs”.

  • Produs: Acest produs
  • Descriere tip: Descriere

Text

Apoi, stilizați textul.

  • Font: Deschideți Sans
  • Culoare: crem # f2eed0
  • Mărimea:
    • Desktop: 08vw
    • Tabletă: 2vw
    • Telefon: 3vw

Dimensionare

De asemenea, reglați dimensiunea.

  • Lățime: 100%

Spațiere

La fel, reglați distanța.

  • Căptușeală superioară + inferioară:
    • Desktop: 2vw
    • Tabletă + telefon: 3vw
  • Căptușeala stânga + dreapta:
    • Desktop: 2vw
    • Tabletă + telefon: 3vw

Frontieră

Similar cu alte module, adăugați un chenar.

  • Stiluri de frontieră: toate cele patru frontiere
  • Lățime: 2 px
  • Culoare: crem # f2eed0

Adăugați informații suplimentare Woo în coloana 2

Adauga continut

Acum este timpul să adăugați atributele personalizate cu modulul de informații suplimentare woo. În fila conținut, alegeți „Acest produs”.

  • Produs: Acest produs

Text

Modificați setările de text după cum urmează.

  • Font: Deschideți Sans
  • Stil: italic
  • Culoare: crem # f2eed0
  • Mărimea:
    • Desktop: 0,6vw
    • Tabletă: 1,6vw
    • Telefon: 2.2vw

Textul atributului

Apoi, stilizați textul atributului în consecință:

  • Font: Fenix
  • Culoare: crem # f2eed0
  • Mărimea:
    • Desktop: 1.1vw
    • Tabletă: 2vw
    • Telefon: 3vw
  • Distanța: 1 px

Dimensionare

De asemenea, reglați dimensiunea.

  • Lățime: 100%

Frontieră

Și, în cele din urmă, adăugați o margine.

  • Stiluri de margine: sus + dreapta + jos
  • Lățimea graniței:
    • Sus + Dreapta + Jos: 2 px
  • Culoare margine:
    • Sus + Dreapta + Jos: Cremă # f2eed0

Adăugați rândul # 3

Structura coloanei

Adăugați al treilea rând, cu două coloane.

Dimensionare

Înainte de a adăuga module, ajustați dimensiunea rândului pentru diferite dimensiuni ale ecranului.

  • Lăţime:
    • Desktop: 50%
    • Tabletă: 87%
    • Telefon: 93%
  • Aliniere: Corect

Căptușeală

De asemenea, reglați căptușeala.

  • Căptușeală inferioară: 12vw

Setări coloana 1

Spațiere

Continuați ajustând umplutura din prima coloană.

  • Căptușeală stângă:
    • Desktop: 5vw
    • Tabletă + telefon: 12vw

Adăugați prețul Woo în coloana 1

Adauga continut

Acum, adăugați prețul produsului utilizând modulul de preț woo. În fila conținut, alegeți „Acest produs”.

  • Produs: Acest produs

Textul prețului

Apoi, stilizați textul în consecință.

  • Font: Fenix
  • Culoare: crem # f2eed0
  • Mărimea:
    • Desktop: 1,5vw
    • Tabletă: 3,5vw
    • Telefon: 5vw

Dimensionare

De asemenea, reglați dimensiunea modulului.

  • Lăţime:
    • Desktop: 39%
    • Tabletă: 45%
    • Telefon: 54%

Spațiere

Reglați și distanța.

  • Căptușeală superioară:
    • Desktop: 1vw
    • Tabletă: 2vw
    • Telefon: 3v2
  • Căptușeală inferioară:
    • Desktop: 1vw
    • Tabletă + telefon: 2vw
  • Căptușeală stângă:
    • Desktop: 1vw
    • Tabletă + telefon: 2vw
  • Garnitura dreapta:
    • Tabletă + telefon: 2vw

Frontieră

În cele din urmă, adăugați chenarul.

  • Stiluri de frontieră: toate cele patru laturi
  • Lățime: 2 px
  • Culoare: crem # f2eed0

Adaugă Woo Adaugă în coș în coloana 2

Adauga continut

Modulul final este un modul woo add to cart. În fila conținut, alegeți „Acest produs”.

Stiluri de butoane

Stilați butonul după cum urmează.

  • Stiluri personalizate: Da
  • Dimensiune text buton:
    • Desktop: 1,3vw
    • Tabletă: 3,5vw
    • Telefon: 5vw
  • Culoarea textului: Cream # f2eed0
  • Culoare fundal: Cupru Portocaliu # d66b00

Garnitura de nasturi

Apoi, adăugați câteva valori de umplere la buton.

  • Căptușeală superioară + inferioară: 0,5vw
  • Căptușeala stânga + dreapta: 1,5vw

Dimensionare

Nu în ultimul rând, ajustați dimensiunea modulului și ați terminat!

  • Lățime: 100%

previzualizare

Să aruncăm o ultimă privire asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Este o folie

Asta e! Dacă conținutul dvs. este mai lung sau mai scurt decât cel din acest tutorial, ar putea perturba spațiul blocurilor. Tot ce trebuie să faceți este să ajustați setările coloanei astfel încât să se potrivească mai bine în compoziție. Sperăm că acest tutorial vă va inspira să creați modele Divi mai uimitoare. Spuneți-ne în comentarii dacă aveți întrebări.