|
|
|
Elementor Popup Pro : créer une popup ciblée sans agacer

Elementor Popup Pro : créer une popup ciblée sans agacer

Tu arrives sur une page, tu n’as pas encore terminé le titre et une fenêtre recouvre déjà l’écran. Tu cherches la croix et tu fermes par réflexe et tu oublies aussitôt ce qu’elle proposait. L’offre était peut-être intéressante. La popup ne lui a simplement laissé aucune chance.

Le problème ne vient donc pas forcément de la popup. Il vient souvent de la page choisie, du moment où elle apparaît et du nombre de fois où elle revient. Avec Elementor Pro, ces trois points se règlent assez finement. Encore faut-il ne pas cocher toutes les options sous prétexte qu’elles existent.

Voyons comment créer une popup Elementor utile, bien ciblée et simple à fermer, capable d’accompagner la visite sans prendre l’écran en otage.

Table des matières
Création d’une popup ciblée avec Elementor Pro sur WordPress

Une bonne popup commence avant d’ouvrir Elementor

Elementor te laisse choisir le design, les pages concernées, le déclencheur et la fréquence d’affichage. Avant d’ouvrir ton éditeur, commence par une question beaucoup plus simple.

Quelle action précise veux-tu faciliter ?

Une popup peut proposer une checklist à la fin d’un article, ouvrir un formulaire après un clic, rappeler une offre sur une page service ou afficher une information temporaire. Dans chacun de ces cas, elle facilite une action déjà logique dans le parcours. Attention, elle peut devenir pénible lorsqu’elle interrompt la visite avec une demande sans aucun rapport avec ce que la personne est venue chercher.

Alors avant de créer quoi que ce soit, définis donc ces quatre éléments.

  • Une audience précise, par exemple les lecteurs d’une catégorie ou les visiteurs d’une page service.
  • Une proposition unique, comme télécharger un guide ou demander un diagnostic.
  • Un moment cohérent, lié à une action ou à un niveau réel d’intérêt.
  • Une sortie évidente, utilisable sur ordinateur, mobile et clavier.

Si tu hésites entre trois offres, deux formulaires et un compte à rebours, ne cherche pas encore la bonne largeur. Ta popup essaie de faire le travail d’une page entière. Même Elementor ne peut pas rendre cette conversation naturelle.

Crée la popup dans Elementor Pro

Le Popup Builder est inclus dans Elementor Pro. Si tu découvres encore le constructeur, commence par ce guide pour utiliser Elementor sous WordPress. Tu retrouveras plus facilement la logique des modèles, des widgets et des réglages responsifs.

Depuis l’administration WordPress, ouvre Elementor, Editeur, Modèles, Popups (fenêtre modale), puis ajoute un nouveau modèle. Donne-lui un nom qui explique son rôle, comme « Checklist SEO fin article ». Un nom comme « Popup finale 4 vraiment finale » paraît très clair sur le moment, beaucoup moins trois mois plus tard.

Tu peux partir d’un modèle de la bibliothèque ou fermer cette fenêtre pour construire ton propre design. Dans les deux cas, garde une structure courte.

  1. Un titre qui annonce la valeur de la proposition.
  2. Une phrase qui précise ce que la personne va obtenir.
  3. Un bouton ou un formulaire avec peu de champs.
  4. Une fermeture immédiatement repérable.

Les réglages des popups Elementor permettent d’ajuster la largeur, la hauteur, la position, le fond, la superposition et les animations.

Conseil : Une fenêtre centrée convient bien à une inscription ou à une demande courte. Pour un rappel secondaire, un encart en bas de l’écran ou sur le côté laisse davantage de place au contenu.

Régle la largeur sans bloquer toute la page

Une popup n’a pas besoin d’occuper tout l’écran pour exister. Commence par une largeur contenue et vérifie le résultat avec le vrai texte.

Le fond assombri concentre l’attention, mais il renforce aussi la sensation d’interruption. Garde-le pour une action importante. Si ta proposition est secondaire, un fly-in sans superposition sera souvent plus discret. Le format doit refléter l’importance de la proposition, pas le nombre d’animations que tu as découvertes dans le menu.

Place la croix de fermeture là où le visiteur s’attend à la trouver, avec une taille et un contraste suffisants. Évite également les animations longues. La popup peut apparaître proprement sans faire son entrée comme si elle montait les marches à Cannes.

Prévoie la version mobile dès maintenant

