Tot ce trebuie să știți despre modulul Grupului Divi 5

Unul dintre cele mai recente module ale Divi 5, grupul de grup, este aici pentru a facilita crearea de caruseluri și animații uimitoare vizual pentru site -ul dvs. Divi. Această adăugare puternică permite proiectanților web să creeze caruseluri de site-uri interesate fără a avea nevoie de pluginuri terțe sau CSS personalizate. Indiferent dacă construiți un portofoliu elegant, un magazin de comerț electronic sau un blog, modulul de carusel de grup deblochează noi niveluri de creativitate.

În această postare, vom acoperi tot ce trebuie să știți despre modulul de carusel de grup, completat cu exemple și un ghid pas cu pas despre cum să îl utilizați. Hai să ne scufundăm!

Care este modulul de carusel de grup?

Modulul de carusel de grup din DIVI 5 vă permite să creați caruseluri și glisoare dinamice, atrăgătoare, care pot adăuga un pic de mișcare și interactivitate pe site-ul dvs. web. Indiferent dacă prezentați piese de portofoliu, membri ai echipei sau produse, acest modul versatil vă permite să construiți practic orice tip de carusel, inclusiv cele poștale care trag conținut dinamic.

Fiecare diapozitiv este o pânză goală, permițându -vă să adăugați orice modul Divi, ceea ce îl face un instrument excelent pentru proiectele creative și funcționale.

Caracteristici cheie

Modulul de carusel de grup este construit pe fundația optimizată a Divi 5, asigurând timpi de încărcare rapidă și tranziții netede. Interfața drag-and-drop a Divi 5 vă permite să adăugați cu ușurință module la glisoare, cu controale receptive la machete de reglare fină pentru desktop, tabletă și mobil, menținând în același timp performanțe rapide.

Diapozitive personalizabile

Modulul Grup Carusel oferă un control complet asupra numărului de glisoare, conținutul lor și setările de animație. Puteți ajusta tranzițiile de diapozitive, sincronizarea și opțiunile de navigare pentru a crea o experiență de utilizator fără probleme care să se potrivească viziunii dvs.

Conținut dinamic cu bucla constructor

Integrat cu Divi 5's Loop Builder, modulul acceptă caruseluri dinamice bazate pe postări, termeni sau date utilizator. De exemplu, puteți crea un carusel de mărturie folosind tipuri de posturi personalizate și câmpuri personalizate avansate (ACF), trăgând automat recenzii ale clienților sau studii de caz fără a avea nevoie de actualizări manuale.

Flexibilitatea proiectării

Puteți folosi setările de design Divi 5 pentru a construi stiluri unice de carusel. Aplicați transformările, filtrele, umbrele de cutie sau efectele de plutire pe diapozitive și personalizați module individuale din cadrul grupului pentru a crea diapozitive atrăgătoare vizual care vă mențin vizitatorii angajați.

Cum se utilizează modulul de carusel de grup

Configurarea unui carusel de grup în Divi 5 este intuitivă și flexibilă. Începeți prin a adăuga un rând cu o singură coloană la pagină. Apoi, selectați modulul de carusel de grup din Visual Builder și adăugați -l pe pagina dvs.

În fila Conținut , faceți clic pentru a extinde meniul derulant Setări Carusel .

Activați rotația automată , modul central și setați diapozitivele să se prezinte la 3 .

Activați Afișarea Navigării Dot în meniul derulant Elements. Puteți lăsa săgeți Activat sau dezactivat.

Alocați stilul primului grup

Cu setările caruselului nostru în loc, putem adăuga primul nostru grup. Faceți clic pe pictograma Grup Setări pentru a aduce setările.

În fila Conținut , extindeți meniul derulant de fundal . Faceți clic pe fila Imagine de fundal, apoi faceți clic pe +Adăugați imagine de fundal pentru a adăuga o imagine în grup.

Apoi, navigați la fila Design . Extindeți meniul derulant al aspectului și setați Conținutul justificați pentru a se încheia .

În continuare, extindeți meniul derulant de distanțare și adăugați o marjă de 5% la stânga și dreapta grupului nostru. Acest lucru va adăuga o cameră de respirație între grupuri din carusel.

Setați căptușeala de sus la 100%. Aplicați căptușeala de 25px la stânga și dreapta.

Adăugați conținut la primul grup

Ne putem îndrepta atenția către adăugarea de conținut în grupul nostru. Faceți clic pe pictograma Black + și adăugați un modul divizor .

Navigați la fila Design . Extindeți meniul derulant Line și schimbați culoarea în #FFFFFFF .

În continuare, extindeți fila de dimensionare. Setați greutatea divizorului la 4px și lățimea la 15% .

Apoi, adăugați un modul de rubrică la grup. Dați titlul .

