Ti è mai capitato di aggiungere un’animazione in Divi 5 e ritrovarti con un effetto “carino”, sì… ma anche un po’ imprevedibile? Magari un hover che scatta sull’elemento sbagliato, oppure un bottone che si muove quando non dovrebbe. E allora inizi a smanettare tra impostazioni sparse, prove su prove, e perdi mezz’ora per una cosa che doveva richiedere 5 minuti.

Se vuoi animazioni più pulite e soprattutto controllabili, la svolta è capire (bene) la differenza tra trigger, effetto e target. È il tipo di cosa che fa davvero comodo a freelance, piccole agenzie e PMI quando devono dare più vita a landing page, pagine servizi o schede prodotto… senza trasformare il layout in un flipper.

In pratica separi tre pezzi:

• cosa avvia l’azione (trigger)
• che cosa succede (effetto)
• su cosa si applica (target)

Così puoi coordinare movimenti e micro-animazioni tra elementi diversi (sezione, pulsante, immagine, modulo) in modo coerente, invece di ottenere risultati “casuali”.

Che cosa sono trigger, effetti e target?

Le Interazioni in Divi 5 funzionano con tre componenti che lavorano insieme:

• Trigger: l’evento che fa partire tutto (es. click, hover, caricamento pagina).
• Effetto: la reazione visiva/movimento che vuoi vedere (es. dissolvenza, ingrandimento, inclinazione).
• Target: l’elemento che effettivamente cambia (es. un bottone, un’immagine, una sezione).

Quando configuri un’Interazione, Divi ti chiede sempre di impostare questi tre pezzi:

Quando li hai chiari uno per uno, collegarli diventa molto più semplice. E soprattutto: inizi a ragionare “a sistema”, non a tentativi.

Trigger: è ciò che avvia

Il trigger è l’azione iniziale che fa scattare l’interazione. In parole semplici: è ciò che l’utente fa (o ciò che succede nella pagina) e che Divi “ascolta”.

Esempi tipici di trigger:

• Clic (l’utente preme su un elemento)
• Hover (passaggio del mouse: quando il cursore entra o esce da un’area)
• Caricamento pagina (l’animazione parte quando la pagina si apre)

Esempio concreto: passi il mouse su una scheda prezzi e da lì parte la “catena”.

Nota importante: il trigger da solo non fa niente. È solo l’interruttore. Serve decidere che risposta vuoi ottenere.

Effetto: è ciò che succede

L’effetto è la reazione che parte quando il trigger scatta. Qui decidi cosa succede visivamente: un’animazione, una trasformazione, un cambio di stato.

Effetti comuni:

• Dissolvenza (fade: l’elemento appare/scompare gradualmente)
• Scala (ingrandimento/riduzione)
• Inclinazione (tilt: l’elemento si “piega” leggermente, tipo 3D)
• Ombra più marcata
• Blur (sfocatura)
• Combinazioni (es. scala + ombra + leggero movimento)

Esempio: la tua scheda prezzi si ingrandisce leggermente e aggiunge un’ombra quando ci passi sopra. Quello è l’effetto.

Ok, ma… su cosa lo applichi?

Target: è ciò che cambia

Il target è l’elemento che viene modificato dall’effetto.

Spesso, nelle animazioni “classiche” in Divi, succede questa cosa:

• passi il mouse su una colonna
• e cambia quella stessa colonna

In quel caso, trigger e target coincidono. È utile, ma ti tiene tutto “chiuso” dentro lo stesso elemento.

La differenza grossa con Divi 5 è che ora puoi separare le cose: trigger e target possono essere diversi.

Esempio pratico (molto più interessante): quando il cursore entra in una sezione, un pulsante si ingrandisce anche se non lo hai toccato direttamente. Qui:

• il trigger è l’ingresso del mouse nella sezione
• il target è il pulsante

Risultato: più controllo, più coerenza, e interazioni che “legano” tra loro gli elementi del layout.

Come lavorano insieme (senza confondersi)

Se vuoi pensarla in modo semplice, è una catena:

• Scatta il trigger: il visitatore fa qualcosa (clicca, muove il mouse, entra/esce da un’area) oppure la pagina si carica.
• L’effetto definisce: scegli la risposta visiva o di movimento.
• Il target applica: il cambiamento avviene sull’elemento selezionato.

Pensala come un circuito: premi l’interruttore, passa corrente, si accende la lampadina.

In Divi 5 puoi “cablare” questo circuito come vuoi. Per esempio:

• un hover su una colonna può inclinare il suo pulsante
• un caricamento pagina può far comparire in dissolvenza un’immagine hero
• un singolo clic può animare più moduli insieme, facendo percepire la sezione come un blocco coordinato

Qui le interazioni smettono di essere “hover più carino” e diventano un modo di guidare l’occhio e la navigazione. Non sei più bloccato su “l’elemento reagisce a se stesso”: puoi collegare, sfalsare e distribuire le risposte per connettere visivamente tutto il layout.

Impara tutto sulle Interazioni di Divi 5

La formula in Divi 5 (trigger → effetto → target)

La cosa bella delle Interazioni di Divi 5 è che seguono sempre lo stesso schema: trigger → effetto → target. Anche quando fai cose più articolate, resti dentro una logica chiara.

