Cet article prend environ 8 minutes à lire en intégralité.
L Les popups deviennent vite agaçantes et font fuir tes lecteurs.
D’un autre côté, elles sont diablement efficaces pour provoquer l’action : la moitié des inscrits de ma newsletter sont passés par la popup.
Profite des bénéfices des popups sans perturber l’expérience de tes visiteurs :
- Tu t’adaptes aux usages des visiteurs sur mobiles et sur ordinateur.
- Tu mets en avant ton offre du moment, un code de réduction pour le premier achat, un livre blanc, ta newsletter…
- Tes popups sont élégantes et s’harmonisent avec le design de ton site.
Je te montre dans ce tutoriel toutes les étapes pour disposer facilement de popups esthétiques avec une extension WordPress.
Sommaire
Les extensions de popups sur WordPress fonctionnent sur un modèle freemium et plus rarement en premium. La majorité des créateurs conservent les fonctionnalités les plus intéressantes aux versions payantes.
Les alternatives écartées
- OptinMonster : 47 $/mois pour la fonctionnalité de détection de la sortie (exit intent)
- Popup Maker : exit intent et déclenchement au défilement (scroll) à 87 $/an
- Popup Builder : 15 $/an pour l’exit Intent et 17 $/an pour le scroll
- Elementor Pro est une bonne option si vous l’utilisez déjà : 49 $/an
- Yeloni : Les filtres des pages et des mobiles à 99 $/an
- Sumo : Son poids ralentit considérablement les sites
Hustle présente des tarifs élevés en payant (49 $ /mois) mais ils se montrent bien plus généreux dans la version gratuite.
Pourquoi j’ai choisi Hustle ?
Tu crées gratuitement 3 popups. Hustle ne limite pas les fonctionnalités en dehors des tests A/B. Tu commences à expérimenter des actions marketing spécifiques et ciblées avec la version gratuite.
Les 100 000 installations actives, la note de 4,5 / 5 étoiles et la fréquence des mises à jour valident la pertinence d’utiliser cette extension. Plugintests.com estime que l’impact sur la vitesse de ton site sera à peine ressenti. Hustle fonctionne avec tous les thèmes WordPress.
Le récapitulatif des fonctionnalités
✅
- Les designs
- Le paramétrage avancé
- Les intégrations avec les outils de routage d’e-mails
❌
- En anglais
- Pas d’éditeur visuel (WISIWIG)
- A/B testing payant
Voyons ce que cela donne en pratique.
Installe et paramètre Hustle
Tu installes et tu actives le plugin Hustle – Email Marketing, Lead Generation, Optins, Popups depuis le répertoire de WordPress.
Nous commençons par les paramétrages généraux qui ne prennent que quelques minutes dans Settings.
Les règles de gestion des données privées pour le RGPD (Viewer’s Privacy)
Tu désactives le suivi des IP. J’ai également mis 0 jour de rétention par sécurité.
Tu sauvegardes.
Ta palette de couleurs personnalisée (Color Palettes)
Cette option peut-être intéressante si tu comptes créer de nombreuses fenêtres surgissantes mais tu ne vois pas trop à quoi correspondent les intitulés au début.
Le suivi des résultats (Top 3 Metrics)
Tu sélectionnes 3 indicateurs qui remontent dans la synthèse en fonction de tes objectifs.
- Le taux de conversion moyen (Average conversion rate)
- Le nombre de conversions de la journée par module (Today’s conversion)
- Le nombre de conversions des 7 derniers jours par module (last 7 days’s conversion)
- Le nombre de conversions du dernier mois par module (last 1 month’s conversion)
- Somme totale depuis l’origine (Total conversions)
- Le module le plus performant (Most conversions)
- Les modules inactifs (Inactive modules)
- Le volume total de modules (Total modules)
Tu remontes les données directement dans ton tableau de bord de WordPress en l’activant dans Dashboard Analytics.
Tu nommes ton tableau, tu définis les rôles qui peuvent y accéder et les modules à faire figurer avant de sauver.
Il ne me semble pas nécessaire de toucher aux autres réglages.
Crée ta pop-up sur WordPress avec Hustle
Hustle permet de créer des boutons de partage et de collecter des e-mails au sein de pages et des articles. Je vais me concentrer sur la création de pop-ups. Les slide-ins sont des pop-ups qui ne couvrent qu’une fraction de la page. Le fonctionnement est identique.
Tu crées ta première popup.
Tu nommes ton modèle et tu choisis ton objectif :
- Collecter directement les e-mails dans la fenêtre (Email optin)
- Présenter un bouton d’action (Informational)
J’intègre un bouton vers la page de ma newsletter et non une zone de saisie.
La première raison : SendFox, que j’utilise, n’est pas intégré.
Je peux passer par Zapier. Cependant, j’aurais quand même choisi cette option. J’ai trop souvent été obligé de réactiver les connexions lors des mises à jour des solutions d’e-mailing avec mes précédents outils.
Les services de routage d’e-mails directement intégrés dans Hustle.
- AWeber
- ActiveCampaign
- Campaign Monitor
- MailChimp & MailChimp groups
- Constant Contact
- ConvertKit
- GetResponse
- Mailster
- Hubspot
- Sendy
- Mad Mimi
- Mautic
- Infusionsoft
- SendinBlue
- MailPoet
- MailerLite
- iContact
- Zapier
- SendGrid
Tu choisis l’un des 16 modèles ou tu crées depuis une page blanche.
Je sélectionne le minimaliste.
Tu visualises le résultat attendu avec preview.
Je te conseille de réaliser une capture d’écran que tu conserves de côté ou que tu imprimes pour visualiser les éléments et leurs emplacements. Tu rédiges tes textes en amont pour gagner du temps. Tu enregistres l‘image pour connaître les dimensions optimales.
Personnalise les textes de ta popup
Tu retrouves la prévisualisation qui intègre tes modifications au fur et à mesure.
Tu complètes tes textes et tu intègres ton image.
Certains éléments peuvent être désactivés comme les boutons ou la phrase « Non merci, je ne suis pas intéressé. » située en dessous.
Tu complètes le texte de ton bouton, la page de destination et si tu souhaites un affichage dans un nouvel onglet (New tab).
Designe ta pop-up : mise en forme, couleurs et typographie
Tu définis l’apparence de ton visuel. La majorité des réglages se font sur l’onglet ordinateur (Desktop) et les ajustements dans l’onglet Mobile.
Tu peux changer toutes caractéristiques de ton visuel et du bouton : taille, emplacement… C’est à manier avec prudence pour éviter de dénaturer les modèles qui fonctionnent bien visuellement.
Tu définis une police unique pour l’ensemble des textes ou tu définis la typographie de chaque élément.
Tu choisis une palette par défaut (voire celle que tu as créée) ou tu définis les couleurs des éléments :
- Pop-up Container : fond transparent qui entoure la popup
- Main Layout : fond
- Featured Image : image
- Content Wrapper : zones de textes
- Title : titre
- Subtitle : sous-titre
- Main Content : texte principal
- Call to Action – Container : bordure du bouton
- Call To Action – Button : bouton
- Close Button : bouton de fermeture
- « Never see this again » Link : texte de fermeture sous le message
Filtre les conditions d’affichage de ta popup
Tu établis les règles d’affichage de ton message en fonction de conditions. C’est l’occasion de procéder à un ciblage pointu en fonction de tes objectifs.
C’est plus simple de définir quand ta popup apparaît avec Show que de préciser quand elle ne s’affiche pas avec Hide.
Ton message est déclenché si l’ensemble des conditions s’appliquent (all) ou seulement si une est respectée (any).
Tu peux décider de ne l’afficher que pour des articles et pas les pages. Je retiens trois filtres très utiles :
- Le choix de certaines catégories
- Le type d’appareil : ordinateur ou mobiles (y compris tablettes)
- Des urls spécifiques
Les options s’affichent une fois les filtres sélectionnés.
J’ai ici un affichage uniquement sur les mobiles qui exclut trois pages.
Déclenche tes popups au bon moment
Il est préférable de ne pas multiplier les déclencheurs pour éviter les affichages intempestifs sur une page.
Je commence par créer une version spécifique pour les mobiles avant de l’adapter pour les ordinateurs.
Tu programmes l’affichage pendant une période, sur des heures ou des jours spécifiques.
Tu déclenches l’apparition de la fenêtre après un délai de présence sur la page. Il est paramétré par défaut pour apparaître dès la fin du chargement de la page. Tu retrouves fréquemment ce cas sur les sites d’e-commerce avec un code promotionnel pour le premier achat.
Tu définis un pourcentage de défilement de ta page. J’utilise cette option sur mobile car la détection de sortie n’est disponible que sur ordinateur. Tu peux également définir un élément spécifique de ta page comme signal d’activation.
Mes réglages pour ma popup sur mobiles.
Tu règles la fermeture dès que les visiteurs cliquent à l’extérieur de la zone et quand l’action désirée est effectuée.
Tu répètes l’instruction de fermer la pop-up lors d’un clic à l’extérieur en plus du clic sur la croix.
Tu indiques de ne plus afficher le message ensuite pendant une durée définie. Cette option active la dépose d’un cookie réglementé par le RGPD.
Tu n’autorises pas le défilement du site quand ta popup est active. Tu n’affiches plus le message après la conversion (cookie).
Tu publies ton œuvre.
Tu retrouves tes pop-ups actives dans le menu.
Tu cliques sur la roue pour dupliquer ton modèle.
Je paramètre ma version destinée aux ordinateurs.
Je conserve le délai de 10 minutes et ajoutes une détection d’intention de sortie du site.
Voici le résultat sur ordinateur
et sur mobiles.
Il te reste un dernier réglage. Tu sélectionnes tes pop-ups et tu actives le suivi des conversions.
Tu testes la mise en place sur ton site. Tu vides ton cache si elles n’apparaissent pas.
Conclusion
J’ai trouvé toutes les options que je recherchais avec Hustle :
- Une apparition précise en fonction des versions mobile et ordinateur
- La détection de l’intention de partir du site
- Un suivi simple des résultats
- Des modèles esthétiques
Le seul vrai défaut est l’absence d’une adaptation visuelle en direct sur les visuels.
Des popups élégants qui ne ruinent pas l'expérience des visiteurs sur WordPress. Cliquez pour tweeterAssurer la relève de Sumo puis de Yeloni s’est révélé complexe. Je suis passé de déceptions en déconvenues lors des tests :
- trop complexes
- des designs peu attractifs
- une limitation du nombre de visiteurs…
Pour t’inspirer, tu trouveras 25 exemples de designs de popups dans cet article de La Fabrique Du Net.
Les articles qui peuvent t’intéresser :
- Rédige un e-mail de bienvenue efficace
- Découvre SendFox pour router ta newsletter et tes e-mails
- Utilise une série d’e-mails pour convertir tes abonnés et accompagner tes acheteurs
Retrouve tous autres tutoriels de la rubrique Attirer des visiteurs sur ton site
Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.
Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.
Jean
5 réponses à “Des popups élégantes pour promouvoir ta newsletter, tes offres… sur WordPress”
bonjour
j’ai regardé le tuto sur Utube, mais je ne trouve pas comment faire à partir créer un lien à partir d’un texte ou autre qui m’ouvre le pop up, par exemple, inscrivez vous à la newsletter, bim, on clique dessus, et le pop up s’ouvre
comme ici
https://www.urbandressing.com/
en bas en cliquant sur livraison offerte, le pop up s’ouvre. avec Hustle, je ne trouve pas
merci !!!
Bonjour Jean,
Je dévore ton site avec intérêt, depuis que je l’ai découvert.
Personnellement, j’utilise Bloom (https://www.elegantthemes.com/plugins/bloom/), et j’en suis très content. Je suis étonné que tu n’en parles pas, alors je signale ici son existence.
Je l’ai un peu modifié, afin de ne pas déclencher la popup à chaque page article (je trouve ça énervant), mais seulement sur le premier, à l’aide d’un cookie.
@+
@+
Bonjour Olivier,
Je te remercie de partager tes outils. C’est toujours un plaisir de découvrir d’autres idées.
J’ai sélectionné uniquement les extensions freemium qui permettent de tester l’outil avant d’éventuellement l’acheter. Je pense que Bloom est une excellente option pour les utilisateurs de DIVI.
Excellente journée,
Jean
Ca marche même sur mon site, qui ne tourne pas avec DIVI.
Sympa de recevoir les réponses à mes commentaires directement sur mon mail.
Tu utilises quoi comme plugin pour cela ? Je ne crois pas que ce soit natif.
J’hésite à activer les commentaires sur mon site. Beaucoup de spam pour pas grand’chose.
A terme ça ralentit le site, gain SEO pas prouvé, etc…
Ca marche même sur mon site, qui ne tourne pas avec DIVI.
Sympa de recevoir les réponses à mes commentaires directement sur mon mail.
Tu utilises quoi comme plugin pour cela ? Je ne crois pas que ce soit natif.
J’hésite à activer les commentaires sur mon site. Beaucoup de spam pour pas grand’chose.
A terme ça ralentit le site, gain SEO pas prouvé, etc…