Cum să construiți un glisor personalizat cu ecran complet cu Divi 5 (descărcare gratuită)

Una dintre cele mai recente versiuni ale Divi 5 introduce modulul de carusel de grup, o caracteristică pentru crearea de glisoare personalizate, antrenând și caruseluri pentru site -ul dvs. WordPress. Puteți să vă prezentați cu ușurință portofoliul, produsele, un erou imersiv sau un glisor cu ecran complet și să duceți designul site -ului dvs. la noi înălțimi.

În această postare, vom oferi un ghid pas cu pas pentru crearea unui glisor cu ecran complet folosind modulul de carusel de grup. Hai să ne scufundăm!

Înțelegerea modulului de carusel de grup

Modulul de carusel de grup este un plus versatil la Divi 5, care vă permite să creați glisoare și caruseluri dinamice.

Spre deosebire de modulele tradiționale, acceptă o gamă largă de machete, de la caruseluri de imagini simple până la glisoare complexe, post-bazate, alimentate de The Loop Builder. Această flexibilitate o face perfectă pentru prezentarea conținutului precum portofolii, mărturii sau galerii de produse într -un mod convingător.

Caracteristici cheie ale modulului de carusel de grup

Modulul de carusel de grup strălucește cu caracteristici robuste. Suporta bucle dinamice de conținut, permițându -vă să trageți în postări, pagini sau tipuri de posturi personalizate direct în glisorul dvs. folosind bucla Builder.

Modulul vă permite, de asemenea, să utilizați orice modul DIDI pentru a construi glisoare frumoase, antrenante, folosind rânduri și grupuri de module cuibărite. Puteți personaliza navigarea cu săgeți și puncte de pagină, personalizând poziția, culoarea și alte stiluri pentru a se potrivi cu site -ul dvs.

Opțiunile automate, viteza reglabilă și funcțiile de pauză-on-hover oferă o experiență atrăgătoare pentru vizitatorii dvs., asigurându-vă că vor rămâne pe site-ul dvs. mai mult timp. În plus, modulul este complet personalizabil, permițându -vă să creați machete cu ecran complet și lățime completă, ceea ce îl face ideal pentru secțiuni de eroi, servicii sau caracteristici de pe site -ul dvs. web.

Cum să construiți un glisor cu ecran complet cu modulul Grupului Divi 5

În acest tutorial, vă vom arăta cum să utilizați modulul de carusel de grup pentru a construi un glisor cu ecran complet pentru viitoarele dvs. site -uri DIVI 5. Până la sfârșit, veți avea setul de abilități de a construi glisoare captivante pentru a încuraja vizitatorii dvs. să acționeze.

Pasul 1: Configurarea unei noi pagini

Creați o pagină nouă, adăugați un titlu și faceți clic pe Utilizați Divi Builder pentru a începe.

Când se deschide constructorul vizual, alegeți construiți de la zero sub opțiunile Creați pagina dvs.

Treceți peste secțiunea din noua pagină pentru a dezvălui pictograma Setări . Faceți clic pe ea pentru a dezvălui setările secțiunii.

Navigați la fila Design . Faceți clic pe meniul derulant Layout . Sub Justify Conținut , selectați Centrul . În câmpul Aliniac Elemente , selectați Centrul . Acest lucru va permite conținutul secțiunii noastre să fie centrat pe orizontală și vertical.

În continuare, vom regla setările de distanțare pentru secțiune. Extindeți meniul derulant de distanțare . Setați marja la 0px , sus și de jos. În conformitate cu căptușeala , setați partea de sus și de jos la 0px .

Cu setările secțiunii în loc, faceți clic pe pictograma Green + pentru a adăuga un nou rând.

Selectați rândul cu o singură coloană sub coloane egale .

Apoi, adăugați modulul de carusel de grup la rând.

Înainte de a adăuga conținut, trebuie să configuram modulul de carusel de rând și să grupăm cu FlexBox și Controluri de distanțare.

Pasul 2: Configurați setările rândului

Crearea unui glisor cu ecran complet ne necesită să setăm rândul și modulul de carusel de grup la 100% lățime . Faceți clic pe pictograma straturi pentru a regla cu ușurință secțiunile. Acest lucru este crucial atunci când lucrați cu secțiuni și rânduri de lățime completă, mai ales când au fost setate căptușeala și marja la 0. Este mai ușor să vedeți structura de aspect a paginii dvs.

În vizualizarea straturilor, faceți clic pentru a selecta rândul cu o singură coloană care găzduiește modulul de carusel de grup. Navigați la setările de proiectare. În meniul derulant al aspectului, reglați decalajul orizontal la 0 .

De asemenea, setați elemente de aliniere la centre pentru rând.

