I caroselli sono spesso un ottimo modo per mostrare numerosi elementi simili nella stessa pagina: testimonianze, blocchi servizi, immagini, ecc… Ma spesso vengono realizzati con plugin che richiedono molte risorse e che verranno caricate in ogni pagina del tuo sito, anche dove non hai inserito nessun carosello.

Se segui il mio video tutorial invece realizzerai un carosello davvero semplice e snello.

Sotto al video trovi descritti i principali passaggi e il codice che devi copiare e incollare nella pagina del tuo carosello.

Per creare questo carosello devi completare tre passaggi:

• Inserire una riga con una colonna e i moduli che devono comporre il carosello
• Assegnare una classe CSS alla colonna
• Aggiungere il codice CSS/JS nella pagina

Passo 1: Inserire una riga ad una colonna e i moduli che devono comporre il carosello

Inserisci, dove desideri creare il carosello, una riga con una colonna. È importante: se la riga avrà più colonne il codice non funzionerà.
Inserisci poi tutti i moduli del carosello (per esempio blur oppure immagini, o persona, o testo, ecc…) uno sotto l’altro nella colonna appena creata.

Alla riga assegna le seguenti impostazioni nella tab DESIGN:

• Dimensionamento – Larghezza: 90%
• Dimensionamento – Larghezza massima: 1200px

Ad ogni modulo ricordati di assegnare le seguenti impostazioni nella tab DESIGN (puoi assegnarle solo al primo e poi duplicare):

• Dimensionamento – Contenuti: 100%
• Spaziatura – margine superiore e inferiore: 50px
• Spaziatura – margine sinistro e destro: 25px
• Spaziatura – padding superiore e inferiore: 30px
• Spaziatura – padding destro e sinistro: 25px
• Box shadow – seleziona la prima opzione e forza di diffusione dell’ombra: -10px

Passo 2: Assegnare una classe CSS alla colonna

Apri le impostazioni di riga, poi della colonna, spostati nella tab AVANZATE e in ID & CLASSI CSS inserisci questa classe:
carosello-3-colonne

Passo 3: Aggiungere il codice CSS/JS nella pagina

Sotto alla riga del carosello oppure in fondo alla pagina inserisci una nuova riga e un modulo codice. All’interno del modulo incolla tutto il codice che trovi qui (non temere, non c’è pericolo che il tuo sito si rompa. Al massimo il carosello non funzionerà).

<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;
	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-3-colonne .slick-arrow,
.carosello-3-colonne .slick-arrow:hover,
.carosello-3-colonne .slick-arrow:focus {
	position: absolute;
	font-size: 0;
	line-height: 0;
	padding: 0;
	color: transparent;
	outline: none;
	background: #dbe1e7;
	border: none;
	cursor: pointer;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	height: 50px;
	vertical-align: middle;
	border-radius: 50%;
	width: 50px;
}
.carosello-3-colonne .slick-prev { left: -50px; }
.carosello-3-colonne .slick-next { right: -50px; }

.carosello-3-colonne .slick-arrow:before {
	font-family: ETmodules;
	color: #000;
	background: transparent;
	opacity: 1;
	font-size: 46px;
	vertical-align: middle;
	color: #88939f;
	text-align: center;
}
.carosello-3-colonne .slick-arrow:hover:before { opacity: 0.8; }
.carosello-3-colonne .slick-prev:before { content: '\34'; }
.carosello-3-colonne .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: #b6cec8; }

@media(max-width: 980px) {
	.carosello-3-colonne .slick-prev { left: -32px; }
	.carosello-3-colonne .slick-next { right: -30px; }
}
@media(max-width: 499px) {
	.carosello-3-colonne .slick-prev { left: -26px; }
	.carosello-3-colonne .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-3-colonne').slick({
		dots: true,
		slidesToShow: 3,
		slidesToScroll: 1,
		responsive: [
			{
				breakpoint: 980,
				settings: {
				slidesToShow: 2
				}
			},
			{
				breakpoint: 767,
				settings: {
				slidesToShow: 1
				}
			}
		]
	});
});
</script>

E ci siamo! Ora il tuo carosello dovrebbe essere molto simile e questa immagine o a quello che puoi vedere nel video.

Sono certa che guardando il video tutorial hai scoperto che costruire il tuo sito con DIVI è molto semplice e divertente.

Se questo tutorial ti è stato utile e vuoi condividere con me il risultato del tuo lavoro puoi lasciarmi un commento qui sotto oppure contattarmi sul mio profilo Instagram.

Se vuoi conoscere ancora meglio DIVI, il potentissimo tema WordPress creato da Elegant Themes, nel mio videocorso LOLLIPOP trovi un’intera lezione dedicata ai theme builder e a DIVI.