Comment ajouter facilement une fenêtre contextuelle modale sur un site Web WordPress : tutoriel en 3 étapes

Saviez-vous qu'une étude récente sur 2 milliards de popups modaux avaient un Taux de conversion de 9,28% parmi les 10% les plus performants ?(1)

Oui. Les fenêtres contextuelles rendent les visites de sites Web conviviales et vous aident à obtenir rapidement davantage d'inscriptions à la newsletter. Les popups ont radicalement changé dans leur apparence et leur fonctionnement. En conséquence, ils deviennent plus populaires que jamais sur les sites Web modernes.

Souhaitez-vous également ajouter des modaux WP à votre site Web et profiter des avantages qu'il offre ?

Alors ce blog est exactement ce dont vous avez besoin. C'est le seul guide dont vous aurez besoin pour en savoir plus sur les modaux contextuels et comment les ajouter facilement à votre site WordPress. 

Source: (1) Statistiques sur les fenêtres pop-up : résultats de l'analyse de 2 milliards d'exemples de fenêtres pop-up

Qu'est-ce qu'une fenêtre contextuelle modale ?

Les popups modaux sont très courants et il est très peu probable que vous n'en ayez pas rencontré. Mais connaissez-vous les définitions du popup modal ? Regardons.

Un modal (également appelé fenêtre modale ou lightbox) est un élément de page Web qui s'affiche devant et désactive tout autre contenu de page. Pour revenir au contenu principal, l'utilisateur doit interagir avec le modal en effectuant une action ou en le fermant.

– Hubspot

Les fenêtres modales sont différentes des boîtes de dialogue des anciens modèles. Dans les fenêtres contextuelles non modales, les utilisateurs ont accès à l'intégralité de la fenêtre même lorsque la fenêtre contextuelle est activée. Ainsi, ils peuvent ignorer la fenêtre contextuelle et continuer à faire leur travail.

D'autre part, le nouveau popup modal crée un nouveau « mode » sous la forme d'une fenêtre enfant et désactive la fenêtre parent. En conséquence, l'utilisateur ne peut pas travailler sur la fenêtre d'origine tant qu'il n'a pas effectué une action ou fermé la fenêtre contextuelle modale. 

Quel est l'avantage ? L'avantage est que vous retenez l'attention des visiteurs de votre site Web, même si ce n'est que pour une seconde ou deux. Et attirer l’attention de l’utilisateur sur votre message est ce dont vous avez besoin, n’est-ce pas ? 

Car s’ils voient ce que vous avez à proposer, ils resteront plus d’une seconde, ce qui vous assurera une avance.

Pourquoi utiliser Popup Modal dans votre site Web WordPress

La plupart des gens pensent que les popups sont ennuyeux. Bien sûr, je ne leur en veux pas. Vous allez sur un site pour faire votre travail et du coup un popup apparaît et s'interrompt, c'est sûrement énervant. 

Mais en tant que propriétaire d'entreprise, vous devez considérer une fenêtre contextuelle différemment. Parce que croyez-le ou non, ces popups ennuyeux fonctionnent à merveille. Les modaux popup se sont avérés extrêmement efficaces, en particulier dans la collection de leads.

D'après Sumo, ils ont collecté environ 23 645 948 adresses e-mail en moins de deux ans à l’aide d’un modal contextuel. Dans de nombreux cas, le taux de conversion a atteint 50,2% ! 

Donc, si vous cherchez à améliorer votre liste de diffusion et à accélérer votre taux de conversion, la pop modale est votre truc car ce sont des aimants à prospects éprouvés.

De plus, les modaux sont simples et flexibles et vous n'avez pas besoin d'envoyer les utilisateurs vers une autre page pour effectuer une action. Plus de prospects avec une meilleure expérience utilisateur. Alors, ne pensez jamais que les modaux sont inutiles ou morts et commencez à les utiliser dès aujourd'hui.

Utilisations courantes d'une fenêtre modale dans la conception Web moderne

Les modaux sont très efficaces chaque fois que vous avez besoin que les visiteurs d'un site Web prennent des mesures ou remarquent un message important. Certaines des utilisations courantes d'une fenêtre modale dans la conception Web incluent :

• Afficher le message de bienvenue
• Collectez des e-mails et dirigez-vous vers l'abonnement à la newsletter
• Formulaire de connexion
• Afficher un message d'avertissement avant d'agir
• Afficher la politique de cookies
• Afficher des médias comme une galerie d'images (produit) ou une vidéo, etc.  
• Pour les formulaires en plusieurs étapes pour une meilleure expérience utilisateur.

