Divi a fost conceput pentru a fi compatibil cu WooCommerce. A integra WooCommerce, trebuie să instalați cea mai recentă versiune a WooCommerce.

WooCommerce este pluginul e-commerce pe care îl recomandăm, deoarece are cel mai frumos set de caracteristici, interfață și urmează cele mai bune practici de codare. După activarea pluginului, veți vedea două noi secțiuni „WooCommerce” și „Produse” adăugate la tabloul de bord WordPress. Puteți folosi aceste zone pentru a vă ajusta setările de comerț electronic și pentru a publica produse noi. Puteți găsi documentaţie complet pe WooCommerce aici .

Vă rugăm să rețineți că, deși constructorul include diverse module WooCommerce, puteți utiliza și WooCommerce singur, fără ca constructorul să fie bine. Puteți crea pagini standard pentru Checkout, Coș de cumpărături etc. așa cum se arată în documentația lor. De asemenea, puteți să vă conectați direct la categoriile dvs. de woocommerce sau să utilizați Coduri scurte WooCommerce într-un modul text Divi. Vă oferă libertatea de a face aproape orice.

Cum să adăugați un modul de stocare la pagina dvs.

Înainte de a putea adăuga un modul magazin pe pagina dvs., trebuie mai întâi să accesați Divi Builder. Odata ce Divi tema instalat pe site-ul dvs., veți observa un buton Utilizați Divi Builder deasupra editorului de postare ori de câte ori creați o pagină nouă. Faceți clic pe acest buton pentru a activa Divi Builder și pentru a accesa toate modulele Divi Builder. Apoi faceți clic pe buton Utilizați Visual Builder pentru a porni generatorul în modul vizual. De asemenea, puteți face clic pe buton Utilizați Visual Builder când îți răsfoiești site-ul în prim plan dacă ești conectat la tabloul de bord WordPress.

După ce ați intrat în Visual Builder, puteți face clic pe butonul plus gri pentru a adăuga un nou modul la pagina dvs. Modulele noi pot fi adăugate numai în rânduri. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi un rând la pagina dvs. Avem tutoriale minunate despre utilizarea elementelor liniei și secțiunii Divi.

Găsiți modulul magazin în lista de module și faceți clic pe acesta pentru a-l adăuga la pagina dvs. Lista modulelor poate fi căutată, ceea ce înseamnă că puteți, de asemenea, să tastați cuvântul „magazin” și apoi să faceți clic pe Enter pentru a căuta și adăuga automat modulul magazin! Odată adăugat modulul, veți fi întâmpinat de lista de opțiuni a modulului. Aceste opțiuni sunt separate în trei grupe principale: Conținut , Concepție et avansat .

Exemplu de caz de utilizare: prezentarea celor mai recente produse pe o pagină de pornire utilizând modulul Magazin

Pentru acest exemplu, voi folosi modulul magazin pentru a afișa cele mai recente produse pe o pagină de pornire.

Iată pagina cu cele patru produse prezentate.

Să începem.

Utilizați constructorul vizual pentru a adăuga o secțiune obișnuită cu un rând cu lățime completă (1 coloană). Schimbați parametrul rândului pentru a-l face lățime completă cu o lățime personalizată a jgheabului de 2.

Apoi adăugați un modul magazin la linie.

Actualizați setările modulului după cum urmează:

Opțiuni de conținut

Tip: produse recente
Număr de produse: 4

Opțiuni de proiectare

Pictogramă Hover Color: # ea1d63
Poliția Titlu: Deschis Fără
Dimensiune font Titlu: 24px
Premiul Poliției: deschis fără
Preț Dimensiunea fontului: 20px

Opțiuni avansate (CSS personalizate)

Titre:

text-align: centru;
fundal: #fff;
margin-top: -10px! semnificative;

Prix:

text-align: centru;
fundal: #fff;
tapițerie în jos: 15px;

Asta e tot! Iată rezultatul final.

Magazin opțiuni de conținut

În fila conținut, veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Toate acestea controlează ce apare în modulul dvs. va fi întotdeauna găsit în această filă.

