29. Popups : conditions, déclencheurs, règles avancées

Une popup est une fenêtre qui s’affiche par-dessus la page. Bien employée, elle rend un service au visiteur au bon moment ; mal employée, elle le fait fuir. Ce chapitre montre comment construire une popup avec Elementor Pro, comment décider où, quand et combien de fois elle apparaît, et comment rester du bon côté de la ligne qui sépare le service de l’agacement.

En bref

Public: Toute personne qui veut proposer un rendez-vous, une offre saisonnière ou un formulaire court sans créer une page de plus.
Enjeu: Obtenir une action du visiteur sans dégrader la lecture, surtout sur téléphone.
Idée clé: Une popup se juge à trois questions : où, quand, combien de fois ; la bonne réponse est presque toujours « moins ».
Prérequis: Chapitres 09 (conteneurs), 15 (boutons et liens), 24 (conditions d’affichage du Constructeur de thème), 28 (formulaires).
Lecture: Environ 20 minutes (+ 30 minutes d’exercice).

29.1 — Ce qu’une popup peut faire, et ce qu’elle ne doit pas faire

Le mot « popup » désigne dans Elementor un modèle d’un type particulier : un contenu construit comme une page, mais affiché dans une fenêtre qui se superpose à la page en cours, généralement au-dessus d’un voile assombri. Le visiteur la ferme d’un clic, et retrouve la page là où il l’avait laissée. L’interface française la nomme Fenêtre surgissante (Popup) ; par commodité, nous gardons le mot popup, qui est aussi le nom du produit, le Popup Builder.

Pour un site d’artisan, trois usages sont légitimes parce qu’ils rendent un service. Le premier est la prise de contact rapide : un bouton « Devis express » présent sur toutes les pages ouvre un formulaire court sans quitter la page. Le deuxième est le message d’absence : « L’atelier est fermé du 4 au 25 août ; les demandes seront traitées au retour », affiché une fois par visiteur pendant la période. Le troisième est l’offre saisonnière réellement limitée, proposée après que le visiteur a montré de l’intérêt, par exemple en faisant défiler les deux tiers d’une page de prestations.

À l’inverse, la popup qui s’ouvre à l’arrivée, avant que le visiteur ait pu lire une ligne, est la plus répandue et la plus nocive. Sur un téléphone, elle couvre tout l’écran, son bouton de fermeture est minuscule, et le visiteur qui cherchait votre numéro repart. Google indique d’ailleurs, depuis 2017, que les interstitiels intrusifs affichés à l’arrivée sur mobile peuvent peser sur le classement d’une page. Ce chapitre prend donc parti : aucune popup automatique à l’arrivée sur mobile, et une limitation stricte du nombre d’affichages partout ailleurs.

Elementor Pro

Le Popup Builder, avec ses conditions, déclencheurs et règles avancées, est réservé aux plans Advanced et supérieurs d’Elementor Pro (note officielle du Centre d’aide du 27 août 2026). Le plan Essential (60 $ par an hors taxes) ne le comprend pas ; le plan Advanced Solo (84 $ par an, un site), retenu pour la Menuiserie Roche au chapitre 02, l’inclut. Aucune version gratuite de cette fonction n’existe.

29.2 — Créer et régler une popup

Une popup est un modèle : elle se crée depuis l’administration WordPress, dans la liste des modèles d’Elementor, puis s’édite exactement comme une page. Sa toile est simplement plus petite, et une roue dentée donne accès à des réglages propres à la fenêtre.

