Molti pensano che lavorare sugli effetti di transizione del carosello di gruppo Divi 5 sia un dettaglio estetico. Una di quelle cose “carine”, sì, ma non davvero importanti.

In realtà è proprio qui che spesso si gioca la differenza tra un carosello che accompagna la lettura e uno che dà solo fastidio. Perché non basta far scorrere delle slide: serve farle muovere nel modo giusto, al momento giusto e con un ritmo che abbia senso per chi guarda.

Il Modulo Carosello di Gruppo di Divi permette di costruire slider interattivi usando qualsiasi modulo disponibile nel builder visivo, senza plugin extra e senza codice personalizzato. Ed è proprio questo il bello: hai uno strumento flessibile, ma anche abbastanza preciso da permetterti di controllare comportamento visivo, tempi e transizioni senza impazzire.

Se devi mostrare lavori, testimonianze, prodotti o altri contenuti in sequenza, questo modulo ti aiuta a farlo in modo ordinato e chiaro. E in questo articolo vedremo come usare bene gli effetti di transizione del carosello di gruppo in Divi 5, come impostarne i tempi e come far sì che tutto resti leggibile anche su mobile.

Quindi no, non è una perdita di tempo. È una parte centrale del risultato finale, perché un carosello ben regolato non si limita a muoversi: guida l’occhio, dà gerarchia ai contenuti e rende l’esperienza molto più pulita.

Il Modulo Carosello di Gruppo è uno strumento che permette di creare caroselli dinamici e visivamente ordinati direttamente dentro il Visual Builder di Divi. Puoi combinare più elementi — testi, immagini, pulsanti o anche layout più complessi con righe annidate — dentro una struttura scorrevole e facile da navigare.

Per esempio, puoi usarlo per mostrare articoli recenti del blog, categorie prodotto di un e-commerce, testimonianze dei clienti o eventi in programma. Insomma, è una soluzione molto comoda quando hai tanti contenuti e vuoi presentarli senza ammassare tutto nella pagina.

Il Modulo Carosello di Gruppo mette a disposizione diverse funzioni utili per gestire contenuti a scorrimento, con un controllo preciso sulle slide e sul loro comportamento:

• Controllo completo sul contenuto delle slide: puoi aggiungere qualsiasi modulo Divi, dai testi e immagini più semplici fino a layout articolati con righe annidate.
• Impostazioni personalizzabili per slide e animazioni: puoi decidere quante slide mostrare, quante far scorrere per volta e quale stile di animazione usare, così il carosello si adatta meglio al contenuto.
• Supporto per contenuti dinamici: puoi usare il generatore automatico di contenuti per creare slide che si popolano da sole con prodotti, articoli o progetti portfolio. Tradotto: meno lavoro manuale e contenuti più aggiornati.
• Personalizzazione del design senza limiti: il Modulo Carosello di Gruppo si personalizza come qualsiasi altro modulo Divi, con supporto a filtri, trasformazioni, ombre, interazioni ed effetti hover.

Capire la Terminologia: Transizione, Rotazione e Ritardo

Prima di mettere mano agli effetti di transizione su un carosello di gruppo in Divi, conviene fermarsi un attimo e chiarire tre termini che spesso vengono confusi. Sembrano simili, ma non sono la stessa cosa. E se li mescoli, il carosello inizia a comportarsi male.

• Transizione: è l’animazione visiva che accompagna il passaggio da un elemento all’altro del carosello. Può essere uno scorrimento, una dissolvenza o un altro effetto grafico.
• Rotazione (o velocità di rotazione): indica per quanto tempo ogni elemento resta visibile prima che il carosello passi automaticamente a quello successivo. Si misura in millisecondi.
• Ritardo: è il tempo che passa prima che la transizione parta. Se questo ritardo è più lungo della rotazione, la transizione non riesce a completarsi prima del cambio slide successivo, e il risultato visivo diventa poco pulito.

E qui c’è il punto.

Il ritardo della transizione deve sempre essere inferiore alla velocità di rotazione del carosello. Per esempio, se la rotazione è impostata a 4000ms, il ritardo non dovrebbe superare i 2000ms. Se vai oltre, le animazioni iniziano a sovrapporsi oppure si interrompono di colpo, e l’effetto finale perde fluidità.

