Comprendere la differenza tra trigger, effetti e obiettivi in ​​Divi 5

Le nuove interazioni di Divi 5 utilizzano un modello semplice: trigger, effetto, target. Separa ciò che lo inizia, ciò che accade e quali cambia e puoi creare movimenti chiari e coordinati attraverso il layout. In questo post, spiegheremo ogni parte, mostreremo come si adattano e attraversano un rapido esempio che puoi riutilizzare. Ci arriviamo!

Cosa sono i trigger, gli effetti e gli obiettivi?

Le interazioni in Divi 5 sono costruite da tre parti mobili che funzionano insieme. Un grilletto mette in moto le cose, un effetto decide come appare la risposta e un bersaglio definisce quali elementi cambia.

Iscriviti al nostro canale YouTube

Quando imposti un'interazione, Divi ti chiederà di compilare tutte e tre le parti:

Comprendere ogni ruolo separatamente renderà più facile vedere come si collegano a un sistema completo.

Il grilletto è ciò che inizia

Ogni interazione inizia con un'azione iniziale chiamata trigger. È il primo passo che l'utente fa, come un clic del mouse, il mouse o il carico di pagina, che inizia l'azione. Ad esempio, spostare il mouse su una scheda di prezzi mette in moto la catena.

Da solo, un grilletto non fa nulla. Ha bisogno di una risposta.

L'effetto è ciò che accade

Una volta che il grilletto si accende, l'effetto segue. È qui che decidi la reazione, come inclinazione, dissolvenza, scala, sfocatura o qualsiasi mix di movimenti. Immagina la stessa scheda di prezzi ridimensionando leggermente e aggiungendo un'ombra più profonda mentre il cursore si libra su di esso - questo è l'effetto.

Infine, devi decidere dove applicare l'effetto.

Target è ciò che cambia

L'obiettivo è semplicemente l'elemento che cambia quando il grilletto spara. Il mouse è un'interazione comunemente usata, ma influisce solo sull'elemento stesso. In altre parole, l'elemento che ha iniziato l'interazione (il trigger) è anche l'elemento che cambia (il target).

Ad esempio, il libraio su una colonna può creare la stessa scala della colonna, poiché è anche il bersaglio.

Ciò ha mantenuto tutto limitato a un singolo elemento. Puoi ancora impostare le cose in questo modo in Divi 5, ma non sei più limitato ad esso.

Ora il grilletto e il bersaglio possono essere diversi, il che ti dà molto più controllo. Ad esempio, quando il cursore entra in una sezione, il pulsante si ridimensiona anche se non è stato toccato. In questo caso, il pulsante è il target.

Come lavorano insieme

Ora che abbiamo visto ogni parte da sola, la vera potenza arriva quando la colleghi in una catena:

• Trigger Fires: il visitatore fa qualcosa come fare clic, spostare il mouse, entrare, lasciare o caricare la pagina.
• L'effetto definisce : decidi quale tipo di risposta visiva o di movimento mostri.
• Target si applica: quel cambiamento terrestri sull'elemento che hai scelto.

Pensalo come cablaggio di un circuito. L'interruttore lancia, la corrente fluisce, la lampadina si illumina.

In Divi 5, puoi collegare quel circuito come preferisci. Un mouse su una colonna può inclinare il suo pulsante. Un carico di pagina può svanire in un'immagine di eroe. Un singolo clic può animare diversi moduli contemporaneamente, rendendo la sezione coordinata.

Questo è quando le interazioni smettono di sentirsi più belli e iniziare a lavorare come un linguaggio di design. Non sei più bloccato con un elemento che reagisce a se stesso. Puoi incatenare, scaglionare e diffondere le risposte per collegare l'intero layout.

Impara tutto sulle interazioni di Divi 5

La formula in Divi 5

La bellezza delle interazioni di Divi 5 è che non sono componenti aggiuntivi casuali. Seguono una formula chiara: trigger → Effetto → Target. Costruire anche interazioni complesse diventa semplice e coerente quando lo vedi come un modello ripetibile.

Mettiamo in pratica questa formula per mostrarti come lavorano insieme. Per questo esempio, creiamo un modulo di contatto che viene visualizzato sullo schermo quando l'utente fa clic sul pulsante.

Per creare questo effetto, imposterà un'interazione sul pulsante che si desidera utilizzare come trigger. Seleziona queste impostazioni:

• Trigger Event: clicca (abbiamo deciso che l'evento si attiverà quando l'utente fa clic sul pulsante)
• Effect Action: Show Element (il modulo di contatto nascosto)
• Modulo di destinazione: la sezione (contatto) è l'etichetta assegnata alla sezione di contatto.

Quindi, impostare il collegamento di ancoraggio per aprire la sezione di contatto. Innanzitutto, aprire le impostazioni della sezione del modulo di contatto e andare alla scheda Advanced . In ID e classi CSS , imposta ID CSS : contatto.

Quindi, vai alle impostazioni del pulsante e inserisci #Contact nel campo URL del collegamento pulsante .

Infine, imposta sullo stato iniziale del modulo su nascosto in modo che appaia solo se attivato. Apri le impostazioni della sezione del modulo di contatto, vai alla scheda avanzata e sotto la visibità , seleziona i punti di interruzione in cui si desidera nasconderlo.

Ora provalo. Fare clic sul pulsante e viene visualizzata la sezione Contatto nascosto.

Quel flusso semplice (fare clic → Mostra → Modulo di contatto) è lo stesso modello che riutilizzerai per pop-up, attivazioni, rivelazioni delicate su carico o animazioni incatenate attraverso una sezione. Una volta che pensi in termini di trigger, effetto e target, le possibilità si aprono rapidamente.

Prova le interazioni in Divi 5 oggi

Hai il modello. Ora mettilo per lavorare su una vera pagina. Apri un layout di prova e crea un piccolo effetto di interazione che puoi finire in dieci minuti. Scegli qualcosa che in realtà useresti su un sito client.

Ecco alcuni mini istruzioni per il rotolamento:

• Il mouse entra in una sezione, rendendo sottilmente la sua scala dei pulsanti
• Facendo clic su un pulsante "Contatto" rivela un modulo nascosto
• Leave del mouse su una carta ripristina l'inclinazione
• Il caricamento della pagina svanisce in un'immagine di eroe, quindi il titolo un momento dopo

Facci sapere nei commenti se hai ancora usato la funzione di interazioni di Divi 5 e cosa ne pensi!