Evidenziazione del plug-in Divi: modulo Divi Carousel

DIVI Carousel Module è un plug-in di terze parti per Divi ed Extra che aggiunge uno slider avanzato a carosello a Divi Builder. Hai il controllo di quasi tutto nel modulo per creare praticamente qualsiasi tipo di carosello di cui hai bisogno per il tuo sito web Divi o Extra. In questo articolo, daremo un'occhiata al Divi Carousel Module e vedremo cosa può fare e quanto è facile da usare.

Installazione e attivazione del modulo Divi Carousel

Carica e attiva il plugin normalmente. Una nuova voce di menu viene aggiunta alla dashboard chiamata DiviGear. Vai in questo menu e aggiungi la tua chiave di licenza.

Modulo Divi Carousel in Divi Builder

Un nuovo modulo viene aggiunto a Divi Builder chiamato Divi Carousel.

Il modulo include un'area per aggiungere nuovi elementi. La scheda Contenuto ha le impostazioni del dispositivo di scorrimento, che ti consentono di scegliere quante diapositive mostrare in base al dispositivo che l'utente sta utilizzando, abilitare la multislide, impostare la durata della transizione, ecc. Abilitare la diapositiva centrale, il loop, la riproduzione automatica, la navigazione a freccia e la navigazione a punti . Imposta la spaziatura degli elementi, abilita la stessa altezza e l'allineamento verticale. Le impostazioni avanzate ti consentono di scegliere l'effetto cursore.

La scheda Design include le impostazioni per la sovrapposizione, l'immagine (larghezza), il bordo dell'immagine, il titolo e il corpo del testo, il colore, la spaziatura e il bordo. Ciò include le personalizzazioni del colore sia per la navigazione a freccia che a punto.

La scheda Avanzate contiene tutti i campi CSS che ti aspetteresti, oltre alle impostazioni per la visibilità e la transizione. Aggiunge campi CSS per titolo, contenuto, immagine e pulsante.

Il Carousel Item Settings include anche le tre schede. Queste impostazioni sovrascrivono tutto ciò che è impostato nelle impostazioni del modulo principale. La scheda Contenuto ha un'area per il contenuto principale, il collegamento del titolo e dell'immagine, le impostazioni dei pulsanti, le impostazioni dell'immagine e lo sfondo.

La scheda Design include le impostazioni per il testo del titolo, lo stile del contenuto (corpo del testo), il pulsante, la spaziatura e l'ombra del riquadro. Queste sono le impostazioni di progettazione standard che vedresti nella maggior parte dei moduli Divi. La scheda Avanzate è le impostazioni di base che si trovano nella maggior parte dei moduli.

Per le impostazioni delle immagini, puoi utilizzare immagini o icone.

Aggiungi tutte le diapositive che desideri. Le diapositive vengono visualizzate una accanto all'altra in base al numero che hai impostato per la visualizzazione. Questo è impostato per visualizzare quattro. Ovviamente puoi trascinarli e rilasciarli nell'ordine che preferisci.

In questo, ho regolato la spaziatura degli elementi a 100. La differenza principale che mostra nel mio esempio è il testo. Ora visualizza meno parole per riga.

Questo usa la navigazione a freccia. L'ho impostato per mostrare all'esterno della diapositiva. Ho impostato la spaziatura degli elementi su 1. È più ovvio se usi i colori di sfondo.

Ho impostato questo per mostrare due diapositive. Mostra la navigazione a punti.

Ecco uno sguardo alle impostazioni avanzate. Ho impostato l'effetto slider su Coverflow. Questo apre un'opzione di rotazione e ombra. Questa funzione mostra cosa distingue davvero il modulo da uno slider standard. Queste sono le impostazioni predefinite.

Ora ho impostato la rotazione a 100. Le diapositive sono inclinate ancora di più in 3D verso il lato sinistro, lontano dallo schermo.

Ecco la stessa rotazione ma senza l'ombra Coverflow.

Esempi di moduli Divi Carousel

Uno dei miei usi preferiti per un carosello è mostrare i loghi di clienti o prodotti. Per questo esempio, ho aggiunto il modulo alla pagina del portfolio della pagina di destinazione dello sviluppatore di app. L'ho impostato per mostrare 3 loghi aziendali, per eseguire il ciclo di scorrimento e per la riproduzione automatica in modo che il visitatore non debba navigare attraverso di essi.

Funziona anche per mostrare i progetti su cui hai lavorato. Per questo, ho aggiunto diversi progetti con pulsanti in modo che il visitatore possa vedere il progetto. Ho cambiato il colore del testo del pulsante in bianco e ho aggiunto un'ombra di casella al pulsante. Ho reso le frecce bianche e ho impostato l'opacità del loro sfondo su quasi trasparente.

Qui, ho aggiunto uno sfondo alla diapositiva, l'ho resa semitrasparente e ho aggiunto l'ombra della scatola. La spaziatura include il pulsante, l'immagine e l'imbottitura del contenuto. Ho aggiunto spaziatura al pulsante e all'immagine.

Questo usa l'effetto cursore Overflow. Queste sono le impostazioni predefinite.

Per questo, l'ho impostato per centrare la diapositiva. Quando viene utilizzato con le impostazioni Overflow, centra la diapositiva centrale e inclina le diapositive su entrambi i lati in modo che siano una di fronte all'altra. È impostato per visualizzare quattro diapositive.

Questo è impostato per visualizzare 3 diapositive. Ho impostato la rotazione a 80.

Questo è impostato per visualizzare 6 diapositive. Ruota è l'impostazione predefinita (50).

Questo mostra 6 diapositive senza Center Slide o Overflow abilitato.

Questo mostra 6 con Center Slide abilitato.

