Tutto quello che devi sapere sul modulo di carosello del gruppo di Divi 5

Uno degli ultimi moduli di Divi 5, The Group Carousel, è qui per semplificare la creazione di giostre e animazioni visivamente sbalorditive per il tuo sito web Divi. Questa potente aggiunta consente ai web designer di creare giostre Web coinvolgenti senza bisogno di plugin di terze parti o CSS personalizzati. Sia che tu stia costruendo un portafoglio elegante, un negozio di e-commerce o un blog, il modulo di carosello di gruppo sblocca nuovi livelli di creatività.

In questo post, copriremo tutto ciò che devi sapere sul modulo di carosello di gruppo, completo di esempi e una guida passo-passo su come usarlo. Immergiamoci!

Cos'è il modulo di carosello di gruppo?

Il modulo di carosello di gruppo in Divi 5 consente di creare giostre e cursori dinamici e accattivanti che possono aggiungere un po 'di movimento e interattività al tuo sito Web. Che tu stia mostrando pezzi di portafoglio, membri del team o prodotti, questo modulo versatile ti consente di creare praticamente qualsiasi tipo di giostra, compresi quelli post-basati che tirano il contenuto in modo dinamico.

Ogni diapositiva è una tela vuota, che consente di aggiungere qualsiasi modulo Divi, rendendolo un ottimo strumento per i design creativi e funzionali.

Caratteristiche chiave

Il modulo di carosello di gruppo è costruito sulle basi ottimizzate di Divi 5, garantendo tempi di carico rapidi e transizioni fluide. L'interfaccia di trascinamento di Drag-and-Drop di Divi 5 ti consente di aggiungere facilmente moduli ai cursori, con controlli reattivi ai layout di perfezionamento per desktop, tablet e dispositivi mobili, pur mantenendo prestazioni veloci.

Slide personalizzabili

Il modulo Carousel di gruppo offre un controllo completo sul numero di cursori, il loro contenuto e le impostazioni di animazione. È possibile regolare le transizioni delle diapositive, i tempi e le opzioni di navigazione per creare un'esperienza utente senza soluzione di continuità che corrisponda alla tua visione.

Contenuto dinamico con Loop Builder

Integrato con Loop Builder di Divi 5, il modulo supporta giostre dinamiche in base a post, termini o dati utente. Ad esempio, è possibile creare una giostra testimoniale utilizzando tipi di post personalizzati e campi personalizzati avanzati (ACF), attirando automaticamente le revisioni dei clienti o i casi studio senza bisogno di aggiornamenti manuali.

Flessibilità di progettazione

Puoi sfruttare le impostazioni di progettazione di Divi 5 per costruire stili di giostra unici. Applicare trasformazioni, filtri, ombre in scatola o effetti di mouse su diapositive e personalizza i singoli moduli all'interno del gruppo per creare diapositive visivamente accattivanti che mantengano i visitatori impegnati.

Come usare il modulo di carosello di gruppo

La creazione di una giostra di gruppo in Divi 5 è intuitiva e flessibile. Inizia aggiungendo una riga a colonna singola alla pagina. Quindi, seleziona il modulo di carosello di gruppo nel Visual Builder e aggiungilo alla tua pagina.

Nella scheda Contenuto , fare clic per espandere il menu a discesa Impostazioni della giostra .

Abilita la rotazione automatica , la modalità centrale e imposta le diapositive su 3 .

Abilita la navigazione di Show Dot nel menu a discesa Elements. È possibile lasciare le frecce show abilitate o disabilitarle.

Assegna lo stile al primo gruppo

Con le nostre impostazioni di giostra in atto, possiamo aggiungere il nostro primo gruppo. Fare clic sull'icona delle impostazioni del gruppo per visualizzare le impostazioni.

Nella scheda Contenuto , espandere il menu a discesa in background . Fai clic sulla scheda Immagine di sfondo, quindi fai clic su +Aggiungi immagine di sfondo per aggiungere un'immagine al gruppo.

Quindi, vai alla scheda Design . Espandi il menu a discesa layout e imposta Justifica il contenuto per terminare .

Quindi, espandi il menu a discesa di spaziatura e aggiungi il margine del 5% a sinistra e a destra del nostro gruppo. Ciò aggiungerà un po 'di respiro tra gruppi nella giostra.

Imposta l'imbottitura superiore al 100%. Applicare l'imbottitura 25px a sinistra e a destra.

Aggiungi contenuto al primo gruppo

Possiamo rivolgere la nostra attenzione all'aggiunta di contenuti al nostro gruppo. Fai clic sull'icona Black + e aggiungi un modulo divisore .

Passare alla scheda Design . Espandi il menu a discesa della linea e cambia il colore in #ffffff .

Quindi, espandi la scheda di dimensionamento. Imposta il peso del divisore su 4px e la larghezza al 15% .

