homefinance blog
Divi Plugin Highlight – Divi Commerce
Pagina produsului standard WooCommerce 
Pagina tipică a produsului WooCommerce folosește editorul WordPress standard pentru a crea Descrierea produsului (informațiile care apar sub produs). Acesta este editorul standard WYSIWYG și puteți posta text, conținut media și cod la fel ca la orice postare sau pagină de blog. 
Scurta descriere a produsului folosește și un editor WordPress standard. Acesta este conținutul din partea de sus a paginii produsului, lângă imaginea produsului. Ambele zone pot fi stilizate folosind Divi Commerce. După cum vom vedea, putem construi descrierea produsului folosind Divi Builder și putem stiliza descrierea scurtă a produsului folosind personalizatorul temei.
Rezultatul tipic fără Divi Commerce este o pagină a produsului cu imagine, galerie, scurtă descriere cu preț, cantitate și butonul Adăugare la coș și o descriere mai lungă sub imaginile produsului. Mai întâi vreau să mă concentrez asupra acestei zone de descriere sub imaginile produsului. Conținutul din această zonă este creat folosind editorul standard WYSIWYG și poate folosi text, suport media, coduri scurte etc. Aș putea adăuga conținut aici pentru a crea o descriere mai interesantă. Pentru a face acest lucru, vreau să construiesc două pagini de produse ca exemple. Mai întâi le voi construi în editorul WYSIWYG și apoi din nou cu Divi Commerce. Pentru aceste exemple vreau să recreez câteva dintre aspectele de pe pagina produsului Divi.
Primul exemplu 
Aceasta face parte din pagina produsului Divi aici, pe site-ul web Elegant Themes. Vreau să recreez această porțiune a paginii în Descrierea produsului. Are doar un titlu, trei imagini și trei seturi de text. Imaginile sunt plasate lângă text, creând două coloane care alternează. Acest aspect ar trebui să fie suficient de ușor de creat. 
Iată conținutul editorului standard WordPress. Am plasat textul, am setat titlurile la antetul 3 și am setat imaginile la alinierea la dreapta sau la stânga. 
Acesta este rezultatul folosind un aspect cu lățime completă. Rezultatul nu face ceea ce am vrut. Desigur, știm motivul pentru asta. Doar plasarea spațiilor în editorul WYSIWYG nu va crea aspectul dorit. Trebuie să folosesc HTML sau un plugin pentru a crea aspectul, pentru a seta spațierea corect.
Fără HTML distanțarea devine un coșmar. Chiar și plasarea spațiilor suplimentare nu ajută. Cu HTML, aș putea crea acest aspect suficient de ușor și chiar să copiez și să lipesc codul pentru a-l reutiliza oricât de des mi-am dorit, dar acest lucru poate deveni plictisitor și aspectele chiar mai complexe pot consuma prea mult timp. Al doilea exemplu 
Pentru al doilea exemplu vreau să folosesc un aspect ca acesta din pagina produsului tematică Divi. Acesta este mult mai dificil de creat fără cod. Folosește un aspect cu trei coloane cu GIF-uri în centru. Fiecare secțiune de cod are propriul antet și textul nu este aliniat exact cu imaginile.
Puteți vedea deja problemele cu acesta. Nimic nu vrea să se alinieze corect. Am setat imaginea să se alinieze la stânga cu textul, dar apoi nu pot plasa textul în dreapta. Nu l-am setat la nicio aliniere și nu pot plasa imaginea pe aceeași linie ca textul. Acest lucru va necesita și mai mult cod. 
Nici nu m-am deranjat să termin adăugarea restului de text și imagini. Acest lucru va funcționa bine dacă doriți să stivați informațiile și imaginile, dar pentru a mișca lucrurile și a le alinia corect am nevoie de trei coloane. Am câteva opțiuni: pot codifica coloanele în HTML manual, sau pot folosi un plugin.
Din nou, acest aspect nu ar fi prea dificil de construit în HTML, dar o modalitate mai ușoară, mai rapidă și, în opinia mea, mult mai bună, de a face acest lucru este folosirea Divi Builder. Divi Builder are și mai multe avantaje, deoarece ne permite să creăm cu ușurință aspectul și să-l modificăm independent pentru desktop-uri, tablete și telefoane. Problema este că Divi Builder nu este disponibil pe paginile de produse WooCommerce, dar poate fi adăugat. Cel mai simplu mod de a-l adăuga este un plugin numit Divi Commerce. Acum să instalăm Divi Commerce și să reconstruim paginile de produs folosind Divi Builder.
Divi Commerce 
Instalați Divi Commerce încărcând fișierul zip la fel ca orice plugin. Odată instalat, nu este necesară configurarea. Divi Commerce adaugă Divi Builder la paginile de produse WooCommerce la fel ca orice pagină sau postare. Aceasta este zona care creează Descrierea produsului. Poate fi folosit în locul editorului WordPress standard, la fel ca în cazul paginilor și al postărilor. Acum putem folosi Divi Builder, completat cu fiecare modul, în descrierea produsului WooCommerce. 
Unele dintre paginile de produse pe care vreau să le creez vor fi pe ecran complet. Pentru a crea o pagină a produsului pe ecran complet, selectați aspectul paginii Lățime completă în Setările produsului Divi înainte de a selecta Utilizați Divi Builder .
Să revedem exemplele mele anterioare și să vedem cât de ușor sunt de făcut folosind Divi Commerce. Primul exemplu 
Folosind Divi Builder am creat un aspect rapid de alternare orizontală a textului și a imaginilor în două coloane folosind module de text și imagine și am adăugat imaginile și textul la fiecare dintre module. Am adăugat o marjă de 100 de pixeli la text pentru a centra alinierea textului cu centrul imaginilor. Aceasta este singura modificare pe care am făcut-o. 
Iată o captură pe ecran complet a rezultatului primei încercări. Sunt mulțumit de rezultat. Era suficient de aproape de aspectul original pentru a nu avea nevoie de modificări.
Al doilea exemplu 
Pentru al doilea exemplu, am creat un aspect rapid cu 3 coloane în Divi Builder. Pentru textul titlului am ales un aspect cu 3 coloane (folosind 1/4 1/2 1/4) și am setat umplutura de 50 de pixeli. Am adăugat apoi un al doilea rând și folosind 1/3 1/3 1/3 și am adăugat module de text în coloanele exterioare și un modul de imagine pentru coloana din mijloc. Pentru tot textul din laturi am setat umplutura de 30 pixeli la dreapta și la stânga și o marjă de 20 pentru partea de sus. Odată ce am configurat rândul așa cum am vrut, am clonat-o de trei ori și am adăugat conținut la fiecare modul.
Rezultatul a fost un aspect cu care m-am bucurat la prima încercare. Am setat-o pe lățime completă. Aș putea adăuga o umbră de imagine folosind CSS sau un plugin și aș putea face ajustări la dimensiunea textului, dar conceptul de aspect original este acolo. Nici nu a fost nevoie de o mulțime de ajustări. În doar două minute am creat un aspect cu Divi Builder care mi-ar fi trebuit mult mai mult să creez în HTML și pot adăuga acest aspect în biblioteca mea pentru a-l reutiliza sau distribui. Crearea unei pagini de produse personalizate 
În continuare vreau să creez câteva pagini personalizate. Pentru această primă pagină personalizată a produsului am vrut să folosesc caracteristicile de aspect ale Divi Builder, să adaug modulul magazin pentru a putea afișa produse prezentate sau noi (mai târziu vom vedea cum personalizatorul tematic vă permite să afișați produsele conexe utilizând modulul magazin) și creați câteva imagini personalizate pentru a profita de fundalurile de paralaxă. 
Iată aspectul cu modulul imagini, text și magazin. Pentru fundalul de paralaxă am creat o suprapunere albă cu o opacitate de 90%. Acesta folosește bara laterală dreaptă. Vom face câteva ajustări interesante la acest lucru folosind funcțiile Divi Commerce din personalizatorul de teme. Exemplul 2 
Iată un alt exemplu folosind o imagine, trei coloane de text, două imagini una lângă alta, o altă imagine și modulul magazin într-un aspect cu mai multe coloane. 
Rezultatul este un aspect curat care spune povestea despre produs. De data aceasta am adăugat text peste imagine pentru a evidenția o caracteristică. Putem personaliza aspectele și mai mult folosind funcțiile Divi Commerce care sunt adăugate la personalizatorul temei. Personalizator Divi Paginile de produse WooCommerce pot fi personalizate și mai mult folosind Divi Customizer. Personalizatorul va modifica, de asemenea, formularele WooCommerce și ecranul de conectare. Pluginul adaugă o filă nouă personalizatorului de teme cu categoriile:
- Secțiuni
- Bazele produsului
- Opțiuni avansate
- Stilul formularelor WooCommerce
- Opțiuni de autentificare și înregistrare
- Personalizator de file
Acest lucru adaugă o mulțime de funcții de personalizare la Divi Commerce. Personalizările sunt globale pentru toate paginile de produse, astfel încât ceea ce modificați în personalizatorul pentru o pagină de produs afectează fiecare pagină de produs. Iată o privire la fiecare dintre personalizări și câteva exemple de utilizare a acestora. Secțiuni 
Fila Secțiuni include 14 setări. Puteți selecta aspectele pe care le-ați creat (acestea sunt pagini, astfel încât să puteți utiliza orice, de la un singur modul până la un aspect complet al paginii) și să le afișați ca sus și jos personalizate, să afișați produsele conexe (atunci când utilizați modulul magazin), imagine implicită, titlu implicit, pesmet, preț implicit, buton implicit, cantitate implicită, file, meta date despre produs și afișați informațiile din dreapta. Am plasat un top și un fund personalizat (deși nu puteți vedea partea de jos în această imagine) în acest exemplu. Acestea funcționează bine pentru zonele de antet și subsol personalizate suplimentare din conținut. Bazele produsului 
În fila Elementele de bază ale produsului există 39 de setări pentru ajustarea dimensiunilor fontului și a chenarului, culorilor, greutăților, căptușelii, culorilor cu mouse-ul și multe altele. Aici puteți personaliza descrierea scurtă a produsului (așa cum se vede în imaginea de mai sus). Personalizările includ culoarea de fundal, lățimea și culoarea chenarului, căptușeala, dimensiunea fontului titlului, greutatea, carcasa și culoarea și chiar lățimea și culoarea marginii principale a imaginii. Opțiuni avansate 
Opțiunile avansate includ 13 ajustări care vă permit să afișați sau să ascundeți butonul Adăugați în coș pe paginile Magazin, Modul magazin și Categorie. De asemenea, puteți elimina câmpuri precum prenumele, prenumele, orașul, notele etc. din pagina de plată. Stilul formularelor WooCommerce 
Stilul WooCommerce Forms are instrumentele pentru a stiliza formularele WooCommerce. Stilizați-le alegând culori, definind dimensiunile fontului, lățimea chenarului, stilul și culoarea, umplutura, culorile butoanelor, culorile plutitoare etc., din selectorii de culori, casetele derulante sau introducerea informațiilor în câmpuri. Are 22 de ajustări. În acest exemplu, am stilat formularul cu un fundal bronzat, o margine neagră cu o lățime de 1 pixel și un text substituent roșu. De asemenea, am adăugat câteva umpluturi și am selectat stilul de margine Groove . Opțiuni de autentificare și înregistrare 
Opțiunile de conectare și înregistrare au 23 de ajustări pentru culorile de fundal ale formularului, culorile și lățimile chenarului, culorile și dimensiunile fontului etc. După cum puteți vedea în imaginea de mai sus, va trebui să efectuați această ajustare diferit de celelalte. Există, de asemenea, un stil disponibil pentru Tabloul de bord al contului, care va fi disponibil până la momentul citirii acestuia. 
Nu am putut personaliza ecranul de conectare cu afișarea formularului de conectare. Pentru aceasta ar trebui să mă deconectez și, dacă sunt deconectat, nu pot folosi personalizatorul. Nu este vina Divi Commerce sau Divi. Acesta este doar modul în care funcționează WordPress. Deși am reușit să trișez, păstrând o pagină incognito deschisă în Google Chrome (așa că pot fi conectat și nu conectat în același timp), afișând formularul. Am făcut o ajustare, am salvat-o și am reîncărcat pagina incognito pentru a vedea modificările. Puteți vedea în cele două imagini de mai sus cum arată ajustările pe formulare. Deoarece aceasta este o pagină WooCommerce, o puteți stiliza folosind Divi Builder și puteți utiliza acest instrument de personalizare pentru a stiliza formularele care se potrivesc. Personalizator de file 
Customizerul Tabs are 16 comenzi și, în opinia mea, sunt unele dintre cele mai interesante caracteristici. Aici puteți regla culorile și fonturile filelor. Funcția mea preferată este că puteți face zona de descriere pe toată lățimea, astfel încât aceasta să umple zona de conținut, oferindu-vă o descriere pe toată lățimea chiar și într-un aspect care utilizează o bară laterală. De asemenea, puteți ajusta marginile și umplutura, puteți ascunde antetul sau puteți elimina umplutura din antet. În exemplul de mai sus am făcut descrierea pe toată lățimea și am personalizat culorile pentru filele și fonturile sale. Exemple Iată o privire asupra fiecăruia dintre exemplele mele originale după ce am făcut câteva ajustări în personalizator. 
Acesta folosește aspectele personalizate de sus și de jos. Partea de sus folosește o imagine într-o secțiune cu un modul text. Partea de jos este un modul de magazin cu un fundal stilizat. Am folosit personalizatorul pentru a afișa produsele conexe în modulul magazin. De asemenea, am stilat filele pentru a se potrivi cu brandul Elegant Themes. Acesta folosește un aspect pe ecran complet. Această pagină abia seamănă cu o pagină de produs WooCommerce. 
Iată unul dintre exemplele originale cu secțiunile de sus și de jos personalizate adăugate. De asemenea, afișează filele personalizate și are produse conexe în modulul Magazin WooCommerce. 
Am setat zona de descriere pe lățime completă în personalizator. Pagina de paralaxă pe care am realizat-o mai devreme a oferit mai multe oportunități de aspect, așa că am plasat prima imagine și textul unul lângă altul și am adăugat câteva umpluturi pentru a obține spațiul dorit. Mi se pare mai interesant din punct de vedere vizual decât originalul. Actualizări, documentație, licență și asistență Divi Commerce include actualizări gratuite pe toată durata vieții. Actualizările se fac automat prin intermediul ecranului tabloului de bord al pluginului. Documentația este furnizată pe site-ul lor web și acoperă instalarea, modul de utilizare a pluginului (include un tutorial video), un scurt FAQ, jurnalul de schimbări, lista problemelor cunoscute cu soluții și un formular de contact pentru pre-vânzare sau întrebări generale. În curând, vor avea machete descărcabile pe care le puteți utiliza în paginile dvs. de produse. Acordul de licență permite pluginului să fie utilizat pe site-uri web nelimitate pentru dvs. și clienții dvs. Asistența pe viață este oferită prin e-mail. Ei vă cer să citiți documentația înainte de a solicita asistență. Gânduri finale Divi este o temă excelentă de utilizat cu WooCommerce, dar paginile standard ale produselor, formularele de cont și formularele de autentificare nu sunt personalizabile cu Divi scoase din cutie. Divi Commerce rezolvă această problemă plasând Divi Builder pe paginile produsului și adăugând mai multe file noi în Customizerul tematic. Divi Commerce este ușor de utilizat. Opțiunile de personalizare sunt etichetate bine și nu necesită cunoștințe speciale în afara utilizării personalizatorului standard Divi. Documentația este disponibilă dacă doriți. Divi Commerce este un instrument excelent pentru a vă stiliza paginile și formularele de produse WooCommerce pentru a se potrivi cu brandingul dvs. Ați folosit Divi Commerce? Spuneți-ne despre experiența dvs. în comentariile de mai jos! Imagine de Studio_G / shutterstock.com.