Cum să creați un carusel automat cu Divi & Slick.js

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor.

În această săptămână, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să creați un carusel automat cu Divi, Slick.js și pachetul de layout Ice Cream Shop. Vom începe prin a include biblioteca JS pe site-ul nostru web și vom continua să o facem să funcționeze în Divi Builder. Acesta este un mod excelent de a crea un carusel automat pentru orice tip de modul pe care doriți să îl prezentați. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați aspectul automat al caruselului GRATUIT

Pentru a pune mâna pe aspectul gratuit al caruselului automat, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

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 layout Divi săptămânale gratuite!

Asigurați-vă că includeți fișierul Slick.js în etichetele de cap! Fără ea, nu va funcționa. Vezi primul pas de mai jos.

1. Adăugați Slick JS la integrarea temei dvs. Divi

Accesați Opțiunile temei Divi

Prima parte a acestui tutorial este una foarte importantă; adăugând Slick.js pe site-ul dvs. web. Pentru aceasta, accesați Opțiunile temei Divi.

Adăugați Slick.js la Head Tags

Navigați la fila de integrare și adăugați fișierul Slick.js la etichetele principale ale site-ului dvs. web.

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

2. Creați o pagină nouă utilizând aspectul meniului Ice Cream Shop

Adăugați o pagină nouă

Continuați adăugând o pagină nouă pe site-ul dvs. web. Dați titlului paginii dvs., publicați pagina și comutați la Divi Builder.

Încărcați aspectul meniului Ice Cream Shop

Pentru acest tutorial, folosim aspectul meniului Ice Cream Shop Layout Pack, dar nu ezitați să utilizați orice altă pagină / aspect la alegere.

2. Adăugați o secțiune nouă la pagină

Adăugați o secțiune nouă

Următorul pas în crearea caruselului automat este adăugarea unei noi secțiuni la pagina dvs.

Culoare de fundal

Deschideți setările secțiunii și schimbați culoarea de fundal.

• Culoare fundal: # f5f5f5

Separator inferior

Adăugați și un separator inferior la secțiune.

• Stil divizor: Găsiți în listă
• Culoare divizor: #ffffff
• Greutatea divizorului: 10vw

Spațiere

Împreună cu unele căptușeli de fund.

• Căptușeală inferioară: 10vw

Adăugați un rând nou

Structura coloanei

Continuați adăugând primul rând folosind următoarea structură de coloane:

Adăugați modulul de text al titlului în coloană

Adăugați conținut H2

Adăugați un modul de text în coloana rândului și introduceți un conținut H2 la alegere.

Setări text H2

Treceți la fila de proiectare și modificați setările de text H2 în consecință:

• Titlul 2 Font: Prompt
• Rubrica 2 Greutate font: Ultra ușor
• Titlul 2 Aliniere text: centru
• Titlul 2 Dimensiune text: 60 px (desktop), 40 px (tabletă), 25 px (telefon)
• Titlul 2 Înălțimea liniei: 1.2em

Dimensionare

Modificați și setările de dimensionare ale modulului.

• Lățime maximă: 800 px
• Alinierea modulului: centru

3. Dedicați noul rând cu o coloană la glisorul automat

Adăugați un rând nou

Structura coloanei

Pentru a crea caruselul automat, va trebui să dedicăm un nou rând articolelor pe care dorim să le plasăm în carusel. Asigurați-vă că alegeți un rând cu o singură coloană. În următorii pași, vom transforma această coloană într-un carusel automat.

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a ecranului în setările de dimensionare.

• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Adăugați o margine de sus și eliminați toate umpluturile implicite de sus și de jos.

• Marja superioară: 50 px
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Revărsări

De asemenea, ne asigurăm că nimic nu depășește containerul de rând ascunzând debordurile.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Setări coloană

Continuați deschizând setările coloanei.

Clase CSS

Adăugați două clase CSS diferite în coloană. Asigurați-vă că lăsați un spațiu între ele. Mai târziu în acest tutorial, vom folosi aceste clase pentru a crea caruselul automat.

• Clasa CSS: glisor pentru articole de înghețată

Adăugați primul element glisant în coloană (Modul de apel la acțiune)

Conținut implicit

E timpul să începeți să adăugați primul articol carusel! Vom folosi un modul de îndemn, dar nu ezitați să utilizați orice alt modul la alegere. Introduceți un conținut la alegere.

Plasați cursorul pe conținut

Înlocuiți titlul și conținutul corpului cu un caracter gol (cum ar fi acesta: '') pentru a elimina conținutul de pe mouse.

Legătură

Asigurați-vă că adăugați și un link la modul, astfel încât butonul să apară.

• Adresă URL a butonului: #

Fundal de gradient implicit

Apoi, accesați setările de fundal și adăugați un fundal de gradient.

• Culoare 1: # 8300e9
• Culoare 2: rgba (41.196.169,0)
• Tipul gradientului: radial
• Direcție radială: sus
• Poziția inițială: 35%
• Poziție finală: 35%

Eliminați fundalul gradientului Hover

Eliminați fundalul de gradient la trecerea cu mouse-ul.

Imagine de fundal

Încărcați și o imagine de fundal relevantă.

Setări text titlu

Treceți la fila Design și modificați setările textului titlului în consecință:

• Font de titlu: Prompt
• Dimensiune text titlu: 2vw (desktop), 4vw (tabletă), 5vw (telefon)
• Înălțimea liniei de titlu: 2vw (desktop), 3vw (tabletă), 4vw (telefon)

Setări text corp

Modificați și setările pentru textul corpului.

• Font corp: Open Sans
• Dimensiunea textului corpului: 0,9vw (desktop), 2vw (tabletă), 2,5vw (telefon)
• Înălțimea liniei corpului: 1vw (desktop), 2vw (tabletă), 3vw (telefon)

Setări buton

Apoi, accesați setările butonului și stilizați butonul după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiunea textului butonului: 0.9vw (desktop), 1.5vw (tabletă), 2vw (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 000000 (implicit), # ff6f7e (trecere cu mouse-ul)
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: 2 px
• Buton Font: Prompt
• Buton Font Greutate: Regular
• Stilul fontului butonului: majuscule

• Marja superioară: 19vw (desktop), 30vw (tabletă), 45vw (telefon)
• Căptușeală superioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală inferioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală stângă: 2vw (desktop), 4vw (tabletă), 5vw (telefon)
• Căptușeală dreaptă: 2vw (desktop), 4vw (tabletă), 5vw (telefon)

Dimensionare

De asemenea, modificăm lățimea și înălțimea modulului.

• Lățime: 23vw
• Înălțime: 23vw (desktop), 50vw (tabletă), 80vw (telefon)

Spațiere

Nu în ultimul rând, accesați setările de spațiere și adăugați câteva valori de marjă și umplere personalizate.

• Marja stângă: 1vw
• Marja dreaptă: 1vw
• Căptușeală superioară: 2vw (desktop), 4vw (tabletă), 6vw (telefon)

4. Clonați elementul glisant de câte ori doriți

Clonați modulul CTA de patru ori

După ce ați finalizat primul modul CTA, puteți merge mai departe și îl puteți clona de câte ori doriți. Fiecare modul din această coloană va face parte din caruselul automat.

Schimbați conținutul, gradientul de fundal și imaginea de fundal pentru fiecare duplicat

Asigurați-vă că modificați conținutul, gradientul de fundal și imaginea de fundal a fiecărui duplicat pentru a face fiecare modul CTA unic.

5. Adăugați un rând nou sub unul precedent

Adăugați următorul și ultimul rând la secțiune folosind următoarea structură de coloane:

Introduceți primul modul de cod cu jQuery Code

Adăugați un nou modul de cod în coloană

Adăugați un prim modul de cod în coloană.

Introduceți codul CSS

Și introduceți următoarele linii de cod CSS:

<style>
.slick-slider
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-slide
{
float: left;
}
</style>

Introduceți al doilea modul de cod cu codul CSS

Adăugați un nou modul de cod în coloană

Adăugați un alt modul de cod chiar sub cel precedent.

Introduceți codul jQuery

Și introduceți următoarele linii de cod jQuery:

<script>
jQuery(function($){
$('.icecream-items').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 700,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 1079,
settings: {
slidesToShow: 2
}
}]
});
});
</script>

După ce ați adăugat codul CSS și jQuery, puteți ieși din Visual Builder pentru a vedea rezultatul!

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați un carusel automat folosind Divi, slick.js și pachetul de layout Ice Cream Shop. Acesta este un mod excelent de a adăuga interacțiune pe site-ul dvs. web. Puteți face această tehnică să funcționeze cu orice fel de modul pe care doriți să îl afișați! Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.