Treceți la fila Design . În textul de rubrică , setați nivelul de rubrică la H2 (sau orice alt titlu pe care doriți) , selectați Inter pentru fontul de rubrică , alegeți lumină pentru greutatea fontului, #ffffff pentru culoarea textului de rubrică și 2EM pentru dimensiunea textului .

Înainte de a duplica grupul nostru, să revenim la fila Design și să reglăm decalajul vertical la 10px. Acest lucru va elimina orice spațiu vertical inutil între module.

Adăugând grupuri suplimentare

Acum că primul nostru grup este conceput, putem copia grupul stilat și pur și simplu schimbăm conținutul nostru (imagine de fundal și titlu) pentru carusel. Duplicați grupul de opt ori și vom avea nouă diapozitive în total.

După duplicarea grupului, caruselul dvs. de grup ar trebui să arate așa.

În timp ce suntem aici, este o idee bună să oferiți fiecărui grup un nume unic, astfel încât să fie mai ușor de identificat. Faceți clic pe pictograma setărilor primului grup și derulați în jos pe eticheta de administrare . Numiți grupul Grecia.

Faceți clic pe grupul 2 din carusel. Extindeți fila de fundal și înlocuiți imaginea cu una nouă.

În timp ce vă aflați în fila Conținut , nu uitați să adăugați un nume în câmpul Etichetă Admin . Apoi, schimbați titlul modulului de rubrică în Maine .

Repetați pașii cu toate grupurile suplimentare. Când ați terminat, caruselul dvs. ar trebui să arate așa. În timp ce vă aflați în Visual Builder, puteți utiliza punctele de navigare pentru a parcurge caruselul pentru a vă asigura că nu ați ratat niciun pași.

După cum puteți vedea, textul de pe unele dintre diapozitivele noastre este oarecum greu de citit. Putem corecta acest lucru în fila Design la nivelul caruselului, fără a fi nevoie să editați fiecare articol de grup individual.

Personalizarea grupurilor și grupurilor active

În modulul de carusel de grup, puteți stiliza grupuri active și inactive. Cheia este că modulul de carusel de grup în sine servește ca o pânză goală și aplicați stilul grupurilor de module din el. Acest lucru permite un nivel ridicat de personalizare, permițându -vă să creați machete și efecte unice.

Acum că am creat un carusel de grup, mergeți la fila Design din setările caruselului principal.

Extindeți meniul derulant al grupurilor . Această filă controlează setările de proiectare pentru grupurile de module conținute în caruselul grupului. Orice setări pe care le aplicați aici vor fi aplicate la modulele de grup inactive .

Extindeți fila de fundal . Vom aplica un gradient de lumină pe filele inactive pentru a ne asigura că textul este lizibil. Setați prima oprire a gradientului pe #000000 cu o opacitate de 0% . Reglați glisorul ușor la dreapta. Activați gradientul locului deasupra comutării imaginii de fundal .

Setați a 2 -a oprire a gradientului pe #000000 cu o opacitate de 40% .

Activați gradientul locului deasupra comutării imaginii de fundal .

Apoi, localizați fila Filtre . Vom reduce saturația din grupurile inactive pentru a oferi imaginilor de fundal un efect alb -negru. Localizați glisorul saturat și setați -l la 0 .

Apoi, extindeți meniul derulant Grupuri Active și faceți clic pe fila de fundal . Aplicați aceleași setări de gradient ca mai sus.

Asigurați -vă că activați gradientul locului deasupra comutării imaginii de fundal .

Extindeți meniul derulant Filtre în grupuri active și reglați glisorul de saturație la 75% . Acest lucru va colora doar elementul de carusel activ, permițând utilizatorilor să identifice diapozitivul activ din carusel.

Personalizați aspectul receptiv

Acum, când grupul nostru de grup este pregătit pentru desktop -uri, vom folosi punctele de întrerupere responsabile personalizabile ale Divi 5 pentru a stiliza versiunea mobilă a caruselului nostru. În mod implicit, Divi 5 permite trei puncte de întrerupere. Puteți utiliza toate cele șapte puncte de întrerupere disponibile dacă doriți mai mult control asupra diferitelor dimensiuni ale dispozitivului. Faceți clic pe meniul Elipsis din mijlocul barei de sus din Visual Builder.

Activați punctele de întrerupere pe care doriți și faceți clic pe salvare pentru a continua.

Faceți clic pe punctul de întrerupere al tabletei pentru a vizualiza modul în care va arăta aspectul pe dispozitivele de tabletă. Derulați în jos la setările caruselului și reglați diapozitivele pentru a arăta la 1 . Acest lucru se va aplica, de asemenea, oricăror puncte de întrerupere mai mici, cum ar fi telefonul și telefonul .

