Tout ce que vous devez savoir sur les interactions divi 5

Si vous souhaitez attirer des visiteurs avec des pop-ups, des bascules et des effets de défilement dynamiques sans plugin ou CSS personnalisés, vous adorerez l'une des dernières versions de fonctionnalités publiques Divi 5. Les interactions dans Divi 5 permettent aux utilisateurs de Divi de créer des éléments interactifs engageants à l'intérieur du constructeur visuel. Dans cet article, nous plongerons dans tout ce que vous devez savoir sur les interactions Divi 5, en explorant ses fonctionnalités, quelques conseils et des applications du monde réel pour vous aider à vous familiariser avec la fonctionnalité.

Remarque importante: Divi 5 est actuellement en alpha public et optimisé pour les nouveaux sites Web. Nous ne recommandons pas encore de migrer des sites Divi 4 existants en raison du développement continu et des problèmes de compatibilité potentiels avec les modules hérités. Restez à l'écoute pour les mises à jour alors que Divi 5 approche de sa version complète!

Allons-y.

Que sont les interactions divi 5?

Les interactions divi 5 sont un constructeur n'importe quoi qui vous permet de créer des éléments interactifs pour votre site Web directement au sein du constructeur visuel. Bien plus qu'un simple constructeur contextuel, cette fonctionnalité vous permet de créer une gamme d'interactions personnalisées, des fenêtres contextuelles aux animations déclenchées par défilement, le tout sans toucher une ligne de code.

Abonnez-vous à notre chaîne YouTube

Intégrés de manière transparente dans l'onglet avancé de tout module, colonne, ligne ou section, les interactions offrent une flexibilité illimitée pour créer des expériences engageantes et axées sur l'utilisateur.

Les composantes centrales des interactions divi 5

Au cœur des interactions Divi 5 se trouvent trois composants clés qui travaillent ensemble pour donner vie à vos créations:

Déclencher des événements

Les déclencheurs sont les événements qui déclenchent une interaction. Les exemples incluent les actions de l'utilisateur comme cliquer sur un bouton ou survoler une image, faire défiler des événements comme atteindre un point spécifique sur une page ou des déclencheurs basés sur le temps comme un retard après une charge de page.

Les déclencheurs disponibles comprennent:

• Cliquez sur : Un utilisateur clique sur un bouton, une image ou un autre élément pour lancer une interaction.
• Souris Entrée / sortie: un utilisateur plane ou quitte un élément.
• Visite Entrée / sortie: un élément entre ou quitte la zone visible de l'écran lorsque l'utilisateur défile.
• Charge: une interaction démarre lorsque la page se charge, avec un délai facultatif.

Par exemple, vous pouvez déclencher une fenêtre contextuelle de 5 secondes après qu'une page se charge ou animer un élément lorsqu'un utilisateur défile.

Effet des actions

Une fois qu'un déclencheur est activé, les effets déterminent ce qui se passe. Les options incluent l'affichage ou la cachette d'éléments, l'animation avec des fonds, les échelles, la rotation ou l'application de transitions prédéfinies pour un style cohérent.

• Basculer la visibilité: bascule un élément entre visible et caché.
• Afficher / masquer l'élément: rend un élément visible ou caché.
• Basculez le préréglage: allume ou désactivez un préréglage pour un élément de conception avec la possibilité de remplacer un préréglage existant.
• Ajouter un préréglage: utilisé pour ajouter une classe de style prédéfini à un élément. Vous pouvez également remplacer les préréglages existants.
• Retirez le préréglage: utilisez pour supprimer un style prédéfini d'un élément.
• Attribut à bascule: ajoute ou supprime l'attribut HTML d'un élément, comme une classe CSS ou un ID CSS.
• Ajouter l'attribut: cela ajoute une valeur d'attribut HTML spécifique où l'on n'existe pas actuellement.
• Supprimez l'attribut: supprime tout attribut appliqué à un élément.
• Biscuit à bascule: ajoute ou supprime une valeur de cookie. Par exemple, vous pouvez définir un cookie lorsqu'une fenêtre contextuelle apparaît et la définir pour apparaître une seule fois à l'aide des paramètres de condition de Divi 5.
• Ajoutez du cookie: ajoute une valeur de cookie que vous pouvez définir au navigateur de l'utilisateur.
• Retirer le cookie: supprime un cookie précédemment spécifié.
• Faites défiler l'élément: permet à la page de faire défiler en douceur, en apportant l'élément cible en vue.
• Mouvement de la souris miroir: vous permet de définir un mouvement qui suit les mouvements de la souris de l'utilisateur. Les options incluent la traduction, l'échelle, l'opacité, l'inclinaison ou la rotation. Vous pouvez également ajuster la sensibilité du mouvement.

Cibler un module