Quindi, aggiungi un modulo di intestazione al gruppo. Dai un titolo alla voce .

Passa alla scheda Design . Sotto il testo dell'intestazione , impostare il livello di intestazione su H2 (o qualsiasi altra intestazione che desideri) , selezionare Inter per il carattere dell'intestazione , scegliere la luce per il peso del carattere, #ffffff per il colore del testo dell'intestazione e 2em per la dimensione del testo dell'intestazione .

Prima di duplicare il nostro gruppo, torniamo alla scheda Design e regola il divario verticale su 10px. Ciò eliminerà qualsiasi spazio verticale inutile tra i moduli.

Aggiunta di gruppi aggiuntivi

Ora che il nostro primo gruppo è progettato, possiamo copiare il gruppo in stile e semplicemente scambiare i nostri contenuti (immagine di sfondo e titolo) per la giostra. Duplica il gruppo otto volte e avremo nove diapositive in totale.

Dopo aver duplicato del gruppo, la giostra del gruppo dovrebbe assomigliare a questo.

Mentre siamo qui, è una buona idea dare a ogni gruppo un nome unico in modo che siano più facili da identificare. Fai clic sull'icona delle impostazioni del primo gruppo e scorri verso il basso sull'etichetta amministratore . Nomina il gruppo Grecia.

Fai clic sul 2 ° gruppo nella giostra. Espandi la scheda Sfondo e sostituisci l'immagine con una nuova.

Mentre nella scheda Contenuto , non dimenticare di aggiungere un nome al campo dell'etichetta di amministrazione . Successivamente, cambia il titolo del modulo di intestazione nel Maine .

Ripeti i passaggi con tutti i gruppi aggiuntivi. Al termine, la tua giostra dovrebbe assomigliare a questo. Mentre si trova nel Visual Builder, è possibile utilizzare i punti di navigazione per scorrere la giostra per assicurarti di non aver perso alcun passaggio.

Come puoi vedere, il testo su alcune delle nostre diapositive è un po 'difficile da leggere. Possiamo correggerlo nella scheda Design a livello di giostra senza dover modificare ogni elemento di gruppo individualmente.

Personalizzazione di gruppi e gruppi attivi

Nel modulo di carosello di gruppo, puoi modellare gruppi attivi e inattivi. La chiave è che il modulo di carosello di gruppo stesso funge da tela vuota e si applica uno stile ai gruppi di moduli al suo interno. Ciò consente un alto livello di personalizzazione, permettendo di creare layout ed effetti unici.

Ora che abbiamo creato una giostra di gruppo, dirigiti verso la scheda Design nelle impostazioni della giostra principale.

Espandi il menu a discesa dei gruppi . Questa scheda controlla le impostazioni di progettazione per i gruppi di moduli contenuti all'interno della giostra del gruppo. Tutte le impostazioni applicate qui verranno applicate ai moduli del gruppo inattivi .

Espandi la scheda Sfondo . Applicheremo un gradiente leggero alle schede inattive per garantire che il testo sia leggibile. Imposta il primo arresto del gradiente su #000000 con un'opacità 0% . Regola leggermente il cursore a destra. Abilita il gradiente Place sopra l'avegno dell'immagine di sfondo .

Impostare il secondo gradiente di arresto a #000000 con un'opacità del 40% .

Abilita il gradiente Place sopra l'avegno dell'immagine di sfondo .

Quindi, individuare la scheda Filtri . Ridurremo la saturazione nei gruppi inattivi per dare alle immagini di sfondo un effetto in bianco e nero. Individua il cursore saturo e impostalo su 0 .

Quindi, espandi il menu a discesa dei gruppi attivi e fai clic sulla scheda Sfondo . Applicare le stesse impostazioni del gradiente di cui sopra.

Assicurati di abilitare il gradiente di Place sopra l'attivazione dell'immagine di sfondo .

Espandi il menu a discesa dei filtri in gruppi attivi e regola il cursore di saturazione al 75% . Ciò colpirà solo l'elemento attivo della giostra, consentendo agli utenti di identificare la diapositiva attiva nella giostra.

Personalizza il layout reattivo

Ora che il nostro carosello di gruppo è pronto per i desktop, useremo i punti di interruzione personalizzabili personalizzabili di Divi 5 per modellare la versione mobile della nostra giostra. Per impostazione predefinita, Divi 5 consente tre punti di interruzione. È possibile utilizzare tutti e sette i punti di interruzione disponibili se si desidera un maggiore controllo su varie dimensioni del dispositivo. Fai clic sul menu Ellipsis nel mezzo della barra superiore nel Visual Builder.

Abilita i punti di interruzione che desideri e fai clic su Salva per continuare.

Fai clic sul punto di interruzione del tablet per visualizzare come apparirà il layout sui dispositivi tablet. Scorri verso il basso fino alle impostazioni della giostra e regola le diapositive per mostrare a 1 . Questo si applicherà anche a eventuali punti di interruzione più piccoli, come il telefono e il telefono .

