Création de la fenêtre
Pour se faire rendez-vous dans le back-office du site internet, dans le menu Modèles juste en dessous du menu Elementor cherchez le sous menu « fenêtres modales ».
Une fois dans ce menu vous allez créer une nouvelle fenêtre modale en cliquant sur « Ajouter » en haut à gauche.
Une fois que vous avez cliqué une nouvelle page s’ouvre :
Sur cette fenêtre vous allez uniquement renseigner le nom que vous souhaitez attribuer à la pop-up (= fenêtre modale).
Personnaliser la fenêtre
Une fois que vous avez cliqué sur « Créer » vous allez fermer la page proposant des modèles et vous arriverez sur une interface de création semblable à celle de création de pages :
Dans cette page vous allez pouvoir construire la fenêtre de la même manière qu’une page classique avec Elementor.
Dans notre cas j’ai simplement pris et glissé le bloc titre, image et bouton dans la fenêtre mais vous allez créer la pop-up dont vous avez besoin.
Personnalisation avancée de la fenêtre
Une fois que vous avez terminé de construire votre pop-up avec les blocs d’Elementor vous pouvez pousser la personnalisation encore un peu plus loin en vous rendant dans le menu « réglages » de la fenêtre (le petit rouage en bas à gauche).
Dans ce menu vous pouvez principalement gérer la taille, la position et l’animation d’entrée ou de sortie de la pop-up.
Dans la deuxième partie du menu il est possible de gérer la manière dont la fenêtre se superpose à la page mais aussi de changer certains réglages concernant le bouton de fermeture.
Dans l’onglet superposition vous pouvez choisir d’appliquer un fond uni ou un dégradé, sélectionner la couleur du fond ou bien une image si vous le souhaitez.
Dans cet onglet vous pouvez gérer toutes les options du bouton de fermeture (taille, position, couleur, comportement au survol, etc).
Dans le dernier onglet « Avancé » vous pouvez gérer certains comportements (fermeture ou affichage après X secondes, empêcher de fermer de telle ou telle manière, désactiver le défilement de page et éviter les fenêtres multiples).
Définir le comportement de la fenêtre
À la suite de ça vous allez devoir remplir certaines conditions afin de limiter l’apparition de votre pop-up.
Dans ce champ vous pouvez choisir ou afficher la fenêtre, de manière inclusive ou exclusive si vous le changez dans le premier bouton grisé avant la condition. Vous pouvez donc choisir d’afficher sur toutes les pages du site comme sur la capture d’écran et rajouter une deuxième condition afin d’exclure une page en particulier.
Dans cette page vous allez pouvoir choisir les éléments déclencheurs pour votre fenêtre, il vous suffit de cliquer sur les switchs en fasse de l’action afin que la fenêtre s’ouvre automatiquement suite à l’évènement choisi. Vous pouvez en avoir plusieurs d’activés en simultané.
Dans cette dernière fenêtre vous pouvez définir une condition d’activation spéciale si vous n’avez pas trouvé ce que vous souhaitez dans la page précédente.
Une fois que vous avez enregistré votre fenêtre modale sera publiée et elle s’affichera sur votre site internet.
Si le fonctionnement et l’utilisation de WordPress et d’Elementor vous intéressent pour la création de votre site web ou boutique en ligne, n’hésitez pas à utiliser le formulaire ci-dessous, pour prendre directement contact avec notre pôle WordPress, qui vous guidera étape par étape dans la mise en place des outils adaptés à votre projet.
