Come creare un carosello cliccabile di moduli Divi
Pubblicato: 2017-09-19Il post di oggi è stato inviato da Michelle Nunan di Divi Soup, sede della "Divi Kitchen" dove prepara costantemente nuovi e utili tutorial Divi e corsi elettronici.
I caroselli sono una caratteristica popolare del sito web. Ti consentono di visualizzare più contenuti senza occupare spazio extra e aggiungono anche un elemento di interattività al tuo sito web che può incoraggiare i tuoi visitatori a interagire di più con i tuoi contenuti.
Esistono numerosi ottimi plugin che possono aiutarti a visualizzare i tuoi contenuti in un carosello, ma in questo post ti mostrerò come creare un carosello cliccabile di moduli Divi usando solo CSS e Javascript.
Questo effetto può essere utilizzato con quasi tutti i moduli Divi standard o una combinazione di moduli. Ti mostrerò come creare questo carosello usando il modulo immagine e poi con il modulo blog poiché il processo per questo è leggermente diverso. Da lì dovresti capire come puoi creare il tuo carosello con quasi tutti i moduli standard.
Risultato
Questo è ciò che dovresti ottenere dopo aver creato un carosello con il modulo blog
Puoi vedere una demo dal vivo qui che mostra l'effetto utilizzando vari moduli Divi Builder.
Quindi iniziamo.
Aggiungi una nuova pagina
Inizieremo creando un carosello con il modulo immagine. Aggiungi una nuova pagina o apri una pagina a cui desideri aggiungere il carosello.
Aggiungi una nuova sezione
Aggiungi una nuova sezione standard alla tua pagina con una singola colonna. Quindi apri le impostazioni della sezione e nella scheda Avanzate, aggiungi la classe ds-carousel-section nel campo Classe CSS.
Poiché cambieremo il modo in cui le sezioni e le righe vengono visualizzate, vogliamo solo che queste modifiche vengano applicate al nostro carosello, quindi aggiungiamo una classe personalizzata per evitare che il nostro codice influisca su altri elementi del nostro sito.
Quindi salva ed esci dalla sezione.
Ora apri le impostazioni della riga e nella scheda Avanzate aggiungi la classe ds-carousel-row nel campo Classe CSS. Quindi salva ed esci dalla riga.
Quindi aggiungeremo un modulo immagine alla nostra riga. Fare clic su Inserisci modulo/i e selezionare il modulo immagine dall'elenco.
Nella scheda Contenuto del modulo immagine, fai clic su Carica un'immagine e seleziona l'immagine desiderata dalla libreria multimediale o caricane una nuova.
Se vuoi che le tue immagini si aprano in una lightbox, seleziona questa opzione nelle impostazioni.
In alternativa, se lo desideri, puoi aggiungere un URL per aprire una nuova pagina quando si fa clic sull'immagine.
L'ultima cosa che dobbiamo fare al modulo è aggiungere una classe. Fare clic sulla scheda Avanzate e aggiungere la classe ds-carousel-module nel campo Classe CSS. Quindi salva ed esci dal modulo.
Questo è uno dei nostri moduli, ma avremo bisogno di più di una singola immagine per creare il carosello. Il codice che fornirò più avanti in questo post mostrerà 5 immagini alla volta, quindi avremo bisogno di almeno 6 immagini affinché i nostri pulsanti del carosello abbiano effetto e scorrano i nostri contenuti.
Usando la funzione clone di Divi, duplica il modulo immagine tutte le volte che desideri che le immagini vengano visualizzate nel tuo carosello.
Quando hai finito, la tua sezione dovrebbe apparire così, con i moduli immagine impilati in una singola riga.
Dovrai aprire le impostazioni per ogni modulo e scambiare le tue immagini e l'URL se l'hai aggiunto.
Questa è la configurazione del contenuto completata, ora creeremo la navigazione.
Aggiungi una nuova sezione
Aggiungi una nuova sezione direttamente sotto la sezione dell'immagine, questa volta con due colonne.
Apri le impostazioni della riga e nella scheda Avanzate aggiungi la classe ds-arrow-row nel campo Classe CSS. Quindi salva ed esci dalla riga.
Aggiungi la navigazione
Quindi, aggiungi un modulo di testo a ciascuna delle due colonne in questa riga.
Ora dobbiamo creare campi di input che fungano da pulsanti di navigazione. Apri il modulo di testo nella colonna di sinistra e nell'area del contenuto incolla il seguente codice HTML:
<input id="ds-arrow-left" type="button" value="8">
Quindi salva ed esci dal modulo.
Quindi apri il modulo di testo nella colonna di destra e incolla il seguente HTML:
<input id="ds-arrow-right" type="button" value="9">
Quindi salva ed esci dal modulo.
Stiamo dando a questi campi di input ID univoci di ds-arrow-left e ds-arrow-right in modo che possiamo sia modellarli con CSS che indirizzarli con JavaScript per dire loro cosa vogliamo che facciano quando vengono cliccati.
I valori di 8 e 9 si riferiscono alle doppie frecce sinistra e destra della famiglia di caratteri ET Modules.
Questo è tutto ciò che dobbiamo fare nel costruttore. Se controlli il front-end della tua pagina ora sarà solo una singola colonna di immagini e poi due piccoli pulsanti grigi con 8 e 9 su di essi e non faranno nulla. Quindi veniamo alla parte divertente, aggiungendo il nostro codice.
Aggiungi il CSS
Consiglierei di aggiungere il seguente CSS al tuo tema figlio, ma se non stai utilizzando un tema figlio, va bene aggiungerlo a Divi> Opzioni tema> Generale> CSS personalizzato e assicurati di premere Salva.
/*Hide the section overflow*/
.ds-carousel-section {
width: 100%;
overflow: hidden;
}
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}
@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}
@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}
/*Style the navigation arrows*/
#ds-arrow-left,
#ds-arrow-right {
color: #fff;
background: gray;
font-family: 'ETModules';
font-size: 30px;
padding: 5px 30px;
border-style: none;
border-radius: 0;
cursor: pointer;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*Position the left arrow*/
#ds-arrow-left {
float: right;
margin-right: 5px;
}
/*Position the right arrow*/
#ds-arrow-right {
float: left;
margin-left: 5px;
}
/*Style navigation arrows on hover*/
#ds-arrow-left:hover,
#ds-arrow-right:hover {
-webkit-box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
}
/*Style navigation arrows on click*/
#ds-arrow-left:active,
#ds-arrow-right:active {
-webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}
/*Make sure the modules span their entire container*/
.ds-carousel-module .column {
float: left;
width: 100% !important;
margin-right: 0 !important;
}
/*Set the module width*/
.ds-carousel-module {
width: 20vw; /*Change this value to increase or decrease the module displayed per page*/
padding: 0 30px;
float: left;
position: relative;
margin-bottom: 0 !important;
}
/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
/*Show 3 modules per page on tablets*/
.ds-carousel-module {
width: 33.33vw;
}
/*Align the navigation on smaller screens*/
#ds-arrow-row .et_pb_column {
width: 50% !important;
}
}
@media all and (max-width: 479px) {
/*Show 1 module per page on mobiles*/
.ds-carousel-module {
width: 100vw;
}
}Modifica il CSS per le tue esigenze
Potrebbe essere necessario modificare alcune delle dichiarazioni CSS a seconda di quanti moduli usi nel tuo carosello.
Ora un po' di matematica!
Questa dichiarazione imposta la larghezza della riga contenente i moduli.
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}Per far galleggiare i nostri moduli uno accanto all'altro, con alcuni posti al di fuori dell'area visibile, dobbiamo aumentare la larghezza della riga.
Se stai visualizzando un totale di 15 moduli con 5 per pagina, ti ritroverai con 3 pagine. Quindi la larghezza visibile della riga deve essere:
(15/5) x 100 = 300.
Pertanto sarà necessario modificare i valori 1000vw a un minimo di 300vw. (Non importa se inserisci un numero maggiore in quanto JavaScript si occuperà di non visualizzare pagine vuote in più). Quindi il tuo CSS modificato sarebbe simile a questo:
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 300vw;
max-width: 300vw;
}Con le media query è leggermente diverso. Poiché il CSS è configurato per visualizzare 3 immagini per pagina su schermi larghi 1024px o meno e 1 immagine per pagina su schermi larghi 479px o meno, dobbiamo regolare la matematica per riflettere che:
(15 / 3) x 100 = 500 (per compresse)
(15 / 1) x 100 = 1500 (per cellulari)
Il tuo CSS modificato sarebbe simile a questo:
@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
.ds-carousel-section .ds-carousel-row {
max-width: 500vw !important;
}
}
@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
.ds-carousel-section .ds-carousel-row {
max-width: 1500vw !important;
}
}Se lo desideri, puoi semplicemente modificare tutti questi valori a una larghezza maggiore del numero totale di moduli che stai utilizzando per semplicità. Quindi nell'esempio di cui sopra quel valore sarebbe 1500vw o più.
Potresti anche voler cambiare il numero di moduli visualizzati per pagina. Questa dichiarazione CSS è dove puoi modificarla.
/*Set the module width*/
.ds-carousel-module {
width: 20vw; /*Change this value to increase or decrease the modules displayed per page*/
padding: 0 30px;
float: left;
position: relative;
margin-bottom: 0 !important;
}
Il valore della larghezza di 20vw visualizza 5 immagini per pagina ed è solo una percentuale di 100. Quindi 25vw visualizzerà 4 immagini per pagina e 16.66vw visualizzerà 6 immagini per pagina e così via.
Puoi fare lo stesso per le media query:
/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
/*Show 3 modules per page on tablets*/
.ds-carousel-module {
width: 33.33vw;
}
/*Align the navigation on smaller screens*/
#ds-arrow-row .et_pb_column {
width: 50% !important;
}
}
@media all and (max-width: 479px) {
/*Show 1 module per page on mobiles*/
.ds-carousel-module {
width: 100vw;
}
}Ricorda che se modifichi il numero di immagini visualizzate per pagina, potresti anche dover regolare il valore della larghezza della riga discusso in precedenza.
Se controlli di nuovo la tua pagina ora, tutto dovrebbe avere uno stile gradevole e apparire come un carosello, ma affinché funzioni, dobbiamo aggiungere del JavaScript.
Aggiungi il JavaScript
Copia e incolla il seguente codice in Divi > Opzioni tema > Integrazioni > Aggiungi codice a < head > del tuo blog e assicurati di salvare.
<script type="text/javascript">
(function ($) {
var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;
function mn_next_slide(item) {
mn_end_index = ( item.length / mn_visible ) - 1; //End index
if (mn_index < mn_end_index ) {
mn_index++;
item.animate({'left':'-=100vw'}, 1000);
}
}
function mn_previous_slide(item) {
if (mn_index > 0) {
mn_index--;
item.animate({'left':'+=100vw'}, 1000);
}
}
function mn_first_slide(item) {
if (mn_index > 0) {
var move_vw = (100 * mn_index);
item.animate({'left':'+='+move_vw+'vw'}, 1000);
mn_index = 0;
}
}
function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}
function mn_carousel_init() {
mn_set_visible();
var item = $('.ds-carousel-module');
$('#ds-arrow-right').click(function() {
mn_next_slide(item);
});
$('#ds-arrow-left').click(function() {
mn_previous_slide(item);
});
$(window).resize(function() {
mn_set_visible();
mn_first_slide(item);
});
}
$(document).ready(function() {
mn_carousel_init();
});
})(jQuery)
</script>Questo codice aggiunge funzionalità ai nostri pulsanti, spostando la riga a sinistra ea destra al clic per visualizzare i moduli.
Ci sono un paio di aree che potresti voler modificare:
var mn_index = 0; //Starting index var mn_visible = 5; var mn_end_index = 0;
Il mn_visibile = 5; la variabile corrisponde al numero di moduli visualizzati per pagina sul desktop. Quindi, se hai cambiato questo nel CSS come menzionato in precedenza, vorrai anche cambiare questo valore.
Allo stesso modo, questa funzione regola il numero di immagini visualizzate su tablet e cellulari. Quindi, se lo hai modificato nel CSS, regola anche i valori mn_visible qui.
function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}Infine, abbiamo la velocità con cui si muove la giostra. È impostato qui come 1000. Questa è la velocità in millisecondi: 1000 millisecondi = 1 secondo.
È possibile regolare questo valore per accelerare o rallentare l'animazione.
function mn_next_slide(item) {
mn_end_index = ( item.length / mn_visible ) - 1; //End index
if (mn_index < mn_end_index ) {
mn_index++;
item.animate({'left':'-=100vw'}, 1000);
}
}
function mn_previous_slide(item) {
if (mn_index > 0) {
mn_index--;
item.animate({'left':'+=100vw'}, 1000);
}
}
function mn_first_slide(item) {
if (mn_index > 0) {
var move_vw = (100 * mn_index);
item.animate({'left':'+='+move_vw+'vw'}, 1000);
mn_index = 0;
}
}Questo è tutto! Ora se visualizzi la tua pagina dovresti avere un carosello cliccabile di moduli immagine.
Come ho detto, puoi usare questo metodo con quasi tutti i moduli standard Divi builder, ma potresti dover regolare le impostazioni con moduli progettati per visualizzare un qualche tipo di feed, come il modulo blog.
Poiché il modulo del blog inserisce i post e li visualizza in più colonne (quando si utilizza la funzione griglia), ciò richiederebbe la regolazione delle impostazioni del modulo e un po' di CSS extra.
Carosello utilizzando il modulo Blog
Segui gli stessi passaggi per impostare la sezione e la riga.
Invece di aggiungere un modulo immagine, scegli il modulo blog e aggiungi la classe ds-carousel-module nella scheda Avanzate delle impostazioni del modulo.
Quindi, nella scheda Design scegli Griglia dal menu a discesa del layout.
Puoi lasciarlo come Fullwidth se lo desideri, ma l'opzione Griglia aggiunge automaticamente uno stile che si adatta meglio al layout del carosello.
Ora dobbiamo regolare alcune impostazioni nella scheda Contenuto.
Per questo primo modulo, abbiamo bisogno che il numero di post sia impostato su 1 e il numero di offset impostato su 0.
Il modo in cui regoli il resto delle impostazioni e il contenuto che visualizzi dipende interamente da te. Quindi salva ed esci.
Come abbiamo fatto prima, usa la funzionalità di clonazione di Divi per duplicare il modulo tutte le volte che vuoi.
Una volta ottenuto il numero di moduli del blog di cui hai bisogno, apri ciascuno di essi e incrementa il numero di offset di 1 ogni volta in modo che ogni modulo del blog visualizzi il post successivo nel feed.
Quindi le tue impostazioni sarebbero simili a questa:
1° = Numero offset: 0
2° = Numero offset: 1
3° = Numero di offset: 2
4° = Numero di offset: 3
Eccetera.
Un po' di CSS in più
Poiché il modulo blog viene visualizzato in colonne quando si utilizza il formato Grid, è necessario aggiungere questa query multimediale extra al nostro CSS per sovrascrivere l'impostazione delle colonne di Divi su schermi più piccoli:
@media all and (max-width: 980px) {
/*Set post to fullwidth on smaller screens*/
.ds-carousel-section .et_pb_blog_grid .column.size-1of2 {
width: 100% !important;
margin: 0 !important;
}
}Se hai deciso di utilizzare il modulo blog in modalità Larghezza intera, non sarà necessario aggiungerlo.
Risultato
Ora controlla la tua pagina e guarda il tuo nuovo adorabile Blog Carousel
Pensieri finali
Ci sono tanti modi in cui puoi utilizzare questo effetto carosello per visualizzare più contenuti senza aumentare la lunghezza della tua pagina.
Potresti mostrare una vetrina dei progetti del tuo sito, testimonianze dei clienti, biografie dei dipendenti, video, podcast o persino prodotti del tuo negozio.
Mi piacerebbe sapere come usi questo tutorial per creare un carosello cliccabile di moduli Divi, quindi lascia un commento nella sezione sottostante!
Immagine in evidenza di aunaauna / Shutterstock.com