Tip

Alegeți tipul de produse pe care doriți să le afișați în feedul de produse. Puteți alege dintre Produse recente, care vor afișa toate produsele dvs. în ordine cronologică, Produse recomandate, Produse de vânzare, Produse cele mai vândute sau Produse de top.

Număr de produse

Definiți numărul de produse pe care doriți să le afișați. Va trebui să aveți produse create pentru ca orice să apară în acest modul.

Includeți categorii

Alegeți categoriile pe care doriți să le includeți.

Numărul de coloane

Alegeți numărul de coloane de afișat în modulul magazinului dvs. 4 coloane ar trebui utilizate pentru un rând de 1 coloană. Trebuie folosite 3 coloane pentru o coloană care ocupă 3/4 din spațiul rândului. Coloana 2 trebuie utilizată pentru o coloană care ocupă 1/2 din spațiul luminii. O coloană trebuie utilizată pentru o coloană 1/4 din spațiul rândului.

Rearanjați prin

Alegeți cum doriți ca produsele dvs. să fie comandate. Alegeți să sortați în mod implicit Sortare, Popularitate, Evaluare, Data, Prețul de la cel mai mare la cel mai mic, Prețul de la cel mai mic la cel mai vechi, cel mai nou la cel mai recent.

Admin Label

Aceasta va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete apar în blocul de module din interfața Divi Builder.

Opțiuni de proiectare a atelierelor

În fila Proiectare, veți găsi toate opțiunile de stilare a modulului, cum ar fi fonturile, culorile, dimensionarea și spațiul. Aceasta este fila pe care o veți utiliza pentru a schimba aspectul modulului dvs. Fiecare modul Divi are o listă lungă de setări de proiectare pe care le puteți utiliza pentru a schimba orice.

Pictograma de suprapunere

Când plasați cursorul peste un articol din modulul Magazin, apare o pictogramă de suprapunere. Puteți regla culoarea utilizată pentru această pictogramă utilizând selectorul de culori din această setare.

Culoarea suprapunerii

Când plasați mouse-ul peste un articol din modulul Magazin, apare o culoare suprapusă în partea de sus a imaginii și sub textul și pictograma titlului magazinului. În mod implicit, se utilizează o culoare albă semitransparentă. Dacă doriți să utilizați o culoare diferită, puteți regla culoarea folosind selectorul de culori din această setare

Pictograma selectorului

Aici puteți alege o pictogramă personalizată pe care să o afișați atunci când un vizitator trece deasupra articolelor din magazin din modul.

Culoarea ecusonului de vânzare

Când un articol este în vânzare, pe imaginea produsului apare o insignă de vânzare. Cu această setare, puteți regla culoarea utilizată pentru fundalul insignei.

Fonturi de titlu

Puteți modifica fontul textului titlului selectând fontul dorit din meniul derulant. Divi oferă zeci de fonturi grozave oferite de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, italice, cu majuscule și cu subliniere.

Dimensiunea fontului titlului

Aici puteți regla dimensiunea textului din titlu. Puteți trage glisorul de raza de acțiune pentru a mări sau micșora dimensiunea textului sau introduceți direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoarea textului titlului

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului titlului dvs., alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor de titlu

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul titlului, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei de titlu

Înălțimea liniei afectează spațiul dintre fiecare linie a textului titlului dvs. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere situat în dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Politica prețurilor

Puteți modifica fontul textului prețului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, italice, cu majuscule și cu subliniere.

Preț Dimensiunea fontului

Aici puteți ajusta dimensiunea textului de preț. Puteți trage glisorul de gamă pentru a mări sau micșora dimensiunea textului sau a introduce direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsurare, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoarea textului de preț

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului de preț, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor de preț

Distanța dintre litere afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul prețului, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei de preț

Înălțimea rândului afectează spațiul dintre fiecare rând al textului dvs. de tarifare Dacă doriți să măriți spațiul dintre fiecare rând, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere situat în dreapta cursorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Opțiuni avansate ale magazinului

