Créer une popup avec Elementor Pro

Tutoriel - Créer une popup avec le constructeur de pages Elementor Pro
SOMMAIRE

ETAPE 1 : Administration WordPress

Une fois connecté à l’administration de votre site WordPress, cliquez sur l’entrée « Modèles > Popups » du menu WordPress puis sur le bouton « Ajouter un popup »

Interface Elementor pour créer une Popup
Modèles > Popups > Ajouter une popup

ETAPE 2 : Créer un modèle

Laissez le premier champ déjà paramétré sur « Popup » puis saisissez le nom de votre modèle.

Il s’agit d’un champ facultatif mais il permettra de vous repérer dans votre administration WordPress si vous en créez plusieurs. Vous pouvez renseigner l’objectif de cette « fenêtre surgissante »: Affichage promotion noël, Ressources offertes,…

Cliquez sur le bouton « Créer un modèle »

Nommer un modèle popup Elementor pour faciliter la lisibilité de l'administration
Nom du modèle

ETAPE 3 : Choix du modèle

Choisissez le style de popup que vous souhaitez réalisée parmi celles proposées dans la bibliothèque puis cliquez sur « Insérer » quand vous passez votre souris sur un modèle.

Vous pouvez également partir d’un modèle vierge en fermant la bibliothèque.

Choisir un modèle de popup Elementor pour avancer plus rapidement

ETAPE 4 : Personnaliser votre popup

Utilisez les nombreuses possibilités d’Elementor PRO pour personnaliser votre popup. 

En utilisant la petite roue crantée en bas à gauche, vous pourrez modifier la taille de votre popup. 

Pensez à bien vérifier l’aspect « Responsive » de votre popup en cliquant sur le l’icône « Mode responsive » en bas à gauche.

Personnaliser sa pop up avec le constructeur de pages Elementor Pro
Personnaliser votre popup avec Elementor PRO

ETAPE 5 : Publier

Une fois l’aspect visuel de votre popup terminée, cliquez sur le bouton « Publier ».

ETAPE 6 : Ajouter des conditions d'affichage

Le premier écran va vous permettre de définir sur quelles pages vous souhaitez faire apparaitre votre popup. 

Cliquez sur « Add Condition » puis sélectionnez « Include > Entire Site » si vous voulez déclencher la popup sur toutes les pages de votre site.

Si vous souhaitez désactiver cette popup sur une page spécifique de votre site WordPress, choisissez « Exclude > Singular > Pages > Nom de votre page »

Une fois paramétré, cliquez sur « Next »

Ajouter des conditions pour afficher sa popup sur un site internet WordPress

ETAPE 7 : Ajouter des déclencheurs (Triggers)

Le second écran va vous permettre de définir l’événement déclencheur de votre popup : La popup va s’ouvrir quand notre visiteur va…faire telle action.

Sur de nombreux sites, on retrouve l’apparition de la popup quand on se rapproche du haut de l’écran pour changer d’onglet et donc quitter le site actuel. Il est possible de mettre en place ce déclencheur à travers cet écran. Activez l’option « On Page Exit Intent ».

Si vous souhaitez déclencher votre popup 5 secondes après le chargement d’une page, Activez l’option « On Page Load » puis saisissez « Within (sec) 5 ».

Une fois paramétré, cliquez sur « Next »

Ajouter des déclencheurs - triggers - pour rendre la popup visible en fonction d'une action du visiteur
Afficher une popup en fonction de l'action du visiteur

ETAPE 8 : Règles avancées

Il est possible de mettre en place des déclencheurs avancés grâce à ce 3ème écran.

L’apparition d’une popup sur Mobile peut perturber votre visiteur ? Grâce à cet écran, vous pouvez activer « Show on devices » et supprimer « Mobile » pour bloquer la popup sur les smartphones.

Une fois paramétré, cliquez sur « Save & Close »

Possibilité de désactiver sa popup uniquement sur mobile - Responsive design
Cacher une popup sur mobile

ETAPE 9 : Tester la popup

C’es terminé !

Il est conseillé, comme souvent, de tester notre nouvelle popup sur plusieurs navigateurs et types d’écrans pour s’assurer de son bon fonctionnement.

Conseil Bonus

Je vous recommande d'utiliser un modèle de la bibliothèque pour commencer votre popup. Cela vous permettra de gagner du temps dans le paramétrage basique d'une popup.

Attention de ne pas trop déranger vos visiteurs avec l'apparition de pop-ups.

Concepteur de site web freelance entre Saint Etienne et Lyon

Spécialisé dans l’utilisation d’Elementor depuis 2019, je vous apporte une aide personnalisée lors de la création de votre site web.

Retrouvez tous mes tutos Elementor

Blocage Elementor

30 min pour vous aider

Vous n’avez pas la solution pour faire ce que vous souhaitez sur Elementor ou WordPress lors de la création de votre site ?
Je vous propose de vous aider ou de vous conseiller gratuitement afin d’avancer sereinement sur votre projet.