Capire bene questa relazione ti permette di impostare i valori con criterio. Così eviti errori che magari nell’editor sembrano innocui, ma una volta pubblicata la pagina saltano subito all’occhio.

Il Modulo Carosello di Gruppo di Divi ti permette di inserire nelle slide praticamente qualsiasi contenuto: testi, immagini, pulsanti e molto altro. Per seguire questa guida in modo pratico, puoi scaricare l’esempio incluso nell’articolo e importarlo direttamente nella tua Divi Library.

Divi mette a disposizione diverse opzioni di animazione e transizione, e le useremo sulle slide per renderle più dinamiche. Se non l’hai ancora fatto, scarica i file indicati qui sopra e importa nella libreria di Divi il file di configurazione Carousel before transitions.

Vai su Divi > Libreria di Divi e clicca sul pulsante Importa ed Esporta per caricare i file JSON.

Apri la scheda Importa e poi clicca su Scegli file per trovare il file JSON sul tuo computer.

Individua il file JSON chiamato "Carousel before transitions", caricalo e poi clicca su "Importa layout Divi Builder" per inserirlo nel builder.

Vai su Pagine e clicca sul pulsante Aggiungi pagina per creare una nuova pagina nel tuo sito Divi.

Dai un titolo alla pagina e fai clic sul pulsante Usa Divi Builder.

Quando il builder visuale è pronto, clicca sull’icona blu + per aggiungere una nuova sezione.

Quando compare la finestra Inserisci Sezione, fai clic sulla scheda Aggiungi dalla Libreria.

Seleziona la sezione Carousel Before Transitions per caricarla nella pagina.

Nelle Impostazioni Carosello, cerca il toggle Rotazione Automatica e attivalo. Poi imposta la Velocità di Rotazione Automatica su 2000ms, abilita la Pausa al Passaggio del Mouse e verifica che la Modalità Centrata sia attiva. Tutto il resto puoi lasciarlo com’è.

Adesso seleziona il primo gruppo, chiamato Divi Conference, per modificarne le impostazioni.

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

Vai nella scheda Design, scorri fino alla sezione Animazione, aprila e scegli Scorrimento. Come direzione imposta Destra e lascia tutto il resto ai valori predefiniti.

Ora seleziona il modulo Intestazione in alto nella colonna destra del primo gruppo. Vai sempre nella scheda Design, apri Animazione, scegli Scorrimento come stile e imposta la direzione su Sinistra. Anche qui, lascia le altre opzioni ai valori predefiniti.

Seleziona poi il modulo Intestazione più grande nella seconda colonna del primo Gruppo. Nelle impostazioni di animazione scegli Scorrimento, imposta la direzione su Sinistra e la durata su 100ms. In questo modo i titoli entreranno da destra verso sinistra con una piccola sfasatura rispetto agli altri elementi.

Passa ora al modulo Testo. Nella scheda Design, imposta lo Stile animazione su Scorrimento, la Direzione animazione su Sinistra e il Ritardo animazione su 200ms.

Infine, seleziona il modulo Pulsante. Applica l’animazione Scorrimento, imposta la direzione su Sinistra e il ritardo su 300ms.

Salva la pagina e clicca su Anteprima per controllare come si comportano le animazioni del primo Gruppo.

Nel pannello Livelli, clicca sul secondo Gruppo dentro il modulo Carosello di Gruppo.

Nel secondo gruppo, le animazioni devono partire nel momento giusto: esattamente quando il carosello passa dalla prima alla seconda slide. Visto che il carosello scorre automaticamente ogni 2000ms, il ritardo di animazione deve essere uguale a quel valore.

Per capirci: è come far entrare in scena una persona quando il riflettore è già acceso su di lei. Se entra troppo presto, il tempismo salta. Se ritardi nel modo corretto, invece, tutto sembra naturale.

Nella prima colonna del secondo Gruppo, vai nella scheda Design. Scorri fino a Animazione e imposta Stile animazione su Scorrimento e Direzione animazione su Destra. Nel campo Ritardo animazione, inserisci 2000ms.

