Comment construire une fenêtre contextuelle avec les interactions de Divi 5 (téléchargement gratuit)

Les pop-ups sont un excellent outil pour attirer l'attention et conduire un engagement sur votre site Web. Que vous souhaitiez développer votre liste de diffusion, promouvoir une offre spéciale ou guider les visiteurs vers une action spécifique, un pop-up bien conçu peut faire toute la différence. Avec la publication des interactions Divi 5, la création de pop-ups Dynamic et Dynamic n'a jamais été aussi simple.

Dans cet article, nous vous guiderons à travers la création d'un pop-up en utilisant la fonction d'interactions de Divi 5. Plongeons-nous!

Que sont les interactions divi 5?

Les interactions Divi 5 sont une nouvelle fonctionnalité intégrée dans le constructeur visuel, conçu pour rendre les sites Web plus dynamiques et engageants. Il vous permet de créer des animations et des réponses personnalisées en fonction des actions utilisateur ou des événements de page, tels que des clics, des planches ou du défilement. Contrairement aux conceptions statiques, les interactions vous permettent de créer des fenêtres contextuelles, des bascules, des mouvements de souris et des effets de défilement, le tout avec l'interface familière de Divi.

Abonnez-vous à notre chaîne YouTube

Composants clés des interactions divi

Chaque interaction dans Divi 5 se compose de trois composantes centrales:

• Trigger: L'événement qui initie l'interaction, comme un clic, une survol ou un élément entrant ou sortant de la fenêtre.
• Effet: l'action qui se produit lorsque le déclencheur est activé, tel que la visibilité de la visibilité, l'application d'un style prédéfini ou la modification d'un attribut.
• Cible: l'élément spécifique affecté par l'interaction, qui peut être le même élément, une autre section, ligne, colonne ou module sur la page identifiée par son étiquette d'administration.

Ces composants fonctionnent ensemble, vous permettant de créer des interactions complexes avec une interface simple et sans code.

Pourquoi vous devriez utiliser des interactions pour créer des pop-ups

Les interactions divi 5 offrent plusieurs avantages pour la construction de pop-ups:

• Vous n'avez pas besoin de plugins: contrairement aux constructeurs pop-up traditionnels, les interactions divi 5 sont construites directement dans le constructeur visuel, éliminant le besoin de plugins tiers.
• Situé dans le constructeur visuel: vous pouvez construire des fenêtres contextuelles en utilisant l'interface, les modules et les options de style de Divi, ce qui facilite les utilisateurs de tout niveau de compétence.
• Options et effets polyvalents: combinez des fenêtres contextuelles avec d'autres interactions, comme des animations basées sur un défilement ou des effets de mouvement de souris, pour créer des expériences uniques et engageantes.
• Contrôle complet: personnalisez les déclencheurs, les effets et les cibles pour créer des fenêtres contextuelles pour vos objectifs spécifiques, le tout sans écrire de code.

Guide étape par étape pour construire un pop-up dans Divi 5

La création d'un pop-up dans Divi 5 est simple, ce qui facilite la conception existante de votre site. Dans cette section, nous montrerons à quel point il est facile de créer une fenêtre contextuelle pour correspondre à l'une de nos dispositions pré-faites, vous montrer comment le coiffer et définir les interactions pour afficher la fenêtre contextuelle avec un retard chronométré.

1. Installez un pack de mise en page

Pour ce tutoriel, nous simplifierons les choses en commençant par l'un de nos conceptions de pack de mise en page, puis en construisant un pop-up avec les mêmes styles. Pour ce faire, cliquez sur l'icône + dans le coin supérieur gauche du constructeur visuel.

Lorsque la boîte de dialogue apparaît, choisissez PREMADE LAREAT dans les options disponibles.

Cliquez sur la vignette du pack d'apprentissage en ligne pour mettre en surbrillance les pages disponibles.

Sélectionnez la conception de la page de destination et cliquez sur Utiliser cette mise en page pour la charger dans le constructeur visuel.

La dernière étape de l'importation du pack de mise en page consiste à choisir d'importer des préréglages. Après avoir fait un choix, cliquez sur le bouton Importer.

2. Créez une section pour le pop-up

Maintenant que le pack de mise en page est importé, nous devons créer une nouvelle section pour notre fenêtre contextuelle en bas de la page. Faites défiler jusqu'à la fin de la page et ajoutez une nouvelle section.

Cliquez sur l'icône pour insérer une nouvelle ligne. Choisissez la deuxième option sous des colonnes de décalage .

3. Concevoir le pop-up

