Nous allons voir dans ce tutoriel comment créer et intégrer une fenêtre pop-up ou fenêtre contextuelle avec Elementor pro.
Une fenêtre pop-up, est une fenêtre qui apparaît automatiquement lorsqu’on navigue au sein d’un site.
Elles sont utilisées principalement pour :
- Capter l’attention des lecteurs sur un article.
- Afficher une promotion.
- Proposer l’inscription a une Newsletter.
- Etc.
Ils existent de nombreux avantages d’utiliser Elementor pro plutôt qu’un plugin tiers pour créer une fenêtre pop-up.
- Facilité de création.
- Intégration facile sur n’importe quelle page ou articles de votre choix.
- Options d’affichage nombreuses.
- Customisation dans les moindres détails.
Comme vous allez pouvoir intégrer n’importe quel élément fourni par Elementor à vos pop-up, les possibilités offertes sont pléthoriques.
- Images
- Vidéos
- Formulaires.
- Réseaux sociaux.
- Portfolios.
- Tableaux divers.
- Carrousel.
- Etc.
Création d’un template (maquette) d’une fenêtre pop-up avec Elementor
Pour commencer, nous allons créer le template de notre fenêtre pop-pup. Pour ce faire, on se rend sur le tableau de bord de WordPress puis sur Modèles –> Popups.
Dans la fenêtre qui s’ouvre on clique sur Ajouter nouveau POPUP, dans Choisissez le type de modèle, sélectionnez Popup et donnez un nom a votre modèle pour pouvoir le sélectionner facilement plus tard, cliquez ensuite sur le bouton Créer un modèle.
Deux choix sont possibles :
- Commencer la création à partir d’un modèle prédéfini offert par Elementor.
- Créer un modèle à partir de rien.
Elementor fournit plus d’une centaine de modèles prédéfinis et en rajoute régulièrement. Ces modèles ne sont pas figés, vous pourrez le restyliser entièrement à votre guise.
Pour sélectionner un modèle de pop-up, on passe la souris dessus et on clique sur Insertion.
Pour notre exemple, nous allons créer un modèle à partir de zéro, nous allons donc fermer la fenêtre sans sélectionner de maquette.
Sélection des éléments d'Elementor à intégrer dans la fenêtre pop-up
Maintenant, nous allons commencer la création à proprement parlé de notre pop-up, en plaçant les éléments qui vont la composer.
Disons que nous souhaitons créer une fenêtre contextuelle pour capter l’attention sur notre expédition au pied de l’Everest.
Nous allons placer un titre et une image pour illustrer le sujet et un bouton renvoyant vers l’article à consulter.
Ps : Je ne vais pas styliser les éléments de la pop-up, car ce n’est pas le but de ce tutoriel.
Styliser et paramétrer la fenêtre pop-up créée avec Elementor
Pour styliser et paramétrer la fenêtre pop-up créée avec Elementor, on doit se rendre sur son panneau de paramétrage en cliquant sur la petite icône en forme d’engrenage en bas à gauche.
Réglages
Layout
Dans cette section vous allez pouvoir régler les dimensions de votre fenêtre pop-up…
- Width: vous permet d’ajuster sa largeur.
- Height: vous permet d’ajuster sa hauteur.
…ainsi que la Position d’affichage de la fenêtre pop-up lorsqu’elle va apparaître.
- Position verticale : à droite, au centre, à gauche.
- Position horizontale : en haut, au centre, en bas.
Vous trouverez les options de paramétrage suivantes :
- Overlay (recouvrir) : permet d’assombrir la page lorsque la pop-up s’affiche, c’est le choix par défaut vous pouvez enlever cet effet si vous le désirez.
- Close bouton : permet d’afficher une petite croix en haut à droite de la pop-up pour pouvoir la fermer.
- Entrance Animation : permet de choisir une animation au moment de l’affichage de la fenêtre.
- Exit animation : permet de choisir une animation au moment où l’on ferme la fenêtre (pop-up).
- Animation Duration (sec) : permet de choisir le temps que va durer l’animation.
Réglages généraux
Dans les réglages généraux, vous allez pouvoir :
Changer le titre de votre pop-up (pas le titre qui apparaît dans la fenêtre, mais celui qui vous permet de différencier cette pop-up d’une autre parmi les modèles que vous avez créé).
Changer l’état de publication.
- Publié.
- Privé.
- En attente de relecture.
- Brouillon.
Changer le Html tag (balise), utile pour ceux qui maîtrise le Html / Css.
Preview Settings
Vous permet de visualiser le résultat sur une page en particulier.
Styles
C’est ici que vous allez pouvoir affiner le style de votre pop-up.
Popup
- Type d’arrière-plan: styliser un arrière-plan avec une couleur de fond, un gradient ou une image.
- Type de bordure: sélectionner un type de bordure.
- Border Radius : créer des coins arrondis pour chaque côté des bordures.
- Ombre de boîte : ajuster l’ombre de la boîte.
Overlay
Cette option va vous permettre de changer le fond de la page lorsque la pop-up est active, à ne pas confondre avec Type d’arrière-plan qui lui prend effet uniquement sur la boîte de la pop-up.
Close button
Tous les paramètres du bouton de fermeture de la fenêtre pop-up.
- Position intérieure ou extérieure.
- Position verticale.
- Position horizontale.
- Couleur.
- Couleur de fond.
- Taille.
Avancé
L’onglet avancé permet de gérer le comportement de la pop-up.
Advanced
- Show Close Button After (sec): pour faire apparaître le bouton de fermeture après un certain délai (en seconde).
- Automatically Close After (ms): permet de fermer la fenêtre automatiquement après un certain délai (en millième de seconde).
- Prevent Closing on Overlay: empêche les visiteurs de fermer la fenêtre en cliquant sur la page, mais uniquement en cliquant sur la croix de fermeture.
- Prevent Closing on ESC Key: empêche les visiteurs de fermer la fenêtre en appuyant sur la touche ESC (echap) du clavier de leur ordinateur.
- Disable Page Scrolling: empêche le défilement de la page qui se trouve derrière la pop-up.
- Avoid Multiple Popups: empêche l’apparition de la pop-up si le visiteur en a déjà vu une durant sa visite.
- Open By Selector: entrez une liste de sélecteurs qui déclencheront manuellement la popup (ID ou Classes Css).
- Margin: permet d’ajuster les marges externes de la pop-up.
- Padding: permet d’ajuster les marges internes de la pop-up.
Custom CSS Classes
Permet de customiser la boîte de pop-up en changeant les valeurs de ses classe CSS.
Voir notre article sur Comment ajouter du CSS personnalisé avec Elementor ?
Intégrer une fenêtre pop-up créée avec Elementor et paramétrer ses conditions d’affichage
Maintenant que nous venons de créer une fenêtre contextuelle, on va devoir l’intégrer aux pages et articles de notre choix et gérer les conditions d’affichage.
Pour accéder à toutes les options de paramétrages de notre fenêtre pop-up on clique sur la flèche pointant vers le haut situé à côté du bouton Publier / Mettre à jour.
Plusieurs onglets apparaissent :
- Enregistrer le brouillon (faites-le si ce n’est déjà fait).
- Display Conditions.
- Triggers.
- Advanced Rules.
- Enregistrer comme modèle.
Display Conditions
Cet dans cet onglet que l’on va déterminer sur quelles pages, articles ou catégories la pop-up va se déclencher.
Triggers
Triggers va permettre de paramétrer sous quelles conditions la fenêtre contextuelle (pop-up) va apparaître.
- On Page Load :
- Pour déclencher la pop-up dès le chargement de la page.
- On Scroll :
- Pour déclencher la pop-up lorsqu’on fait défiler la page.
- On Scoll To Élément :
- Pour déclencher la pop-up lorsqu’on arrive sur élément précis de la page.
- On Click :
- Pour déclencher la pop-up après un certain nombre de clics sur la page.
- After inactivity :
- Pour déclencher la pop-up après un certain temps d’inactivité.
- On Page Exit Intent :
- Pour déclencher la pop-up au moment où le lecteur quitte la page.
Advanced Rules
L’onglet Advanced Rules permet de stipuler des paramètres encore plus précis pour déterminer quand afficher une pop-up.
- Show after X page views :
- Pour déclencher la pop-up après un certain nombre de pages visionner par un même lecteur.
- Show after X sessions :
- Pour déclencher la pop-up après un certain nombre de visites sur votre site par un même lecteur.
- Show up to X times :
- Pour déclencher la pop-up un nombre précis de fois. Chaque nombre correspond au nombre de fois ou le visiteur a fermé la pop-up.
- When arriving from a specific URL :
- Pour déclencher la pop-up quand le lecteur arrive sur un page depuis une page spécifique.
- Show when arriving from :
- Pour déclencher la pop-up quand le lecteur arrive sur votre site depuis un moteur de recherche, un lien externe ou un lien interne.
- Hide for logged in users :
- Permet de masquer la pop-up pour tous les utilisateurs connectés ou pour certains d’entre eux, admin, éditeur, auteur, etc.
- Show on devices :
- Permet de déterminer sur quelle taille d’écran la pop-up va se déclencher (PC, tablette, smartphone).
- Show on Browsers :
- Permet de déterminer sur quel navigateur la pop-up va se déclencher (tous, Internet Explorer, Firefox, Chrome, Safari).
