Cum să creați un șablon de pagină de produs Woo Wide-Site cu Divi's Theme Builder

Noul Theme Builder al Divi automatizează modul în care ne construim site-urile web Divi. De exemplu, atunci când proiectăm pagini de produse, trebuie să parcurgem procesul de creație o singură dată și, de acolo, putem atribui designul tuturor paginilor noastre de produse. Exact asta vă vom arăta în tutorialul de astăzi despre cazurile de utilizare. Vă vom ghida prin configurarea unui șablon de pagină de produs woo la nivel de site folosind Divi. Vom începe prin stilizarea paginii de produs implicite woo a unui anumit produs, pentru a o potrivi cu pachetul de aspect serigrafie. Vom continua salvând aspectul în biblioteca Divi și apoi îl vom folosi ca corp global pe un nou șablon pe care îl creăm.

Să ajungem la asta!

previzualizare

Descărcați GRATUIT modelul de pagină pentru produs

Pentru a pune mâna pe exemplul gratuit de șablon de pagină a produsului, 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!

1. Activați Divi Builder pentru produsul existent

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

Există două modalități de abordare a creării unui șablon de pagină de produs; puteți începe să editați corpul global din interiorul șablonului de pagină a produsului sau puteți crea mai întâi designul pe o pagină de produs individuală. Personal, prefer să creez mai întâi designul pe o pagină de produs individuală. Vă permite să publicați designul și să vedeți rezultatul live înainte de a-l aplica efectiv pe toate paginile dvs. de produs simultan. Aceasta este abordarea pe care o vom adopta astăzi, așa că mergeți mai departe și deschideți una dintre paginile dvs. existente și schimbați aspectul paginii în lățime completă.

Treceți la Visual Builder

Odată ce ați modificat aspectul paginii în setările paginii, puteți începe să creați pe front-end.

2. Personalizați aspectul pentru a se potrivi cu stilul site-ului web / al pachetului de machete

Culori de fundal

În interiorul Visual Builder, puteți observa toate elementele de care aveți nevoie. Vom schimba unele dintre setările acestor module pentru a le potrivi cu pachetul de aspect serigrafie. Modificările pe care le facem sunt minime și vă ajută doar să aplicați un anumit stil de design pe pagina produsului. Dacă lucrați la un proiect personal, nu ezitați să mergeți cât mai departe cu personalizarea dorită, dar pentru acest tutorial, vom încerca să îl simplificăm. Vom începe prin modificarea unor culori de fundal.

• Woo Cart Notice Module: Culoare fundal

Deschideți modulul Woo Cart Notice și schimbați culoarea de fundal.

• Culoare fundal: # 29314f

• Modul Woo Tabs: Tab-uri Culori text / fundal

Continuați deschizând modulul Woo Tabs și modificați textul filei și culorile de fundal în continuare.

• Culoare fundal filă activă: #ffffff
• Culoare fundal filă inactivă: # 29314f
• Culoare text filă activă: # 000000
• Culoarea textului filei: #ffffff

Setări text corp

De asemenea, dorim să aducem câteva modificări textului corpului următoarelor module:

• Modul Woo Breadcrumb: Setări text
• Woo Modul Adăugare în coș: Setări text
• Modul Woo Description: Setări text
• Woo Meta Module: Setări text
• Modul Woo Tabs: Setări text
• Modul Woo Tabs: Setări text Tabs

Deschideți fiecare modul enumerat mai sus și modificați dimensiunea textului și înălțimea liniei textului după cum urmează:

• Dimensiune text: 16 px (desktop și tabletă), 14 px (telefon)
• Înălțimea liniei de text: 2em (desktop și tabletă), 1,7em (telefon)

Setări text titlu

De asemenea, schimbăm stilul titlurilor noastre. Vom aplica modificările fiecăruia dintre aceste module:

• Woo Title Module: Setări text titlu
• Modul Woo Related Products: Setări text titlu
• Modul Woo Related Products: Setări text titlu produs

Singurele două lucruri pe care le schimbăm sunt fontul titlului și greutatea fontului titlului.

• Titlu Font: Roboto
• Greutatea fontului titlului: Bold

Culori de legătură

Mergând mai departe, vrem să ne asigurăm că elementele care pot fi făcute clic sunt evidențiate. Vom schimba culoarea textului linkului următoarelor două module:

• Woo Breadcrumb Module: Link Text Color
• Woo Meta Module: Link Text Color