Maintenant, nous pouvons commencer à ajouter du contenu à notre pop-up. Lorsque le module d'insertion ou la boîte de dialogue Row apparaît, cliquez pour ajouter un module d'en-tête .

Entrez "Vous voulez 15% de réduction?" dans le champ de cap sous l'onglet Contenu.

Pour garder les conceptions cohérentes sur la page, vous pouvez utiliser la fonction d'attributs de Divi 5 pour copier les paramètres d'un autre module de titre pour notre fenêtre contextuelle. Dans la section directement ci-dessus, survolez le module d'en-tête, cliquez avec le bouton droit et cliquez sur les attributs de copie .

Ensuite, survolez le module d'en-tête que nous venons de créer, cliquez avec le bouton droit, sélectionnez les attributs de collage , puis cliquez sur les attributs de conception de texte coller . Cela collera les styles de l'autre module de cap, permettant la cohérence de conception.

Sous le module d'en-tête, ajoutez un nouveau module de texte .

Comme avec le module de titre, localisez le module de texte dans la section ci-dessus, cliquez avec le bouton droit et sélectionnez Copier Attributs . À partir de là, cliquez sur le nouveau module de texte, appuyez sur les attributs de collage , puis collez des attributs de conception de texte .

Vous pouvez soit ajouter votre texte dans le champ de texte ou utiliser Divi AI pour le générer pour vous.

Ensuite, nous allons ajouter un module d'opt-in par e-mail sous le module texte.

La section ci-dessus dispose d'un module d'opt-in par e-mail, vous pouvez donc copier ses attributs et les coller dans le nouvel e-mail opt-in que nous avons ajouté à notre pop-up.

La dernière étape consiste à ajouter une image à la bonne colonne de notre fenêtre contextuelle. Localisez le module d'image et ajoutez-le à la 2ème colonne de notre disposition.

Téléchargez une image et ajoutez-la au module d'image. À ce stade, votre section devrait ressembler à ceci:

4. Créez un bouton Fermer

Maintenant que la conception de notre fenêtre contextuelle est en place, nous devons ajouter une nouvelle ligne au-dessus pour ajouter une icône de bouton fermée. Cela permettra à vos visiteurs de fermer le pop-up à leur convenance. Cliquez sur l' icône Green + pour ajouter une nouvelle ligne.

Lorsque la boîte de dialogue INSERT ROW apparaît, cliquez sur la disposition de colonne unique sous des colonnes égales pour l'ajouter à la section.

Cliquez pour ajouter un module d'icône à la ligne.

Sélectionnez l' icône Fermer dans les options disponibles. Il peut être facilement localisé en tapant «Fermer» dans la zone de recherche au-dessus de la liste des icônes.

Passez à l' onglet Conception et entrez les paramètres de conception suivants:

• Couleur de l'icône: # 5344b9
• Taille de l'icône: 36px
• Alignement: à droite

La dernière étape consiste à déplacer la ligne au-dessus de la ligne à deux colonnes contenant le contenu de notre fenêtre contextuelle. Utilisez la vue des calques pour réorganiser les lignes dans l'ordre correct. Pendant votre séjour, renommez la section à pop-up .

5. Ajustez les paramètres de la section

Avant de créer nos interactions, nous devons nous assurer que le pop-up est dimensionné de manière appropriée pour la largeur du navigateur. Nous ne voulons pas que ce soit une fenêtre contextuelle pleine largeur, alors accédez à la conception pour effectuer des ajustements. Développez le menu déroulant de dimensionnement pour révéler les paramètres.

Dans le champ de largeur , entrez 80% pour la largeur. Ensuite, définissez l'option d'alignement de la section au centre .

Sous la frontière , réglez un rayon de bordure de 10px.

Nous ajouterons également une ombre de boîte afin que notre pop-up se démarque sur le reste du contenu. Localisez le menu déroulant de l'ombre de la boîte et développez-le. Sous l'ombre de la boîte , choisissez le préréglage 1 .

Enfin, dirigez-vous vers l' onglet Contenu pour ajouter une couleur pour l'arrière-plan de notre section pop-up.

6. Créez l'interaction pour afficher la fenêtre contextuelle

Avec la conception en place, nous pouvons définir nos interactions. Nous allons définir notre section pop-up pour afficher 5 secondes après qu'un utilisateur a atterri sur la page. Accédez à l' onglet avancé de la section et localisez le menu déroulant Interactions . Cliquez sur + Ajouter une interaction pour démarrer.

Choisissez le chargement parmi les options disponibles. Ce paramètre permettra à la fenêtre contextuelle d'apparaître sur le chargement de la page.

Lorsque la boîte de dialogue Modifier l'interaction apparaît, entrez les paramètres suivants et cliquez sur Enregistrer :