Per questo esempio, sto usando il modulo come cursore del menu del cibo. Aggiungendo un'immagine, un testo e un pulsante, crea effettivamente uno slider di blurb. Le immagini sono impostate su una larghezza di 100. Ho aggiunto una sovrapposizione, un pulsante per acquistare ogni articolo (il pulsante ti porta alla pagina del prodotto per l'articolo) e la navigazione a punti. Ho disegnato la sovrapposizione e l'icona della sovrapposizione, nonché i punti per le diapositive attive e non attive. Si adatta perfettamente al layout del caffè.

Per questo, ho aggiunto la navigazione a freccia e l'ho disegnata in modo che corrisponda ai pulsanti. Ce l'ho per mostrare le frecce al passaggio del mouse. Puoi impostare le frecce all'interno o all'esterno del cursore e cambiarne il colore. Non puoi modificarne le dimensioni nelle impostazioni del modulo.

Questo usa l'effetto Coverflow. Sto passando il mouse sulla diapositiva sinistra per mostrare la sovrapposizione e le frecce.

Per questo, ho aggiunto uno sfondo e un'ombra di riquadro a una sola delle diapositive. Questo può essere usato per mostrare cosa c'è in vendita o evidenziare l'offerta migliore.

Per questo, sto usando solo le icone. Ho posizionato il modulo accanto a una serie di moduli blurb e ho impostato 6 collegamenti ai social media. Sono in stile per abbinare i blurb. Cliccando sull'icona si apre il social network. L'ho impostato per scorrere automaticamente ogni secondo.

La visualizzazione di più diapositive interrompe parte di un'icona, il che offre una buona visuale mentre il dispositivo di scorrimento si anima.

Per questo esempio, volevo creare un semplice dispositivo di scorrimento della tabella dei prezzi. Ho semplificato i prezzi dal pacchetto di layout del campo da golf.

Ora ho aggiunto l'ombra della scatola. All'inizio non riuscivo a far passare l'ombra verticale sotto la diapositiva. Poi mi sono accorto che i vetrini toccavano i lati del contenitore del modulo. Ho aggiunto l'imbottitura del modulo e ho potuto quindi aggiungere le ombre della scatola su tutti i lati delle diapositive.

Puoi anche regolare il pulsante, l'immagine e l'imbottitura del contenuto per ogni diapositiva individualmente. In questo esempio, sto regolando l'imbottitura per la diapositiva a sinistra.

Ho aggiunto le frecce e le ho stilizzate in modo che corrispondano agli elementi nel layout.

Per questo esempio, ho aggiunto immagini, modificato l'ombra del riquadro e aggiunto un po' più di riempimento del contenuto in modo che l'ombra del riquadro venga visualizzata completamente. Ho anche spostato le frecce all'esterno delle diapositive.

Ora ho aggiunto un pulsante. Ho regolato gli stili dei pulsanti inclusi i colori, il raggio del bordo, le dimensioni del testo e ho aggiunto un'ombra di riquadro che corrisponde alle diapositive.

Naturalmente, poiché il modulo include un'area di contenuto, è possibile aggiungere qualsiasi tipo di contenuto desiderato, inclusi i media. Ho aggiunto immagini che corrispondono al layout. Tutto il contenuto è posto sotto il titolo. Le immagini sembrano grandi in questa posizione.

Ecco come appare il modulo all'interno del layout del campo da golf. Il layout originale aveva molte caratteristiche di prezzo. Utilizzando il modulo Divi Carousel, tutti i prezzi sono ancora lì ma sono mostrati nelle diapositive. Sembra che appartenga a questo layout.

Funziona benissimo anche con Extra. In questo esempio, ho impostato la pagina in modo che non mostri una barra laterale.

Ecco come appare con una barra laterale (anche se non ho aggiunto alcun widget per la barra laterale, la dimensione è la stessa). Puoi vedere qui che il modulo è responsive.

Prezzo del modulo Carousel Divi

Il modulo Divi Carousel è disponibile dal sito Web dello sviluppatore. Sono disponibili due opzioni:

• Sito singolo – $ 15
• Siti illimitati – $ 29

Documentazione e supporto del modulo Divi Carousel

La documentazione è disponibile nel menu della dashboard di DiviGear. Seleziona la scheda Documentazione. Questo fornisce collegamenti a una guida video di 4 minuti sul canale YouTube DiviGear. Il supporto per i ticket viene fornito tramite Freshdesk.

Pensieri finali

Il modulo Divi Carousel è un modo semplice per aggiungere uno slider a carosello a Divi Builder. È intuitivo e in realtà ha più personalizzazioni di quanto mi aspettassi. Ci sono state alcune volte in cui non sono riuscito a clonare correttamente una diapositiva, ma questo potrebbe essere stato un problema da parte mia. Ricorda di assegnare a ogni diapositiva un'etichetta amministratore o mostreranno il nome dell'elemento all'interno del modulo, il che rende difficile distinguerli.

Mi piace che abbia immagini, contenuti e pulsanti separatamente. Ciò ti consente di creare carte, blurb, immagini, testo, mostrare icone o qualsiasi cosa tu abbia bisogno di mostrare in uno slider. Puoi aggiungere un'immagine nella parte superiore del dispositivo di scorrimento ed essere comunque in grado di aggiungerne altre all'area del contenuto.

Divi Carousel Module è un eccellente dispositivo di scorrimento del carosello. È disponibile dal sito Web dello sviluppatore e nei marketplace Divi.

Vogliamo sentire da voi. Hai provato il modulo Divi Carousel? Fateci sapere cosa ne pensate nei commenti qui sotto.

Immagine in primo piano tramite Anatolir / shutterstock.com