Acesta este codul de culoare pe care îl folosim:

• Culoare text link: # ff7145

Setări text preț

Vrem să stilizăm și textul prețului, începând cu modulul de preț Woo.

• Modul Woo Price: Setări text text

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

• Preț Font: Roboto
• Prețul greutății fontului: îndrăzneț
• Culoare text preț: # ff7145

Deschideți modulul Woo Related Product.

• Woo Modul de produse conexe: Setări pentru textul prețului

Și efectuați câteva modificări la setările pentru textul prețului:

• Preț Font: Roboto
• Prețul greutății fontului: îndrăzneț
• Culoare text preț: # ff7145
• Preț Dimensiune text: 16 px

Setări buton

Avem și două butoane pe pagina produsului nostru, fiecare dintre ele trebuie să fie stilizat.

• Woo Cart Notice Module: Setări buton
• Woo Modul Adăugare în coș: Setări buton

Modificați setările butoanelor modulelor după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 14 px
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # ff7145
• Lățimea chenarului butonului: 2 px
• Culoarea chenarului butonului: # ff7145

• Raza chenarului butonului: 100 px
• Distanța dintre litere și butoane: 1 px
• Buton Font: Roboto
• Buton Font Greutate: Bold
• Stilul fontului butonului: majuscule

• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px
• Căptușeală stângă: 30 px
• Căptușeală dreaptă: 30 px

detalii suplimentare

Există câteva modificări suplimentare pe care dorim să le aplicăm proiectării paginii produsului, începând cu fundalul coloanei 2 din al doilea rând de pe pagina noastră.

• Coloana 2: Culoarea fundalului

Utilizați următorul cod de culoare:

• Culoare fundal: #efefef

Modificăm și spațiul coloanei 2.

• Coloana 2: Spațiere

Utilizați următoarele valori de spațiere:

• Căptușeală superioară: 50 px
• Căptușeală inferioară: 50 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Nu în ultimul rând, vom dori să stilizăm setările câmpurilor modulului nostru Woo Add To Cart.

• Woo Modul Adăugare în coș: Setări câmpuri

Aplicați următoarele modificări:

• Culoarea fundalului câmpurilor: #efefef
• Culoare text câmpuri: # 7f7f7f
• Fields Font: Roboto
• Câmpul Greutate font: îndrăzneț

3. Creați un șablon nou pentru produse și importați aspectul paginii produsului în zona corpului

Salvați aspectul paginii produsului în biblioteca Divi

După ce ați finalizat proiectarea paginii produsului, puteți salva întregul aspect în biblioteca Divi.

Accesați Divi Theme Builder

E timpul să transformați aspectul într-un șablon de pagină de produs! Pentru aceasta, navigați la Theme Builder în setările Divi.

Adăugați un șablon nou

Continuați făcând clic pe „Adăugați un șablon nou”.

Selectați „Toate produsele” în fila „Utilizați activat” din setările șablonului dvs. pentru a face șablonul să se aplice tuturor produselor dvs. simultan.

Adăugați corp personalizat din bibliotecă

Apoi, faceți clic pe „Adăugați un corp global”. În loc să construim corpul personalizat de la zero, vom selecta aspectul pe care tocmai l-am salvat în biblioteca Divi.

Accesați fila „Aspectele dvs. salvate” pentru a selecta aspectul salvat.

4. Salvați opțiunile Generatorului de teme și vedeți șablonul pentru produsele existente

Odată ce corpul șablonului dvs. a fost creat, nu mai rămâne decât un singur lucru de făcut; salvați modificările. De îndată ce noul dvs. șablon a fost salvat, puteți previzualiza fiecare dintre produsele dvs. și puteți observa că același șablon de corp i se aplică!

previzualizare

Gânduri finale

În această postare, v-am arătat cum să creați un șablon de pagină de produs la nivel de site. Am început prin modificarea unei pagini de produs existente, folosind modulele woo ale Divi. Am făcut câteva modificări minime la pagina produsului, pentru a o potrivi cu pachetul de aspect serigrafie. Am continuat salvând aspectul paginii produsului în Biblioteca Divi. Apoi, am creat un nou șablon și am încărcat aspectul în corpul șablonului de pagină a produsului nostru, pentru ca acesta să se aplice întregului nostru site web. Sperăm că acest tutorial vă va ajuta să construiți site-uri web de comerț electronic frumoase cu noul Divi Theme Builder! Dacă aveți întrebări, asigurați-vă că 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.