Comprendre la différence entre les déclencheurs, les effets et les cibles dans Divi 5

Les nouvelles interactions de Divi 5 utilisent un modèle simple - déclencheur, effet, cible. Séparez ce qui commence, ce qui se passe et ce qui change, et vous pouvez créer un mouvement clair et coordonné à travers votre disposition. Dans cet article, nous expliquerons chaque partie, montrerons comment ils s'adaptent et parcourons un exemple rapide que vous pouvez réutiliser. Allons-y!

Que sont les déclencheurs, les effets et les cibles?

Les interactions dans Divi 5 sont construites à partir de trois pièces mobiles qui fonctionnent ensemble. Un déclencheur met en mouvement les choses, un effet décide à quoi ressemble la réponse et une cible définit quel élément change.

Abonnez-vous à notre chaîne YouTube

Lorsque vous avez mis en place une interaction, Divi vous demandera de remplir les trois parties:

Comprendre chaque rôle séparément facilitera la façon de voir comment ils se connectent à un système complet.

Le déclencheur est ce qui commence

Chaque interaction commence par une action de départ appelée déclencheur. C'est la première étape que l'utilisateur fait, tel qu'un clic de souris, une survol ou un chargement de page, qui initie l'action. Par exemple, déplacer votre souris sur une carte de tarification définit la chaîne en mouvement.

En soi, un déclencheur ne fait rien. Il a besoin d'une réponse.

L'effet est ce qui se passe

Une fois que le déclencheur se déclenche, l'effet suit. C'est là que vous décidez de la réaction, comme l'inclinaison, le fondu, l'échelle, le flou ou tout mélange de mouvements. Imaginez cette même carte de prix à l'échelle légèrement et en ajoutant une ombre plus profonde lorsque votre curseur plane dessus - c'est l'effet.

Enfin, vous devez décider où appliquer l'effet.

La cible est ce qui change

La cible est simplement l'élément qui change lorsque le déclencheur se déclenche. Le volant est une interaction couramment utilisée, mais elle n'affecte que l'élément lui-même. En d'autres termes, l'élément qui a commencé l'interaction (le déclencheur) est également l'élément qui change (la cible).

Par exemple, le survol d'une colonne peut faire cette même échelle de colonne, car c'est aussi la cible.

Cela a gardé tout confiné à un seul élément. Vous pouvez toujours configurer les choses de cette façon dans Divi 5, mais vous ne vous y êtes plus limité.

Maintenant, le déclencheur et la cible peuvent être différents, ce qui vous donne beaucoup plus de contrôle. Par exemple, lorsque le curseur entre dans une section, le bouton évolue même s'il n'a pas été touché. Dans ce cas, le bouton est la cible.

Comment ils fonctionnent ensemble

Maintenant que nous avons vu chaque partie en soi, la véritable puissance vient lorsque vous les connectez à une chaîne:

• Déclencher des incendies: le visiteur fait quelque chose comme cliquer, déplacer la souris, entrer, sortir ou charger la page.
• Effet définit : vous décidez du type de réponse visuelle ou de mouvement à montrer.
• Target s'applique: qui change les terres sur l'élément que vous avez choisi.

Pensez-y comme le câblage d'un circuit. Le commutateur se retourne, le courant circule, l'ampoule s'allume.

Dans Divi 5, vous pouvez câbler ce circuit comme vous le souhaitez. Un volant sur une colonne peut incliner son bouton. Une charge de page peut s'estomper dans une image de héros. Un seul clic peut animer simultanément plusieurs modules, ce qui rend la section coordonnée.

C'est à ce moment que les interactions cessent de se sentir comme un volant plus agréable et commencent à fonctionner comme un langage de conception. Vous n'êtes plus coincé avec un élément réagissant à lui-même. Vous pouvez chaîner, échelonner et répandre les réponses pour connecter toute la disposition.

Apprenez tout sur les interactions de Divi 5

La formule en divi 5

La beauté des interactions de Divi 5 est qu'ils ne sont pas des modules complémentaires aléatoires. Ils suivent une formule claire: déclencheur → effet → cible. La construction d'interactions même complexes devient simple et cohérente une fois que vous la voyez comme un modèle reproductible.

Mettons cette formule en pratique pour vous montrer comment ils fonctionnent ensemble. Pour cet exemple, créons un formulaire de contact qui apparaît à l'écran lorsque l'utilisateur clique sur le bouton.

Pour créer cet effet, vous définissez une interaction sur le bouton que vous souhaitez utiliser comme déclencheur. Sélectionnez ces paramètres:

• Événement de déclenchement: cliquez sur (nous avons décidé que l'événement se déclenche lorsque l'utilisateur clique sur le bouton)
• Action d'effet: Afficher l'élément (le formulaire de contact caché)
• Module cible: la section (contact) est l'étiquette attribuée à la section de contact.

Ensuite, définissez le lien d'ancrage pour ouvrir la section de contact. Tout d'abord, ouvrez les paramètres de la section du formulaire de contact et accédez à l'onglet avancé . Sous CSS ID & Classes , définissez CSS ID : Contact.

Ensuite, accédez aux paramètres du bouton et entrez #Contact dans le champ URL de liaison du bouton .

Enfin, définissez l'état initial du formulaire sur Hidden afin qu'il n'apparaisse que lorsqu'il est déclenché. Ouvrez les paramètres de la section du formulaire de contact, accédez à l'onglet avancé et, sous la vision , sélectionnez les points d'arrêt dans lesquels vous souhaitez le masquer.

Maintenant, testez-le. Cliquez sur le bouton et la section de contact caché apparaît.

Ce simple flux (cliquez sur → Show → Contact Form) est le même motif que vous réutilisez pour les fenêtres contextuelles, les bascules, les révélations douces sur charge ou les animations enchaînées dans une section. Une fois que vous pensez en termes de déclencheur, d'effet et de cible, les possibilités s'ouvrent rapidement.

Essayez les interactions dans Divi 5 aujourd'hui

Vous avez le modèle. Maintenant, mettez-le au travail sur une vraie page. Ouvrez une disposition de test et construisez un petit effet d'interaction que vous pouvez terminer en dix minutes. Choisissez quelque chose que vous utiliseriez réellement sur un site client.

Voici quelques mini-invites pour rouler:

• La souris entre dans une section, ce qui rend sa balance de bouton subtilement
• Cliquer sur un bouton «Contact» révèle un formulaire replié
• Le congé de souris sur une carte réinitialise l'inclinaison
• La charge de page s'estompe dans une image de héros, puis le titre un instant plus tard

Faites-nous savoir dans les commentaires si vous avez déjà utilisé la fonction d'interactions de Divi 5, et ce que vous en pensez!