Vous avez besoin d’un bouton n’importe où sur votre site pour ouvrir une popup Elementor, mais le déclencheur standard «au clic» ne fonctionne qu’à l’intérieur d’une même page? Cette tâche peut être résolue en cinq minutes, sans extension tierce ni modification de code.

Le mécanisme intégré d’Elementor Pro repose sur un lien d’ancrage combiné au sélecteur CSS Open By Selector. Une fois configuré, vous obtenez une popup qui s’ouvre depuis n’importe quelle page de votre site: depuis un élément de menu, un lien texte ou un bouton dans le pied de page. Voici un guide pas à pas, de la création de la popup jusqu’au test sur un site en production. Chaque étape est illustrée par une capture d’écran issue d’une configuration réelle.

💡 Aperçu rapide:

• Créez une popup dans Elementor Templates → Popups et publiez-la
• Dans les conditions d’affichage, sélectionnez «Entire Site», c’est le point clé de la méthode
• Dans les paramètres globaux de la popup, activez «Disable Page Scroll» et «Prevent Multiple Popups»
• Dans l’onglet Advanced, renseignez le sélecteur a[href="#your-anchor"] dans le champ Open By Selector
• Placez des liens avec l’ancrage #your-anchor sur l’ensemble de votre site, la popup s’ouvrira depuis n’importe où

Step 1: Create a popup in Elementor

Ouvrez Templates → Popups dans le menu latéral de WordPress et cliquez sur «Add New». Choisissez un modèle prêt à l’emploi dans la bibliothèque Elementor ou partez d’un canevas vierge. Donnez un nom explicite à la popup, par exemple «Popup Contact» ou «Formulaire de demande», afin de la retrouver facilement dans la liste par la suite. Le design peut être libre: formulaire de contact, abonnement à une newsletter, formulaire d’avis ou bannière promotionnelle.

Construisez le contenu dans l’éditeur Elementor comme une page classique: ajoutez un titre, un formulaire, du texte et un bouton de fermeture. Une fois prêt, cliquez sur Publish.

Après la publication, Elementor ouvre l’écran des conditions, déclencheurs et règles supplémentaires. C’est ici que nous allons effectuer le seul réglage critique.

Step 2: Condition, «Entire Site»

Sur l’écran des conditions, repérez la liste déroulante et sélectionnez Entire Site. C’est la seule condition que vous devez définir.

Remarque: même si vous prévoyez d’afficher la popup uniquement sur des pages spécifiques, choisir «Entire Site» est la voie la plus simple. L’affichage lui-même ne sera pas contrôlé par la condition de page, mais par la présence de l’ancrage #contact dans l’URL. Pas d’ancrage dans la barre d’adresse, pas de popup.

L’écran des déclencheurs et les règles supplémentaires peuvent être ignorés: cliquez sur Next, puis sur Save & Close. La méthode par lien d’ancrage fonctionne indépendamment de ces paramètres.

Step 3: Global popup settings

Cliquez sur l’icône d’engrenage dans le coin inférieur gauche de l’écran d’édition de la popup, le panneau Popup Settings s’ouvre. Allez dans l’onglet Advanced.

Ici, configurez le comportement adapté à votre besoin. Nous vous recommandons d’activer:

• Disable Page Scroll, pour que la page en arrière-plan ne défile pas pendant que la popup est ouverte;
• Prevent Multiple Popups, pour éviter que plusieurs popups ne se superposent.

Laissez les autres paramètres à leurs valeurs par défaut. L’essentiel est le champ tout en bas de l’onglet, celui pour lequel tout ceci a été mis en place.

Step 4: Open by selector, la magie de l’ancrage

Dans le champ Open By Selector, saisissez un sélecteur CSS qui «écoute» le lien d’ancrage. Le format est strict:

1
a[href="#contact"]

À la place de #contact, substituez votre propre ancre: #popup / #callback / #sale ou tout autre identifiant unique. Le sélecteur réagit au clic sur n’importe quel élément <a> dont l’attribut href est égal à votre ancre.

Sauvegardez la popup. Désormais, elle attend qu’un visiteur suive un lien comportant l’ancrage requis.

Step 5: Place anchor links across your site

