Evidențierea pluginului Divi: Modulul Carusel Divi

Publicat: 2023-01-23

Divi Carousel Module este un modul terță parte pentru Divi care creează carusele interesante. Sunt grozave pentru imagini, produse, mărturii, membri ai echipei și multe altele. Modulul include o mulțime de elemente de design care îl fac să iasă în evidență. Din fericire, nu este greu de folosit. În această postare, ne vom uita la Modulul Carousel Divi, vom vedea ce poate face și vom vedea cât de ușor este de utilizat pentru a vă ajuta să decideți dacă acesta este produsul potrivit pentru nevoile dvs. Pachetul Divi Architect Layout va fi fundalul tutorialului nostru.

Noul modul Divi Carusel

Modulul Divi Carousel adaugă un nou modul la Divi Builder. Adăugați modulul la orice aspect Divi în același mod ca orice modul Divi.

Noul modul Divi Carusel

Diapozitive pentru modulul carusel Divi

Fiecare diapozitiv din Modulul Carusel Divi afișează diapozitive ca submodule care sunt adăugate în modulul principal. Diapozitivele pot fi stilate independent sau pot folosi stilul modulului principal. Pentru a adăuga un nou diapozitiv, faceți clic pe Adăugare element nou.

Diapozitive pentru modulul carusel Divi

Adăugați câte doriți. Puteți seta numărul pe care caruselul îl va afișa pe ecran pentru fiecare tip de dispozitiv în setările modulului, astfel încât numărul pe care îl adăugați să nu afecteze designul. Submodulele includ toate setările standard Divi și câteva setări unice. Iată o privire asupra setărilor unice pentru submodul.

Conținut principal

Când adăugați un diapozitiv, acesta se deschide pentru a afișa setările. Zona principală de conținut include titlul, subtitrarea și conținutul corpului. Utilizați oricare sau tot acest conținut pe care îl doriți. Puteți stila aceste elemente individual în fila Design.

Diapozitive pentru modulul carusel Divi

Link pentru titlu și imagine

Adăugați adresa URL și alegeți dacă se deschide într-o fereastră nouă. Acest link se aplică atât titlului, cât și imaginii, așa că funcționează în continuare chiar dacă utilizați doar unul dintre cele două elemente.

Diapozitive pentru modulul carusel Divi

Setări butoane

Acest lucru adaugă un buton la diapozitiv. Adăugați textul, adresa URL și alegeți cum se deschide. Puteți stila butonul în fila Design.

Diapozitive pentru modulul carusel Divi

Setări imagine

Aici, puteți alege să utilizați o imagine sau o pictogramă. O imagine este setarea implicită. Include selectorul de imagini, textul alternativ și dacă se deschide într-o casetă lightbox. Imaginea este plasată deasupra titlului în mod implicit, dar puteți schimba cu ușurință acest lucru dacă doriți.

Diapozitive pentru modulul carusel Divi

Selectarea Utilizare pictogramă oferă un selector de pictograme. Pictograma înlocuiește imaginea. Poate fi stilat și în setările Design.

Diapozitive pentru modulul Carusel Divi

Meta

Aceasta include două opțiuni între care puteți alege. Puteți alege doar una dintre cele două opțiuni. Prima opțiune este Utilizarea rețelelor sociale. Activarea acestui lucru deschide câmpurile pentru a introduce adresele URL pentru patru rețele de socializare și adresa de e-mail.

Carusel Meta: Folosiți pictogramele Social Media

A doua opțiune este Utilizați evaluarea. Se deschide o casetă derulantă în care puteți alege o evaluare de la unu la cinci. Afișează ratingul ca stele.

Carusel Meta: Utilizați evaluările

Setări de proiectare a submodulului

Setările de design ale submodulului includ stilurile de imagine, filtrul de imagine și stilurile pentru titlu, subtitrare, conținut, buton, rețele sociale și evaluare. Dacă ați selectat o pictogramă în locul imaginii, veți vedea setările pictogramei pentru a-i schimba culoarea, pentru a adăuga un cerc, pentru a-i schimba dimensiunea și pentru a-i ajusta alinierea. În exemplul de mai jos, am mutat imaginea în centrul diapozitivului selectând În interiorul conținutului din caseta derulantă Poziția imaginii.

Stilizarea imaginilor cu setări de poziție a imaginii

Setări modul principal

Setările modulului principal includ detaliile glisorului, precum și setările standard Divi. Să ne uităm mai atent la setările glisorului.

Setări modul principal

Setări glisor

Setările cursorului includ controlul lățimii, numărul de diapozitive de afișat pe fiecare dintre tipurile de dispozitiv, diapozitiv multiplu, durată, buclă, redare automată, navigare cu săgeți și puncte, spațiere, încărcare leneșă, navigare hash și multe altele. Este interesant de văzut numărul de articole pentru diferite dispozitive. Un punct despre numărul pe care îl introduceți în aceste câmpuri este că nu trebuie să fie numere întregi. Puteți afișa o jumătate de diapozitiv dacă doriți. Doar introduceți numărul ca zecimală și experimentați până când diapozitivele se afișează așa cum doriți.

Setări glisor

Acest exemplu arată că am adăugat câteva săgeți de navigare. De asemenea, am schimbat modul în care elementele individuale din carusel apar pe desktop, tabletă și mobil. Pe lângă cele de mai sus, am adăugat și o funcție de buclă la modul.