Créez le modèle. Dans l’administration, ouvrez Elementor › Éditeur › Modèles › Fenêtres surgissantes (Popups) et cliquez sur Ajouter. Nommez la popup (« Devis express »). La bibliothèque de modèles propose des popups prêtes à l’emploi ; fermez-la pour partir d’une fenêtre vide.
Construisez le contenu. La toile représente la fenêtre. Déposez un Flexbox en colonne avec un Titre H2, un Paragraphe et, selon l’usage, un Bouton ou un widget Formulaire. Utilisez vos classes et variables (chapitre 18) : une popup doit ressembler au site, pas à une publicité.
Réglez la fenêtre. Cliquez sur la roue dentée de la barre supérieure (l’équivalent des Réglages de page du chapitre 05) pour ouvrir les réglages de la popup. Dans Mise en page (Layout) : Largeur et Hauteur en pixels ou en vh (pourcentage de la hauteur de l’écran), position Horizontale et Verticale, activation de la Superposition (Overlay, le voile), du Bouton de fermeture (Close Button), et les Animations d’entrée et de sortie avec leur durée.
Stylez. L’onglet Style règle le fond, la bordure et l’ombre de la fenêtre, la couleur du voile, et le bouton de fermeture à l’état normal et au survol. Faites-le grand et contrasté : c’est le bouton le plus important de la popup.
Décidez du comportement. L’onglet Avancé contient les options de comportement décrites ci-dessous. Pour une première popup, laissez tout par défaut sauf Éviter les popups multiples (Avoid Multiple Popups), à activer.
Publiez. Le bouton Publier n’enregistre pas seulement : il ouvre la fenêtre de publication en trois volets (29.3). Tant que vous n’avez pas défini au moins une condition ou un moyen d’ouverture, la popup n’apparaît nulle part.

Les options de l’onglet Avancé

Ces options, dont les libellés français de Pro ne sont pas fixés, méritent d’être connues une à une. Afficher le bouton de fermeture après (Show Close Button After) retarde l’apparition de la croix de quelques secondes : à éviter, c’est exactement le genre de piège qui agace. Fermer automatiquement après (Automatically Close After) ferme la fenêtre seule au bout d’un délai, utile pour un message d’information. Empêcher la fermeture par le voile (Prevent Closing on Overlay) et Empêcher la fermeture par la touche Échap (Prevent Closing on ESC Key) retirent au visiteur deux façons naturelles de fermer : à réserver aux cas où la popup exige une réponse, ce qui n’arrive jamais sur un site vitrine. Désactiver le défilement de la page (Disable Page Scrolling) bloque la page derrière ; Éviter les popups multiples empêche deux fenêtres de s’empiler ; Ouvrir par sélecteur (Open By Selector) permet d’ouvrir la popup depuis n’importe quel élément portant une classe CSS donnée (29.4). Marges, marges internes et classes CSS complètent la liste, ainsi qu’un CSS personnalisé.

Définition

Voile (overlay, traduit « Superposition » dans l’interface) — la couche semi-transparente, souvent sombre, qui recouvre la page derrière la popup. Elle attire l’œil sur la fenêtre et, par défaut, un clic dessus ferme la popup. Un voile à 50 ou 60 % d’opacité suffit ; au-delà, le visiteur perd le contexte de la page.

29.3 — Publier en trois volets : où, quand, combien de fois

La fenêtre de publication d’une popup pose trois questions successives, chacune dans un volet. Les Conditions (Conditions) répondent à « où » : sur quelles pages la popup peut apparaître. Les Déclencheurs (Triggers) répondent à « quand » : quel geste ou quel délai la fait apparaître. Les Règles avancées (Advanced Rules) répondent à « combien de fois et pour qui ». Une popup automatique a besoin des trois ; une popup ouverte par un bouton n’a besoin que d’un moyen d’ouverture.

Figure 29.1 — Les trois volets de publication d’une popup. Une popup automatique doit passer les trois filtres pour s’afficher.

Conditions : où

Le volet Conditions fonctionne comme celui du Constructeur de thème (chapitre 24) : on ajoute une condition avec Inclure ou Exclure et une cible, Tout le site, une page précise, les articles, une catégorie, les archives. Les conditions se cumulent : « Inclure › Tout le site » puis « Exclure › Contact » affiche la popup partout sauf sur la page Contact, où le visiteur a déjà le formulaire sous les yeux. Sans aucune condition, la popup n’est chargée sur aucune page.

Déclencheurs et règles avancées : quand, combien de fois

Le tableau qui suit reprend les déclencheurs et règles disponibles, avec leur nom anglais, une traduction prudente (les libellés français de Pro ne sont pas confirmés), et un usage recommandé pour un site vitrine. Plusieurs déclencheurs peuvent être actifs à la fois ; le premier satisfait ouvre la popup. Les règles avancées, elles, s’appliquent toutes : chacune est un filtre supplémentaire.

