Divi Plugin Highlight: Divi Product Carousel Module

Divi Product Carousel Module este un plugin terță parte pentru Divi care afișează produsele WooCommerce într-un glisor de carusel. Construiți un carusel de produse și plasați-l în orice aspect Divi. Le puteți stiliza și alege mai multe opțiuni de aspect și afișare. În acest articol, vom analiza modulul Carusel de produse Divi, vom vedea caracteristicile acestuia și vom vedea cât de ușor este de utilizat.

Divi Product Carousel Module este disponibil de pe site-ul dezvoltatorului și de pe piețele Divi.

Modulul Carusel produs Divi

După ce încărcați și activați pluginul, accesați DiviGear din meniul tabloului de bord și activați licența. Dacă aveți mai multe pluginuri de la acest dezvoltator, va trebui să selectați fila pluginului.

Un nou modul este adăugat la Divi Builder numit Carusel de produse. Include o pictogramă violet, astfel încât să iasă din mulțime.

Setările includ file Conținut, Design și Advanced. Fila Conținut are setări pentru conținutul WooCommerce. Alegeți tipul de produs din recent, prezentat, vânzare, cel mai bine vândut, cel mai bine cotat sau categoria de produse din caseta drop-down. Introduceți un număr pentru numărul de produse pe care doriți să îl afișați. Alegeți ordinea de sortare din popularitate, evaluare, dată sau preț. De asemenea, puteți activa butonul și descrierea Adăugați în coș. Afișează descrierea completă sau un extras.

Setările Carusel vă permit să alegeți numărul de coloane în funcție de dispozitivul utilizat. Include, de asemenea, multi-glisare (permiteți-l să alunece după numărul de diapozitive de pe ecran sau dezactivați-l pentru a glisa câte un diapozitiv la un moment dat), spațiere articol, durată de tranziție, centru, buclă, redare automată, navigare punct și săgeată, aliniere și efect de alunecare. Alte setări includ linkul și fundalul. Este interesant că puteți folosi punctele și săgețile împreună. Puteți plasa punctele în dreapta, în mijloc sau în stânga în partea de jos a diapozitivului.

Fila Proiectare include setări pentru suprapunere, titlu, preț, descriere, insignă de vânzare, buton adăugare în coș, recenzie, săgeată, puncte, imagine, deplasare, spațiere, margine și umbră casetă. Alte setări sunt adăugate pe baza selecțiilor pe care le alegeți. Fiecare dintre aceste setări este extinsă.

Fila Avansat include caracteristicile CSS, vizibilitate și tranziții așteptate. CSS personalizat include câmpuri pentru produs, imagine, titlu, preț, săgeată insignă de vânzare anterioară, săgeată următoare și puncte. Acest lucru vă oferă mult control cu ​​CSS.

Setările modulului pentru caruselul produsului Divi

Puteți muta titlurile și prețurile în partea de sus sau de jos. În acest exemplu, m-am mutat atât în ​​partea de sus, cât și le-am schimbat dimensiunea și culoarea. Am stilizat insigna de vânzare schimbând culoarea de fundal și dimensiunea fontului. De asemenea, am stilat punctele inactive și active.

Iată cum arată în partea din față. Am adăugat, de asemenea, o suprapunere și butonul Adăugare la coș apare pe cursor. Puteți stiliza acest buton atât pentru trecerea la suprapunere, cât și pentru trecerea la buton.

În aceasta, am selectat 6 coloane, am mutat tot textul înapoi în partea de jos, am ajustat culorile textului și am adăugat o oarecare opacitate la butonul Adăugare la coș. Am lăsat opacitatea hover în mod implicit, astfel încât butonul este solid dacă treceți deasupra butonului în sine.

Pentru aceasta, am setat aspectul la 4 coloane. Am adăugat săgeți și am schimbat culorile săgeților și punctelor. De asemenea, am adăugat un fundal la titlu, preț și descriere și am schimbat tot textul în alb. Pentru a alinia textul bine în interiorul casetei, am adăugat câteva umpluturi de conținut. De asemenea, include umplutura de conținut pentru partea de sus (în cazul în care plasați titlul sau prețul deasupra imaginii).

Iată cum arată în partea din față. Săgeata din dreapta este mai ușoară pentru a indica faptul că se află la sfârșitul produselor pe care le poate afișa. Dacă l-aș seta în buclă, ar fi culoarea normală.

Iată cum arată cu Overflow selectat. Oferă un efect frumos de card 3D. Puteți regla cantitatea de rotație și puteți activa umbra de diapozitive.

În acest exemplu, am dat cărților o umbră de cutie și am ajustat neclaritatea. De asemenea, am schimbat săgețile într-un cerc și am ajustat culorile.

Iată cum arată în partea frontală cu diapozitivul central activat. Acesta este aspectul cu 4 coloane. Se afișează diferit atunci când selectați Slide centrale.

Acesta este aspectul cu 5 coloane utilizând aceleași setări ca exemplul de mai sus.

Caruselul produsului se potrivește bine în aspectele Divi. În acest exemplu, am înlocuit modulul magazin Divi cu modulul Carusel Divi pentru produs și l-am proiectat pentru a se potrivi cu aspectul.

În aceasta, am mutat titlul în partea de sus, am adăugat câteva căptușeli în partea de sus și de jos și am făcut titlurile semi-îndrăznețe. De asemenea, am schimbat culoarea butonului Adaugă în coș pentru a se potrivi cu aspectul.