Il ne reste plus qu’à ajouter les liens depuis lesquels le visiteur ouvrira la popup. N’importe quel widget Elementor disposant d’un champ de lien fonctionne: Button, Text Editor, Image, Icon Box.

Dans le champ de lien, au lieu d’une URL classique, saisissez #contact (ou votre ancre). En frontend, le fonctionnement est le suivant: au clic, le navigateur ajoute #contact à la barre d’adresse, le sélecteur a[href="#contact"] se déclenche et la popup s’ouvre.

En pratique, nous utilisons trois scénarios types:

• Bouton dans la section hero, «Demander un appel» avec href #callback;
• Élément de menu, dans Apparence → Menus, ajoutez un lien personnalisé avec l’ancrage #contact;
• Lien texte dans le corps d’un article, sélectionnez le texte et saisissez l’ancrage dans le panneau de lien.

Testez: ouvrez n’importe quelle page de votre site, ajoutez #contact à la barre d’adresse et appuyez sur Entrée, la popup devrait apparaître. Si ce n’est pas le cas, revenez à l’étape 4 et vérifiez le sélecteur.

Video: setup in 3 minutes

La vidéo officielle d’Elementor montre le processus du début à la fin, de la création de la popup au test sur un site en production.

⁉️🤔 Frequently asked questions

La méthode fonctionne-t-elle sans Elementor Pro?

Non. Le module Popup Builder est uniquement inclus dans Elementor Pro. Dans la version gratuite du constructeur, les popups ne sont pas disponibles. Si vous utilisez la version Free, envisagez l’association d’Elementor avec une extension de popup distincte (par exemple, Popup Maker), mais la configuration y sera différente, via des sélecteurs jQuery plutôt que par le biais du champ Open By Selector standard.

La condition «Entire Site» est-elle obligatoire?

Oui, c’est une exigence clé de la méthode. Si vous laissez la condition sur «On Specific Pages», la popup ne s’affichera que sur les pages sélectionnées, et uniquement au chargement de la page, pas lors d’un clic sur l’ancrage. Le mode «Entire Site» transfère le contrôle au sélecteur Open By Selector.

Peut-on créer plusieurs popups différentes avec des ancres différentes?

Oui. Créez une popup distincte pour chaque ancre. Par exemple, une popup «Contacts» avec le sélecteur a[href="#contact"] et une popup «Promotion» avec a[href="#sale"]. Toutes deux sont rattachées à «Entire Site» et se déclenchent indépendamment sur leur propre ancre.

Pourquoi la popup ne s’ouvre-t-elle pas via l’ancrage?

Vérifiez trois points. Premièrement: #your-anchor doit apparaître dans la barre d’adresse, le navigateur ne l’ajoute que lors d’un clic sur un <a> avec le href correspondant, une saisie directe au clavier peut ne pas fonctionner. Deuxièmement: le champ Open By Selector doit contenir exactement a[href="#contact"], sans espaces superflus et avec le bon type de guillemets. Troisièmement: ouvrez la console du navigateur (F12) et recherchez des erreurs JavaScript, un conflit avec une autre extension peut bloquer le déclencheur.

Cela affecte-t-il le SEO?

Non. Les liens d’ancrage avec un hash ne sont pas indexés par les moteurs de recherche comme des pages distinctes. Pour Google, il s’agit d’un élément de navigation technique, pas de contenu dupliqué.

What to do if standard triggers are not enough

Le lien d’ancrage via Open By Selector est le moyen le plus universel pour ouvrir une popup Elementor depuis n’importe quel endroit de votre site. Il ne dépend pas de la page sur laquelle se trouve le visiteur et ne nécessite pas de modifier le fichier functions.php.

Si la tâche se complexifie, par exemple si la popup doit s’ouvrir lors du défilement jusqu’à un bloc spécifique ou 10 secondes après l’arrivée sur le site, utilisez les déclencheurs standard d’Elementor: On Scroll, On Page Load, On Exit Intent. Ils se configurent sur le même écran que celui où nous avons sélectionné «Entire Site», et ils se combinent parfaitement avec la méthode par ancrage.

Testez sur un site de test: créez une popup, saisissez a[href="#test"], placez un bouton avec cet ancrage sur la page d’accueil. L’ensemble du processus prend moins de cinq minutes.