Passe en affichage mobile pendant la création, pas une fois que tout est terminé. Ajuste la largeur, les marges et le titre, puis vérifie surtout que le bouton principal et la fermeture restent visibles. Le visiteur ne devrait pas avoir à faire défiler la popup pour trouver comment la fermer.

Un formulaire qui tient confortablement sur ordinateur peut devenir un mur sur smartphone. Limite les champs au strict nécessaire, par exemple pour une newsletter, l’adresse email suffit souvent, pour une prise de contact, demande uniquement les informations utiles au premier échange.

Si le contenu ne tient pas sur mobile, simplifie-le avant de réduire la police. Une popup mobile n’est pas la version ordinateur passée au photocopieur avec une réduction de 60 %.

Cible la bonne page avec les conditions

Quand tu cliques sur Publier, Elementor ne met pas immédiatement la popup en circulation. Il ouvre d’abord les réglages de diffusion. Ces conditions répondent à une question simple.

Où la popup peut-elle apparaître ?

Tu peux l’inclure sur tout le site, sur une page précise, dans les articles ou dans une catégorie. Tu peux aussi ajouter des exclusions. Une offre générique pourra apparaître sur plusieurs contenus sans revenir sur la page de contact, la page de confirmation ou une zone qui propose déjà la même action.

Évite de choisir « site entier » par réflexe. Fais correspondre ta proposition au contenu consulté.

  • Une checklist SEO apparaît dans les articles SEO.
  • Une prise de rendez-vous apparaît sur une page service après un signe d’intérêt.
  • Une remise WooCommerce apparaît dans la boutique, pas dans les mentions légales.
  • Un formulaire ouvert par un bouton peut rester disponible sur plusieurs pages sans se déclencher seul.

Ce ciblage réduit mécaniquement le nombre d’affichages mais cela n’est pas une perte pour autant. Une popup n’a pas besoin d’être vue par tout le monde, seulement par les bonnes personnes.

Choisi le bon déclencheur

Viennent ensuite les déclencheurs. Ils décident du moment où la fenêtre s’ouvre.

Quand la popup doit-elle s’ouvrir ?

Elementor propose une ouverture après un délai, un défilement, l’arrivée sur un élément, plusieurs clics, une période d’inactivité ou une intention de sortie sur ordinateur. Le bon choix dépend moins de la fonction disponible que du niveau d’intérêt déjà montré par le visiteur.

Le meilleur choix va dépendre de l’action attendue.

Le clic reste le déclencheur le moins intrusif

Une popup ouverte après un clic sur « Recevoir la checklist » respecte une intention explicite. Le visiteur sait pourquoi elle apparaît et il a déjà commencé l’action. C’est souvent la solution la plus propre pour afficher un formulaire sans alourdir la page.

Dans Elementor, relie le bouton à l’action dynamique d’ouverture de la popup. Lorsqu’elle est déclenchée manuellement, les déclencheurs automatiques et les règles avancées ne pilotent plus cette ouverture. Le clic suffit déjà à prouver l’intérêt, alors inutile de lui ajouter trois couches de conditions pour le plaisir du réglage.

Le défilement montre un intérêt réel

Dans un article, une ouverture après 60 à 80 % de défilement paraît souvent plus naturelle qu’une fenêtre modale qui apparaît immédiatement. La personne a déjà consacré du temps au sujet. Tu peux lui proposer une ressource qui prolonge précisément ce qu’elle vient de lire.

Elementor permet aussi de déclencher la popup lorsqu’un élément précis entre dans la zone de lecture. Tu peux placer ce repère près de la conclusion ou après une section clé. Cette méthode s’adapte mieux qu’un pourcentage fixe aux pages dont la longueur varie beaucoup.

Le délai doit laisser le temps de comprendre la page

L’ouverture au chargement ne doit pas obliger à faire surgir la popup dès la première seconde. Il est préférable d’ajouter un délai suffisant pour que le visiteur identifie la page, commence sa lecture et comprenne où il se trouve.

Il n’existe pas de délai magique ! Sur une page courte, quelques secondes peuvent suffire. Dans un article, le défilement reste souvent plus pertinent. Fais un test, parcours une page comme un visiteur. Si la popup te coupe au milieu de la première phrase, elle ne fera pas le travail que tu lui demandes.

L’intention de sortie reste un filet, pas une stratégie entière

Sur ordinateur, Elementor peut détecter un mouvement de souris vers la sortie de la page. Ce déclencheur convient à un rappel ponctuel, mais il fonctionne moins bien sur mobile.