Je n'ai répertorié que quelques-unes des nombreuses façons d'utiliser le modal dans la conception Web. Une fois que vous saurez comment créer des popups personnalisés dans WordPress, vous découvrirez différentes façons de les utiliser sur votre site Web pour des résultats optimaux. 

Alors, commençons.

Configuration dont vous avez besoin pour commencer

Je suppose que WordPress est installé sur votre site Web. En plus de cela, vous aurez besoin d'un constructeur de pages et d'un plugin popup WordPress pour rendre modal dans votre site Web :

1. Élémentor (version gratuite)
2. ElementsKit (version gratuite et pro)

Elementor est un constructeur de pages gratuit et ElementsKit est l'un des meilleurs plugins contextuels modaux WordPress.

L'installation est terminée ? vous êtes maintenant prêt à créer une fenêtre contextuelle personnalisée WordPress en un clic dans WordPress ! Commençons maintenant le processus principal.

Comment ajouter une fenêtre contextuelle modale dans WordPress en 3 étapes dans Elementor à l'aide d'ElementsKit

Si vous pensez qu’il est difficile d’ajouter une popup à votre site WordPress, prêt à être surpris. Suivez les étapes ci-dessous et créez facilement une fenêtre contextuelle modale Elementor dans wp. Il s'agit du didacticiel le plus simple sur la façon d'ajouter une fenêtre contextuelle dans WordPress.

Étape 1 : Activer le widget contextuel modal

Une fois que vous avez installé les plugins ElementsKit, vous pouvez activer le Widget de fenêtre contextuelle modale Elementor depuis le tableau de bord WordPress

• Aller à  ElementsKit  > Widgets > Allumer Mode contextuellel > Cliquez Sauvegarder les modifications

Étape 2 : ajouter un widget de fenêtre contextuelle modale WP 

• Recherchez un modal contextuel, glisser déposer le widget sur la section dans laquelle vous souhaitez que votre modal apparaisse.

Étape 3 : configurer les paramètres pour terminer

Cliquez sur l'icône Modifier dans la section contextuelle pour accéder aux options de modification.

• Pour modifier le texte du bouton, allez sur Contenu > Bouton à bascule > Étiquette et modifier

• Pour changer le titre et Sous-titre aller à Contenu > Entête et modifiez les options avec votre texte personnalisé.

• Pour changer le contenu du corps, développez la section de contenu et modifier le texte pour créer un message contextuel WordPress.

• Aller à Contenu > Pied de page > Bouton > CTA et modifiez l'étiquette CTA et l'URL avec ElementsKit, un générateur de popups personnalisé.

• Enfin, cliquez sur Mise à jour sauver.

C'est fait. Cliquez maintenant sur le bouton d'aperçu pour voir les résultats et vérifier à quoi ressemble votre fenêtre contextuelle WordPress :

Bien joué! Vous avez créé votre popup modale Elementor.

Paramètres supplémentaires pour le modal

Voyons maintenant les paramètres modaux supplémentaires que vous pouvez personnaliser :

Mise en page:

Développez l'option de mise en page pour modifier le type de bascule, la position de la fenêtre contextuelle et l'option d'affichage de la fenêtre contextuelle.

Type de bascule :

Vous n'avez pas nécessairement besoin d'un modal qui se déclenche lorsque quelqu'un clique sur un bouton. ElementsKit vous propose 2 options supplémentaires parmi lesquelles choisir en plus du bouton

Image: Vous pouvez choisir n'importe quelle image personnalisée de n'importe quelle taille au lieu d'un bouton comme bascule pour votre modal. Pour choisir une image personnalisée 

• Allez dans Contenu > Type de bascule > Choisir une image
• Accédez à Toggler Image > Choisissez un image, la taille de l'image et l'alignement

Temps: Vous pouvez également configurer le modal pour qu'il se déclenche après une heure spécifique sans aucune action de la part de l'utilisateur. Par exemple pour définir votre modal pour qu'il apparaisse après 3 secondes

• Allez dans Contenu > Type de bascule > Heure
• Ajouter du temps Basculer après (en secondes)

Type d'affichage contextuel :

Vous disposez de deux options pour le type d'affichage contextuel : Modal et Slide.