Nella seconda colonna, clicca sul primo modulo Intestazione. Vai nella scheda Design, apri le impostazioni di Animazione, scegli Scorrimento come stile, imposta Sinistra come direzione e inserisci 2000ms come Ritardo animazione.

Per il secondo modulo Intestazione della seconda colonna, lascia lo stile su Scorrimento, la direzione su Sinistra e imposta il ritardo su 2100ms.

Per i due moduli successivi della colonna, usa lo stesso Stile di Animazione e la stessa Direzione, ma aumenta il Ritardo di Animazione di 100ms per ciascuno.

Quindi, per il modulo di Testo il ritardo sarà 2200ms, mentre per il modulo Pulsante dovrà essere 2300ms.

Per il terzo Gruppo cambiamo un po’ il gioco. Invece di far scorrere gli elementi da destra e da sinistra, useremo l’alto e il basso. Seleziona quindi il terzo Gruppo nel Modulo Carosello di Gruppo.

Clicca sul modulo Intestazione principale per aggiungere l’animazione. Vai nella scheda Design, imposta lo stile su Scorrimento, scegli Basso come direzione e inserisci 4000ms nel campo del ritardo.

Per la seconda riga del Gruppo, clicca sulla prima colonna per aprirne le impostazioni.

Vai nella scheda Design, apri il menu Animazione, seleziona Scorrimento come stile, imposta Alto come direzione e inserisci 4100ms come ritardo.

Ripeti gli stessi passaggi per la seconda e la terza colonna della riga, aumentando il ritardo dell’animazione di 100ms ogni volta. Quindi: 4200ms per la seconda colonna e 4300ms per la terza.

Visualizza l’anteprima del modulo Carosello di Gruppo per verificare che tutte le transizioni e le animazioni funzionino correttamente.

Ora seleziona il quarto Gruppo nel modulo Carosello di Gruppo.

Qui applicheremo gli stessi stili usati per il terzo Gruppo, ma con l’animazione sfalsata nel tempo. Per il modulo del titolo principale, imposta il ritardo dell’animazione su 6000ms.

Clicca sulla seconda riga della slide e poi seleziona la prima colonna per aprirne le impostazioni.

Nelle impostazioni di Animazione, imposta Stile animazione su Scorrimento, Direzione animazione su Alto e Ritardo animazione su 6100ms.

Ripeti gli stessi passaggi per la seconda e la terza colonna, aumentando il ritardo di 100ms per ciascuna.

Ricorda di controllare l’anteprima del carosello a gruppi, così puoi verificare che tutte le animazioni siano davvero sincronizzate.

L’ultimo passaggio riguarda la temporizzazione del quinto Gruppo. Selezionalo nel pannello Livelli per visualizzarlo dentro l’editor visuale.

Seleziona il primo modulo Intestazione del Gruppo e vai nella scheda Design. Apri il menu Animazione, scegli Scorrimento come stile, Basso come direzione e inserisci 8000ms nel campo del ritardo.

Per la seconda riga del Gruppo, applica i ritardi 8100ms, 8200ms e 8300ms rispettivamente alla prima, seconda e terza colonna. Assicurati anche che lo stile dell’animazione sia su Scorrimento e che la direzione sia impostata su Alto.

Una volta configurate tutte le animazioni, potresti notare che la Velocità di Rotazione Automatica è troppo veloce. E sì, capita spesso. In quel caso devi regolare i tempi del carosello e, di conseguenza, anche quelli di tutte le animazioni presenti nei gruppi.

Nel nostro esempio la Velocità di Rotazione Automatica è impostata su 2000ms. Ma se il contenuto di ogni gruppo è più ricco, potresti avere bisogno di aumentare questo valore.

Per esempio, se imposti la Velocità di Rotazione Automatica a 5000ms, cioè 5 secondi per gruppo, dovrai aggiornare tutte le animazioni in tutti i gruppi, tranne nel primo.

Nella prima colonna del secondo Gruppo, imposta il ritardo di animazione a 5000ms.

Per la seconda colonna, imposta il Ritardo Animazione dei moduli rispettivamente a 5000ms, 5100ms, 5200ms e 5300ms.

