Interactions pour Divi 5 (pop-ups, bascules, effets de la souris et plus)

Aujourd'hui, nous sommes ravis de publier des interactions pour Divi 5, un système robuste pour créer des éléments interactifs tels que des popups et des bascules, et des effets créatifs basés sur un défilement et basés sur des mouvements de souris.

Ce n'est pas un constructeur pop-up; C'est un tout constructeur . Créez un déclencheur, attribuez un effet, choisissez une cible et donnez vie à vos interactions personnalisées. Vous pouvez faire tellement de choses incroyables avec ce système, et j'ai hâte de vous montrer comment cela fonctionne, alors interdit.

Découvrez la vidéo suivante pour voir la nouvelle fonctionnalité en action.

Construisez vos propres éléments interactifs

Vous remarquerez un nouveau groupe d'interactions dans l'onglet avancé de tous les éléments. Cliquez sur le bouton Ajouter une interaction ouvrira l'éditeur d'interaction, où vous pouvez configurer le déclencheur, l'effet et la cible de chaque interaction.

Le déclencheur initie l'interaction, comme lors du clic ou du plan de planage. L'effet se produit lorsque l'interaction est déclenchée, telle que la visibilité, le préréglage ou l'attribut à basculer, et la cible est l'élément affecté de la page.

Exemples d'interaction

Avant d'approfondir ces paramètres, permettez-moi de vous montrer quelques exemples de ce que les interactions peuvent réaliser.

Exemple 1: Construire un pop-up

Dans l'exemple vidéo ci-dessous, j'ai utilisé des interactions pour créer une fenêtre contextuelle.

J'ai ajouté un déclencheur de la fenêtre Entrée à une section, qui applique l'effet de visibilité à bascule à mon pop-up. La section entre dans ma fenêtre, déclenchant la visibilité de la fenêtre contextuelle, et elle glisse dans l'utilisation des paramètres d'animation de Divi.

De plus, un module d'icône dans la fenêtre contextuelle a une interaction basée sur un clic, qui bascule la visibilité sur la fenêtre contextuelle pour la fermer. Vous pouvez créer n'importe quel type de bannière pop-up ou flottante!

Exemple 2: Construire une bascule

Dans l'exemple vidéo ci-dessous, j'ai utilisé des interactions pour basculer les tables de tarification mensuelles et annuelles.

J'ai ajouté deux interactions à une ligne pour basculer la visibilité des sections de tarification annuelles et mensuelles alternées. Ensuite, j'ai ajouté deux autres interactions pour basculer la visibilité de deux modules d'icônes, donnant à l'utilisateur des commentaires supplémentaires sur le clic.

Exemple 3: transition entre les préréglages

L'un des effets les plus puissants est l'effet de préréglage à bascule. Étant donné que les préréglages vous permettent de modifier les paramètres d'un élément, il n'y a pas de limite à ce que vous pouvez faire. Lorsqu'un déclencheur modifie le préréglage sur un élément cible, il peut le transformer de plusieurs façons.

Dans l'exemple vidéo ci-dessous, j'ai configuré deux interactions pour ajouter et supprimer un préréglage sur une ligne lorsqu'il entre et quitte la fenêtre. Le préréglage survient le préréglage modifie la couleur et l'échelle de l'arrière-plan de la ligne, et ajoute une ombre de boîte, attirant l'attention des utilisateurs lorsqu'ils font défiler la page!

Exemple F: effets de mouvement de la souris

Les effets basés sur le mouvement des souris des systèmes d'interaction sont très amusants.

Dans l'exemple vidéo ci-dessous. J'ai ajouté plusieurs interactions à une section de héros, ciblant divers éléments avec des effets basés sur le mouvement de souris de sensibilités variables.

Les interactions déclenchent sur la souris entre, appliquant l'opacité, le mouvement et les effets d'inclinaison sur les éléments qui changent à mesure que ma souris se déplace. J'ai également ajouté une interaction au module de bouton, qui bascule un préréglage pour modifier le style du contour carré.

Les possibilités sont infinies!

Je pourrais continuer encore et encore avec différents exemples, et je suis ravi de voir ce que vous proposez.

En regardant de plus près l'éditeur d'interaction, vous pouvez voir des effets supplémentaires avec lesquels jouer avec ce que je n'ai pas encore mentionné, tels que les attributs de renversement, les cookies et le défilement des éléments.