Un exemplu de setări de glisor

Setări avansate de glisare

Setările avansate vă permit să alegeți efectul glisor. Alegeți între Default și Coverflow. Setarea implicită afișează diapozitivele în mod normal, cu fiecare card în fața utilizatorului.

Setări avansate pentru glisor implicit

Coverflow afișează cardurile înclinate în 3D. Alegerea Coverflow adaugă Rotire, care ajustează cantitatea de rotire a fiecărei cărți în 3D și Shadow, care adaugă efectului 3D prin umbrire. Cărțile arată o animație pe măsură ce se derulează la locul lor în carusel.

Setări avansate pentru slider Stil de acoperire

Setări de proiectare a modulului principal

Setările de proiectare ale modulului principal includ suprapunerea imaginii, alinierea, lățimea, chenarul și umbra casetei. Include, de asemenea, setări pentru textul titlului, textul subtitrarilor, textul corpului, butoanele următoare și precedente, culoarea de navigare, indexul z pentru imagine, spațierea personalizată pentru fiecare element și setările standard Divi. Am ajustat multe dintre setările din exemplul de mai jos.

Design Carusel actualizat

Săgețile Next și Previous includ mai multe opțiuni de poziție. Puteți ajusta culoarea pictogramelor și fundalurilor și puteți alege pictograme personalizate pentru linkurile anterioare și următoare în mod independent. De asemenea, puteți ajusta culorile de navigare prin puncte.

Stil pentru butoanele următoare, precedente și navigare prin puncte

Modulul Carusel Divi are o cantitate impresionantă de opțiuni de spațiere personalizate. Adăugați marjă și umplutură la fiecare element atât pentru container, cât și pentru conținut, în mod independent. Am adăugat umplutură la câteva dintre elementele din exemplul de mai jos.

Setări de spațiere adâncă disponibile

Folosind Modulul Carusel Divi

Modulul Divi Carousel este excelent pentru afișarea multor lucruri, inclusiv produse, membri ai echipei, postări și pagini personalizate pe blog, servicii, imagini, mărturii, un portofoliu, sigle ale companiei și multe altele. Site-ul web al editorului include o mulțime de șabloane descărcabile pentru a începe. Sunt disponibile ca fișiere JSON. Încărcați-le în biblioteca dvs. Divi și utilizați-le pe orice șablon, pagină sau postare. Să ne uităm la câteva dintre ele. Voi descrie setările lor principale pe măsură ce mergem.

Conținutul modulului Carusel Divi Carusel 02_05

Carusel de conținut 02_05 include imagini mari și stilează cardurile în mod independent pentru a crea un design alternativ cu imaginea de sus sau de jos. Afișează trei diapozitive simultan pe computere desktop, 2 pe tablete și 1 pe telefoane. Le alunecă automat în fiecare secundă și se face bucle.

Folosind Modulul Carusel Divi

Divi Carusel Modul Marturie Carusel 01_07

Testimonial Carusel 01_07 afișează două diapozitive pe desktop și un diapozitiv pe tablete și telefoane. Include săgeți centrate și navigare prin puncte. Diapozitivele plasează imaginile la stânga și includ un gradient în spatele textului. Pictogramele citate sunt imagini adăugate pe fundal.

Folosind Modulul Carusel Divi

Modul Carusel Divi Team Carusel 01_05

Team Carousel 01_05 afișează trei diapozitive pe desktop, două pe tablete și una pe telefoane. Slide-urile au un design unic cu pictograme sociale plasate în partea de jos. Fundalul zonei principale de conținut alternează între alb și negru. Săgețile și punctele sunt verzi. Imaginile folosesc colțuri rotunjite și includ un chenar de 4 px pentru a le face încercuite.

Folosind Modulul Carusel Divi

Modul Carusel Divi Image Carusel 01_02

Image Carusel 01_02 afișează 3,5 elemente pe desktop și centrează diapozitivele pentru a crea designul care arată parțial imagini pe părțile laterale ale ecranului. Tabletele afișează 3 și telefoane afișaj 1. Include navigare cu săgeți, iar diapozitivele sunt setate în buclă, astfel încât utilizatorul nu trebuie să schimbe niciodată direcțiile pentru a vedea toate diapozitivele. Colțurile rotunjite conferă imaginilor un design elegant.

Folosind Modulul Carusel Divi

Achiziționați modulul Carusel Divi

Modulul Divi Carousel este disponibil pe Divi Marketplace pentru 29 USD. Include utilizare nelimitată, o garanție de rambursare a banilor de 30 de zile și un an de asistență și actualizări.

Achiziționați modulul Carusel Divi

Gânduri de sfârșit

Acesta este aspectul nostru asupra Divi Carousel Module. Modulul are o mulțime de caracteristici. Fiecare element poate fi stilat și ajustat independent, oferindu-vă o mulțime de posibilități de design. Am găsit că toate setările sunt intuitive, așa că m-am simțit ca acasă în Divi Builder. Dacă sunteți interesat de un modul carusel cu o mulțime de funcții, Modulul Carusel Divi merită să vă uitați.

Vrem sa auzim de la tine. Ați încercat Divi Carousel Module? Spune-ne în comentarii ce părere ai despre asta.