Setați lățimea și lățimea maximă în fila de dimensionare la 100%.

În fila Distanță , setați marja de sus și de jos și căptușeală la 0px .

Pasul 3: Configurați setările caruselului de grup

În continuare, vom configura setările caruselului de grup. Extindeți meniul derulant Setări Carusel din fila Conținut. Puteți comuta rotația automată , alegeți viteza de rotație automată la setarea implicită de 2000ms și activați pauză pe hover .

În fila Elemente , dezactivați Afișarea Navigării Dot și lăsați săgeți Activat. Puteți alege, de asemenea, o pictogramă personalizată pentru săgețile din stânga și din dreapta.

Faceți clic pentru a extinde fila săgeți din fila Design. Alocați #ffffff ca culoarea săgeții , lăsați dimensiunea săgeții la 48px implicit și lăsați poziția săgeată setată în interior .

Extindeți fila de fundal și alocați #000000 ca culoare de fundal .

Pasul 4: Style Primul grup

Putem adăuga conținut la prima diapozitivă cu setările de carusel de secțiune, rând și grup. Faceți clic pe fila Conținut din modulul Grupului Carusel și faceți clic pe pictograma Setări pentru grup.

Extindeți meniul derulant de fundal și selectați fila Gradient .

Faceți clic pe primul glisor de gradient pentru a atribui o nouă culoare. Introduceți #EFB648 în câmpul Color .

Apoi, faceți clic pe al doilea glisant gradient și alocați #F28F52 ca culoare.

În câmpul de tip gradient , selectați Circular .

Apoi, navigați la fila Design . Extindeți fila de distanțare și alocați o umplutură de 5% în partea de sus și de jos a grupului.

Pasul 5: Adăugați conținut la primul grup

Acum că setările grupului nostru sunt configurate, putem începe să adăugăm conținut la grup. Faceți clic pe pictograma Black + pentru a adăuga un modul.

Când apare modulul de dialog Insert sau Row, faceți clic pe fila New Row . Sub secțiunea Coloane egale , selectați rândul cu o singură coloană .

Adăugați un modul de rubrică

Selectați și introduceți modulul de titlu .

Extindeți meniul derulant de text și introduceți Sucul Orange ca titlu .

Navigați la fila Design . Extindeți meniul derulant al textului Titlu . Selectați H1 ca nivel de rubrică , utilizați bebas neue ca font de rubrică , setați stilul fontului de rubrică la majuscule , alinierea textului de rubrică la centru , culoarea textului de rubrică la #FFFFFF și dimensiunea textului la 20EM .

Utilizați controalele receptive ale Divi 5 pentru a ajusta dimensiunea textului la titlu la 15EM pe tabletă și 8EM pe mobil.

Adăugați un rând nou

În continuare, vom adăuga un nou rând sub rândul cu o singură coloană care conține modulul de rubrică. Faceți clic pe pictograma Black + pentru a adăuga un nou modul.

Faceți clic pe fila New Row . Sub coloane Offset , alegeți opțiunea 1/4 + 1/2 + 1/4.

În fila Design , extindeți fila Size și introduceți 70% pentru lățimea și lățimea maximă . Setați alinierea la centru .

Adăugați un modul de rubrică

Selectați modulul de titlu și adăugați -l la prima coloană .

Dați rubricii un titlu și îndreptați -vă către fila Design . Extindeți meniul derulant al textului Titlu . Selectați H2 pentru nivelul de rubrică , Bebas Neue ca font de rubrică , majuscule ca stilul fontului de rubrică , #ffffff ca culoarea textului de rubrică și 6em ca dimensiunea textului .

Utilizați controalele receptive ale Divi pentru a regla dimensiunea textului la 4EM .

Adăugați un modul de text

Adăugați un modul de text sub rubrica din prima coloană. Introduceți un text al corpului și treceți la fila Design . Selectați Poppins ca font de text , setați culoarea textului la #ffffff și dimensiunea textului la 16px .

Adăugați un modul de buton

Adăugați un modul de buton sub modulul de text din prima coloană. Alocați text pe butonul din fila Conținut și schimbați fila Design. Extindeți meniul derulant al butonului și activați utilizarea stilurilor personalizate pentru buton . Apoi extindeți meniul de fundal al butonului . În fila de culoare de fundal , adăugați #528BF2 ca culoare a butonului.

Utilizați controalele de hover Divi 5 pentru a atribui #6A7C9D ca culoare hover pentru buton.

Comutați înapoi la vizualizarea desktop. Extindeți fila derulantă a butonului . Adăugați 100px sub raza de frontieră a butonului și setați lățimea de frontieră a butonului la 0px .