Par exemple, vous pouvez utiliser des effets d'attribut pour modifier les classes CSS d'un élément, ID ou autre chose.

La première version des interactions prend en charge les effets suivants:

• Basculer la visibilité - bascule automatiquement un élément entre les états visibles et cachés.
• Afficher l'élément - rend un élément caché visible.
• Masquer l'élément - Rend un élément visible caché.
• Basculez le préréglage - fait allumer un préréglage sur / désactiver pour un élément, avec un remplacement facultatif des préréglages existants.
• Ajouter Preset - Applique une classe de style prédéfini à un élément, avec un remplacement facultatif des préréglages existants.
• Supprimer le préréglage - supprime une classe de style prédéfini d'un élément.
• Toggle Attribut - Ajoute ou supprime la valeur d'attribut HTML spécifique d'un élément, tel qu'une classe CSS et une ID.
• Ajouter l'attribut - ajoute une valeur d'attribut HTML spécifique à un élément s'il n'existe pas déjà.
• Supprimez l'attribut - supprime une valeur d'attribut HTML spécifique d'un élément.
• Basciller cookie - Ajouter ou retirer une valeur de cookie d'un cookie. Par exemple, définissez un cookie lorsqu'une fenêtre contextuelle semble suivre lorsqu'un utilisateur a vu une fenêtre contextuelle. Ensuite, utilisez les options de condition de Divi pour masquer la fenêtre contextuelle sur les visites de la page futures pour cet utilisateur.
• Ajoutez un cookie - ajoute une valeur de cookie et de cookie que vous définissez au navigateur du visiteur.
  Retirer le cookie - Retirez un cookie spécifié.
• Faites défiler l'élément - défile en douceur la page pour afficher l'élément cible.
• Miroir du mouvement de la souris - fait que l'élément cible suive le mouvement de la souris dans l'élément de déclenchement en utilisant divers types de mouvements (traduire, échelle, opacité, inclinaison ou rotation) avec une sensibilité réglable.

Essayez Divi 5 aujourd'hui

Les interactions pour Divi 5 sont disponibles aujourd'hui, et c'est l'une des nombreuses fonctionnalités qui arrivent à Divi cette année.

Vous pouvez suivre au fur et à mesure que nous progressons dans la version finale de Divi 5 et au-delà, avec des mises à jour toutes les deux semaines. Selon vos priorités, vous pouvez utiliser Divi 5 maintenant pour créer de nouveaux sites Web ou attendre que nous ajoutions plus de fonctionnalités, tout ce qui vous convient le mieux.

Comme indiqué dans le calendrier de libération multi-phases original de Divi 5, le divi 5 public alpha est comme «divi 5 lite». Il manque quelques fonctionnalités et peut ne pas convenir aux sites Web existants, mais il est prêt à être utilisé sur de nouveaux sites Web si vous préférez l'expérience à Divi 4.

Nous voulons que vous l'essayiez, et si vous l'aimez, utilisez-le; Quand tout le monde l'aime, nous le rendrons officiel.

Avez-vous essayé des couleurs relatives?

Au cas où vous l'avez manqué, nous avons récemment publié des couleurs relatives pour Divi 5, faisant de Divi le leader clair de la gestion des couleurs et du système de couleurs avancé. Il vous permet de créer des systèmes de couleurs de variables mathématiquement magnifiques avec des relations de couleur imbriquées à l'aide de HSL. Vous ne voulez pas dormir sur cette fonctionnalité.

Regardez cette vidéo pour tous les détails.

Plus de mises à jour divi 5 sont en route

2025 est l'année de Divi 5 . Le travail fastidieux est derrière nous. Nous avons construit la fondation super rapide, et maintenant il est temps pour Divi pour faire son retour.

Si vous êtes ici pour le retour Divi, faites-nous une énorme faveur et faites-le nous savoir en aimant cette vidéo et en laissant un commentaire. Cela signifie beaucoup pour nous de vous voir applaudir divi, et il est essentiel de nourrir l'algorithme et de faire passer le mot.

N'oubliez pas de nous suivre sur YouTube et abonnez-vous à la newsletter Divi afin de ne jamais manquer une mise à jour. Je vous verrai bientôt pour une autre annonce de fonctionnalité Divi 5, ce qui, je le promets, sera au coin de la rue.