Vediamola con un esempio utile e molto “da sito reale”: mostrare un modulo contatti quando l’utente clicca un pulsante.

Esempio step-by-step: clic sul pulsante → appare la sezione contatti

Qui l’idea è:

• il pulsante è quello che l’utente usa (trigger)
• la sezione contatti è nascosta all’inizio
• al clic, la sezione contatti si mostra (effetto) ed è il target

Per ottenere questo effetto, imposta un’interazione sul pulsante che vuoi usare come trigger. Seleziona queste impostazioni:

• Evento trigger: Clic (l’evento scatta quando l’utente clicca il pulsante)
• Azione effetto: Mostra elemento (stai dicendo a Divi: “rendi visibile un elemento che prima non lo era”)
• Modulo target: Sezione (Contatti) è l’etichetta assegnata alla sezione contatti

Ora imposta il link ancora (anchor link, cioè un collegamento che porta a un punto specifico della stessa pagina) per aprire la sezione contatti.

1) Dai un ID alla sezione contatti

Apri le impostazioni della Sezione che contiene il form e vai nella scheda Avanzate. In ID e classi CSS, imposta ID CSS: contact.

2) Collega il pulsante a quell’ID

Poi vai nelle impostazioni del pulsante e inserisci #contact nel campo URL del link del pulsante.

3) Nascondi la sezione all’inizio

Infine, imposta lo stato iniziale del form su nascosto, così apparirà solo quando viene attivato.

Apri le impostazioni della Sezione del modulo contatti, vai nella scheda Avanzate e, sotto Visibilità, seleziona i breakpoint in cui vuoi nasconderla (cioè su quali dispositivi: desktop/tablet/mobile).

A questo punto fai una prova: clicca il pulsante e la sezione contatti nascosta comparirà.

Questo flusso (clic → mostra → modulo contatti) è lo stesso schema che puoi riutilizzare per pop-up, interruttori visivi, comparsa graduale al caricamento, o animazioni collegate tra più elementi della stessa sezione. Quando ragioni davvero in termini di trigger, effetto e target, le combinazioni utili aumentano in fretta.

Esempi pratici (rapidi) per siti reali

Qui sotto trovi 3 casi d’uso tipici, con passaggi essenziali. Tutto senza codice, solo Divi.

1) Freelance: evidenziare il pulsante “Prenota una call” quando l’utente entra nella sezione

• Trigger: ingresso del mouse nella sezione “Servizi”
• Effetto: ingrandimento leggero + ombra (per far percepire che è cliccabile)
• Target: il modulo Pulsante “Prenota una call”

Passi pratici: seleziona la sezione come elemento che “ascolta” l’evento (trigger), imposta l’azione dell’effetto, poi scegli come target il pulsante.

Risultato: la sezione diventa una zona attiva che guida l’occhio verso la call to action, senza dover animare tutto.

2) Piccolo e-commerce: far comparire un box “Spedizione gratuita da 49€” senza appesantire la pagina

• Trigger: caricamento pagina
• Effetto: comparsa in dissolvenza (fade) con leggero ritardo
• Target: un modulo Testo o un piccolo banner sotto il prezzo

Passi pratici: imposta l’interazione sul contenitore principale (o su un elemento stabile della pagina), scegli come effetto la dissolvenza, e come target il box informativo.

Così l’informazione importante arriva, ma non “urla” appena la pagina si apre. È una micro-animazione utile, non un fuoco d’artificio.

3) Agenzia/PMI con molti prodotti o servizi: coordinare più elementi con un solo clic

• Trigger: clic su un pulsante “Scopri le caratteristiche”
• Effetto: mostra elemento + animazione di ingresso
• Target: più moduli (es. una tabella, una sezione FAQ, un blocco testimonianze)

Passi pratici: imposta il pulsante come trigger, poi crea una o più interazioni che puntano a target diversi.

Risultato: un solo clic e la pagina “si apre” in modo ordinato. Utile quando devi gestire tante informazioni senza creare muri di testo.

Metti le Interazioni di Divi 5 al lavoro (senza perderti)

Ora hai lo schema. Il passo successivo è provarlo su qualcosa di concreto, non su un layout “finto” che poi non userai mai.

Apri un layout di test e crea una piccola interazione che puoi chiudere in dieci minuti, scegliendo qualcosa che useresti davvero su un sito cliente.

Idee semplici da provare:

• il mouse entra in una sezione e il suo pulsante si ingrandisce in modo discreto
• un clic su un pulsante “Contatti” fa comparire un form nascosto
• il mouse esce da una scheda e l’inclinazione si resetta
• al caricamento pagina, compare l’immagine hero e subito dopo il titolo, con un piccolo ritardo

Conclusione

Quando ragioni con trigger, effetto e target, le Interazioni di Divi 5 diventano finalmente prevedibili e replicabili: decidi cosa avvia l’azione, cosa succede e quale elemento cambia.

Il risultato è un sito più chiaro da navigare e più coerente da vedere, senza ricorrere a soluzioni complicate.

Fai qualche prova su una pagina di test e poi porta le combinazioni che funzionano nelle pagine principali. Se invece ti blocchi su impostazioni, struttura o strategia (tipo: cosa ha senso animare e cosa no), ha senso confrontarti con uno sviluppatore Divi di fiducia: spesso bastano due dritte per evitare ore di tentativi.

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