Ripeti lo stesso ragionamento per i gruppi successivi, aumentando il ritardo base di ciascuno di 5000ms rispetto al precedente.

Checklist di Validazione: Temporizzazione, Responsività e Coerenza delle Animazioni

Prima di considerare il carosello pronto per la pubblicazione, conviene fare un controllo veloce su tre aree: tempi, comportamento su mobile e coerenza visiva generale. È una checklist semplice, ma ti evita parecchi problemi dopo.

Temporizzazione e Transizioni

• La durata della transizione è proporzionata alla distanza percorsa dagli elementi? Se l’animazione è troppo lenta su uno spostamento breve, l’effetto risulta strano.
• Il ritardo tra gli elementi del gruppo segue una progressione chiara e leggibile?
• Le curve di accelerazione e decelerazione sono coerenti tra tutti gli elementi del gruppo, evitando mix poco sensati come ease-in su un elemento ed ease-out su un altro senza motivo?
• Il ciclo automatico, se attivo, evita di interrompere una transizione ancora in corso?

Comportamento al passaggio del mouse e pausa

• Il carosello va davvero in pausa al passaggio del mouse, evitando di scorrere mentre l’utente sta leggendo?
• La pausa si applica a tutto il gruppo e non solo all’elemento che ha il focus?
• Quando l’interazione finisce, la riproduzione riprende senza salti visivi?

Mobile e scorrimento tramite gesto

• Il gesto di swipe è fluido e non entra in conflitto con lo scroll verticale della pagina?
• Le dimensioni degli elementi del carosello sono adatte agli schermi piccoli, senza testi tagliati o immagini troncate?
• Le transizioni restano leggibili anche su connessioni lente o su dispositivi con prestazioni grafiche ridotte?

Leggibilità e Coerenza Visiva

• Il testo dentro il carosello è leggibile anche durante la transizione, non solo quando tutto è fermo?
• Gli effetti di gruppo evitano sovrapposizioni involontarie tra elementi in uscita e in entrata?
• Il comportamento del carosello è coerente su browser diversi come Chrome, Firefox e Safari?

Come Adattare Questi Valori al Tuo Progetto

Gli esempi di questo articolo usano valori precisi per durata, progressione dell’animazione e direzione della transizione. Però il metodo resta lo stesso e puoi riutilizzarlo in qualsiasi carosello di gruppo in Divi, adattando i parametri al tuo layout.

Ecco un approccio pratico per calibrare gli effetti di transizione:

• Durata: valori brevi, tra 200 e 400ms, danno un senso di reattività; valori più lunghi, tra 600 e 900ms, creano un effetto più fluido e quasi cinematografico. Scegli in base al contesto della pagina.
• Progressione dell'animazione (accelerazione e decelerazione): la curva graduale in entrata e in uscita (ease-in-out) è una scelta affidabile nella maggior parte dei casi. Se vuoi un ingresso più deciso, usa la variante con accelerazione in uscita (ease-out). Se preferisci una partenza più morbida, scegli la variante con accelerazione in entrata (ease-in).
• Direzione e tipo di transizione: lo scorrimento orizzontale funziona bene per contenuti affiancati; la dissolvenza è spesso più adatta a caroselli con immagini o card molto dense dal punto di vista visivo.
• Coerenza con il resto della pagina: allinea la velocità delle transizioni del carosello a quella degli altri moduli animati presenti nella stessa pagina, così l’esperienza resta uniforme.

Non esiste una configurazione perfetta valida per tutti. Conta una cosa sola: che l’effetto aiuti la leggibilità e la navigazione, invece di rubare attenzione al contenuto.

Problemi Comuni con le Transizioni del Carosello: Come Risolverli

Anche se configuri tutto con attenzione, le transizioni del carosello in Divi possono comunque comportarsi in modo strano. Niente panico: vediamo i problemi più frequenti e come affrontarli in pratica.

Le animazioni non si avviano o si attivano una sola volta

Se le transizioni sembrano fermarsi dopo il primo ciclo, controlla prima di tutto che la riproduzione automatica sia attiva e che non ci siano conflitti con altri moduli nella stessa sezione. A volte anche un JavaScript personalizzato o un plugin di ottimizzazione può interferire con il ciclo delle animazioni.

