Come si crea un carosello su Divi?
Un carosello ben implementato dovrebbe avere un impatto minimo o nullo sulle prestazioni. Tuttavia, i caroselli spesso finiscono per influire sulle prestazioni del proprio sito. Per questo è importante saperli creare nella maniera meno impattante possibile.
Con questo tutorial imparerai non solo come creare un carosello che non pesa sul caricamento della tua pagina, ma anche cos’è questa componente UX, quali sono i suoi principali utilizzi e come sfruttarli al meglio.
Se sei alle prime armi non preoccuparti perché ti seguirò passo per passo nella realizzazione di questo carosello, e anche se andremo ad inserire del codice non sarà necessario che tu conosca i linguaggi di programmazione.
Aspetta però, prima di procedere, voglio mostrarti cosa faremo insieme.
Questo è il carosello che imparerai a costruire, non male vero?
Per questo carosello ho scelto di utilizzare dei moduli Blurb, ma tu potrai crearlo con qualsiasi modulo tu preferisca!
Sei prontə? Iniziamo!
Cosa è un carosello
Il carosello è un elemento che consente a più contenuti di occupare un unico spazio.
Questo avviene attraverso la visualizzazione di un determinato numero di elementi in una vista ciclica, proprio come una giostra (da qui il nome, dall’inglese “Carousel” che significa appunto giostra).
I caroselli possono riprodurre automaticamente il contenuto da mostrare o essere navigati manualmente dagli utenti.
Infatti i controlli di navigazione su un carosello suggeriscono la presenza di un contenuto aggiuntivo che non è attualmente visibile, incoraggiando l’utente ad interagire e continuare a esplorare.
Fino a qui tutto bene, però è necessario che tu sappia che il carosello può diventare un’arma a doppio taglio se utilizzato nel modo sbagliato.
In questo articolo ti spiego come crearlo e utilizzarlo al meglio.
Utilizzi errati del carosello
Quando le persone navigano in un sito si aspettano di avere il controllo sulla loro interfaccia utente.
Se crei un carosello con l’auto-play per mostrare delle informazioni rilevanti potresti rovinare una buona esperienza utente, quindi usa l’auto-play solo ed esclusivamente quando è strettamente necessario.
Con l’auto-play, inoltre, molte persone possono avere difficoltà a leggere tutto il testo prima che lo scorrimento avanzi.
Ma non è tutto qui.
Lo sapevi che il design del carosello e i frequenti movimenti possono far pensare alle persone che sia un annuncio, portandoli a ignorarlo? Questo fenomeno si chiama “cecità da banner”.
Per questo è fondamentale il contenuto che deciderai di mostrare: hai solo una frazione di secondo per catturare l’attenzione di un utente. Un messaggio breve e conciso aumenterà le probabilità che arrivi al tuo pubblico.
Per finire, ricordati di avere sempre un occhio di riguardo verso l’accessibilità: gli elementi in movimento possono avere un impatto negativo, specialmente per chi ha problemi di abilità motoria.
Immagino che, arrivato a questo punto, tu ti stia chiedendo quando, allora, è conveniente utilizzarlo. Non preoccuparti, ci arriviamo subito!
Come e quando usare il carosello correttamente
Diversi studi hanno confermato che solo una bassissima percentuale di utenti fa clic sugli elementi del carosello. Di questi, la quasi totalità clicca solo sul primo elemento che appare.
(fonte https://erikrunyon.com/2013/07/carousel-interaction-stats)
Per questo è importante che i controlli di navigazione del carosello siano facili da cliccare e altamente visibili. Inoltre, vale sempre la regola scritta sopra di utilizzare contenuti che catturino l’attenzione dell’utente.
Il carosello è una risorsa vincente per mostrare più immagini o informazioni brevi. Un esempio è la presentazione dei membri di un team o per mostrare delle recensioni (che aggiungono informazioni al tuo sito ma non sono il contenuto principale).
Inoltre, il carosello è un ottimo alleato se lo utilizzi per far confrontare diversi elementi, tenendo le loro specifiche allineate fianco a fianco.
I caroselli funzionano bene quando contengono contenuti interessanti e pertinenti presentati con un contesto chiaro.
Se, infatti, il contenuto non coinvolgesse un utente al di fuori di un carosello, posizionarlo all’interno, non ne migliorerebbe le prestazioni. Se devi utilizzare un carosello, dai la priorità al contenuto e assicurati che ogni diapositiva sia sufficientemente pertinente da consentire all’utente di passare alla diapositiva successiva.
Perché evitare di usare un plugin per il tuo carosello
Ora che hai più chiari i vari utilizzi del carosello, vediamo perché è più conveniente creare un carosello e non semplicemente inserirlo nella tua pagina web con un plugin.
Devi sapere che, quando utilizzi un plugin, verrà caricato l’intero framework Javascript su ogni pagina del tuo sito web, rendendolo inutilmente pesante.
I vantaggi di inserire il codice in un apposito modulo
Per poter far girare il codice solo sulla pagina in cui serve, devi inserirlo separatamente in un modulo codice di Divi, presente solo in quella stessa pagina.
Quest’ultimo punto è molto importante perché il codice CSS/JS, se inserito tutto in un solo modulo, oltre ad essere facile da configurare, è anche facile da mantenere. Inoltre come detto sopra è anche il metodo migliore ai fini delle prestazioni del tuo sito.
Inoltre, con questo tipo di procedura potrai trasformare in carosello qualsiasi tipo di modulo tu voglia!
Puoi addirittura utilizzare diversi tipi di moduli e farli scorrere uno dopo l’altro. Non sarai quindi legato al solo layout che trovi nel plugin.
Creazione del carosello
Finalmente è arrivato il momento di sporcarci le mani!
Se preferisci avere il carosello subito puoi scaricarlo gratuitamente compilando il modulo qui sotto!
Inserisci i dati per ottenere il Carosello gratuitamente.
Iscrivendoti alla nostra Newsletter avrai la possibilità di accedere ad altri contenuti gratuiti come questo in futuro 
Se hai cliccato sul pulsante qua sopra, avrai visto scaricare sul tuo computer un file zip. Ora devi estrarre il file .json contenuto all’interno e semplicemente importarlo nel tuo layout Divi.
I tre principali passaggi
Per creare il tuo carosello dovrai seguire 3 passaggi fondamentali:
- Crea una riga con una sola colonna e metti al suo interno tutti i moduli che vuoi trasformare in carosello (devono essere tutti all’interno della stessa riga!)
- Aggiungi la rispettiva categoria CSS a tutti i moduli e alla colonna (Attenzione! Non alla riga ma alla colonna!)
- Aggiungi una nuova riga con un modulo codice e inserisci il codice CSS/JS che ti mostrerò a breve
Creazione della riga e dei moduli
Andiamo quindi a creare la nostra riga con una sola colonna e inseriamo i moduli che ci occorrono.
La foto sopra è come appare il front-end, mentre la foto sotto è come appare il back-end.
Se vuoi creare un modulo blurb uguale a quello utilizzato in questo tutorial, crea prima un singolo modulo e applica le modifiche così come la foto sotto.
Una volta fatto, duplica il modulo per tutte le volte che ti occorre.
Inserimento degli ID
Una volta fatto questo, inseriamo l’ID della classe (tradotta in italiano da Divi come “Categoria” ID) sia nella colonna che in tutti i moduli presenti in quella colonna.
Questo ID serve a comunicare al codice che tutto ciò che ha questa classe fa parte del carosello.
Inseriamo quindi il seguente nome carosello-3col-slider nella colonna.
Inseriamo poi quest’altro nome carosello-3col nei moduli (va inserito in tutti).
Come espandere una modifica per non ripetere più volte la stessa azione
Se non la conosci già, sto per insegnarti una funzione fantastica di Divi che ti permetterà di velocizzare il passaggio dell’inserimento ID in tutti i moduli.
Una volta che inserisci l’ID nel primo modulo, non ripetere l’operazione per ogni nuovo modulo, ma passa il cursore accanto alla voce “Categoria CSS”.
Ti apparirà accanto un piccolo menù.
Clicca sui tre puntini verticali e ti si aprirà un ulteriore menù a tendina.
Clicca su “Estendi Categoria CSS.
Nella nuova finestra, lascia selezionato tutto com’è e cambia solo l’ultima voce in “Questa colonna”. In questo modo questa singola modifica verrà estesa a tutti i blurb presenti solo in quella specifica colonna.
Puoi anche inserire l’id del modulo al momento della sua creazione e poi duplicarlo. Al fine di rendere più leggibili gli step del tutorial ho preferito non anticipare questo passaggio.
Il codice
Il codice è formato essenzialmente da tre parti:
- Lo Slick.js Javascript Framework – un framework è un insieme di funzioni e tool già pronti all’uso. Puoi modificarlo per personalizzare le diverse funzioni, ma se non sei pratico del linguaggio ti sconsiglio di farlo;
- Il CSS per customizzare l’aspetto del nostro carosello;
- Lo Script che controlla i settaggi del nostro carosello (i pulsanti per lo scorrimento, i punti di impaginazione, il numero delle slide da mostrare, etc.).
Inserimento del codice
Creiamo ora una nuova riga e inseriamo un modulo codice:
Copia e incolla dentro il modulo il seguente codice:
Codice da copia incollare
<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-list {
position: relative;
display: block;
overflow-x: hidden;
margin: 0;
padding: 0 0 0px;
}
.slick-track:before, .slick-track:after {
display: table;
content: ”;
}
.slick-slide {
position: relative;
float: left;
height: 100%;
min-height: 1px;
}
.carosello-3col-slider .slick-arrow, .carosello-3col-slider .slick-arrow:hover, .carosello-3col-slider .slick-arrow:focus {
position: absolute;
font-size: 0;
line-height: 0;
padding: 0;
color: transparent;
outline: none;
background: rgba(159,249,159,0.5);
border: none;
cursor: pointer;
top: 50%;
transform: translateY(-50%);
z-index: 100;
height: 50px;
vertical-align: middle;
border-radius: 50%;
width: 50px;
}
.carosello-3col-slider .slick-prev { left: -50px; }
.carosello-3col-slider .slick-next { right: -50px; }
.carosello-3col-slider .slick-arrow:before {
font-family: ETmodules;
color: #000;
background: transparent;
opacity: 1;
font-size: 46px;
vertical-align: middle;
color: #fff;
text-align: center;
}
.carosello-3col-slider .slick-arrow:hover:before { opacity: 0.8; }
.carosello-3col-slider .slick-prev:before { content: ‘\34’; }
.carosello-3col-slider .slick-next:before { content: ‘\35’; }
.entry-content ul.slick-dots {
position: absolute;
bottom: 0;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 10px;
height: 10px;
padding: 0;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background-color: #B7B7B7;
border-radius: 10px;
}
.slick-dots li.slick-active button { background-color: #9ff99f; }
@media(max-width: 980px) {
.carosello-3col-slider .slick-prev { left: -32px; }
.carosello-3col-slider .slick-next { right: -30px; }
}
@media(max-width: 499px) {
.carosello-3col-slider .slick-prev { left: -26px; }
.carosello-3col-slider .slick-next { right: -24px; }
}
</style>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js”></script>
<script>
jQuery(document).ready(function() {
jQuery(‘.carosello-3col-slider’).slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 980,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1
}
}
]
});
});
</script>
Ultime correzioni
Se hai effettuato bene tutti i passaggi, sarai in grado di vedere i tuoi moduli trasformati in un carosello. Però, come noterai, per essere perfetti, vanno sistemati ancora un po’.
Infatti, a questo punto, i vari moduli risultano ancora attaccati l’uno all’altro. Diamogli un po’ di respiro, impostando la larghezza della riga al 90% e la larghezza massima a 1220 px.
Ovviamente queste impostazioni variano in base al layout che hai scelto. Se hai seguito alla lettera questo tutorial modifica i vari moduli così:
- Dimensionamento → Contenuti 100%
- Margine → 50px cima/in fondo | 25px sinistra/destro
- Padding → 25px cima /50px fondo | 50px sinistra/destro
- Bordo → Arrotondato di 10px
Infine impostiamo l’ombreggiatura a piacimento.
Conclusioni
Complimenti! Hai creato il tuo primo carosello!
Adesso non ti resta che utilizzarlo e posizionarlo al meglio nel tuo sito, e far sì che diventi un ottimo alleato per l’esperienza utente che stai elaborando.
Se ti sei divertitə nel seguire questo tutorial e vuoi approfondire l’argomento Divi abbiamo un corso che parla proprio di questi argomenti:
WordPress Go – Questo corso è un percorso formativo in grado di trasmetterti il nostro metodo per creare siti web sicuri, veloci e posizionabili sui motori di ricerca. Inoltre, realizzerai un sito a partire da zero, per mettere in pratica sin da subito quanto appreso.
E’ stato un piacere fare questo percorso insieme, al prossimo tutorial!
Valeria