• Étiquette d'administration: interaction pop-up
• Événement de déclenchement: chargement
• Action d'effet: élément montrer
• Module cible: section (pop-up)
• Délai: 5 secondes

Ensuite, nous devons ajouter une interaction pour notre bouton de fermeture. Sélectionnez le module d'icône dans la première ligne de notre section pop-up. Accédez à l'onglet avancé, cliquez sur + ajouter une interaction , et entrez les paramètres suivants et enregistrez:

• Étiquette d'administration: fente pop-up
• Événement de déclenchement: cliquez
• Action d'effet: basculer la visibilité
• Module cible: section (pop-up)
• Délai: 0

7. Testez et affinez votre pop-up avec les points d'arrêt réactifs personnalisables de Divi 5

Avant de passer à la dernière étape, c'est une bonne idée d'utiliser les points d'arrêt réactifs personnalisables de Divi 5 pour vous assurer que votre fenêtre contextuelle est bonne sur toutes les tailles d'écran. Dans Divi 5, il y a maintenant 7 points d'arrêt à choisir.

Par défaut, seuls trois sont activés. Avoir 7 vous permet de tester votre fenêtre contextuelle sur plus de points d'arrêt, garantissant une expérience utilisateur transparente avec n'importe quelle taille d'écran. Pour autoriser les 7, cliquez sur le menu Ellipsis en haut au milieu de la barre d'administration. À partir de là, activez tous les points d'arrêt en les basculant.

Le nouveau système de mise en page Flexbox de Divi 5 vous permet de modifier facilement pour vous assurer que votre fenêtre contextuelle a fière allure sur n'importe quel appareil. Par exemple, vous pouvez utiliser le champ de structure de colonne de modification de Divi 5 pour modifier le nombre de colonnes affichées sur des appareils plus petits. Cette option empilera le contenu sur mobile en un seul clic.

8. Définir les options d'affichage

Pour que votre fenêtre contextuelle s'affiche correctement, nous devons ajuster la visibilité, le positionnement de la section pop-up et l'index z. Cela permettra à votre fenêtre contextuelle d'afficher où vous voulez, de le garder caché jusqu'à ce qu'il soit temps d'afficher et de s'assurer qu'il apparaît au-dessus du reste du contenu de la page.

Accédez à l'onglet Avancé pour la section pop-up. Localisez le menu déroulant de visibilité . Cliquez pour désactiver la section sur toutes les vues (téléphone, tablette et bureau).

Ensuite, cliquez sur le menu déroulant de position. Réglez la position pour fixer et choisissez une origine de décalage. Enfin, ajoutez un indice Z de 99999 pour garantir que la fenêtre contextuelle s'affiche au-dessus du reste du contenu de la page.

Une fois tous les paramètres en place, enregistrez la page et prévisualisez-la dans un autre onglet. La fenêtre contextuelle doit s'afficher en 5 secondes après le chargement de la page. Vous devriez également être en mesure de fermer la fenêtre contextuelle en utilisant l'interaction étroite que nous avons créée.

Options de personnalisation pop-up avancées

Les interactions divi 5 vous permettent de faire passer votre pop-up au niveau suivant avec des fonctionnalités avancées comme les conditions d'affichage, la combinaison des effets ou même l'utilisation de Divi AI pour générer des fenêtres contextuelles. Examinons certaines façons de rendre vos pop-ups plus avancés sans avoir besoin de CSS ou d'extraits JavaScript personnalisés.

Conditions d'affichage

Vous pouvez utiliser les options de condition de Divi pour afficher la fenêtre contextuelle en fonction du comportement des utilisateurs, comme les rôles utilisateur. Par exemple, vous ne pouvez afficher la fenêtre contextuelle que pour les utilisateurs enregistrés pour encourager les inscriptions.

Vous pouvez également permettre aux conditions d'afficher la fenêtre contextuelle en fonction des visites de page. Par exemple, vous devez désactiver la fenêtre contextuelle si un utilisateur spécifique a déjà visité la page. Vous pouvez également le définir pour afficher uniquement si un utilisateur n'a pas visité la page. Cela peut être utile pour les visiteurs qui trouvent votre site via une autre page et cliquez sur la page d'accueil.

Combiner les effets

Vous pouvez améliorer votre pop-up avec des animations basées sur Scroll ou des effets de mouvement de souris. Ceux-ci peuvent être ajoutés en tant qu'interactions supplémentaires en sélectionnant des déclencheurs et des effets supplémentaires. Les interactions peuvent être combinées et il n'y a pas de limite au nombre que vous pouvez créer. Par exemple, vous pouvez facilement appliquer une interaction sur l'image dans notre fenêtre contextuelle en utilisant des effets de mouvement de souris.

