Fenêtre modale Elementor : Le guide ultime étape par étape

Une fenêtre modale sur Elementor va surgir après quelques secondes ou lorsque l’on quitte la page. C’est aussi ce qu’on appelle une fenêtre surgissante ou encore un popup. Le but : proposer au visiteur une offre irrésistible ou un contenu exclusif pour qu’il effectue une action. Ça peut être un code de réduction, une inscription à un logiciel ou encore à une newsletter, etc.

Aujourd’hui, je vais vous guider dans ce tuto pour créer votre une fenêtre modale sur-mesure avec Elementor pro pour augmenter rapidement les conversions sur votre site Internet ou capturer des leads (adresses mail).

Partie 1 : Créer une fenêtre modale Elementor

Avant de commencer, il faut que vous sachiez que l’option « Popups » n’est disponible que sur le page builder Elementor pro. Sans cette version, il n’est pas possible de créer une fenêtre modale Elementor. Ceci étant dit, nous pouvons commencer.

Accéder au tableau de bord d’Elementor

Tout d’abord, connectez-vous à votre tableau de bord WordPress pour vous assurer que le plugin Elementor Pro est bien installé et activé. Si vous ne l’avez pas encore installé, vous pouvez suivre ce tutoriel qui explique comment installer Elementor pro sur WordPress.

Accéder au constructeur de modèles

Rendez-vous ensuite sur Elementor>Modèles>Popups, puis cliquez sur Ajouter un nouveau modèle. Sélectionnez simplement « Popup » pour commencer la création de votre fenêtre modale.

Vous pouvez créer une fenêtre contextuelle pour divers objectifs : capturer des emails, promouvoir une offre ou encore afficher un message. Vous pouvez même ajouter de l’urgence en utilisant des compteurs.

Nommer et créer votre modèle

Ensuite, donnez un nom à votre fenêtre modale Elementor en fonction de son objectif. Vous pouvez par exemple la nommer « Promo Saint-Valentin ». Cliquez ensuite sur Créer un modèle.

Vous avez deux possibilités :

• Utiliser un des modèles prédéfinis existants de la bibliothèque d’Elementor.
• Commencer un pop-up à partir d’une page blanche pour une création sur mesure.

Partie 2 : Personnaliser la fenêtre modale Elementor

Si vous n’êtes pas un graphiste né, je vous invite à utiliser la bibliothèque de modèle d’Elementor.

Le choix du design

Elementor propose une bibliothèque de modèles préconçus pour répondre à vos objectifs :

• Newsletter.
• Annonces.
• Promotions.
• Mises en avant de produits.

Sélectionnez le modèle qui correspond à votre souhait. Par exemple, imaginez que vous préparez une campagne pour la Saint-Valentin. Vous pouvez choisir un modèle de fenêtre modale déjà prêt, composé d’un visuel accrocheur qui capte l’attention et d’un texte qui indique une offre de réduction de 20% à valoir sur un achat immédiat.

Personnaliser les éléments

Une fois le modèle choisi, Elementor vous permet de remplacer rapidement chaque élément par votre propre contenu. Il vous suffit de sélectionner l’élément en cliquant sur l’image, une icône, le texte ou le bouton d’appel à l’action (CTA). Les options d’édition des styles sont disponibles sur la gauche.

Ajouter des éléments supplémentaires

Votre fenêtre modale sur Elementor n’est pas obligatoirement composée que d’images et de textes. Vous pouvez aussi y ajouter une vidéo pour présenter un produit ou faire la promotion d’un évènement par exemple. Tous les widgets (éléments) s’ajoute à votre popup par Glisser-déposer. Vous pouvez en mettre autant que vous le désirez. Évitez toutefois de surcharger votre fenêtre modale.

Partie 3 : Configurer les conditions d’affichage

La plus grosse erreur que vous pouvez faire, c’est d’afficher le popup instantanément à l’affichage d’une page. C’est très intrusif et vous ne convertirez que très peu ou des personnes peu engagées. De même, le choix de l’affichage va dépendre aussi de votre objectif.

Une fois votre fenêtre modale terminée, vous pouvez cliquer sur le chevron présent à côté de « publier » en bas à gauche. Elementor propose alors des Conditions d’affichage :