Ritardi che non rispettano i valori impostati

I ritardi configurati nel modulo potrebbero non corrispondere a ciò che vedi se il browser applica ottimizzazioni sulle animazioni CSS. In questi casi conviene testare su browser diversi e verificare che non esistano regole CSS globali che sovrascrivono le proprietà di transizione del carosello.

Jitter o scatti visivi durante la transizione

Il jitter compare spesso quando le immagini non hanno dimensioni uniformi tra i vari elementi del gruppo, oppure quando la proprietà will-change non viene gestita bene dal browser. Assicurati quindi che tutti gli elementi del carosello abbiano misure coerenti e che le immagini siano ottimizzate per il web.

Sovrapposizione degli elementi durante la transizione

Se gli elementi si sovrappongono quando una slide lascia spazio alla successiva, il problema è spesso legato a valori di z-index in conflitto o a una durata della transizione troppo lunga rispetto all’intervallo tra le slide. In questo caso, prova a ridurre la durata dell’animazione oppure ad aumentare l’intervallo tra una slide e l’altra.

Quindi, il metodo migliore resta sempre lo stesso: testa una variabile alla volta. È il modo più semplice per capire davvero cosa sta causando il problema e correggerlo senza andare a tentativi casuali.

Questa sezione raccoglie alcune opzioni avanzate per chi vuole spingere il carosello oltre la configurazione base. Sono tecniche facoltative, ma molto utili nei contesti reali in cui serve più controllo sul modulo o una migliore integrazione con il resto della pagina.

Divi AI, integrato direttamente nell’editor visuale, permette di arricchire il modulo carosello con contenuti e stili generati dall’intelligenza artificiale, velocizzando il lavoro. Può creare automaticamente testi per le slide, come titoli, descrizioni e frasi per i pulsanti di invito all’azione.

Per esempio, se stai costruendo un carosello di servizi, puoi chiedere a Divi AI di generare un titolo e una breve descrizione per ogni diapositiva, invece di scriverli a mano uno per uno.

Divi AI può essere usato anche per creare immagini per le diapositive del carosello. Ti basta inserire una descrizione testuale dell’immagine che vuoi ottenere per generare risultati personalizzati e coerenti con la tua identità visiva, senza dover cercare per ore tra foto stock o abbonarti ad altri servizi.

Con Divi AI puoi anche generare codice CSS personalizzato per i tuoi caroselli. Nella scheda Avanzate del modulo Gruppo, cerca il campo CSS personalizzato, clicca sull’icona di Divi AI e scrivi una richiesta in linguaggio naturale che descrive l’effetto desiderato.

Tipo: "Aggiungi un'ombra morbida sotto ogni card del carosello".

Per esempio, può applicare un effetto in scala di grigi a un’immagine senza toccarne il bordo.

Per rendere il carosello più interattivo, puoi abbinarlo ad altri moduli di Divi 5. Per esempio, puoi aggiungere un modulo Lottie, cioè uno strumento che riproduce animazioni leggere in formato vettoriale, per creare frecce di navigazione animate o icone che si muovono durante lo scorrimento automatico delle slide.

Un caso pratico: inserisci una Lottie a forma di freccia sopra ogni slide del carosello, così l’utente capisce subito che quei contenuti si possono sfogliare. Puoi usare questa combinazione anche in un carosello hero nella parte alta della pagina, utile per mettere in evidenza promozioni o informazioni principali.

Le Righe Nidificate ti permettono di costruire strutture più articolate dentro un carosello, andando oltre la classica disposizione a colonne. Per esempio, puoi inserire in ogni diapositiva un’immagine affiancata a un blocco di testo con titolo e pulsante, usando le righe nidificate per controllare con precisione la disposizione degli elementi senza scrivere codice personalizzato.

La funzione Interazioni di Divi permette di aggiungere comportamenti dinamici al carosello, rendendolo più reattivo alle azioni dell’utente. Per esempio, puoi applicare effetti di scorrimento ai singoli elementi per creare profondità, aggiungere un’inclinazione al passaggio del mouse per valorizzare immagini o titoli, oppure usare animazioni collegate allo scroll della pagina per un’esperienza più immersiva.