Pentru aceasta, am ajustat marginile pentru diapozitive și imagini pentru a crea colțuri rotunjite. Am mers înainte și am transformat imaginile în cercuri. Am adăugat și o umbră de cutie.

Arată excelent în aspect. Totuși, ascunde cea mai mare parte a insignei de vânzare. Probabil că există o cale de a evita acest lucru cu CSS.

Acesta folosește Overflow cu aspectul cu 3 coloane.

Pentru aceasta, am eliminat marginea imaginii, dar am păstrat marginea pentru diapozitive. Am adăugat o umbră de cutie și i-am reglat puterea și poziția.

De asemenea, arată ratingul de stele din recenziile de pe hover. Acesta plasează evaluarea lângă butonul Adăugare la coș. Îi aduce împreună cu o animație grozavă. Aceasta este setările implicite. Puteți stiliza culorile fundalului și ale stelelor.

În aceasta, am stilat evaluările pentru a se potrivi elementelor din aspect.

Pentru aceasta, am mutat prețul în partea de sus și titlul în partea de jos. Am adăugat o descriere și o suprapunere. Am mutat navigarea cu puncte spre dreapta. A trebuit să adaug niște căptușeală pentru ca umbra cutiei să fie afișată pe laturi. Fără căptușeală, acesta plasează produsul la marginea spațiului modulului.

Demonstrații pentru modulul caruselului produsului Divi

În prezent, există 13 demonstrații descărcabile pe site-ul dezvoltatorului. Acestea sunt aspecte pe care le puteți încărca în biblioteca Divi și le puteți utiliza cu orice aspect Divi. Toate includ styling pentru modulul Divi Product Carousel, iar unele includ alte module și fundaluri. Acestea sunt bune pentru a obține un punct de plecare cu modelele dvs. de carusel de produse și pentru a arăta câteva dintre lucrurile care pot fi realizate cu modulul. Să ne uităm la câteva dintre ele.

Acesta plasează titlurile în partea de sus, stilurile în sus și în jos pentru a se potrivi, adaugă săgeți în cerc în afara imaginilor și include puncte. De asemenea, are o margine inferioară pentru a face diapozitivele să iasă în evidență. Îmi plac culorile îndrăznețe. Partea de sus și partea de jos au un pic de transparență, astfel încât modelele de fundal să se afișeze. Acest aspect include un modul de text stilizat pentru titlu.

Mai multe dintre machete includ alte module cu stil. Acesta folosește un aspect cu două coloane pentru a adăuga un apel la acțiune utilizând module de text și butoane.

Iată cum arată din partea frontală. Include o margine, titluri în partea de sus și două culori pentru butonul Adaugă în coș. Săgețile sunt afișate în imaginile modulului.

Acesta include un fundal verde și diapozitive stilizate pentru a se potrivi. Butonul Adăugare la coș este verde deschis când treceți peste produs și apoi verde închis când treceți deasupra butonului. Acesta include un modul de text stilizat pentru titlu.

Acesta include un stil albastru pentru ecusoane de vânzare, săgeți rotunde în afara imaginilor și butonul Adaugă în coș. Se adaugă o margine mică la diapozitive. Afișează diapozitivele cu efectul Overflow.

Acesta afișează, de asemenea, produse cu efect Overflow. De asemenea, folosește albastru pentru săgeți și butonul Adaugă în coș. Titlul este mutat în partea de sus. Suprapunerea este albă, cu o opacitate ridicată, iar insigna de vânzare este roșie.

Acesta include un fundal stilizat și adaugă un chenar, butonul Adaugă în coș, insigna de vânzare și săgețile încercuite. Suprapunerea este albă. Acesta plasează prețul în partea de sus și toate celelalte date în partea de jos.

Preț și documentație pentru modulul Carusel al produsului Divi

Există două opțiuni de achiziție pentru modulul Carusel Divi pentru produs:

• Site unic - 19 USD
• Site-uri nelimitate - 39 USD

Este disponibil de pe site-ul dezvoltatorului și de pe piețe.

Documentația este furnizată de un videoclip YouTube care vă prezintă caracteristicile. Veți găsi un link către acesta în meniul DiviGear din tabloul de bord. Dacă aveți mai multe produse DiviGear, selectați fila produsului, apoi selectați Documentație.

Gânduri de sfârșit

Caruselul de produse Divi este ușor de utilizat și este minunat pentru a vă face produsele să iasă în evidență. Chiar dacă nu doriți să le afișați ca un glisor, acesta are o mulțime de stiluri și opțiuni de prezentare a produsului pentru a face acest lucru demn de luat în considerare. Nu am lucrat atât de bine cu Extra. Mi-ar plăcea să văd suportul Extra, deoarece are deja multe funcții WooCommerce și este o platformă excelentă pentru construirea magazinelor WooCommerce.

Îmi place că are demo-uri descărcabile. Acestea includ fundalurile și stilul modulului. Acestea sunt excelente pentru a vă oferi un punct de plecare sau pentru a vă stârni imaginația pentru a vă prezenta produsele WooCommerce în aspectele dvs. Divi.

Dacă sunteți interesat să vă prezentați produsele WooCommerce într-un carusel sau pur și simplu să aveți câteva opțiuni de design, modulul Divi Carousel Product merită o privire. Este disponibil de pe site-ul dezvoltatorului și pe piețele Divi.

Vrem sa auzim de la tine. Ați încercat modulul Carusel Divi pentru produse? Spuneți-ne ce părere aveți despre asta în comentarii.

Imagine prezentată Letters-Shmetters / shutterstock.com