Extindeți meniul derulant al textului butonului . Alocați Poppins ca font al butonului , #ffffff ca culoare a textului butonului și 16px ca dimensiunea textului butonului .

Extindeți setările pictogramei butonului și dezactivați comutarea pictogramei butonului Show .

În cele din urmă, extindeți meniul derulant de distanțare . Adăugați căptușeală de 15px în partea de sus și de jos și 35px la stânga și la dreapta.

Adăugați un modul de imagine

Puneți un modul de imagine în a doua coloană. Când apar setările, treceți peste câmpul Image pentru a dezvălui setările. Faceți clic pe pictograma Setări pentru a încărca biblioteca media și încărcați o imagine în modul.

În continuare, vom adăuga o interacțiune la imagine pentru a crea un efect de mouse-over. Navigați la fila Advanced . Extindeți meniul Interacțiuni pentru a dezvălui setările sale. Faceți clic pe butonul +Adăugare interacțiune .

Selectați Mouse Enter când apar opțiunile.

Introduceți Image Tilt în câmpul Etichetă Admin , selectați Mouse Enter ca eveniment de declanșare, mișcarea mouse -ului oglindă ca acțiune de efect, selectați imaginea ca modul țintă, înclinați ca tip de mișcare și 15 pentru sensibilitate. În cele din urmă, faceți clic pe butonul Salvare interacțiune pentru a activa interacțiunea.

Adăugați un modul de contoare de bare

Faceți clic pentru a adăuga modulul de bare în coloana a 3 -a. În fila Conținut. În fila Elemente , dezactivați procentul de spectacol .

Apoi, extindeți fila de fundal. Adăugați #ffffff ca culoarea de fundal.

Schimbați fila Design și extindeți meniul derulant al barei . În câmpul de culori de fundal al barei , adăugați #528BF2 ca culoare.

Extindeți meniul derulant al textului din titlu . În câmpul de font din titlu , selectați Bebas Neue . Selectați #FFFFFFF ca culoarea textului din titlu și 22px ca mărime a textului din titlu .

Schimbați înapoi la fila Conținut. De data aceasta, faceți clic pe pictograma Setări pentru primul element de contor de bare.

Introduceți text în câmpul Titlu și setați câmpul procentual la 75 .

Faceți clic pentru a reveni la fila de conținut principal pentru modulul de bare.

Acum, după ce setările noastre de proiectare sunt setate, puteți copia cu ușurință primul articol de contor de bare pentru a păstra setările.

Duplicați contorul de bare și schimbați titlul și procentul în setările dorite.

Pasul 6: Adăugați animații

Pentru a face grupul mai imersiv, vom adăuga unele efecte de animație. În primul rând, vom adăuga un efect de zoom la rubrica noastră principală. Faceți clic pentru a selecta rubrica principală pentru grup. Navigați la fila Design și derulați în jos pentru a extinde fila de animație. Selectați Zoom pentru animație. Lasă toate setările așa cum este.

Apoi, faceți clic pentru a extinde al 2-lea rând (rând cu trei coloane). Faceți clic pe setările primei coloane.

Faceți clic pe fila Design și derulați în jos pentru a dezvălui fila de animație. Alegeți diapozitiv pentru stilul de animație și potrivit pentru direcția de animație. Lasă toate celelalte setări așa cum este.

Faceți clic înapoi la fila Conținut principal pentru rând. De data aceasta, selectați a 3 -a coloană. Navigați la fila Design, extindeți fila de animație și alegeți Slide> stânga pentru animație. Lăsați celelalte setări la valori implicite.

Pasul 7: Rândurile care se suprapun

Pentru a adăuga un pic de fler suplimentar la aspect, vom regla marja pe al doilea rând pentru a crea un efect de suprapunere. Acest lucru va împinge rândul în sus, permițându -i să se suprapună cu titlul principal pentru un efect frumos. Selectați al 2 -lea rând din aspect și navigați în fila Design. Extindeți fila de distanțare pentru a dezvălui setările. În marja de sus, setați valoarea la -8%.

În continuare, vom aplica o valoare a indexului Z pentru a plasa al doilea rând peste primul. Navigați la fila Advanced, extindeți setările de poziție și aplicați 999999 pe câmpul Index Z.

Când previzualizați glisorul, veți vedea că al doilea rând a fost împins până la suprapunerea ușoară a primului rând, creând un efect de suprapunere frumos.

Pasul 8: receptivitatea testelor

Înainte de a copia primul grup, este bine să testăm receptivitatea aspectului. Utilizați punctele de întrerupere responsabile ale Divi 5 pentru a face ajustări.