Une offre de sortie doit rester courte, liée à la page et simple à fermer. N’ajoute pas une seconde fenêtre pour demander si la personne est vraiment certaine de refuser. Elle a compris. Elle souhaite simplement repartir avec sa dignité et son pointeur de souris.

Limite la répétition avec les règles avancées

Les réglages avancés répondent à la dernière question essentielle.

Dans quel contexte et combien de fois la popup peut-elle revenir ?

Elementor peut attendre que plusieurs pages soient vues ou plusieurs sessions, limiter le nombre d’ouvertures, filtrer selon le type appareil et tenir compte de la provenance du visiteur. Tu peux aussi empêcher plusieurs popups de se croiser sur le même écran, ce qui évite de transformer la page en réunion sans ordre du jour.

Pour une première configuration, je te conseille de rester sobre.

  • Attends deux pages vues si la proposition concerne l’ensemble du site.
  • Limite l’affichage à une ou deux occurrences.
  • Exclue le mobile si le format n’y apporte pas assez de valeur.
  • Évite plusieurs popups simultanées.
  • Ne représente pas l’offre sur la page de remerciement ou juste après l’inscription.

Le réglage « afficher jusqu’à X fois » peut compter les ouvertures ou les fermetures selon le scénario. Contrôle précisément ce choix. Si tu comptes seulement la fermeture, une fenêtre abandonnée autrement peut revenir plus souvent que prévu.

Une offre déjà refusée n’a pas besoin de revenir à chaque page. À force d’insister, elle ne devient pas plus convaincante. Elle finit comme l’alarme de voiture du quartier, tout le monde l’entend et plus personne ne l’écoute.

ressource wordpress elementor pro

Rend la popup accessible et réellement facile à fermer

Lorsqu’une popup s’ouvre, la navigation au clavier doit rester à l’intérieur, le focus doit arriver sur un élément pertinent et la touche Échap doit permettre de la fermer dans un scénario classique. À la fermeture, le focus doit revenir vers l’élément qui a déclenché l’ouverture de la fenêtre modale.

Le modèle de fenêtre modale du W3C rappelle aussi qu’un bouton de fermeture visible doit faire partie de la fenêtre. Elementor gère une partie de ce comportement, mais tu dois vérifier le résultat avec ton design, tes widgets et tes éventuels scripts.

Fais un test simple sans souris.

  1. Ouvre la popup avec la touche Entrée depuis son bouton.
  2. Parcours les champs et les actions avec Tab.
  3. Vérifie que le focus ne se perd pas derrière la fenêtre.
  4. Ferme avec la croix puis avec Échap.
  5. Contrôle que tu reviens au bon endroit dans la page.

Teste aussi le contraste, la lisibilité des erreurs et la taille des zones cliquables. Une croix invisible n’est pas minimaliste, elle est invisible. 

Personne ne devrait avoir besoin d’un diplôme d’ophtalmologie pour quitter une newsletter.

RGPD et collecte d’emails sans consentement décoratif

Une popup n’impose pas automatiquement une case de consentement. Tout dépend de ce qu’elle fait. Une fenêtre qui affiche des horaires ou ouvre un contenu ne collecte aucune donnée. Un formulaire de newsletter ou une popup qui déclenche des traceurs marketing demande en revanche davantage d’attention.

Pour une prospection commerciale adressée à des particuliers, la CNIL demande un consentement préalable, libre, spécifique, éclairé et univoque. La personne doit comprendre que son email servira à recevoir des messages commerciaux. Une case dédiée et non précochée reste la méthode la plus claire lorsque le consentement est requis.

Près du formulaire ajoute une information courte sur l’usage des données, un lien vers la politique de confidentialité et une méthode simple de désinscription dans chaque email. Le double opt-in n’est pas une obligation générale présentée comme telle par la CNIL, mais il apporte une preuve utile et limite les adresses saisies par erreur.

Si la popup ou les outils qu’elle charge déposent des cookies non nécessaires, le consentement doit intervenir avant leur dépôt. Un clic sur « Télécharger » ne donne pas silencieusement carte blanche à tous les traceurs du site. La popup de collecte et le bandeau de gestion des cookies ne remplissent pas la même fonction.

Teste avant de publier

Enregistre les conditions, les déclencheurs et les règles avancées, puis sors de l’éditeur. Une popup réussie dans l’aperçu peut se comporter différemment avec le cache, le bandeau de cookies, les autres scripts et la taille réelle de l’écran. Une fenêtre privée aide à simuler une première visite, mais elle ne remplace pas plusieurs scénarios réels.