Réglage (anglais)	Ce qu’il fait	Usage recommandé
Déclencheurs (Triggers)
Au chargement de la page (On Page Load)	Ouvre après un délai en secondes.	Jamais à 0 s ; 30 à 60 s sur ordinateur, désactivé sur mobile par une règle d’appareil.
Au défilement (On Scroll)	Ouvre quand le visiteur a fait défiler un pourcentage de la page, vers le bas ou vers le haut.	À 60-70 % vers le bas : le visiteur a lu.
Au défilement jusqu’à un élément (On Scroll To Element)	Ouvre quand un élément portant l’ID CSS indiqué entre à l’écran.	Offre saisonnière quand le tableau de prix apparaît.
Au clic (On Click)	Ouvre après un nombre de clics n’importe où sur la page.	Peu prévisible ; préférer un bouton dédié (29.4).
Après inactivité (After Inactivity)	Ouvre quand le visiteur n’a rien fait pendant N secondes.	« Besoin d’aide ? Appelez-nous », après 45 s, ordinateur seulement.
À l’intention de sortie (On Page Exit Intent)	Ouvre quand le pointeur quitte la fenêtre vers la barre du navigateur (ordinateur seulement, par nature).	Un dernier rappel, une seule fois.
Règles avancées (Advanced Rules)
Afficher après N pages vues (Show after X page views)	Attend que le visiteur ait vu N pages.	2 ou 3 : le visiteur intéressé.
Afficher après N sessions (Show after X sessions)	Attend une N-ième visite.	Offre réservée aux visiteurs qui reviennent.
Afficher jusqu’à N fois (Show up to X times)	Plafonne le nombre d’affichages ; le compte se fait à l’ouverture ou à la fermeture.	1 ou 2, toujours. C’est la règle la plus importante.
Provenance d’une URL précise (When arriving from specific URL)	Affiche ou masque selon l’adresse de la page précédente.	Message dédié aux visiteurs venus d’une annonce.
Provenance (Show when arriving from)	Moteur de recherche, lien externe ou lien interne.	Ne pas montrer aux visiteurs qui naviguent déjà dans le site.
Masquer pour les utilisateurs connectés (Hide for logged in users)	Tous les connectés, ou certains rôles.	Toujours activé : vous ne verrez plus votre popup en travaillant.
Afficher sur les appareils (Show on devices)	Ordinateur, tablette, mobile.	Décocher Mobile pour toute popup automatique.

À savoir

Le compteur de la règle « Afficher jusqu’à N fois » est mémorisé dans le navigateur du visiteur. Il ne reverra donc pas la popup à sa prochaine visite tant qu’il n’a pas effacé ses données de navigation ; et vous-même, pour tester, devrez ouvrir une fenêtre de navigation privée ou effacer ces données. Ce n’est pas une panne : c’est la règle qui fonctionne.

29.4 — Ouvrir une popup à la demande

La popup la plus respectueuse est celle que le visiteur demande. Elementor offre trois façons de l’ouvrir sur une action volontaire, et dans ces trois cas les déclencheurs automatiques n’ont pas à être définis.

Par un bouton ou un lien. Sélectionnez le Bouton (ou n’importe quel élément qui accepte un lien), cliquez sur l’icône dynamique du champ Lien et choisissez, dans le groupe Actions, la balise Popup. Ses réglages proposent Ouvrir (Open) ou Fermer (Close) une popup désignée par son nom, et une option Ne plus afficher (Don’t Show Again) qui, sur un bouton de fermeture personnalisé, évite que la popup revienne. C’est la méthode à retenir pour le bouton « Devis express » de l’en-tête (chapitre 24) : il est présent sur toutes les pages, il n’impose rien, et il ouvre le formulaire sans navigation.

Par un formulaire. Dans les actions après envoi d’un widget Formulaire (chapitre 28), l’action Popup ouvre ou ferme une popup quand l’envoi a réussi. Elle sert dans les deux sens : ouvrir une popup « Merci, nous vous rappelons » après un formulaire de page, ou fermer la popup qui contenait le formulaire.