În Divi 5, acum există 7 puncte de întrerupere în loc de Divi 4's 3. Puteți utiliza aceste puncte de întrerupere pentru a vă asigura că aspectul dvs. arată incredibil pe orice dimensiune a ecranului. Navigați prin punctele de întrerupere și faceți modificările necesare înainte de a copia primul grup.

Una dintre cele mai bune caracteristici noi din Divi 5 este capacitatea de a schimba ordinea coloanelor pentru dispozitivele mobile. Aceasta este o modalitate excelentă de a menține designul funcțional și eficient pe toate dimensiunile ecranului. În timp ce vă aflați în vizualizare mobilă, selectați a 2-a coloană a celui de-al doilea rând în aspectul nostru (rândul cu 3 coloane).

În fila Conținut , extindeți fila Comandă . De acolo, setați comanda de afișare la -1 . Aceasta va plasa coloana cu imaginea în partea de sus, permițând imaginii să se suprapună cu titlul așa cum se întâmplă pe vizualizările desktop și tablete.

Pasul 9: Duplicarea grupurilor

Odată ce avem totul pătrat, putem copia cu ușurință primul grup și modifica gradientul de fundal, textul și imaginea fără a repeta toți pașii. În fila de conținut al grupului de carusel principal, faceți clic pentru a dubla primul grup.

Înainte de a copia, alocați o etichetă de administrare grupului pentru a facilita identificarea acesteia.

De acolo, schimbați titlul, schimbați imaginea și alocați un nou gradient de fundal grupului. Utilizați #fc6a3c pentru primul glisor gradient și #C52F00 pentru al doilea.

De asemenea, veți dori să schimbați culorile butonului și barelor în #3DFCCA și #C52F00 pe Hover.

De asemenea, va trebui să ajustăm calendarul de animație pentru grupul 2. Acest lucru asigură că animațiile nu se vor încărca pentru alte diapozitive până când glisorul avansează. În modulul principal de rubrică , navigați la fila Design , extindeți meniul de animație și setați întârzierea de animație la 2000ms .

Faceți același lucru pentru rândul cu 3 coloane. În prima și a treia coloană , setați întârzierea de animație la 2000ms .

Modificări la al treilea grup

Pentru cel de -al treilea grup, utilizați #71B953 și #617A56 pentru gradientul de fundal .

Pentru modulele de butoane și bare , utilizați #BA54B3 și #654F64 pentru culoarea hover.

De asemenea, va trebui să schimbați întârzierea de animație pe modulul de rubrică și prima și a treia coloană a 2 -a rând la 4000ms .

Modificări la al patrulea grup

Pentru gradientul de fundal , utilizați #AD52B7 și #AD52B7 .

Utilizați #83B853 și #83B853 pentru modulele de bare și butoane.

În cele din urmă, setați întârzierea de animație la 6000ms pe rubrica principală din grup, împreună cu prima și a treia coloană a rândului cu 3 coloane.

Pasul 10: Previzualizați și salvați glisorul

Ultimul pas este să salvați aspectul și să îl previzualizați pentru a vă asigura că nu au fost ratați pași. În Visual Builder, faceți clic pe butonul de salvare din colțul din dreapta sus.

Faceți clic pe butonul Previzualizare pentru a deschide aspectul într -o nouă filă.

Odată finalizat, glisorul dvs. ar trebui să arate astfel:

Asta este! Modulul de carusel de grup este o nouă completare versatilă la Divi 5. Vă permite să creați glisoare și caruseluri pentru orice proiect și oferă opțiuni de personalizare nelimitate.

Descărcați aspectul caruselului cu ecran complet

Dacă doriți să utilizați aspectul pe care l -am recreat în această postare, îl puteți accesa prin formularul de mai jos. După ce ați descărcat și a dezarhivat folderul, veți găsi un fișier JSON. Navigați la biblioteca Divi pentru a încărca fișierul, astfel încât să îl puteți accesa și să -l utilizați pentru orice pagină pe care o construiți.

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!

Construiește -ți astăzi primul carusel în Divi 5

Crearea unui glisor personalizat cu ecran complet cu Modulul Carousel de grup Divi 5 deschide o lume de posibilități pentru crearea de experiențe antrenante pe site -urile dvs. web. În urma pașilor din această postare, ați învățat cum să utilizați caracteristicile modulului, din opțiuni avansate de personalizare, cum ar fi animații, puncte de întrerupere receptive și efecte interactive. Flexibilitatea modulului de carusel de grup vă permite să construiți diapozitive pentru orice vă puteți imagina, menținând în același timp un aspect perfect și profesional pe toate dimensiunile ecranului.

Descărcați cea mai recentă Alpha Publică Divi 5, experimentați cu modulul de grup de grup și anunțați -ne ce credeți în comentarii sau pe canalele noastre de socializare.