Una volta completato il Carosello di Gruppo, puoi aggiungerlo alla Libreria di Divi per riutilizzarlo su altre pagine. Fai clic destro sul modulo, seleziona Aggiungi alla Libreria di Divi e assegnagli un nome facile da riconoscere.

Se vuoi riutilizzare il modulo Carosello di Gruppo anche su altri progetti, puoi salvarlo su Divi Cloud e aggiungerlo ad altri siti Divi in pochi clic.

Usare le Transizioni con Criterio: Meno è Meglio

Le transizioni di gruppo nel carosello di Divi ti danno un controllo visivo molto interessante. Però, quando lavori su progetti veri, la regola più importante resta questa: ogni effetto deve aiutare l’esperienza dell’utente, non rubarle spazio.

Quando imposti un carosello per un cliente o per un progetto pubblicato davvero online, tieni a mente queste linee guida:

• Velocità moderate. Transizioni troppo rapide rendono il contenuto difficile da leggere. Transizioni troppo lente rallentano la navigazione e fanno sembrare tutto più pesante. Di solito la via di mezzo è la scelta migliore.
• Evitare la sovrapposizione di effetti. Mescolare troppe transizioni insieme — rotazione, dissolvenza, scala e altro — crea facilmente confusione. Meglio scegliere un solo effetto dominante e costruire intorno a quello.
• Coerenza con il resto del sito. Le transizioni del carosello dovrebbero essere in linea con lo stile delle altre animazioni presenti nella pagina. Se ogni sezione si muove in un modo diverso, il sito perde coesione.
• Accessibilità e leggibilità. Alcuni utenti sono sensibili ai movimenti sullo schermo. Effetti troppo marcati, soprattutto in profondità o con rotazioni evidenti, possono risultare fastidiosi. Transizioni più sobrie aiutano una platea più ampia.
• Test su schermi piccoli. Quello che su desktop sembra elegante, su mobile può diventare confuso o pesante. Quindi controlla sempre il comportamento delle transizioni anche su schermi ridotti prima di pubblicare.

Ricapitolando: le transizioni sono uno strumento, non l’obiettivo finale. Usarle con misura, testarle nel contesto reale e dare priorità alla chiarezza del contenuto è quasi sempre la scelta più efficace.

Il Modulo Carosello di Gruppo di Divi offre diverse modalità di transizione tra le slide: dissolvenza, scorrimento, rotazione e altre ancora, tutte configurabili nei dettagli. Intervenendo su parametri come velocità dell’animazione, tipo di effetto e comportamento delle slide, puoi costruire caroselli coerenti con il progetto grafico senza ricorrere a strumenti esterni.

Per esempio, in un carosello prodotti puoi combinare uno scorrimento orizzontale con una velocità moderata, intorno ai 400–600 millisecondi. Così il contenuto cambia in modo fluido, ma non distrae l’utente dal prodotto. Applicando questa logica a eventi, gallerie o altri contenuti, i risultati restano prevedibili e facili da replicare.

Hai bisogno di una revisione delle tue animazioni Divi?

Configurare le transizioni di un carosello di gruppo in Divi richiede attenzione su più fronti: ritmo del movimento, leggibilità su dispositivi reali e rispetto delle preferenze di chi preferisce ridurre o disattivare le animazioni.

Se hai già impostato le tue transizioni ma vuoi capire se sono calibrate bene, posso aiutarti a valutare:

• il ritmo delle animazioni rispetto al contenuto e al contesto d’uso
• la resa su dispositivi mobili e su schermi di dimensioni diverse
• la compatibilità con le impostazioni di sistema che riducono il movimento, utile per chi è sensibile alle animazioni
• eventuali impatti sulle prestazioni di caricamento e interazione

Non si tratta di un controllo generico, ma di una revisione pratica orientata al risultato. Se vuoi un secondo parere sul tuo progetto, scrivimi con una breve descrizione del contesto e di ciò che vuoi ottenere. Se hai dubbi specifici, puoi partire anche da quelli.

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