Par un sélecteur CSS. L’option Ouvrir par sélecteur de l’onglet Avancé de la popup reçoit un sélecteur, par exemple .ouvrir-devis, et tout élément de la page portant la classe CSS ouvrir-devis (à saisir dans l’onglet Avancé d’un widget classique, ou en classe d’un atome) ouvre la popup au clic. Le Centre d’aide précise que, dans ce mode, les déclencheurs et les règles avancées sont ignorés : la popup s’ouvre chaque fois que l’on clique. Cette méthode est utile pour un lien dans un texte, ou dans un menu.

Astuce

Si une popup ouverte par un bouton refuse d’apparaître, vérifiez dans l’ordre : que la popup est publiée et non en brouillon ; que le lien dynamique pointe bien vers elle et non vers une ancienne version ; et que la page est couverte par une condition, ce qui lève tout doute sur le chargement. Vérifiez enfin que vous n’êtes pas exclu par une règle « Masquer pour les utilisateurs connectés », en testant en navigation privée.

29.5 — Un formulaire dans une popup

Le mariage le plus utile pour un artisan est celui d’une popup et d’un formulaire court. Le formulaire de devis complet du chapitre 28 reste sur la page Contact ; la popup « Devis express » propose une version en trois champs, nom, téléphone ou e-mail, et une ligne « Votre projet en une phrase », avec la case de rappel téléphonique. Le visiteur qui hésitait à chercher la page Contact a, lui aussi, sa porte d’entrée.

La construction se fait en quatre gestes. Déposez un widget Formulaire dans la popup, avec ses champs, son Pot de miel et sa mention d’information sous les champs, sans rien retirer aux règles du chapitre 28 : une popup n’est pas une zone de non-droit. Réglez les actions après envoi : Collecter les envois, Email vers l’artisan, Email 2 vers le visiteur. Ajoutez l’action Popup réglée sur Fermer, pour que la fenêtre disparaisse après l’envoi, ou, si vous préférez laisser un message de confirmation, ne fermez pas et personnalisez le message de succès. Enfin, prévoyez la hauteur : sur mobile, une popup contenant un formulaire dépasse vite l’écran ; réglez la hauteur en vh avec un maximum, laissez le défilement de la page actif, et testez sur un vrai téléphone, le formulaire ouvert et le clavier affiché.

Attention

Une popup contenant un formulaire est d’abord un formulaire : la mention d’information RGPD, la case d’acceptation non pré-cochée et la case de rappel téléphonique facultative (chapitre 28, section 28.6) s’y appliquent à l’identique. Réduire le nombre de champs est une bonne idée ; supprimer l’information ne l’est pas.

29.6 — Respecter le visiteur

Tout ce qui précède se résume en une politique d’usage courte, que nous vous invitons à adopter telle quelle pour un site vitrine. Elle tient en une checklist, à relire avant de publier chaque popup.

Aucune popup automatique sur mobile : la règle « Afficher sur les appareils » exclut Mobile, et de préférence Tablette.
Sur ordinateur, jamais à l’arrivée : un délai d’au moins 30 secondes, un pourcentage de défilement, ou une intention de sortie.
Une seule popup automatique par site, plafonnée à un ou deux affichages par visiteur.
Un bouton de fermeture immédiatement visible, contrasté, d’au moins 44 pixels de côté ; jamais de délai avant son apparition.
La touche Échap et le clic sur le voile ferment la popup ; le défilement de la page n’est pas bloqué inutilement.
Un contenu qui rend service (rendez-vous, absence, offre réelle), rédigé dans le ton du site, sans compte à rebours artificiel.
Masquée pour les utilisateurs connectés, et testée en navigation privée sur ordinateur et sur téléphone.

Piège classique