La cible est l'élément que l'interaction affecte, comme un module, une ligne, une colonne ou une section entière. Vous pouvez cibler l'élément lui-même ou un autre élément de la page, offrant une flexibilité pour créer des interactions complexes.

Caractéristiques clés des interactions divi 5

Les interactions divi 5 se distinguent par son ensemble de fonctionnalités convivial et polyvalent:

• Aucune interface de code: configurez les déclencheurs, les effets et les cibles via une interface intuitive dans l'onglet avancé de aucun élément sans utiliser de CSS ou JavaScript.
• Divers types d'interaction: créez des pop-ups pour la capture de plomb, des bascules pour les FAQ, des fonds déclenchés par défilement pour les sections de héros ou des effets de souris de type parallaxe pour les portefeuilles.
• Performances légères: construites directement en divi 5, les interactions éliminent le besoin de plugins tiers, réduisant le ballonnement du site et améliorant les temps de chargement.
• Combinaisons de déclenchement dynamiques: combinez plusieurs déclencheurs, comme un événement de défilement avec un délai, pour des interactions sophistiquées comme une fenêtre contextuelle qui apparaît après qu'un utilisateur défile sur la page.
• Conception réactive: Personnalisez les interactions de bureau, de tablette et mobiles à l'aide de points d'arrêt réactifs personnalisables de Divi 5.

Comment accéder et utiliser des interactions divi 5

La création d'une interaction dans Divi 5 est simple, grâce à son intégration au sein du constructeur visuel. Suivez ces étapes simples pour commencer:

Commencez par ouvrir une page dans Divi 5. Choisissez un module, une ligne, une colonne ou une section à laquelle vous souhaitez ajouter une interaction. Par exemple, sélectionnez un module d'image sur votre page.

Accédez à l' onglet avancé et cliquez sur la liste déroulante des interactions . Cliquez sur le bouton Interaction Ajouter à partir de là.

Nous voulons créer un effet d'inclinaison / transformation de la souris pour notre image. Pour ce faire, nous devrons créer deux interactions - une pour l'image et une autre pour la colonne qui contient l'image. Commencez par donner à votre interaction un nom dans l' étiquette d'administration , puis entrez les paramètres suivants:

• Événement de déclenchement: la souris entre
• Action d'effet: mouvement de souris miroir
• Module cible: image
• Délai: 0
• Type de mouvement: traduire
• Sensibilité: 10

Une fois tous les paramètres en place, cliquez sur le bouton Enregistrer l'interaction pour continuer.

Ensuite, nous allons créer l'interaction de transformation sur la colonne. Cliquez à nouveau sur l'interaction + ajouter. Entrez les paramètres suivants pour créer l'interaction:

• Étiquette d'administration: colonne d'inclinaison
• Événement de déclenchement: la souris entre
• Action d'effet: mouvement de souris miroir
• Module cible: colonne
• Délai: 0
• Type de mouvement: inclinaison
• Sensibilité: 30

Une fois les paramètres entrés, votre interaction devrait ressembler à ceci:

Utilisez le bouton Aperçu pour afficher votre interaction.

Votre page apparaîtra dans un nouvel onglet, vous permettant de prévisualiser et de tester votre interaction.

Types d'interactions que vous pouvez créer

Voici quelques exemples pratiques pour présenter la polyvalence des interactions Divi 5, avec des déclencheurs, des effets et des applications du monde réel.

Bienvenue popup pour les nouveaux visiteurs

Les pop-ups sont parfaits pour exhorter les visiteurs à s'inscrire aux newsletters, aux promotions ou aux événements. Avec les interactions Divi 5, vous pouvez créer une fenêtre contextuelle de bienvenue qui apparaît après une page de page.

Pour créer cette interaction, vous devrez créer une section pour votre fenêtre contextuelle et attribuer les paramètres suivants:

• Étiquette d'administration: popup
• Événement de déclenchement: chargement
• Action d'effet: élément montrer
• Module cible: section (pop-up) - assurez-vous de nommer votre section avant de créer l'interaction
• Délai: 5 secondes

Nous devrons également créer une interaction pour fermer le pop-up. Le moyen le plus simple est d'ajouter un module d'icône dans le coin supérieur droit de la section pop-up et d'attribuer les paramètres suivants:

• Étiquette d'administration: bouton Fermer
• Événement de déclenchement: cliquez
• Action d'effet: Masquer l'élément
• Module cible: section (popup)
• Délai: 0

Pour contrôler le placement de votre popup, utilisez les paramètres de position de Divi 5. Dans l' onglet avancé , localisez le menu déroulant de position et définissez la position sur Fixer . De là, choisissez l'emplacement que vous aimeriez que le pop-up apparaisse sur la page. Dans cet exemple, nous l'avons réglé au centre . C'est aussi une bonne idée de définir l' index Z afin que le pop-up apparaisse surtout sur la page, comme 99999 .

