fbpx

Paripassi è il percorso di 12 mesi per imparare a gestire da sola sito e newsletter! DIMMI DI PIÙ!

Come creare un carosello con Divi senza installare plugin

15 Febbraio 2022Divi, Tutorial

Creare un carosello con Divi e senza plugin
Eccomi con un nuovo video tutorial per Divi. In questo post vediamo insieme come creare un carosello senza dover installare nessun plugin. Saranno sufficienti i moduli di Divi e un po’ di codice che ti fornisco più in basso.
Inseriremo questo codice direttamente nella pagina in cui creiamo il carosello, così da non appesantire in alcun modo il resto del sito.

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

Classe CSS Carosello Divi

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.

Carosello finale
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 percorso PARIPASSI trovi un’intera lezione dedicata ai theme builder e a DIVI.

Vuoi rendere il tuo sito creato con Divi sempre più speciale?

Se questo articolo ti è piaciuto e se desideri creare il tuo sito web e restare sempre aggiornata sul mondo di WordPress e delle newsletter puoi iscriverti al mio corso gratuito e alla mia newsletter compilando il form qui sotto:

Hai trovato utile questo contenuto?

Puoi offrirmi un caffè!

Ciao!

Ciao!

Sono Ljuba. Web designer freelance. Metà perfezionista e metà sognatrice. Femminista in divenire. In costante evoluzione e quasi sempre con i capelli ciclamino.
I siti che realizzo sono piacevoli da navigare, attraenti già dal primo sguardo, rispettosi delle regole di usabilità e accessibilità. Raccontano le mie clienti in tutto e per tutto, le definiscono come donne e professioniste che non hanno timore di farsi vedere per chi sono davvero. Conosciamoci meglio
Creare un carosello con Divi e senza plugin
Creare un carosello con Divi e senza plugin
Creare un carosello con Divi e senza plugin
Creare un carosello con Divi e senza plugin

7 Commenti

  1. Giulia

    Bellissimo il video su youtube in cui spieghi. Finalmente qualcuno che spiega in modo chiaro e preciso! Complimenti davvero poi per il tuo bellissmo sito e per i tuoi meravigliosi capelli!
    Grazie per il tuo lavoro

    Rispondi
    • Ljuba

      Ma grazie di cuore Giulia, felicissima di esserti stata utile.

      Rispondi
  2. Francesco

    Bellissimo tutorial complimenti. Avendo 8 immagini però mi rimane uno spazio vuoto alla fine delle foto e alla ripresa della prima per intenderci probabilmente perché il carosello è a 3 colonne. Dove si può intervenire per fare sì che le foto non si interrompano? Grazie mille

    Rispondi
  3. Mario

    Ciao, ottima guida, il dock (quello con i pallini) sotto alle sezioni nel mio sito non appare centrale e vorrei poter modificare il colore dei pallini, come posso fare? grazie

    Rispondi
    • Ljuba

      Ciao Mario, per capire perché non appare devi ispezionare il codice. Potrebbe dipendere dal tuo tema. Tramite il CSS puoi cambiare il colore dei pallini.

      Rispondi
  4. Benedetta Dolecki

    Ciao,
    grazie per il video. Posso chiederti come imposti il contenuto in 100%? A me esce in pixel. Al contrario dove assegni la larghezza massima all’immagine di 300 pixel a me esce una percentuale.
    Grazie mille se mi sai rispondere

    Rispondi
    • Ljuba

      Ciao Benedetta. Come vedi nel video lo imposto al 90% e digito proprio dalla tastiera del pc il simbolo di percentuale. Di default Divi completa con i pixel.

      Rispondi

Invia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Creazione siti WordPress

WordPress in Pillole

Iscriviti al mio corso gratuito via mail che ti insegna a creare e gestire il tuo sito WordPress

Evviva, grazie per aver scelto di iscriverti a WordPress in Pillole. Ora devi cliccare sul link di conferma che hai ricevuto via mail.