Construire son bandeau de consentement aux cookies avec le Popup Builder. Un bandeau de consentement n’est pas une popup marketing : il doit bloquer les traceurs tant que le visiteur n’a pas accepté, proposer un refus aussi simple que l’acceptation, mémoriser le choix et permettre de le modifier. Une popup Elementor ne sait rien faire de tout cela ; elle affiche un texte. Pour le consentement, utilisez un outil dédié, comme le module Cookie Consent d’Elementor (facturé en crédits One) ou une extension spécialisée citée à titre d’exemple au chapitre 35, et gardez le Popup Builder pour ce qu’il sait faire.

Méthode

Avant de créer une popup, écrivez sur une ligne : « Elle s’ouvre [quand], sur [quelles pages], au plus [N] fois, pour proposer [quoi]. » Si vous n’arrivez pas à remplir les quatre crochets avec des mots précis, ce n’est pas une popup qu’il vous faut : c’est un bouton dans l’en-tête, ou une section de plus sur la page.

Exercice 29.1 — La popup « Devis express » de la Menuiserie Roche 30 min

Objectif : créer une popup ouverte à la demande par un bouton, puis lui ajouter un déclenchement automatique prudent, limité aux ordinateurs et à un seul affichage.

Dans Elementor › Éditeur › Modèles › Fenêtres surgissantes, cliquez sur Ajouter et nommez la popup « Devis express ». Fermez la bibliothèque.
Construisez le contenu : Flexbox en colonne, Titre H2 « Votre projet en une minute », Paragraphe d’une phrase, widget Formulaire à trois champs (Nom, E-mail, « Votre projet en une phrase ») plus Téléphone facultatif, case de rappel facultative décochée, mention d’information, Pot de miel. Actions après envoi : Collecter les envois, Email, Email 2, puis Popup › Fermer.
Réglages de la popup › Mise en page : largeur 560 px, hauteur automatique, position centrée, Superposition activée, Bouton de fermeture activé. Style : fond blanc cassé #FAF7F2, bouton de fermeture anthracite de 40 px au moins. Avancé : Éviter les popups multiples activé ; ne touchez pas aux options qui empêchent la fermeture.
Publiez. Dans le volet Conditions : Inclure › Tout le site, puis Exclure › page Contact. Ne définissez aucun déclencheur pour l’instant. Enregistrez et fermez.
Ouvrez le modèle d’en-tête (chapitre 24), sélectionnez le bouton « Devis », ouvrez l’icône dynamique du champ Lien et choisissez Actions › Popup › Ouvrir › « Devis express ». Mettez à jour. Testez en navigation privée depuis trois pages différentes, sur ordinateur et sur téléphone.
Revenez à la popup et ajoutez le déclenchement automatique : Déclencheurs › Au chargement de la page après 40 secondes. Règles avancées : Afficher jusqu’à 1 fois, compté à l’ouverture ; Afficher sur les appareils : Ordinateur seulement ; Masquer pour les utilisateurs connectés : activé.
Testez de nouveau en navigation privée sur ordinateur : la popup doit apparaître après 40 secondes, une seule fois, et ne plus revenir en changeant de page. Sur téléphone, elle ne doit apparaître que par le bouton.

Résultat attendu : une popup publiée avec des conditions « Tout le site sauf Contact », ouverte par le bouton « Devis » de l’en-tête sur tous les appareils, et s’ouvrant seule au plus une fois, après 40 secondes, sur ordinateur uniquement. Le formulaire qu’elle contient envoie, accuse réception, collecte, et se ferme après l’envoi.

À retenir

Le Popup Builder est réservé aux plans Advanced et supérieurs d’Elementor Pro ; une popup est un modèle que l’on construit comme une page, avec ses propres réglages de fenêtre.
La publication se fait en trois volets : Conditions (où), Déclencheurs (quand), Règles avancées (combien de fois, pour qui).
La popup la plus utile est celle que le visiteur demande : un bouton avec la balise dynamique Actions › Popup, ou l’action Popup d’un formulaire.
Règles de respect : aucune popup automatique sur mobile, jamais à l’arrivée sur ordinateur, au plus un ou deux affichages, une fermeture facile.
Un formulaire dans une popup reste un formulaire : information RGPD, case d’acceptation décochée et case de rappel téléphonique facultative s’appliquent.
Le bandeau de consentement aux cookies n’est pas une popup marketing : il relève d’un outil dédié.