La dernière étape consiste à définir la visibilité de la fenêtre contextuelle sur tous les appareils. Pour ce faire, accédez à l' onglet avancé , faites défiler vers le menu déroulant de visibilité et basculez toutes les options pour masquer la section contextuelle sur tous les appareils.

Basculer la visibilité d'un élément

Les bascules sont parfaits pour créer des sections de contenu pliables comme les FAQ, les menus d'accordéon, les tables de tarification ou les services. Ils permettent aux utilisateurs de développer ou d'effondrer le contenu en un clic, en gardant votre page propre et interactive. Par exemple, vous pouvez révéler une liste complète des services qui n'est visible qu'une fois qu'un bouton est cliqué.

Pour créer cet effet, vous définissez une interaction sur le bouton que vous souhaitez définir comme déclencheur de votre section. Entrez les paramètres suivants pour l'interaction:

• Étiquette d'administration: Show Services
• Événement de déclenchement: cliquez
• Action d'effet: élément montrer
• Module cible: Section (Reveal Services)
• Délai: 0

Ensuite, définissez le lien d'ancrage pour ouvrir la section. Ouvrez les paramètres du bouton et entrez #Services dans le champ URL de liaison du bouton de l'onglet Contenu.

Cliquez sur la section des fonctionnalités sous le bouton et accédez à l'onglet avancé. Définissez l'ancre en ajoutant des services au champ ID CSS dans le menu CSS ID & Classes.

Dans l'onglet avancé, vous devrez également définir la visibilité de la section à Hidden, comme nous l'avons fait avec notre pop-up.

Effets de mouvement de souris

Les interactions divi 5 vous permettent de créer des effets de mouvement de souris dynamiques lorsqu'un utilisateur plane sur un élément de conception. Par exemple, vous pouvez combiner des interactions pour créer un effet d'inclinaison sur un titre et la colonne parent.

Vous devrez d'abord créer une interaction pour réaliser cette interaction. Entrez les paramètres suivants dans l'onglet avancé de l'image:

• Étiquette d'administration: ruban animé
• Événement de déclenchement: la souris entre
• Action d'effet: mouvement de souris miroir
• Module cible: texte
• Délai: 0
• Type de mouvement: inclinaison
• Sensibilité: 30

Lorsque les paramètres sont entrés, ils devraient ressembler à la capture d'écran ci-dessous.

Ensuite, définissez une interaction sur la colonne contenant l'en-tête en utilisant les paramètres suivants:

• Étiquette d'administration: inclinaison de la colonne
• Événement de déclenchement: la souris entre
• Action d'effet: mouvement de souris miroir
• Module cible: colonne
• Délai: 0
• Type de mouvement: inclinaison
• Sensibilité: 50

Une fois terminé, vos paramètres doivent ressembler à la capture d'écran ci-dessous.

Interactions prédéfinies

Vous pouvez utiliser des interactions Divi 5 aux côtés des préréglages pour créer des effets avec MouseOver ou la fenêtre Entrée / Exit déclencheurs. Par exemple, si vous souhaitez présenter une section sur votre page en modifiant la couleur d'arrière-plan ou en ajoutant un style d'ombre de bordure, vous pouvez utiliser des interactions pour le faire. Dans l'exemple ci-dessous, la couleur de l'arrière-plan, la largeur et la bordure changent lorsqu'un utilisateur plane sur la section.

Pour créer cet effet, vous devrez d'abord créer un préréglage pour afficher la section avant et après Mouseover. Dans cet exemple, nous en avons créé deux - un avec un fond jaune solide et un autre avec divers effets et un fond vert.

Une fois vos préréglages créés, vous pouvez utiliser des interactions pour basculer les modifications de survol. Commencez par créer la première interaction avec les paramètres suivants:

• Étiquette d'administration: fond jaune
• Événement de déclenchement: la souris entre
• Action d'effet: Toggle Preset
• Module cible: section (prix)
• Délai: 1 seconde
• Preset: fond jaune

Ensuite, créez une deuxième interaction pour la souris en entrant les paramètres suivants:

• Étiquette d'administration: fond vert
• Événement de déclenchement: sortie de la souris
• Action d'effet: Toggle Preset
• Module cible: section (prix)
• Délai: 0
• Préréglé: préréglé vert

Avantages de l'utilisation d'interactions divi 5

Les interactions Divi 5 offre une approche puissante et rationalisée pour créer des sites Web, offrant une gamme d'avantages qui en font une fonctionnalité remarquable pour les utilisateurs Divi. Voici un aperçu de la raison pour laquelle cette fonctionnalité est un ajout si utile à Divi 5:

1. Aucun plugins requis