Intégration Divi Ai

Accélérez le processus de conception en utilisant Divi AI pour générer une disposition. Vous pouvez instruire Divi AI pour créer des sections spécifiques, y compris une que vous pouvez convertir en pop-up. Dans l'exemple ci-dessous, nous avons demandé à Divi Ai de créer une disposition pour un coach d'entreprise, avec une section CTA que nous pouvons transformer en pop-up.

Meilleures pratiques pour les pop-ups efficaces

Pour vous assurer que votre pop-up améliore l'expérience utilisateur et stimule les résultats, considérez ces meilleures pratiques:

1. Gardez-le convivial

Évitez les pop-ups intrusifs en utilisant des retards chronométrés, entre 5 et 10 secondes, au lieu de déclencheurs immédiats. Cela donne aux utilisateurs le temps de vous engager avec votre contenu avant d'être invité. Le lancement d'un pop-up trop tôt peut être distrayant, ce qui fait que les utilisateurs ferment la fenêtre contextuelle et manquaient potentiellement une promotion, une inscription à la newsletter ou une autre action importante que vous voulez qu'elles entreprennent.

Réglez un retard chronométré sur votre fenêtre contextuelle pour éviter de perdre l'engagement des utilisateurs.

De plus, incluez toujours un bouton de fermeture clair et facilement identifiable afin que les utilisateurs puissent rejeter la fenêtre contextuelle et maintenir une expérience de navigation positive.

2. Optimiser les performances

L'optimisation des performances est essentielle pour les pop-ups efficaces. Pour garder les temps de chargement rapidement, minimisez les animations lourdes ou les grandes images non optimisées. Optez pour des images compressées et limitez les effets complexes pour assurer une expérience accrocheuse et transparente, en particulier pour les utilisateurs sur des connexions ou des appareils mobiles plus lents. Cette approche améliore la satisfaction des utilisateurs et prend en charge un meilleur engagement et des taux de conversion.

3. Concevoir des pop-ups avec des normes d'accessibilité à l'esprit

L'accessibilité est une autre considération clé pour rendre votre pop-up inclusive pour tous les utilisateurs. Ajoutez toujours du texte ALT descriptif aux images pour aider les lecteurs d'écran, assurez-vous un contraste élevé entre le texte et l'arrière-plan pour la lisibilité et utiliser des tailles de police de 16px ou plus pour accueillir les utilisateurs ayant des déficiences visuelles.

Ces pratiques aident à garantir que votre pop-up est accessible à un public diversifié, s'alignant sur les normes d'accessibilité Web.

4. Tester sur toutes les tailles d'écran

Enfin, testez soigneusement votre fenêtre contextuelle sur toutes les tailles d'écran pour assurer une expérience cohérente sur tous les appareils. Tirez parti des points d'arrêt réactifs personnalisables de Divi 5 pour vous assurer que votre fenêtre contextuelle est superbe et fonctionne comme prévu sur les ordinateurs de bureau, les tablettes et les smartphones.

Portez une attention particulière au bouton Close pour vous assurer qu'il fonctionne comme il se doit et ce texte est lisible sur les écrans plus petits. De plus, vérifiez l'espacement, le dimensionnement et la mise en page au besoin pour fournir un look professionnel poli.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons une copie du pack de mise en page Ultimate Divi Laying, plus d'autres ressources, astuces et astuces DiviM et gratuits. Suivez et vous serez un maître divi en un rien de temps. Si vous êtes déjà abonné, tapez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes abonné avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder à des packs de mise en page de Divi Gratuit!

Créer des pop-ups avec des interactions divi 5

La fonction d'interactions de Divi 5 facilite la création d'une fenêtre contextuelle en vous permettant de créer des conceptions personnalisées et engageantes directement dans le constructeur visuel. La combinaison de déclencheurs, d'effets et de cibles vous permet de construire des fenêtres contextuelles qui capturent l'attention et conduisent les conversions tout en correspondant de manière transparente à la conception de votre site. Explorez d'autres fonctionnalités telles que les groupes de modules et les lignes imbriquées pour créer des dispositions contextuelles encore plus dynamiques.

Êtes-vous prêt à essayer Divi 5? Téléchargez le dernier divi 5 public alpha, expérimentez les interactions et partagez vos réflexions dans la section des commentaires ci-dessous. Veuillez partager vos créations avec nous sur nos réseaux sociaux et visiter notre blog pour plus de tutoriels en utilisant les fonctionnalités innovantes de Divi 5. Nous sommes impatients de voir ce que vous créez!