Position de la fenêtre contextuelle : 

Vous pouvez choisir de placer votre popup n'importe où dans la fenêtre. Les options de poste disponibles parmi lesquelles choisir sont :

• En haut à gauche
• Centre supérieur
• En haut à droite
• Centre gauche
• Centre
• Centre droit
• En bas à gauche
• En bas au centre
• En bas à droite

Surgir: 

Développez l'option contextuelle pour choisir le largeur et hauteur minimale. Ici, vous avez également la possibilité de afficher ou masquer le fermer l'icône, l'en-tête et le pied de page. Vous pouvez aussi ajuster la position horizontale et verticale et ajouter animation selon votre souhait.

Recouvrir: 

Si vous ne souhaitez pas forcer l'utilisateur à cliquer sur votre modal pour le fermer, activez le Fermer la superposition Popup OnClick option. De cette façon, l'utilisateur peut cliquer n'importe où sur la fenêtre pour fermer le modal.

Icône Fermer : 

Ici, vous pouvez modifier la position de l'icône de fermeture. Vous pouvez définir une fenêtre contextuelle en haut à droite, une fenêtre contextuelle en haut à gauche, une fenêtre en haut à droite et une fenêtre en haut à gauche. Vous pouvez également modifier les positions verticales et horizontales. De plus, vous pouvez choisir n'importe quelle icône de la bibliothèque ou utiliser une image SVG comme icône.

Entête:

En plus de modifier le titre et le sous-titre, vous pouvez également afficher ou masquer le séparateur à partir d'ici.

Bas de page:

Développez l'option de pied de page pour modifier l'étiquette, la variante et l'alignement des boutons de pied de page. Vous pouvez également choisir de les masquer si vous le souhaitez à partir d'ici. 

Et voilà ! Vous pouvez désormais utiliser des pop-ups modernes et attrayants sur votre site Web.

Pour plus de détails, lisez la documentation de Widget modal contextuel ElementsKit pour Elementor.

Comment ajouter une conception personnalisée dans Elementor Modal avec le générateur de popups ElementsKit

Vous savez désormais comment modifier le texte, la position, l'animation et bien plus encore pour personnaliser votre fenêtre modale dans WordPress. Mais cela semble toujours un peu ennuyeux, n'est-ce pas ? Tout comme n'importe quelle autre fenêtre modale contextuelle WordPress Elementor.

Si vous pouviez ajouter une image personnalisée, une vidéo ou tout autre widget dans votre fenêtre modale, tout comme une page, ce serait tellement génial. Vous pouvez ajouter n'importe quelle conception personnalisée à votre modèle avec ElementsKit.

Suivez les étapes pour créer facilement le design personnalisé souhaité sur modal :

• Accédez à Contenu > Contenu > Allumer Activer le modèle
• Cliquez sur le bouton modal et une fois le modal ouvert, cliquez sur le option de modification pour ouvrir le zone de widgets

• Une fois la zone des widgets ouverte, vous pouvez recherche pour n'importe quel widget > glisser déposer > mise à jour à sauvegarder.

Par exemple, si vous souhaitez ajouter une vidéo, recherchez la vidéo dans la zone des widgets et faites-la glisser pour l'ajouter à votre modèle et mettre à jour. Maintenant, la vidéo devrait apparaître dans la fenêtre modale.

Utilisez les sections ElementsKit prédéfinies pour un beau modal

Vous n'avez pas le temps de créer une fenêtre modale contextuelle à partir de zéro ? Pas de soucis. Le générateur de fenêtres contextuelles ElementsKit fournit de nombreuses sections intégrées que vous pouvez choisir pour créer des fenêtres modales attrayantes afin de mettre en valeur votre message auprès du spectateur.

Pour utiliser les widgets intégrés d'ElementsKit, suivez les étapes ci-dessous :

• Clique sur le option de modification sur le modal  pour ouvrir le zone de widgets
• Cliquez sur le bouton EK pour ouvrir une autre fenêtre de widget avec les sections prédéfinies.

• Allez dans > Rubriques > Choisir la rubrique que vous aimez > Insérer

• Après l'insertion, vous pouvez changement la couleur de l'image, du texte ou de l'arrière-plan selon vos préférences et mise à jour.

Et voici le résultat final !

ElementsKit propose plus de 60 widgets et plus de 500 sections prêtes. En savoir plus sur ElementsKit et comment les utiliser pour améliorer votre site Web.

