Salut les gars,
Il existe des outils spécialisés pour créer des popups. L'un des constructeurs de Popup les plus connus est Thrive Leads. Bien que cela fonctionne très bien, ils ont à chaque fois un itinéraire plus petit puisque les Page Builders mangent le sol. Pourquoi utiliser deux plugins si on peut tout faire avec un seul ?
Dans cette vidéo, nous allons voir comment créer des Popups avec Elementor Pro.
Pour suivre le tutoriel il vous faut :
S'abonner à mon canal :
Les Popups peuvent-ils être créés avec Elementor de base ?
Dans ce tutoriel, nous verrons comment le faire avec Elementor Pro et dans le prochain tutoriel nous le ferons avec un autre merveilleux plugin WordPress : JetPopup par CrocoBlock.
Dans les deux cas, ils sont plugin premium, c'est-à-dire payant.
Nous commençons
Une fois Elementor pro installé, vous pouvez trouver l'option de créer des Popups dans Templates -> Popups
S'il ne vous permet pas d'ajouter des POPUPS, c'est que vous n'avez pas installé Elementor Pro
Au lieu de cela, si vous avez activé Elementor Pro, vous le verrez comme ceci :
Quand on clique sur Ajouter un nouveau véhicule Cela nous permettra de donner un nom à notre popup :
On clique sur Créer un modèle et ici, nous pouvons choisir un popup déjà créé, c'est-à-dire utiliser un modèle parmi les nombreux qu'Elementor Pro a :
Rappeler
Pour pouvoir utiliser les modèles, vous devez disposer d'un licence active de Elementor Pro.
Une fois le modèle inséré, nous entrerons dans l'éditeur Elementor avec la conception contextuelle pratiquement prête :
Dans cette vidéo, je ne vais pas entrer dans les détails du design du popup mais nous pouvons modifier chaque partie du popup, y compris le bouton de fermeture ou le X typique.
Attention!
Lorsque vous créez un Popup avec un formulaire, il est très important que cChaque champ du formulaire a un ID puisque si vous le laissez vide cela vous donnera une erreur lors de l'utilisation du Popup.
Cela m'a rendu très fou jusqu'à ce que je le découvre 😉
L'ID se trouve dans le champ -> Avancé -> ID
Si vous le laissez vide, l'utilisation de la fenêtre contextuelle vous donnera l'erreur "Une erreur s'est produite".
Une fois la popup créée, vient la partie la plus importante, le comportement que nous voulons que notre popup ait.
Pour cela, Elementor Pro nous propose les options suivantes :
Conditions, déclencheurs et règles avancées (Conditions, déclencheurs et règles avancées)
Lorsque nous cliquons sur publier notre Popup, l'écran suivant apparaît :
Si cet écran n'apparaît pas ou que vous l'avez fermé, vous pouvez y revenir depuis la petite flèche à droite de Mettre à jour :
Conditions
Ici, nous devons choisir où sur notre site Web nous voulons que le popup soit vu.
Cela peut être sur tout le Web, dans un article spécifique, dans une catégorie, tout ce dont nous avons besoin :
Déclencheurs
Un popup est un élément spécial, car il n'apparaît pas sur le Web tant qu'un événement ne se produit pas.
Il peut apparaître lorsqu'un certain temps s'écoule, lorsque l'utilisateur a fait défiler, après une période d'inactivité ou lorsque l'utilisateur souhaite quitter le Web.
Dans cette option, nous choisissons quel est l'événement qui déclenche le popup :
Règles avancées
Non seulement nous pourrons choisir un déclencheur, mais nous pourrons également choisir à quels moments spécifiques nous voulons que le Popup apparaisse.
Nous pouvons faire en sorte que la fenêtre contextuelle s'affiche après que l'utilisateur a vu un nombre spécifique de pages, de sessions ou après qu'il nous a visité X fois.
Nous pouvons également faire en sorte que la fenêtre contextuelle ne s'affiche que pour les visites provenant d'un moteur de recherche ou uniquement pour un navigateur spécifique.
Masquez même la popup si l'utilisateur est connecté :
Les règles avancées sont très importantes car nous ne pouvons pas ignorer qu'un Popup est un élément gênant pour de nombreux utilisateurs et grâce aux règles avancées, nous pouvons considérablement limiter qui nous interrompons.
Intégration avec les services de marketing par e-mail
Par défaut, lorsque vous collectez des e-mails avec une fenêtre contextuelle, ils seront enregistrés sous Recueillir les soumissions.
Cette option se trouve dans Elementor -> Soumissions :
Bien qu'utile, ce n'est pas le meilleur endroit pour tirer le meilleur parti des e-mails collectés.
La chose la plus normale est que vous utilisiez un service professionnel de marketing par e-mail.
Elementor a une intégration directe avec de nombreux services de marketing par e-mail :
- Mailchimp
- Goutte
- ActiveCampaign
- GetResponse
- Kit de conversion
- MailerLite
Pour les utiliser, il suffit d'ajouter la clé API du service correspondant.
Vous avez l'option dans Elementor -> Paramètres -> Intégrations
Une fois que vous avez connecté votre outil, vous pouvez faire en sorte que les données collectées sur le Web soient envoyées automatiquement au service sélectionné dans l'option Actions après la soumission
Chaque fois que vous en sélectionnez une, de nouvelles options apparaîtront ci-dessous :
Et si nous nous déplions, nous pouvons voir choisir les options spécifiques de chaque service.
Que faisons-nous si le service de marketing par e-mail que j'utilise n'est pas sur Elementor ?
C'est à ça que servent les Webhooks 😉
Webhooks dans Elementor Pro
Cette option peut sembler très compliquée mais elle est plus simple qu'il n'y paraît.
Si nous sélectionnons l'option Webhook dans Actions après la soumission L'option URL Webhook apparaîtra
Nous devons trouver l'URL du Webhook dans le service de marketing par e-mail spécifique que nous utilisons.
Dans mon cas, j'utilise Encharge comme service de marketing par e-mail.
En Recharger C'est très simple, je crée un nouveau flux, j'ajoute un formulaire :
Un clic sur le premier élément, le formulaire, affiche les options et nous donne l'url du Webhook :
Il s'agit de l'URL à ajouter dans Elementor pour envoyer les inscrits à Encharge.
Important
Chaque outil de marketing par e-mail aura l'URL Webhook à un endroit différent, vous devriez consulter l'aide.
J'espère que cela vous a été utile.
salutations