Vérifie au minimum les points suivants :

  • La popup apparaît uniquement sur les pages prévues.
  • Les exclusions fonctionnent, notamment sur la confirmation et les mentions légales.
  • Le délai ou le défilement correspond au comportement attendu.
  • La fréquence reste limitée après fermeture et après nouvelle page vue.
  • Le formulaire envoie les données au bon endroit et affiche une confirmation claire.
  • La fermeture fonctionne à la souris, au toucher et au clavier.
  • La fenêtre reste lisible sur un petit écran sans masquer son propre bouton de sortie.
  • Aucun traceur soumis au consentement ne part avant le choix du visiteur.

Pour mesurer le résultat, suis au minimum les ouvertures utiles, les formulaires envoyés et le taux de conversion. Si la popup ouvre un formulaire, rattache-la à un parcours clair plutôt que de laisser les contacts arriver sans un contexte. Le guide pour créer un mini tunnel de qualification avec des formulaires WordPress t’aidera à organiser la suite.

Elementor ne propose pas nativement de véritable test A/B pour ses popups. Si ton volume le justifie, utilise une solution dédiée en vérifiant son impact sur les performances et le consentement. Évite aussi de multiplier les outils de collecte sans une règle commune. Centraliser les formulaires WordPress simplifie le suivi et limite les contradictions.

N’évalue pas seulement la popup au nombre d’emails collectés. Observe également les fermetures immédiates, les abandons du formulaire et le comportement mobile.

La bonne popup n’est pas celle qui s’affiche le plus, c’est celle qui intervient au bon endroit, au bon moment, pour la bonne personne.

En conclusion

Elementor Pro fournit tous les réglages nécessaires. Pourtant, la qualité d’une popup dépend moins de son animation que de trois décisions très simples. Choisir les bonnes pages, attendre un vrai signal d’intérêt et limiter la répétition.

Commence avec une seule proposition, un déclencheur clair et une fréquence prudente. Teste ensuite le mobile, le clavier, l’envoi du formulaire et le consentement hors de l’éditeur. Ta popup pourra alors soutenir la conversion sans interrompre inutilement la visite de ton lecteur.

Elle sera peut-être vue moins souvent mais elle aura surtout davantage de chances d’être lue, ce qui reste tout de même une ambition raisonnable pour une popup.

À propos de l'auteur
Image de Xavier Taillebois
Xavier Taillebois

Je suis Xavier, fondateur de XT DESIGN WEB. Mon truc : transformer des offres parfois floues en solution WordPress claires, rapides et bien référencées. Mon parcours atypique (École Boulle → 21 ans chef de projet & architecte de solutions → 7+ ans webdesigner/webmaster) m’aide à marier esthétique et rigueur technique pour livrer des sites beaux, stables et faciles à gérer. J’accompagne les TPE/PME, indépendants et startups sur la création, le SEO et la maintenance, avec pédagogie, transparence et zéro jargon. J'accompagne les TPE/PME, entrepreneurs et artisans sur la création de site WordPress, le SEO et la maintenance, avec pédagogie, transparence et zéro jargon.

À propos de l'auteur
Image de Xavier Taillebois
Xavier Taillebois

Je suis Xavier, fondateur de XT DESIGN WEB. Mon truc : transformer des offres parfois floues en solution WordPress claires, rapides et bien référencées. Mon parcours atypique (École Boulle → 21 ans chef de projet & architecte de solutions → 7+ ans webdesigner/webmaster) m’aide à marier esthétique et rigueur technique pour livrer des sites beaux, stables et faciles à gérer. J’accompagne les TPE/PME, indépendants et startups sur la création, le SEO et la maintenance, avec pédagogie, transparence et zéro jargon. J'accompagne les TPE/PME, entrepreneurs et artisans sur la création de site WordPress, le SEO et la maintenance, avec pédagogie, transparence et zéro jargon.

Développement de site WordPress sur-mesure, réalisés pour vous.

Besoin d’un site web performant ou d’une refonte optimisée ? 🚀 Discutons ensemble de votre projet pour créer un site sur-mesure, alliant design, référencement et sécurité. Profitez de l’expertise d’un spécialiste pour booster votre présence en ligne et atteindre vos objectifs. Contactez-moi dès maintenant !

Poursuivre votre lecture avec un autre article