Hai presente quando metti un carosello in homepage e ti aspetti un effetto “wow”… ma poi le scritte partono mentre la slide non è ancora arrivata, i pulsanti compaiono a caso e tutto sembra un po’ scattoso?

Ecco: con gli effetti di transizione del Carosello di Gruppi in Divi 5 puoi ottenere un risultato super pulito (e senza plugin esterni), ma solo se sistemi bene una cosa: il timing, cioè quando devono partire le animazioni rispetto alla rotazione delle slide.

Questa funzione è comodissima se sei un freelance e vuoi far girare portfolio e recensioni, se hai un piccolo e-commerce e devi mettere in evidenza categorie/prodotti, o se lavori in agenzia/PMI e ti serve un layout ordinato ma d’impatto per tanti contenuti.

Qui sotto ti lascio un metodo pratico (step-by-step) per impostare transizioni e ritardi in modo coerente, anche se non sei uno sviluppatore.

Che cos’è il Modulo Carosello di Gruppi?

Il Carosello di Gruppi è un modulo di Divi 5 che ti permette di creare un carosello (uno “slider”, cioè una sequenza di slide che scorrono) direttamente nel Visual Builder (l’editor visuale dove costruisci la pagina trascinando i moduli).

La cosa interessante è che ogni slide non è “solo” un’immagine: è un vero e proprio Gruppo dentro cui puoi inserire moduli Divi (testi, immagini, pulsanti, ecc.) e anche layout più complessi come le Righe annidate (cioè righe dentro altre righe, utili quando vuoi una griglia più articolata senza scrivere codice).

Tradotto in pratica: puoi far scorrere articoli recenti, categorie WooCommerce, testimonianze, eventi… e dare movimento alla pagina senza appesantirla.

Caratteristiche principali del Modulo Carosello di Gruppi

• Controllo totale del contenuto delle slide: puoi inserire qualsiasi modulo Divi nelle slide, dal testo semplice fino a layout con Righe annidate (righe dentro altre righe, per strutture più complesse).
• Impostazioni personalizzabili di slide e animazioni: scegli quante slide mostrare, quante far scorrere per volta e che stile di animazione usare.
• Supporto ai contenuti dinamici: puoi usare il Loop Builder (un sistema che “ripete” automaticamente un layout usando dati reali, tipo prodotti, articoli o progetti portfolio) per popolare le slide senza crearle manualmente una per una.
• Ampia personalizzazione grafica: come gli altri moduli Divi 5 puoi usare filtri, trasformazioni, ombre, Interazioni (effetti legati a scroll e azioni dell’utente) ed effetti hover.

Come applicare gli effetti di transizione al Modulo Carosello di Gruppi

Qui ci concentriamo sulla parte che fa davvero la differenza: effetti di transizione + timing. Cioè: le animazioni dei contenuti devono partire quando la slide è visibile, non prima.

Divi 5 ti permette di applicare diverse animazioni ai moduli dentro ogni Gruppo. Nell’esempio che segue, se stai usando un layout già pronto, importa il file JSON Carosello prima delle transizioni nella tua Libreria Divi.

Importare il layout JSON nella Libreria Divi

Vai su Divi > Libreria Divi e clicca Importa ed esporta.

Apri la scheda Importa e clicca Scegli file.

Seleziona il file JSON Carosello prima delle transizioni, caricalo e clicca Importa layout di Divi Builder.

Creare una nuova pagina e inserire la sezione dalla libreria

Vai su Pagine > Aggiungi pagina.

Dai un titolo e clicca Usa Divi Builder.

Quando si apre il Visual Builder, clicca l’icona + blu per aggiungere una nuova sezione.

Nella finestra Inserisci sezione, vai su Aggiungi dalla libreria.

Seleziona la sezione Carosello prima delle transizioni.

Impostare le animazioni per il primo Gruppo

Prima settiamo la rotazione del carosello (così poi calcoliamo i ritardi delle animazioni in modo sensato).

Nelle Impostazioni del Carosello:

• attiva Rotazione automatica
• imposta Velocità rotazione automatica su 2000ms (2 secondi)
• abilita Pausa al passaggio del mouse (così chi vuole leggere può fermare lo scorrimento)
• verifica che Modalità centrata sia attiva
• lascia il resto ai valori predefiniti

Ora seleziona il primo Gruppo, chiamato Divi Conference.

Nel pannello Livelli, espandi il Gruppo e seleziona la prima colonna.

Vai su Design > Animazione:

• Stile animazione: Scorrimento (vuol dire che l’elemento “entra” in scena scivolando da una direzione)
• Direzione animazione: Destra
• lascia il resto com’è

Seleziona il modulo Titolo in alto nella colonna destra del primo Gruppo. In Design > Animazione:

• Scorrimento
• Sinistra
• tutto il resto invariato

Seleziona il modulo Titolo più grande (sempre nella seconda colonna del primo Gruppo). In Animazione imposta:

• Stile animazione: Scorrimento
• Direzione animazione: Sinistra
• Durata animazione: 100ms

In pratica: entrano tutti da destra verso sinistra, ma con un look più “scattante” e naturale.

Seleziona il modulo Testo. In Design > Animazione:

• Scorrimento
• Sinistra
• Ritardo animazione: 200ms (cioè parte 0,2 secondi dopo)

Infine il modulo Pulsante. Imposta:

• Scorrimento
• Sinistra
• Ritardo animazione: 300ms

Salva e fai Anteprima.

La prima slide dovrebbe essere fluida: elementi che entrano in sequenza, senza “casino”.

Impostare le animazioni per il secondo Gruppo

Nel pannello Livelli seleziona il secondo Gruppo.

Qui arriva il punto chiave: le animazioni devono partire quando la slide è effettivamente in vista.

Siccome hai impostato la Velocità rotazione automatica a 2000ms, al secondo Gruppo serve un Ritardo animazione di 2000ms. Così lasci finire la prima slide e la transizione del carosello, e solo dopo fai entrare i contenuti del secondo Gruppo.

Nella prima colonna del secondo Gruppo, in Design > Animazione:

• Scorrimento
• Destra
• Ritardo animazione: 2000ms

Nella seconda colonna, primo modulo Titolo:

• Scorrimento
• Sinistra
• Ritardo animazione: 2000ms

Secondo modulo Titolo:

• Scorrimento
• Sinistra
• Ritardo animazione: 2100ms

Per i due moduli successivi, stesso schema aumentando di 100ms ogni volta:

• Testo a 2200ms
• Pulsante a 2300ms

In anteprima, la seconda slide dovrebbe avere lo stesso ritmo della prima.

Impostare le animazioni per il terzo Gruppo

Nel terzo Gruppo cambiamo un po’ l’effetto: alcuni elementi entrano dall’alto e dal basso, così il carosello non sembra “sempre uguale”.

Seleziona il terzo Gruppo.

Modulo Titolo principale, in Design > Animazione:

• Scorrimento
• Basso
• Ritardo animazione: 4000ms

Ora vai nella seconda riga del Gruppo e seleziona la prima colonna.

In Design > Animazione:

• Scorrimento
• Alto
• Ritardo animazione: 4100ms

Ripeti su seconda e terza colonna aumentando di 100ms:

• seconda colonna: 4200ms
• terza colonna: 4300ms

Fai un’anteprima e controlla che tutto sia sincronizzato.

Impostare le animazioni per il quarto Gruppo

Seleziona il quarto Gruppo.

Qui replichiamo la logica del terzo Gruppo (animazioni scorrimento + ritardi sfalsati).

Modulo Titolo principale: Ritardo animazione 6000ms.

Seleziona la seconda riga e poi la prima colonna.

In Animazione:

• Scorrimento
• Alto
• Ritardo animazione: 6100ms

Ripeti su seconda e terza colonna aumentando di 100ms ogni volta.

Consiglio terra-terra: fai sempre un’anteprima. Se un elemento entra troppo tardi o troppo presto, l’occhio lo becca subito.

Impostare le animazioni per il quinto Gruppo

Ultimo giro: seleziona il quinto Gruppo dal pannello Livelli.

Primo modulo Titolo, in Design > Animazione:

• Scorrimento
• Basso
• Ritardo animazione: 8000ms

Per la seconda riga del Gruppo:

• prima colonna: 8100ms
• seconda colonna: 8200ms
• terza colonna: 8300ms

Assicurati che:

• Stile animazione sia Scorrimento
• Direzione animazione sia Alto

Come regolare i tempi del Carosello di Gruppi (senza impazzire)

Una volta impostate le animazioni, potresti renderti conto che 2000ms è troppo veloce per leggere. Ed è normalissimo.

Il punto è questo: se cambi la Velocità rotazione automatica, devi aggiornare anche i Ritardi animazione dentro i gruppi (tranne il primo).

Nell’esempio la rotazione è 2000ms. Se la porti a 5000ms, allora:

• nel secondo Gruppo, la prima colonna parte da 5000ms
• nella seconda colonna aggiorni i ritardi a 5000 / 5100 / 5200 / 5300ms
• per i gruppi successivi, aumenti ogni “blocco” di ritardi di altri 5000ms

Personalizzazioni avanzate (opzionali)

Se vuoi fare un passo in più, ci sono alcune opzioni interessanti. Non serve essere sviluppatori, ma vale una regola d’oro: più effetti aggiungi, più devi restare ordinato, altrimenti il carosello diventa un albero di Natale.

Usare Divi AI

Divi AI (l’assistente integrato nel Visual Builder) può aiutarti a velocizzare sia contenuti che stile delle slide.

Può generare:

• testi (titoli, descrizioni, microcopy)
• CTA (cioè frasi “invito all’azione” come “Scopri di più”, “Acquista ora”)
• immagini partendo da una descrizione testuale (utile se vuoi visual coerenti senza passare ore tra stock e ricerche)

Può anche aiutarti con il CSS personalizzato (regole che modificano l’aspetto grafico). Seleziona un Gruppo, vai nella scheda Avanzate, trova CSS personalizzato, clicca l’icona Divi AI e descrivi l’effetto che vuoi ottenere.

Esempio: può applicare un effetto “scala di grigi” a un’immagine senza toccare il bordo.

Combinare il Carosello di Gruppi con altri moduli Divi 5

Per rendere il carosello più interattivo, puoi abbinarlo ad altri moduli. Un esempio pratico: il modulo Lottie (animazioni vettoriali leggere, quindi di solito più “smooth” e meno pesanti delle GIF) per creare frecce di navigazione più evidenti o indicatori della rotazione automatica.

Con le Righe annidate, invece, costruisci slide più complesse e “superi” i limiti delle righe standard.

Sperimentare con le Interazioni

Le Interazioni di Divi 5 ti permettono di aggiungere comportamenti dinamici legati alle azioni dell’utente (scroll, hover, ecc.).

Esempi pratici:

• effetti di scorrimento sui singoli elementi per dare profondità
• leggera inclinazione al passaggio del mouse su immagini o titoli
• effetti in scroll per un look più moderno

Salvare il Modulo Carosello di Gruppi per riutilizzarlo

Quando hai finito, puoi salvare il Carosello di Gruppi nella Libreria Divi e riutilizzarlo ovunque.

Fai clic destro sul modulo > Aggiungi alla Libreria Divi > dagli un nome chiaro (tipo “Carosello Testimonianze – Home”).

Se lavori su più siti, puoi salvarlo anche in Divi Cloud (una libreria online collegata al tuo account) per richiamarlo al volo in altri progetti.

Esempi pratici (step by step) per usare al meglio gli effetti di transizione

Qui ci sono 3 scenari reali dove gli effetti di transizione del Carosello di Gruppi in Divi 5 si sentono davvero, con una logica semplice per impostare i ritardi.

Esempio 1: Freelance che mostra servizi + portfolio nella hero

Obiettivo: far vedere 3 servizi principali con una mini-anteprima lavori, senza allungare la pagina.

• Passo 1: imposta Rotazione automatica a 5000ms per dare tempo di leggere.
• Passo 2: nel Gruppo 1 lascia ritardi bassi (0–300ms) per titolo, testo e pulsante.
• Passo 3: nel Gruppo 2 imposta i ritardi a partire da 5000ms e sfalsa i moduli di 100ms (5000/5100/5200/5300).
• Passo 4: replica la logica sul Gruppo 3 partendo da 10000ms.

Risultato: ogni slide anima quando è il suo turno, senza animazioni che partono mentre l’utente guarda ancora quella prima.

Esempio 2: Piccolo e-commerce che evidenzia categorie e promo

Obiettivo: mettere in evidenza 4 categorie e una promo stagionale, con animazioni essenziali.

• Passo 1: usa uno stile coerente (es. Scorrimento da sinistra per testo e pulsanti) ed evita di mescolare troppi effetti.
• Passo 2: imposta Pausa al passaggio del mouse, così chi vuole leggere può fermare la rotazione.
• Passo 3: tieni la gerarchia chiara: Titolo (ritardo base), prezzo/testo (base+100ms), pulsante (base+200ms).

Consiglio pratico: se hai molto testo, aumenta il tempo di rotazione automatica invece di “accelerare” le animazioni.

Esempio 3: Agenzia/PMI con tanti prodotti o tanti contenuti (contenuti dinamici)

Obiettivo: creare un carosello che si aggiorna da solo con prodotti/articoli usando il Loop Builder (layout ripetuto con contenuti reali), mantenendo animazioni uguali per tutte le slide.

• Passo 1: crea un singolo layout di slide ben fatto (titolo, immagine, testo, CTA).
• Passo 2: applica animazioni leggere e uguali per tutti (es. scorrimento + ritardi 0/100/200/300ms).
• Passo 3: attiva il loop e lascia che sia il contenuto dinamico a cambiare, non la struttura.

Risultato: carosello coerente anche quando cambiano prodotti o articoli, senza dover reimpostare tutto a mano.

Conclusione

Gestire bene gli effetti di transizione del Carosello di Gruppi in Divi 5 significa soprattutto una cosa: sincronizzare la rotazione automatica con i ritardi delle animazioni, così ogni slide anima i contenuti quando è davvero visibile.

Il modo migliore per prenderci la mano è fare test su una pagina di prova e puntare a transizioni pulite, leggibili e coerenti tra loro. Se vuoi un confronto su un carosello “strategico” (non solo bello, ma anche chiaro e utile per le conversioni), può valere la pena farti affiancare da un professionista Divi di fiducia.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes.