Des popups élégantes pour promouvoir ta newsletter, tes offres… sur WordPress

/

article popup wordpress

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.

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 ?

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

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.

extension WordPress hustle popup

Nous commençons par les paramétrages généraux qui ne prennent que quelques minutes dans Settings.

menu paramétrages hustle

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é.

suppression tracking des ip

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.

palette couleurs personnalisée
création d'une palette de couleurs personnalisée dans l'extension Hustle

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)
choix des données de la synthèse

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.

synthese tableau bord wordpress
configuration de la synthèse d'hustle dans le tableau de bord dewordpress

Il ne me semble pas nécessaire de toucher aux autres réglages.

Crée ta pop-up sur WordPress avec Hustle

La création de 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.

menu popup hustle
création de 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)
nommes ton modèle

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.

hustle 16 modèles de popups

Je sélectionne le minimaliste.

hustle modèle de popup 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

Personnalise les textes de ta popup

Tu retrouves la prévisualisation qui intègre tes modifications au fur et à mesure.

prévisualisation du travail en cours

Tu complètes tes textes et tu intègres ton image.

personnalisation des textes et de l'image de la popup

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).

bouton popup personnalisation

Designe ta pop-up : mise en forme, couleurs et typographie

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.

Apparence popup sur ordinateur

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.

design des éléments

Tu définis une police unique pour l’ensemble des textes ou tu définis la typographie de chaque élément.

définir la typographie popup hustle

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
personnalisation des couleurs de la popup hustle

Filtre les conditions d’affichage de ta popup

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).

définir les conditions d'affichage de la popup

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
conditions hustle

Les options s’affichent une fois les filtres sélectionnés.

J’ai ici un affichage uniquement sur les mobiles qui exclut trois pages.

exemple de filtres sur hustle

Déclenche tes popups au bon moment

Les déclencheurs des popups

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.

programmer les popup
choix dates et jours

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.

déclencheur de popup en fonction du temps

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.

pourcentage de scroll

Mes réglages pour ma popup sur mobiles.

réglages 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.

méthodes clôture du popup

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.

clôture du popup

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).

réglages additionnels

Tu publies ton œuvre.

publier ta popup

Tu retrouves tes pop-ups actives dans le menu.

Tu cliques sur la roue pour dupliquer ton modèle.

dashboard popup

Je paramètre ma version destinée aux ordinateurs.

seulement sur ordinateurs

Je conserve le délai de 10 minutes et ajoutes une détection d’intention de sortie du site.

déclencheurs sur ordinateur

Voici le résultat sur ordinateur

rendu popup sur ordinateur

et sur mobiles.

rendu popup sur mobiles

Il te reste un dernier réglage. Tu sélectionnes tes pop-ups et tu actives le suivi des conversions.

activer 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 tweeter

Assurer 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.

signature de Jean du site pour pas un rond

Les articles qui peuvent t’intéresser :

Retrouve tous autres tutoriels de la rubrique Attirer des visiteurs sur ton site

bannière pour l'inscription à la newsletter
portrait jean

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

Découvre Hustle, une extension WordPress pour créer facilement des popups élégantes.
Un tutoriel pas à pas pour ajouter gratuitement des popups élégantes sur ton site WordPress.

5 réponses à “Des popups élégantes pour promouvoir ta newsletter, tes offres… sur WordPress”

  1. 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 !!!

  2. 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…

Répondre à Voyage parapente Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *