Come creare un carosello automatico con Divi & Slick.js

Ogni settimana ti forniamo pacchetti di layout Divi nuovi e gratuiti che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di layout, condividiamo anche un caso d'uso che ti aiuterà a portare il tuo sito Web al livello successivo.

Questa settimana, come parte della nostra iniziativa di progettazione Divi in ​​corso, ti mostreremo come creare un carosello automatico con Divi, Slick.js e il pacchetto di layout della gelateria. Inizieremo includendo la libreria JS slick nel nostro sito Web e continueremo a farlo funzionare all'interno di Divi Builder. Questo è un ottimo modo per creare un carosello automatico per qualsiasi tipo di modulo che desideri mostrare. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il layout automatico del carosello

Per mettere le mani sul layout del carosello automatico gratuito, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Assicurati di includere il file Slick.js nei tag head! Senza di essa, non funzionerà. Vedi il primo passaggio di seguito.

1. Aggiungi Slick JS alla tua integrazione con il tema Divi

Vai a Opzioni del tema Divi

La prima parte di questo tutorial è molto importante; aggiungendo Slick.js al tuo sito web. Per farlo, vai alle Opzioni del tema Divi.

Aggiungi Slick.js ai tag Head

Passa alla scheda di integrazione e aggiungi il file Slick.js ai tag head del tuo sito web.

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

2. Crea una nuova pagina usando il layout del menu della gelateria

Aggiungi nuova pagina

Continua aggiungendo una nuova pagina al tuo sito web. Dai un titolo alla tua pagina, pubblicala e passa a Divi Builder.

Carica il layout del menu della gelateria

Per questo tutorial, utilizziamo il layout del menu del pacchetto di layout della gelateria, ma sentiti libero di utilizzare qualsiasi altra pagina/layout di tua scelta.

2. Aggiungi una nuova sezione alla pagina

Aggiungi nuova sezione

Il passaggio successivo nella creazione del carosello automatico consiste nell'aggiungere una nuova sezione alla tua pagina.

Colore di sfondo

Apri le impostazioni della sezione e cambia il colore di sfondo.

• Colore di sfondo: #f5f5f5

Divisore inferiore

Aggiungi anche un divisore inferiore alla sezione.

• Stile divisore: trova nell'elenco
• Colore divisore: #ffffff
• Peso del divisore: 10vw

Spaziatura

Insieme ad alcune imbottiture inferiori.

• Imbottitura inferiore: 10vw

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo la prima riga utilizzando la seguente struttura a colonne:

Aggiungi il modulo di testo del titolo alla colonna

Aggiungi contenuto H2

Aggiungi un modulo di testo alla colonna della riga e inserisci del contenuto H2 a tua scelta.

Impostazioni testo H2

Passa alla scheda Design e modifica le impostazioni del testo H2 di conseguenza:

• Intestazione 2 Carattere: Prompt
• Intestazione 2 Peso del carattere: Ultraleggero
• Intestazione 2 Allineamento del testo: Centro
• Titolo 2: Dimensioni testo: 60 px (desktop), 40 px (tablet), 25 px (telefono)
• Altezza riga intestazione 2: 1.2em

Dimensionamento

Modifica anche le impostazioni di dimensionamento del modulo.

• Larghezza massima: 800 px
• Allineamento del modulo: Centro

3. Dedica una nuova riga a una colonna al dispositivo di scorrimento automatico

Aggiungi nuova riga

Struttura della colonna

Per creare il carosello automatico, dovremo dedicare una nuova riga agli elementi che vogliamo posizionare all'interno del carosello. Assicurati di scegliere una riga con una sola colonna. Nei prossimi passaggi, trasformeremo questa colonna in un carosello automatico.

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo nelle impostazioni di dimensionamento.

• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Aggiungi un margine superiore e successivamente rimuovi tutto il riempimento superiore e inferiore predefinito.

• Margine superiore: 50 px
• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

straripamenti

Ci stiamo anche assicurando che nulla superi il contenitore di righe nascondendo gli overflow.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Impostazioni colonna

Continua aprendo le impostazioni della colonna.

Classi CSS

Aggiungi due diverse classi CSS alla colonna. Assicurati di lasciare uno spazio tra di loro. Più avanti in questo tutorial, useremo queste classi per creare il carosello automatico.

• Classe CSS: slider oggetti gelato

Aggiungi il primo elemento di scorrimento alla colonna (modulo di invito all'azione)

Contenuto predefinito

È ora di iniziare ad aggiungere il primo elemento del carosello! Utilizzeremo un modulo di invito all'azione, ma sentiti libero di utilizzare qualsiasi altro modulo a tua scelta. Inserisci alcuni contenuti a tua scelta.

Contenuti al passaggio del mouse

Sostituisci il titolo e il contenuto del corpo con un carattere vuoto (come questo: ' ') per rimuovere il contenuto al passaggio del mouse.

Collegamento

Assicurati di aggiungere anche un collegamento al modulo in modo che il pulsante venga visualizzato.

• URL collegamento pulsante: #

Sfondo sfumato predefinito

Quindi, vai alle impostazioni dello sfondo e aggiungi uno sfondo sfumato.

• Colore 1: #8300e9
• Colore 2: RGB (41,196,169,0)
• Tipo di gradiente: radiale
• Direzione radiale: in alto
• Posizione di partenza: 35%
• Posizione finale: 35%

Rimuovi sfondo sfumato al passaggio del mouse

Rimuovi lo sfondo sfumato al passaggio del mouse.

Immagine di sfondo

Carica anche un'immagine di sfondo pertinente.

Impostazioni del testo del titolo

Passa alla scheda Design e modifica le impostazioni del testo del titolo di conseguenza:

• Carattere del titolo: Prompt
• Dimensione del testo del titolo: 2vw (desktop), 4vw (tablet), 5vw (telefono)
• Altezza della riga del titolo: 2vw (desktop), 3vw (tablet), 4vw (telefono)

Impostazioni del corpo del testo

Modifica anche le impostazioni del testo del corpo.

• Carattere del corpo: Open Sans
• Dimensioni del corpo del testo: 0.9vw (desktop), 2vw (tablet), 2.5vw (telefono)
• Altezza della linea del corpo: 1vw (desktop), 2vw (tablet), 3vw (telefono)

Impostazioni dei pulsanti

Quindi, vai alle impostazioni del pulsante e modella il pulsante come segue:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 0.9vw (desktop), 1.5vw (tablet), 2vw (telefono)
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #000000 (predefinito), #ff6f7e (passa il mouse)
• Larghezza bordo pulsante: 0px

• Raggio bordo pulsante: 0px
• Spaziatura delle lettere dei pulsanti: 2px
• Carattere pulsante: prompt
• Peso del carattere del pulsante: normale
• Stile carattere pulsante: maiuscolo

• Margine superiore: 19vw (desktop), 30vw (tablet), 45vw (telefono)
• Imbottitura superiore: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
• Imbottitura inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Imbottitura sinistra: 2vw (Desktop), 4vw (Tablet), 5vw (Telefono)
• Imbottitura destra: 2vw (Desktop), 4vw (Tablet), 5vw (Telefono)

Dimensionamento

Stiamo anche modificando la larghezza e l'altezza del modulo.

• Larghezza: 23vw
• Altezza: 23vw (desktop), 50vw (tablet), 80vw (telefono)

Spaziatura

Ultimo ma non meno importante, vai alle impostazioni di spaziatura e aggiungi alcuni margini personalizzati e valori di riempimento.

• Margine sinistro: 1vw
• Margine destro: 1vw
• Imbottitura superiore: 2vw (Desktop), 4vw (Tablet), 6vw (Telefono)

4. Clona l'oggetto del cursore tutte le volte che vuoi

Clona modulo CTA quattro volte

Una volta completato il primo modulo CTA, puoi andare avanti e clonarlo tutte le volte che vuoi. Ogni modulo in questa colonna farà parte del carosello automatico.

Modifica contenuto, sfondo sfumato e immagine di sfondo per ogni duplicato

Assicurati di modificare il contenuto, lo sfondo sfumato e l'immagine di sfondo di ogni duplicato per rendere unico ogni modulo CTA.

5. Aggiungi una nuova riga sotto quella precedente

Aggiungi la riga successiva e l'ultima alla sezione utilizzando la seguente struttura di colonne:

Inserisci il primo modulo di codice con il codice jQuery

Aggiungi nuovo modulo di codice alla colonna

Aggiungi un primo modulo di codice alla colonna.

Inserisci codice CSS

E inserisci le seguenti righe di codice 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>

Inserisci secondo modulo di codice con codice CSS

Aggiungi nuovo modulo di codice alla colonna

Aggiungi un altro modulo di codice proprio sotto il precedente.

Inserisci codice jQuery

E inserisci le seguenti righe di codice 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>

Dopo aver aggiunto il codice CSS e jQuery, puoi uscire da Visual Builder per visualizzare il risultato!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare un carosello automatico utilizzando Divi, slick.js e Ice Cream Shop Layout Pack. Questo è un ottimo modo per aggiungere interazione al tuo sito web. Puoi far funzionare questa tecnica con qualsiasi tipo di modulo che desideri visualizzare! Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.