Infine, fai clic sul pulsante Anteprima in alto a sinistra dello schermo per visualizzare la giostra del gruppo in una nuova scheda.

Una volta terminato, la giostra del gruppo dovrebbe apparire simile al video qui sotto.

Questo è tutto! Costruire una giostra di gruppo in Divi 5 è semplice e offre risultati incredibili.

Integrazione con il costruttore di loop di Divi 5

Loop Builder di Divi 5 è una caratteristica potente che può trasformare il modulo di gruppo in un display di contenuti dinamici. Questa funzione consente ai progettisti di creare giostre dinamiche e automatizzate che estraggono direttamente da WordPress, trasformando i contenuti statici in display di prodotti, archivi di categoria o giostre dei membri del team con pochi clic.

Integrando Loop Builder con la giostra del gruppo, Divi 5 consente agli utenti di creare sofisticate giostre a base di contenuti con un lavoro manuale minimo, rendendolo una caratteristica straordinaria per il web design dinamico.

Il Builder Loop consente alla giostra del gruppo di loop dinamicamente attraverso post, termini o dati utente, creando giostre che riflettono automaticamente i contenuti più recenti del tuo sito. Poiché il Builder Loop estrae i dati direttamente dal tuo database WordPress, è possibile mostrare facilmente post di blog, categorie di prodotti o profili utente.

Ad esempio, è possibile creare una giostra post sul blog utilizzando un tipo di post o un cursore della categoria di prodotti utilizzando i termini di WooCommerce, rendendo il modulo incredibilmente versatile per le esigenze di contenuto dinamico.

Esempi del mondo reale del modulo di carosello di gruppo

La flessibilità del modulo di carosello di gruppo lo rende adatto a vari casi d'uso. Ecco alcuni esempi del mondo reale per mostrare ciò che è possibile.

Slider a schermo intero personalizzato / intero a schermo intero

In questo esempio, abbiamo creato un cursore a larghezza intera/full-screen per presentare frullati per una gelateria. Imposiamo la giostra per visualizzare una diapositiva alla volta, ognuna contenente un'immagine di sfondo, due titoli e un pulsante di chiamata all'azione. Abbiamo anche impostato l'animazione per avanzare alla diapositiva successiva dopo un ritardo di 3 secondi. Puoi ottenere questo look impostando la giostra del gruppo e la sezione su 100VH.

Membro del team Showcase

Quando si desidera presentare membri del team sul tuo sito Web, l'utilizzo del modulo Carousel di gruppo è un ottimo modo per farlo. In questo esempio, abbiamo configurato un layout a 3 colonne nella nostra giostra. Ogni diapositiva include un colpo alla testa, un nome, un ruolo e un collegamento sui social media usando il modulo Social Follow di Divi. Imposta la giostra per scorrere una diapositiva alla volta per un aspetto pulito e professionale.

SEGLIE DI CATEGORIA

Il modulo di carosello del gruppo di Divi 5 funziona perfettamente con il costruttore di loop. Ciò consente di creare cursori coinvolgenti che presentano le categorie di prodotti del tuo sito Web. Ogni diapositiva attira dinamicamente il nome della categoria e l'immagine in primo piano, rendendolo un ottimo modo per mostrare i tuoi prodotti. In questo esempio, utilizziamo gli effetti del filtro per

Testimonianze

Il modulo di carosello di gruppo è anche ottimo per creare un cursore di testimonianze. Puoi facilmente mostrare le tue migliori recensioni dei clienti, testimonianze dei clienti e altro ancora. Grazie al modulo di carosello di gruppo, non sei più limitato a colonne statiche o plugin esterni.

Scarica i file

Scarica gratuitamente

Unisciti alla newsletter Divi e ti invieremo una copia del pacchetto di layout della pagina di destinazione di Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi di Divi straordinari e gratuiti. Segui e sarai un Master Divi in pochissimo tempo. Se sei già sottoscritto, digita semplicemente il tuo indirizzo email di seguito e fai clic su Download per accedere al pacchetto di layout.

SCARICAMENTO

Ti sei iscritto con successo. Controlla il tuo indirizzo email per confermare l'abbonamento e accedere ai pacchetti di layout Divi settimanali gratuiti!

Sblocca le possibilità creative con il modulo carosel di Divi 5

Il modulo Carousel Group di Divi 5 è una potente aggiunta che sblocca nuove possibilità per la creazione di siti Web di Divi dinamici. Dalla creazione di cursori di prodotti coinvolgenti alle testimonianze, questo modulo semplifica l'aggiunta di contenuti interattivi ai tuoi siti Divi.

Ora che la fondazione rinnovata di Divi 5 ha aperto la strada a più caratteristiche, è il momento perfetto per immergersi! Hai già provato il modulo Carousel di gruppo? Facci sapere nei commenti qui sotto.