În fila avansată, veți găsi opțiuni pe care designerii web mai experimentați le-ar putea găsi utile, cum ar fi atributele CSS și HTML personalizate. Aici puteți aplica CSS personalizat oricăruia dintre numeroasele elemente ale modulului. De asemenea, puteți aplica clase și ID-uri CSS personalizate modulului, care pot fi utilizate pentru a personaliza modulul în fișierul style.css al temei copilului dvs.

Cod CSS

Introduceți un ID CSS opțional de utilizat pentru acest modul. Un ID poate fi folosit pentru a crea un stil CSS personalizat sau pentru a crea legături către anumite secțiuni ale paginii dvs.

CSS

Introduceți clasele CSS opționale de utilizat pentru acest modul. O clasă CSS poate fi utilizată pentru a crea un stil CSS personalizat. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi utilizate în tema copilului Divi sau în foaia de stil CSS personalizată pe care o adăugați la pagina dvs. sau la site-ul dvs. web utilizând opțiunile temei Divi sau setările paginii Divi Builder.

CSS personalizate

CSS personalizat poate fi, de asemenea, aplicat modulului și oricărui intern al modulului. În secțiunea CSS personalizată, veți găsi un câmp de text în care puteți adăuga foi de stil CSS personalizate direct la fiecare element. Intrările CSS din aceste setări sunt deja înfășurate în etichetele de stil. Deci, introduceți regulile CSS separate prin punct și virgulă.

vizibilitate

Această opțiune vă permite să controlați dispozitivele pe care apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, smartphone-uri sau desktop-uri. Acest lucru este util dacă doriți să utilizați moduri diferite pe diferite dispozitive sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente de pe pagină.

[vc_row center_row = "da"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DESCARCĂ TEMA DIVI [/ vcex_button] [/ width»_column_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right" =" TEMP D FA-DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Alte tutoriale Divi

• site-uri web 5 pentru utilizare restaurant tematic Divi
• Cum să adăugați text pe un produs Divi WooCommerce
• Modificarea culorii meniului între paginile Divi
• Cum să personalizați grilele unui blog cu Divi
• Cum de a utiliza rolul editor Divi pe WordPress
• Cum se creează un glisor Divi pe ecran complet
• Modificarea culorii meniurilor între paginile Divi
• Caracteristici pe care probabil nu le cunoașteți despre Divi
• Cum se utilizează Divi Builder pe WordPress
• Cum se utilizează modulul de defilare video Divi
• Cum se utilizează modulul Divi Builder Flip
• Cum să adăugați un modul de mărturie pe Divi Builder
• Cum se utilizează modulul de text Divi
• Cum se creează un slider pe Divi
• Cum se editează un rol de utilizator Divi
• Cum se utilizează modulul Divi Social Media
• Cum se utilizează modulul magazin pe tema WordPress Divi
• Cum se utilizează modulul bara laterală Divi
• Cum se utilizează modulul de prețuri pentru divi
• Cum se utilizează modulul de titlu al publicațiilor Divi
• Cum se adaugă un modul video de Divi
• Cum să utilizați modulul de navigare pentru articole
• Cum se utilizează modulul de căutare Divi
• Cum se utilizează modulul portofel Divi
• Cum se utilizează modulul persoană pe Divi Builder
• Cum se utilizează modulul portofel cu filtrul Divi
• Modul de utilizare a modulului glisant cu lățime întreagă
• Cum se utilizează modulul de imagine Divi Builder
• Modul de utilizare a modulelor de navigație full-width din Divi Builder
• Cum se utilizează modulul galerie de imagini
• Modul de utilizare a modulului de carduri cu dimensiuni multiple de la Divi Builder
• Cum să utilizați modulul de portofoliu Full Width Divi
• Cum se utilizează modulul antet de Divi pentru lățimea completă
• Cum se utilizează modulul Counter Modul Divi
• Cum se utilizează glisorul de articole pe Divi Builder
• Cum se utilizează modulul Divi Email Optin