În cele din urmă, faceți clic pe butonul Previzualizare din stânga sus a ecranului pentru a vizualiza caruselul grupului într -o nouă filă.

Odată terminat, caruselul dvs. de grup ar trebui să arate similar cu videoclipul de mai jos.

Asta este! Construirea unui carusel de grup în Divi 5 este simplă și oferă rezultate incredibile.

Integrare cu constructorul de bucle Divi 5

Builder Loop 5 al Divi 5 este o caracteristică puternică care poate transforma modulul de grup într -un afișaj dinamic de conținut. Această caracteristică permite proiectanților să creeze caruseluri dinamice, automatizate, care trag conținut direct din WordPress, transformând conținut static în afișaje de produs, arhive de categorie sau caruseluri membre ale echipei cu câteva clicuri.

Prin integrarea buclelor Builder cu grupul de grup, Divi 5 împuternicește utilizatorii să meargă carusele sofisticate, bazate pe conținut, cu o muncă manuală minimă, ceea ce îl face o caracteristică deosebită pentru designul web dinamic.

Bucla Builder permite caruselului de grup să se bucure dinamic prin postări, termeni sau date utilizator, creând caruseluri care reflectă automat cel mai recent conținut al site -ului dvs. Deoarece bucla Builder trage date direct din baza de date WordPress, puteți prezenta cu ușurință postări de blog, categorii de produse sau profiluri de utilizator.

De exemplu, puteți crea un carusel de postare pe blog folosind un tip de postare sau un glisor de categorii de produse folosind termeni wooCommerce, ceea ce face ca modulul să fie incredibil de versatil pentru nevoile dinamice de conținut.

Exemple din lumea reală a modulului de carusel de grup

Flexibilitatea modulului de carusel de grup îl face potrivit pentru diverse cazuri de utilizare. Iată câteva exemple din lumea reală pentru a arăta ce este posibil.

Lățime completă personalizată / glisor cu ecran complet

În acest exemplu, am creat un glisor cu lățime completă/pe ecran complet pentru a prezenta shake-uri pentru un magazin de înghețată. Am setat caruselul pentru a afișa o diapozitivă simultan, fiecare conținând o imagine de fundal, două rubrici și un buton de apel la acțiune. De asemenea, am setat animația pentru a avansa la următoarea diapozitivă după o întârziere de 3 secunde. Puteți obține acest aspect setând caruselul de grup și secțiunea la 100VH.

Vitrina membrilor echipei

Când doriți să prezentați membrii echipei pe site -ul dvs. web, utilizarea modulului de carusel de grup este o modalitate excelentă de a face acest lucru. În acest exemplu, am configurat un aspect în 3 coloane în caruselul nostru. Fiecare diapozitiv include o lovitură de cap, un nume, un rol și link -uri de social media folosind modulul de urmărire socială Divi. Setați caruselul pentru a derula o alunecare la un moment dat pentru un aspect curat și profesional.

Categorie Showcases

Modulul de grup de grup Divi 5 funcționează fără cusur cu Bucla Builder. Acest lucru vă permite să creați glisoare antrenante care prezintă categoriile de produse ale site -ului dvs. web. Fiecare diapozitiv trage dinamic în numele categoriei și imaginea prezentată, ceea ce o face o modalitate excelentă de a vă prezenta produsele. În acest exemplu, folosim efecte de filtru pentru

Mărturii

Modulul de carusel de grup este, de asemenea, excelent pentru crearea unui slider mărturie. Puteți prezenta cu ușurință cele mai bune recenzii ale clienților, mărturii ale clienților și multe altele. Datorită modulului de carusel de grup, nu mai sunteți limitat la coloane statice sau pluginuri externe.

Descărcați fișierele

Descărcați gratuit

Alăturați -vă buletinului informativ Divi și vă vom trimite prin e -mail o copie a pachetului de aspect final al paginii Divi Divi, plus tone de alte resurse, sfaturi și trucuri Divi uimitoare și gratuite. Urmați -vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, introduceți pur și simplu adresa de e -mail de mai jos și faceți clic pe Descărcare pentru a accesa pachetul de aspect.

Descărcare

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 aspect Divi gratuit săptămânal!

Deblocați posibilitățile creative cu modulul carusel al Divi 5

Modulul de grup de grup Divi 5 este un plus puternic care deblochează noi posibilități pentru crearea de site -uri dinamice Divi. De la crearea glisoarelor de produse antrenante la mărturii, acest modul facilitează adăugarea de conținut interactiv pe site -urile dvs. Divi.

Acum, când fundația reînnoită a lui Divi 5 a deschis calea pentru mai multe caracteristici, este momentul perfect pentru a vă scufunda! Ați încercat deja modulul de carusel de grup? Spuneți -ne în comentariile de mai jos.