Les formulaires en popup peuvent être des outils marketing essentiels, vous permettant de capturer des adresses e-mail, de promouvoir des ventes, et plus encore. Cependant, il n’est pas toujours facile de créer des popups attrayantes et personnalisées dans WordPress.
Heureusement, l’extension de construction de pages Elementor facilite la création et la personnalisation des popups sur votre site web. Vous pouvez les adapter au design de votre site et ajouter des déclencheurs basés sur le comportement ou les origines des utilisateurs.
Ce guide donnera un aperçu des différents types de popups Elementor et des raisons pour lesquelles vous pourriez vouloir les utiliser. Ensuite, nous vous expliquerons comment créer ces popups avec les outils gratuits et Pro d’Elementor. C’est parti !
Une vue globale des popups Elementor
Elementor est l’une des extensions de construction de pages les plus populaires pour les sites web WordPress. Elle vous permet de glisser et déposer des éléments en place pour concevoir des pages magnifiques et conviviales :
En outre, Elementor vous permet de créer une variété de popups. Il s’agit de formulaires personnalisés qui apparaissent sur votre site après un temps prédéterminé, ou après qu’un utilisateur ait effectué une action particulière.
Les popups peuvent être des outils essentiels pour diverses raisons. Vous pouvez les utiliser pour collecter des prospects et élargir votre liste de marketing par e-mail. Les popups d’Elementor s’intègrent aux logiciels de marketing par e-mail, envoyant les adresses des clients directement à la plateforme de votre choix.
Vous pouvez même les utiliser pour promouvoir des ventes, des remises et des événements liés à votre boutique de commerce électronique. En tant que tels, les popups peuvent faire partie intégrante de votre stratégie marketing globale.
De plus, les popups peuvent vous aider à vous connecter avec vos clients. Vous pouvez intégrer des enquêtes pour demander l’avis des consommateurs et améliorer vos produits et services.
Cependant, les popups peuvent sembler intrusives si vous ne les concevez pas bien et ne choisissez pas les déclencheurs adéquats pour votre public. Par conséquent, vous devrez vous assurer que vous les utilisez efficacement. C’est là qu’intervient Elementor.
Types de popups Elementor
Elementor est livré avec plus de 100 modèles de popups que vous pouvez personnaliser selon vos besoins. Ces modèles comprennent :
- Formulaires de capture de prospects
- Popups d’inscription par e-mail
- Popups promotionnelles
- Formulaires de connexion et de bienvenue
- Popups à contenu restreint
- Formulaires de vente incitative et de vente croisée
Ces modèles de popups sont intégrés aux kits Elementor, qui comprennent diverses fonctionnalités de conception pour différents types de sites web :
En outre, vous pouvez choisir parmi différents placements de popups et conceptions visuelles, notamment :
- Modale
- Slide-in
- Plein écran
- Barre supérieure ou inférieure
Enfin, vous pouvez utiliser l’éditeur Elementor pour personnaliser rapidement n’importe quel modèle de popup en fonction de vos besoins. Nous allons maintenant vous expliquer comment vous pouvez le faire avec Elementor en version gratuite et Elementor Pro.
Comment créer une popup avec Elementor (gratuit)
Auparavant, l’extension Essential Addons for Elementor disposait d’une fonctionnalité Popup modale qui permet aux utilisateurs de créer un formulaire popup gratuit. Son utilisation était l’un des moyens les plus populaires pour éviter de payer Elementor Pro. Vous pouvez trouver de nombreux tutoriels vidéos datant de quelques années pour vous montrer comment utiliser cette méthode.
Cependant, la fonction gratuite Popup modale s’est transformée en un élément premium Visionneuse et modale. Son utilisation n’est plus gratuite. Par conséquent, vous devrez passer à Elementor Pro ou payer pour l’une des extensions Elementor premium que nous abordons plus loin dans cet article.
Comment créer une popup avec Elementor Pro (en 5 étapes faciles)
Elementor Pro est doté d’une fonction Popup intégrée que nous allons utiliser dans ce tutoriel. Vous devrez d’abord acheter et activer Elementor Pro. Ensuite, vous pouvez vous rendre sur votre tableau de bord WordPress pour commencer à créer des popups.
Étape 1 : Créez votre popup
Commencez par naviguer vers Elementor > Modèles > Popups dans votre tableau de bord WordPress. Ensuite, cliquez sur Ajouter pour en créer une nouvelle :
Vous serez ensuite invité à nommer votre modèle. Une fois que vous avez choisi un nom, sélectionnez CRÉER UN MODÈLE :
Ceci lancera le constructeur de pages Elementor. Vous pouvez maintenant choisir parmi les modèles de popup existants ou créer le vôtre à partir de zéro. Dans notre exemple, nous avons choisi l’un des modèles existants à modifier :
Vous pouvez maintenant jouer avec les réglages de design pour personnaliser votre popup. Par exemple, vous pouvez modifier sa disposition, son alignement, ses images d’arrière-plan et ses couleurs.
Étape 2 : Choisissez vos conditions d’affichage
Une fois que vous êtes satisfait de votre conception, cliquez sur la flèche orientée vers le haut à côté de PUBLIER. Ensuite, sélectionnez Conditions d’affichage dans le menu qui apparaît :
Ensuite, cliquez sur Ajouter pour choisir l’endroit où votre popup Elementor s’affichera sur votre site web. Vous pouvez ensuite sélectionner un emplacement parmi les options suivantes : Site entier, Archives, Individuel, ou WooCommerce :
Lorsque vous êtes satisfait de votre choix, cliquez sur SUIVANT. Vous serez dirigé vers les déclencheurs de votre formulaire popup.
Étape 3 : Configurer les déclencheurs de votre popup
Sur la page des déclencheurs, vous pouvez décider ce que les utilisateurs doivent faire pour afficher votre popup Elementor. Par défaut, chaque option est désactivée, et vous pouvez l’activer en cliquant sur le curseur. Ensuite, vous devrez spécifier des valeurs pour votre déclencheur.
Par exemple, si vous optez pour l’option Au chargement de la page, vous devrez choisir dans combien de secondes votre popup s’affichera :
Avec Au défilement, vous pouvez choisir dans quelle direction l’utilisateur doit faire défiler et quelle partie de la page il doit couvrir avant que la popup n’apparaisse :
Le réglage Au défilement sur l’élément vous demande de saisir un ID CSS. Lorsqu’un utilisateur atteint cet élément sur votre page, la popup apparaît :
Avec Au clic, vous devrez spécifier combien de fois un utilisateur doit cliquer sur votre site web avant que la popup ne s’affiche :
Le réglage Après l’inactivité vous permet de déclencher votre popup après que l’utilisateur soit resté inactif sur votre page pendant un laps de temps donné :
Enfin, vous pouvez choisir d’activer l’Intention de sortie de la page. Ce réglage déclenchera votre popup lorsqu’un utilisateur tentera de quitter votre page :
Cliquez sur Enregistrer et fermer ou Suivant pour naviguer vers les règles avancées lorsque vous avez terminé. Nous examinerons ces règles un peu plus tard dans ce tutoriel.
Étape 4 : Ajouter un bouton popup à votre site (facultatif)
Vous pourriez vouloir déclencher votre popup Elementor lorsqu’un utilisateur clique sur un élément spécifique de votre page. Par exemple, vous pouvez concevoir un bouton qui dit « Inscrivez-vous maintenant » et l’intégrer dans votre pied de page. Lorsqu’un utilisateur clique sur le bouton, il voit apparaître sur son écran votre formulaire d’inscription par e-mail.
Tout d’abord, vous devez créer un bouton Elementor sur votre site web. Ouvrez l’article ou la page dans l’éditeur Elementor et choisissez Bouton dans le menu. Faites-le glisser et déposez-le sur votre page :
Une fois que vous avez spécifié le texte du bouton et personnalisé son apparence, cliquez sur Lien > Balises dynamiques. Ensuite, choisissez Actions > Popup dans le menu déroulant :
Cliquez sur Popup et choisissez Ouvrir popup dans le menu déroulant Action . Vous pouvez également sélectionner votre formulaire dans le menu Popup :
Enfin, sélectionnez MISE À JOUR pour publier votre bouton. Chaque fois qu’un utilisateur cliquera dessus, il sera dirigé vers votre formulaire d’inscription.
Étape 5 : Enregistrez vos modèles de popups pour plus tard
Vous pouvez également enregistrer vos popups en tant que modèles. Ouvrez votre popup avec l’éditeur Elementor et cliquez sur la flèche vers le haut à côté de MISE À JOUR. Choisissez Enregistrer comme modèle dans le menu :
Vous serez ensuite invité à nommer votre modèle. Lorsque vous avez terminé, cliquez sur Enregistrer :
La popup sera enregistrée dans votre bibliothèque de modèles. Vous pouvez maintenant l’utiliser lorsque vous construisez une page ou un article avec des modèles.
Comment configurer les réglages avancés de popup Elementor
Nous avons déjà vu comment créer une popup Elementor de base. Cependant, il existe également certains réglages avancés que vous pourriez vouloir utiliser.
Ouvrez à nouveau votre popup avec l’éditeur Elementor et naviguez vers Règles d’affichage. Jetons un coup d’œil aux différents réglages.
Réglages d’affichage de popup
Certains réglages avancés d’affichage de popup vous permettent de contrôler le moment où les utilisateurs voient votre formulaire. Ces configurations peuvent être pratiques pour cibler les visiteurs de retour plutôt que ceux qui viennent pour la première fois.
Par exemple, vous pouvez choisir d’afficher votre popup après que votre visiteur ait consulté votre page un certain nombre de fois :
Vous pouvez également choisir Afficher après X sessions. Ce réglage cible l’ensemble des visites plutôt que des pages spécifiques :
Le réglage Afficher jusqu’à X fois peut limiter le nombre de fois où les utilisateurs verront votre popup. Vous pouvez envisager de l’activer si vous ne voulez pas spammer continuellement les visiteurs avec des formulaires intrusifs :
Vous pouvez également utiliser les réglages Afficher sur les appareils et Afficher sur les navigateurs pour limiter l’endroit où votre popup apparaîtra. Les popups peuvent être particulièrement intrusives sur les appareils mobiles, vous pouvez donc envisager de les désactiver à cet endroit :
Offrir une meilleure expérience utilisateur mobile peut rendre vos visiteurs heureux. Cela peut également stimuler vos efforts d’optimisation des moteurs de recherche (SEO) et aider votre site web à être mieux classé dans les résultats de recherche.
Réglages d’origine de l’utilisateur
Enfin, Elementor vous permet de configurer les réglages d’affichage des popups en fonction de l’origine de vos utilisateurs. Ces réglages peuvent être pratiques si vous dirigez les visiteurs vers une page de destination promotionnelle et que vous utilisez ensuite votre popup pour annoncer des offres ou demander des coordonnées.
Les réglages suivants vous permettent de spécifier des URL et de choisir les liens qui déclencheront les popups :
Enfin, vous pouvez choisir de masquer vos popups aux utilisateurs connectés. Vous pouvez utiliser ce réglage si vous gérez un site web d’adhésion payant :
Lorsque vous êtes satisfait de tous les réglages que vous avez choisis, cliquez sur Enregistrer & fermer. Vous pouvez revenir ici et modifier l’une de ces configurations si nécessaire.
Les 3 meilleurs plugins pour les popups Elementor
Comme nous l’avons vu, Elementor Pro permet de créer facilement des popups pour votre site web. Cependant, vous n’êtes peut-être pas prêt à passer au constructeur de pages premium. Ou bien, vous recherchez peut-être des fonctionnalités de conception supplémentaires.
Voici quelques-uns des meilleures extensions pour popups Elementor en prenant en compte ces considérations.
1. JetPopUp (Crocoblock)
JetPopUp est une extension conviviale doté d’une interface en glisser-déplacer qui s’intègre parfaitement à Elementor. Elle vous permet de créer des formulaires popup dynamiques et personnalisés, notamment des inscriptions par e-mail, des formulaires de consentement aux cookies et des comptes à rebours.
JetPopUp brille par ses fonctionnalités interactives. Vous pouvez choisir parmi plusieurs réglages d’animation, tels que le glissement, le retournement et la rotation. De plus, l’extension dispose de divers modèles que vous pouvez personnaliser selon vos besoins.
Cette extension vous permet également de sélectionner et de personnaliser plusieurs réglages d’affichage. Par exemple, vous pouvez montrer vos formulaires JetPopUp aux utilisateurs à des dates particulières lorsqu’ils essaient de quitter votre site web, ou après une certaine quantité de défilement.
Caractéristiques :
- Choisissez parmi les modèles de popup prédéfinis
- Sélectionnez différentes conditions d’affichage des popups
- Inclure et exclure des conditions spécifiques
- Utilisez des effets d’animation
Prix : JetPopUp coûte 22 $ par an. Ce forfait comprend l’intégration de MailChimp, un widget popup et une assistance client. Vous pouvez également passer à un abonnement tout compris pour 130 $ par an. Il est livré avec 20 extensions et 150 widgets supplémentaires.
2. Popup Box Widget (PowerPack)
Si vous recherchez des réglages avancés pour les popups Elementor, envisagez d’utiliser Popup Box Widget de PowerPack. Cela vous permet de construire des popups personnalisées qui incluent des éléments dynamiques tels que des vidéos, des images et des cartes Google.
Cette extension vous permet de déclencher des popups en fonction de diverses actions de l’utilisateur, notamment l’intention de sortie et des délais personnalisés. Vous pouvez également créer des popups interactives en deux étapes avec des liens et d’autres éléments d’appel à action (Call to Action ou CTA).
En outre, Popup Box Widget dispose de réglages d’animation avancés. Vous pouvez faire en sorte que vos popups zooment, utilisent le formatage des journaux, ou utilisent des animations 3D.
Caractéristiques :
- Choisissez parmi les effets d’animation
- Créez des popups en deux étapes
- Utilisez des délais et des déclencheurs utilisateur
- Affichez des images, des vidéos et d’autres éléments interactifs
Prix : Popup Box Widget est inclus dans un abonnement PowerPack. Les forfaits commencent à 49 $ par an et sont accompagnés de plus de 70 widgets Elementor différents.
3. Lightbox & Modal (Essential Addons for Elementor)
Nous avons brièvement abordé cette extension Elementor plus tôt. Lightbox & Modal est un widget polyvalent de l’outil Essential Addons for Elementor. Il vous aide à créer des popups avec des fonctionnalités interactives comme des vidéos, des images et des animations.
Lightbox & Modal est conçu pour fonctionner avec des boutons et des liens sur votre site web Elementor. Vous pouvez créer des boutons, des icônes et du texte personnalisés qui déclenchent vos formulaires popup. En outre, le widget peut utiliser des délais et d’autres actions de l’utilisateur.
Globalement, Lightbox & Modal pourrait être la meilleure option pour interagir avec vos utilisateurs plutôt que de simplement présenter des informations.
Caractéristiques :
- Utilisez des boutons déclencheurs pour les fenêtres popup
- Affichez des images, des vidéos et du contenu personnalisé
- Personnalisez la mise en page des popups
- Choisissez parmi différents types d’animation
Prix : Lightbox & Modal est inclus dans Essential Addons for Elementor Pro. Les plans commencent à 39,97 $ par an et proposent plus de 70 widgets et sept extensions.
Résumé
Les formulaires popup peuvent être essentiels à vos campagnes de génération de prospects et de marketing. Ils peuvent également vous aider à interagir avec les visiteurs et à les garder sur votre page. Heureusement, vous pouvez créer des popups personnalisés avec le constructeur de pages Elementor.
Il est très facile de créer des popups avec Elementor Pro. Vous pouvez les personnaliser pour qu’elles correspondent à votre image de marque et décider de l’endroit où elles s’affichent sur votre site. Vous pouvez également définir des réglages d’affichage avancés pour afficher votre popup en fonction des actions et des origines de l’utilisateur.
La conception d’un beau site web avec Elementor n’est que la première étape. Vous aurez également besoin d’un hébergeur d’applications, d’un hébergeur de bases de données et d’un hébergeur WordPress infogéré de votre côté.
Consultez nos plans tarifaires dès aujourd’hui pour voir comment Kinsta peut booster votre site !
Laisser un commentaire