Ajouter le formulaire de contact 7 en modal avec ElementsKit

Comme je l'ai déjà dit, les modaux sont efficaces pour obtenir davantage d'abonnements à la newsletter et collecter des données utilisateur. Mais pour cela, vous devez ajouter un formulaire de contact dans votre modal, non ? 

Pas de panique, vous n'aurez pas besoin d'un autre plugin popup WordPress pour ajouter un formulaire de contact dans votre fenêtre pop. Le plugin ElementsKit WordPress est un plugin de création de popups tout-en-un.

Suivez les instructions ci-dessous pour ajouter le formulaire de contact 7 populaire dans votre modal avec le plugin de création de popups ElementsKit.

Avant de suivre ces étapes, assurez-vous d'avoir créé un formulaire de contact sur votre site Web en utilisant le formulaire de contact 7, Elementor Page Builder et ElementsKit.

Vous pouvez également consulter le didacticiel vidéo ci-dessous pour créer un formulaire de contact.

Commençons.

• Aller à Contenu > Contenu > Allumer Activer le modèle
• Clique sur le option de modification pour ouvrir le zone de widgets
• Recherche Formulaire de contact, glisser déposer sur la section où vous souhaitez l'ajouter.
• Développer l'option de style sous le formulaire de contact 7
• Choisissez parmi les préfabriqué forme et mise à jour.

Ici, vous avez une fenêtre contextuelle modale avec un formulaire de contact pour booster votre liste de diffusion.

Saviez-vous que vous pouvez créer un widget personnalisé sans avoir de connaissances approfondies en codage ? Vérifiez comment créer un widget personnalisé facilement sans aucun code en utilisant ElementsKit.

Conseils efficaces pour ajouter une fenêtre contextuelle modale WordPress Elementor

Les fenêtres contextuelles modales WordPress peuvent améliorer considérablement l'engagement des utilisateurs, transmettre des messages importants et générer des actions spécifiques de la part de vos visiteurs. Voici les 7 conseils efficaces pour mettre en œuvre des popups modaux percutants sur votre site WordPress.

1️⃣ Choisissez un plugin fiable

Sélectionnez un plugin modal WordPress bien entretenu tel que Elementor » ou « ElementsKit » pour créer la fenêtre modale sur votre site Web.

2️⃣ Définir des objectifs clairs

Décrivez clairement le but de votre popup modal WordPress, qu'il s'agisse de collecter des e-mails, de promouvoir des offres ou de transmettre des informations importantes.

3️⃣ Le timing est la clé

Utilisez des déclencheurs tels que le délai, la profondeur de défilement ou l'intention de sortie pour afficher la fenêtre contextuelle au bon moment. Cela aidera à éviter les interruptions immédiates du chargement des pages.

4️⃣ Réactivité mobile

Assurez-vous que votre popup modale WordPress est adaptée aux mobiles pour offrir une expérience positive sur différents appareils.

5️⃣Conception pour l'expérience utilisateur

Concevez des popups modaux WordPress concis et visuellement attrayants avec un contenu de haute qualité. Incluez une option facilement accessible pour fermer la fenêtre contextuelle pour les utilisateurs non intéressés par le contenu.

6️⃣ Tests A/B pour l'optimisation

Mettez en œuvre des tests A/B pour affiner votre modal dans WordPress en créant des variantes et en identifiant les éléments les plus efficaces pour votre public.

7️⃣ Conformité aux règles de confidentialité

Assurez-vous que votre popup modale WordPress est conforme aux réglementations en matière de confidentialité, notamment en communiquant de manière transparente votre politique de confidentialité et en obtenant un consentement explicite pour la collecte de données.

FAQ

Conclure

Félicitations ! Vous savez maintenant comment créer des fenêtres contextuelles modales Elementor dans WordPress à l'aide d'un Module complémentaire ElementorCréez des fenêtres contextuelles de formulaire de contact et effectuez toutes les personnalisations sur le site WordPress sans effort à l'aide du plugin de création de fenêtres contextuelles simple, ElementsKit Pro et du générateur de pages Elementor.

Ne vous arrêtez pas là. Continuez à expérimenter les différentes façons dont vous pouvez utiliser la fenêtre contextuelle de WordPress sur votre site Web. Et si vous avez besoin d'aide pour créer des fenêtres contextuelles WordPress à l'aide d'ElementsKit, laissez un commentaire ci-dessous.