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 »
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 »
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.
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.
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 »
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 »
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 »
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.