Les conditions

Les conditions permettent de déterminer où votre modèle est utilisé sur votre site. Vous pouvez inclure ou exclure des endroits.

• Le site entier.
• Les archives.
• Les pages, la homepage, des articles, des médias, etc.

Des déclencheurs

Les déclencheurs déterminent quelle action doit faire le visiteur pour déclencher l’ouverture de le popup.

• Au chargement de la page.
• Lorsque l’utilisateur a défilé un certain pourcentage de la page.
• Au scroll (défilement) vers jusqu’à un élément spécifique.
• Au clic.
• Après une période d’inactivité.
• Quand on sort du contenu ou quitte la page.
• Activer ou non les système de détection AdBlock.

Des règles avancées

Pour choisir le moment du déclenchement et sur quels appareils il faut le faire apparaître.

• Après avoir consulté x pages.
• Après x sessions.
• Après un certain temps.
• Quand le visiteur provient d’une URL spécifique.
• Quand il arrive d’un moteur de recherche, d’un lien interne ou externe.
• Cacher des utilisateurs connectés.
• Choisir les appareils : mobiles, ordinateurs et tablettes.
• Choisir les navigateurs web.
• Programmer une période d’affichage. Par exemple pour une promotion.

Assurez-vous que votre pop-up s’adapte parfaitement à chaque taille d’écran. Une fenêtre mal conçue sur mobile peut frustrer vos visiteurs et les pousser à quitter votre site.

Partie 4 : tester la fenêtre modale Elementor

Prenez le temps de prévisualiser et de tester votre fenêtre modale sur tous les supports. Vérifiez si elle n’est pas trop intrusive et assurez-vous que les conditions de déclenchement sont bien configurées.

Prenez en compte l’expérience utilisateur afin de ne pas agacer vos visiteurs. Par exemple, inutile d’afficher votre popup sur la liste des archives, mais plutôt sur chaque archive (article).

Pensez aussi à vérifier que l’on peut fermer la popup et que vos formulaires fonctionnent correctement.

Et pourquoi pas essayer plusieurs méthodes d’affichage pour voir celle qui convertira le mieux par rapport à votre offre.

Partie 5 : Publier la fenêtre modale Elementor et l’optimiser pour la conversion

Une fois les tests terminés, cliquer sur « Enregistrer et fermer » pour publier votre fenêtre modale Elementor. Elle s’affichera désormais selon les paramètres que vous avez définis.

Astuces d’optimisation

Bien qu’un pop-up peut sembler embêter le visiteur, le taux de conversion est incomparable par rapport à un formulaire classique. Voici quelques astuces pour maximiser les chances de conversion de votre fenêtre modale :

• Texte court et percutant : Soyez bref. Choisissez un titre engageant qui résume votre offre.
• Visuel accrocheur : Utilisez des images ou des couleurs qui captent instantanément l’attention et respectent votre charte graphique.
• Action claire : Le bouton d’appel à l’action doit être clair et précis. Par exemple : « Obtenir ma réduction », « S’inscrire maintenant » ou encore « Tester gratuitement« . Les visiteurs doivent savoir exactement ce qu’ils obtiennent en cliquant.
• Soyez stratège : préférez les « exit popup » pour vos promotions et l’affichage différé pour les inscriptions.
• Soyez patient : une personne qui passe du temps sur votre site est une personne engagée. Aussi, affichez votre popup après un délai de 5s à 20s. En général, je mets 10s ou 15s pour avoir des personnes qui sont vraiment intéressées par mon offre.
• Faites des tests A/B : vous serez surpris qu’un titre différent puisse doubler ou tripler vos conversions. Un test A/B consiste à présenter de façon différente une même offre afin de déterminer celle qui convertit le mieux.

Conclusion sur la création d’une fenêtre modale Elementor

Je vois très peu de personnes qui prennent les inscriptions à la newsletter au sérieux. C’est vraiment un moyen simple d’augmenter considérablement vos ventes par rapport aux médias habituels comme les réseaux sociaux. La popup est le moyen le plus efficace de collecter ces adresses. N’hésitez surtout pas à saisir l’opportunité qui vous est offerte avec la création d’une fenêtre modale sur Elementor pro.