Étant donné que les interactions Divi 5 sont intégrées dans le noyau de Divi, il élimine la nécessité pour les plugins tiers de créer des fenêtres contextuelles et d'autres interactions. Cette approche native réduit le nombre de scripts exécutés sur votre site, conduisant à des temps de chargement plus rapides et à des mesures de performances améliorées.

Par exemple, au lieu de compter sur un plugin pop-up, les interactions Divi 5 gère tout dans le constructeur visuel, garantissant une base de code plus maigre et une expérience utilisateur plus lisse. Cela signifie également moins de mises à jour pour gérer et réduire les risques des conflits de plugin, ce qui rend votre site plus fiable.

2. Il est convivial

Les interactions divi 5 sont conçues intuitivement, ne nécessitant que quelques clics pour créer des interactions. Les débutants peuvent saisir rapidement les bases et les développeurs professionnels peuvent plonger dans des combinaisons complexes sans écrire une seule ligne de code.

Les paramètres d'interactions sont soigneusement organisés dans l'onglet Avancé de n'importe quel élément, avec des étiquettes et des info-bulles claires qui vous guident tout au long du processus. Par exemple, la configuration d'une fenêtre contextuelle nécessite quelques clics pour sélectionner un déclencheur et un effet, ce qui permet à quiconque d'utiliser facilement.

3. Liberté de personnaliser

La flexibilité des interactions divi 5 et de ses vastes paramètres - déclencheurs, effets et cibles - vous permettent de créer des expériences uniques pour les visiteurs de votre site. Vous pouvez mélanger plusieurs déclencheurs, comme la combinaison d'une fenêtre basée sur Scroll, Entrée avec un délai, pour créer des interactions sophistiquées, comme une bannière promotionnelle qui s'estompe après qu'un utilisateur a fait défiler à mi-chemin de la page.

La possibilité de cibler n'importe quel module, ligne, colonne ou section signifie que vous pouvez appliquer des effets précisément si nécessaire, qu'il s'agisse d'animer un seul bouton ou de transformer une section de héros entière.

4. Engagement amélioré de l'utilisateur

Les éléments interactifs renforcent l'engagement des utilisateurs en rendant les sites Web plus immersifs et réactifs. Les interactions divi 5 aident à garder les visiteurs sur votre site en encourageant l'interaction, comme cliquer sur les bascules pour révéler des prix alternatifs ou déclencher des fenêtres contextuelles pour la capture du plomb. Par exemple, un site Web de restaurant pourrait utiliser une animation déclenchée par défilement pour révéler une section de menu.

Conseils pratiques pour commencer

Pour tirer le meilleur parti des interactions divi 5, abordez-les stratégiquement pour garantir des résultats optimaux. Voici quelques conseils pour vous guider tout au long du processus:

• Commencez simple: commencez par des interactions simples comme les fenêtres contextuelles ou les bascules pour vous familiariser avec la fonctionnalité avant de s'attaquer aux effets avancés comme le mouvement de souris ou les animations multi-déclencheurs.
• Utilisez le champ d'étiquette d'administration: l'étiquetage de vos interactions et éléments est crucial, en particulier sur des pages complexes avec plusieurs sections. L'ajout d'un nom au champ d'étiquette d'administration dans l'onglet Contenu de chaque module vous permet de garder les choses organisées et de reconnaître facilement le bon élément cible.
• Utiliser les préréglages: le système prédéfini de Divi 5 est idéal pour gagner du temps et maintenir la cohérence entre les interactions. Les préréglages vous permettent de définir des styles réutilisables, comme une animation ou une transition de couleur, et de les appliquer à plusieurs éléments.
• Testez soigneusement: prévisualisez toujours vos interactions à l'aide de la fonction d'aperçu de Divi 5 pour assister à tous les problèmes avant la publication. Vous pouvez également utiliser les points d'arrêt réactifs personnalisables de Divi 5 pour tester comment les interactions se comportent sur tous les appareils.

Élevez votre site Web avec des interactions divi 5

Les interactions divi 5 sont la fonctionnalité parfaite pour créer des éléments interactifs engageants et sans code pour augmenter l'expérience utilisateur de votre site Web. Des fenêtres contextuelles qui capturent conduisent à des animations déclenchées par défilement qui donnent vie à vos conceptions, cette fonctionnalité permet à quiconque de créer des sites Web dynamiques et professionnels sans toucher une ligne de code. Son intégration légère et ses diverses options de déclenchement en font un outil essentiel pour la conception Web moderne.

Prêt à commencer? Téléchargez le dernier divi 5 alpha et plongez dans les interactions pour créer des fenêtres contextuelles, un contenu basculé, des effets de défilement, etc. Une note rapide: Divi 5 est prêt pour de nouveaux sites Web, mais nous ne recommandons pas encore de l'utiliser sur les sites existants.

Commentez ci-dessous ou contactez nos réseaux sociaux pour partager vos créations avec nous. Nous serions ravis de les voir!