Aujourd’hui, vous allez découvrir un plugin gratuit, Popup Maker, qui permet de créer une popup sur WordPress très facilement.
Je sais que vous êtes nombreux à utiliser une pop-up pour promouvoir votre newsletter ou vos réseaux sociaux et j’espère que cet article vous aidera à en mettre une en place.
Installer le plugin Popup Maker
Rendez-vous dans le menu Extensions > Ajouter de WordPress et recherchez « Popup Maker », puis installez le plugin et n’oubliez pas de l’activer ensuite (en cliquant simplement sur le bouton bleu Activer).
Il est possible que vous voyiez apparaître un message indiquant « La dernière version de Popup Maker nécessite des modifications des paramètres de Popup Maker enregistrés sur votre site ». Si c’est le cas, cliquez sur « Modifications en cours » pour lancer ces modifications.
Elles permettent notamment de mettre à jour les thèmes par défaut qui sont proposés pour le design de vos popups.
Le plugin crée un nouveau menu dans votre administration WordPress.
Configurer PopupMaker pour WordPress
Nous allons commencer le paramétrage du plugin Popup Maker par le menu « Réglages ».
Menu « Général » de PopupMaker
Vous pouvez ici choisir un thème de pop-up par défaut. Le plugin en propose 6 à l’installation et vous êtes libre d’en ajouter d’autres (via le menu Popup Maker > Thèmes Popup de l’administration de WordPress). Vous pouvez avoir un aperçu de ces thèmes par défaut sur le site du plugin.
Les plus « communs » visuellement sont probablement le thème par défaut, le thème Lightbox et le thème Enterprise Blue, que vous pouvez découvrir ci-dessous.
Vous pouvez cocher la case « Activer le support Gutenberg » si vous souhaitez utiliser l’éditeur Gutenberg (qui est maintenant l’éditeur par défaut de WordPress) pour personnaliser le contenu des pop-ups.
Vous pouvez enfin entrer une clé API Google vous permettant d’importer les polices Google (Google Fonts) pour mettre en forme le texte de vos popups si vous le souhaitez. Retrouvez plus d’informations sur la manière de générer cette clé API sur le site de Google.
Menu « Souscriptions » de PopupMaker
Ce menu peut vous servir si vous utilisez une solution de newsletter prise en charge par PopupMaker, à savoir MailChimp ou AWeber. Pour intégrer totalement ces solutions à PopupMaker, il faut acheter une extension du plugin via le menu PopUpMaker > Etendre. Chaque extension coûte environ 25 dollars et permet de profiter directement au sein de Popup Maker des options de votre outil de newsletter pour créer des formulaires de capture d’e-mail.
Via le menu Souscriptions de Popup Maker, vous pouvez aussi définir des messages par défaut quand une personne s’abonne, fait une erreur dans son e-mail ou oublie de remplir le champ e-mail. Des messages sont déjà définis à l’installation du plugin mais vous pouvez les modifier.
Notez que si vous ne souhaitez pas acheter les extensions pour MailChimp par exemple, vous pouvez toujours intégrer un formulaire MailChimp mais il faudra juste copier-coller les codes à la main au lieu d’avoir des options prédéfinies pour aller plus vite.
Confidentialité sur Popup Maker
Dans ce menu, vous pouvez désactiver le suivi des statistiques liées aux popups créées avec le plugin.
Les options diverses du plugin de popup
Vous y retrouverez d’autres options. Certaines sont intéressantes à cocher, par exemple « Essayez de contourner les bloqueurs de publicité ».
D’autres peuvent être utiles en cas de problème :
- Activer le Mode de Débogage, pour obtenir des informations techniques sur l’origine d’un bug.
- Désactiver le cache sur les médias : le plugin met en cache (c’est-à-dire « en mémoire ») par défaut un fichier contenant les personnalisations en termes de design et de fonctionnalités. Si vous constatez des bugs d’affichage ou de fonctionnement de la popup, essayez de désactiver le cache pour voir si ça résout le problème.
- Désactiver le menu d’édition de Pop-Up – Si vous constatez une incompatibilité entre le plugin de popup WordPress et votre thème ou vos autres plugins, essayez de cocher cette case. L’installation de Popup Maker provoque en effet parfois un problème au niveau de la personnalisation des menus de WordPress. Si vous êtes confronté à ça, cochez cette case dans les options.
Vous pouvez aussi choisir de désactiver certains menus ou fonctionnalités si vous n’en avez pas l’utilité :
- Désactiver le menu de la barre d’administration.
- Désactiver les catégories et étiquettes qui permettent de catégoriser ses popups.
- Désactiver les shortcodes (raccourcis) que l’on peut utiliser dans le contenu des popups.
Enfin, si vous utilisiez un autre plugin de popup intitulé EasyModal avant, vous pouvez activer la compatibilité avec Popup Maker pour importer des données et faciliter la transition vers Popup Maker. L’importation des données est possible en allant dans le menu Outils de Popup Maker > onglet « Importation/Exportation ».
Vous pouvez aussi cocher la case « Terminer la désinstallation » si vous souhaitez que le plugin efface toutes les données qu’il enregistre dans la base de données quand vous le désactivez. Sinon, par défaut, vos réglages sont conservés en mémoire pour une future utilisation du plugin.
Etapes pour créer une popup sur WordPress
Dans le menu Popup Maker, cliquez tout simplement sur « Ajouter Popup ». Vous vous retrouvez face à une mise en forme similaire à celle de la rédaction d’un article WordPress, ce n’est donc pas dépaysant !
Donnez d’abord un nom « administratif » à votre pop-up : ce nom n’apparaîtra pas pour vos utilisateurs mais permettra de retrouver facilement la pop-up dans votre administration ou si vous entrez du code personnalisé (pour ceux qui sont à l’aise avec le sujet, une classe CSS sera créée à partir de ce nom pour une personnalisation plus facile de la popup).
Imaginons par exemple le nom « Popup Facebook » si l’on souhaite promouvoir sa page.
Juste en-dessous, vous voyez un second champ de titre : cette fois-ci, c’est le titre public de la pop-up, qui s’affichera à l’intérieur de la pop-up pour les visiteurs de votre blog.
Ensuite, vous disposez d’un champ pour écrire à votre convenance le contenu de la pop-up. Si vous avez besoin d’entrer du code, basculez sur l’éditeur « Texte » au lieu de l’éditeur « Visuel ».
Voilà, c’est prêt ! Vous pourriez publier directement la popup sur WordPress à ce stade en cliquant sur « Publier » sur la droite… mais je vous conseille fortement de faire quelques personnalisations supplémentaires afin que la popup ne s’ouvre pas n’importe quand et n’importe comment !
Sous le champ où vous avez entré le contenu de la popup, vous avez accès à des paramètres TRES utiles, voire indispensables !
Les déclencheurs de la popup
En cliquant sur « Ajouter un nouveau déclenchement », vous allez pouvoir choisir un critère qui déclenche l’affichage de la popup sur WordPress… et définir en même temps un cookie qui va garder en mémoire certaines informations tant que l’internaute n’aura pas vidé ses cookies !
En version gratuite, le plugin propose une ouverture automatique de la popup au bout de X secondes. Si vous souhaitez d’autres types de déclencheurs, il existe des extensions premium (payantes) disponibles via le menu Popup Maker > Etendre, notamment :
- Scroll Triggered Popups – Popup qui s’affiche quand l’utilisateur descend jusqu’à un certain niveau sur la page.
- Exit Intent Popups – Active une popup quand la souris de l’utilisateur se dirige vers le haut de l’écran, traduisant potentiellement une intention de quitter le site.
Pour cet exemple, je vais choisir de créer un cookie quand l’utilisateur ferme la popup, afin de se souvenir qu’il l’a fermée et de ne pas m’obstiner à l’afficher 12 fois. Rien de plus agaçant quand on a fermé une popup que de la voir se rouvrir sans arrêt pour insister, non ?
Je peux ensuite choisir un délai jusqu’à 10 secondes avant l’ouverture de la popup sur le site, et personnaliser si nécessaire le nom du cookie (vous pouvez sans problème laisser le nom par défaut).
Par défaut, le cookie dure 1 mois, c’est-à-dire qu’il va mémoriser pendant 1 mois le choix de l’utilisateur avant de lui reproposer la popup. Par défaut, le cookie s’applique aussi à l’échelle de toutes les pages du site. Vous pouvez modifier ces réglages par défaut en cliquant sur l’icône du crayon à côté du cookie fraîchement créé.
Le ciblage de la popup
Le ciblage vous permet de restreindre l’affichage de la popup à certains types de contenus (pages, articles, etc) ou d’utilisateurs : par exemple, interdire l’affichage pour les utilisateurs qui sont sur mobile ou sur tablette.
L’apparence de la popup
Vous pouvez choisir le design par défaut appliqué à la popup et personnaliser un certain nombre d’éléments : la taille, l’animation lors de l’ouverture de la popup ou sa position par exemple.
Des paramètres sont déjà définis par défaut pour que votre popup ait une apparence agréable même si vous ne faites pas de personnalisation.
La fermeture de la popup
Vous pouvez personnaliser le texte qui s’affichera pour permettre à l’utilisateur de fermer la popup, et retarder l’apparition du bouton de fermeture.
Les options avancées de la popup
Vous pouvez ici désactiver les fonctionnalités d’accessibilité, ce qui n’est pas souhaitable en règle générale… et bloquer le rechargement de la popup si elle permet de soumettre un formulaire non-AJAX.
En simplifiant, le langage AJAX permet de soumettre un formulaire sans recharger une page. Si votre popup inclut un formulaire n’utilisant pas AJAX, la page va se recharger et cocher cette option permet d’éviter de reproposer la popup.
Aller plus loin dans la personnalisation de la popup
Popup Maker vous propose de personnaliser davantage vos popups, que ce soit en termes de design ou de fonctionnalités.
Côté graphique, ça se passe dans le menu Popup Maker > Thèmes Popup. En cliquant sur « Ajouter nouveau thème de popup », vous accédez à un outil qui vous permet de personnaliser votre propre popup, avec prévisualisation en direct sur la droite de l’écran.
Parmi les personnalisations possibles, on trouve bien entendu les couleurs (fond de la popup, texte), l’opacité de l’arrière-plan quand la popup s’affiche, les angles (plus ou moins arrondis), les marges de chaque côté du texte de la popup, l’ajout d’une bordure ou d’une ombre, la mise en forme du titre (taille, police, couleur, espacement) et du bouton de fermeture de la popup.
Ça permet de créer un design en parfait accord avec le thème de son blog, et ce de manière gratuite et rapide.
D’autre part, si vous avez des besoins de personnalisation plus poussés en matière de fonctionnalités, le plugin propose pas mal d’extensions payantes et d’intégrations par défaut avec d’autres plugins WordPress du marché.
L’intégration a ainsi été testée avec les plugins de formulaires Ninja Forms, Contact Form 7 et Gravity Forms ; avec le plugin Quick & Survey Master qui permet, comme son nom l’indique, de mettre en place des quizzes et sondages.
Il existe également des extensions pour avoir plus de fonctionnalités, comme :
- Scheduling – Pour planifier vos popups de manière très précise (affichage à certaines dates uniquement, pendant une durée limitée, etc).
- Advanced Targeting Conditions – Pour un ciblage avancé des utilisateurs à qui afficher une popup : cibler les gens qui viennent d’un site précis, qui utilisent un appareil précis (mobile, tablette, desktop), qui consultent certains contenus précis ou ont déjà posté un commentaire…
- Advanced Theme Builder – Pour une personnalisation encore plus poussée du design avec des images de fond.
Tout ceci en plus des extensions dont je vous ai déjà parlé pour cibler par exemple les visiteurs qui s’apprêtent à quitter le site ou ceux qui ont scrollé sur la page.
Pourquoi créer une popup sur WordPress ?
Vous avez peut-être en tête des mises en garde concernant les pop-ups et l’expérience utilisateur, affirmant que c’est vraiment gênant pour le visiteur d’être interrompu dans son parcours par une fenêtre indésirable qui s’ouvre devant le contenu.
En réalité, les pop-ups sont efficaces : une étude réalisée par l’outil AWeber a ainsi démontré qu’un formulaire placé dans une pop-up suscitait 1375% de conversion en plus par rapport à un formulaire classique intégré sur une page.
Cependant, il est important de respecter de bonnes pratiques : travailler avec soin le texte de sa pop-up, ne pas multiplier les pop-ups, utiliser des « déclencheurs » et des cookies pour afficher la pop-up seulement à certains moments et en se souvenant des choix effectués quand l’internaute a demandé à fermer la popup.
Ça contribue à limiter le sentiment d’agression qui peut naître de l’apparition subite d’une popup ! Et c’est un bon moyen de mettre en avant des choses qui vous tiennent à cœur : un formulaire d’abonnement à votre newsletter, vos réseaux sociaux, un événement que vous organisez, un service que vous proposez, un code promo… A vous de faire parler votre imagination !
Notez pour finir que ce plugin propose une documentation très complète et précise (en anglais). Vous pouvez aussi consulter le forum de support si vous rencontrez des problèmes.
Hello ! Je suis en congé maternité jusqu'à l'été 2023. Pendant cette période, les commentaires du blog sont fermés.
Bonjour,
Tout d’abord merci pour vos conseils et astuces wordpress.
J’ai créé un site de vente en ligne de papeterie personnalisée avec mes illustrations sur WordPress. Je propose parfois des PDF à télécharger gratuit pour augmenter le trafic sur mon site, et cela fonctionne plutôt bien cependant je souhaiterais pouvoir conditionner le téléchargement de mes PDF à un abonnement à ma newsletter via une fenêtre popup avec un petit formulaire et le lien vers le téléchargement.
Existe-t-il une extension gratuite de pop up qui se déclenchent au clic sur un lien ? (Les extensions que j’ai essaye pour l’instant dont popup maker se déclenchent uniquement au scroll ou sur la totalité de la page.)
Merci d’avance de vos retours, une belle journée à vous
Delphine
Bonjour Delphine, Popup Maker le fait avec le déclencheur « Clic d’ouverture ». Il faut juste ajouter une classe spécifique au lien concerné (cf les détails ici).
Par défaut, le cookie dure 1 mois, c’est-à-dire qu’il va mémoriser pendant 1 mois le choix de l’utilisateur avant de lui reproposer la popup. Je voudrais que la popup s’ouvre chaque fois que j’arrive sur la page d’accueil ou que la popup se represente au bout de 2mn;
As tu la solution, en te remerciant.
Gérard
Bonjour Gérard, on peut choisir la page d’accueil dans « Ciblage » (quand on crée une nouvelle pop-up, c’est dispo parmi les options). Pour l’ouverture, ça se règle dans la partie « Déclencheur ». Il faut désactiver le système de cookie (c’est le cookie qui mémorise le choix de l’utilisateur) : il y a une case « Empêcher la fenêtre modale de s’afficher à nouveau au visiteur en utilisant un cookie » à décocher.
Bonjour Marlène (et tous mes Voeux de bonne année). Je souhaite créer une fenêtre du type pop-up sur mon site pour afficher mes Voeux de bonne année depuis ma page d’accueil mais avec une fermeture automatique (je ne veux pas de bouton Fermer) au bout de quelques secondes, est-ce possible avec Popup Maker ? Egalement je souhaite mettre en oeuvre Yoast SEO sur mon site pour partager ma passion des voitures miniatures avec d’autres collectionneurs.
Un grand merci d’avance.
Jacques
Bonjour Jacques, très bonne année également ! Popup Maker fournit ici un code pour fermer automatiquement une pop-up au bout d’une durée X (dans l’exemple, 10 secondes mais on peut évidemment le customiser), code à insérer dans le fichier functions.php du thème WordPress.
Bonjour Marlène,
Merci pour cet article très précis et agréable à lire !
J’ai créé une popup sur wordpress pour une inscription newsletter mais n’arrive pas à supprimer/modifier les encarts autour de « Nom » et « Email » qui ne sont vraiment pas beaux. As-tu une solution ? Merci beaucoup !
Hello Marguerite, merci pour le message ! Si les modifications ne sont pas possibles via l’outil de conception intégré au plugin, il faut écrire soi-même du code CSS (dans le fichier style.css du thème ou du thème enfant) afin d’effectuer les personnalisations souhaitées. Il faut repérer dans le code de la page comment s’appelle l’élément qui « encadre » ces parties nom et email, puis lui attribuer des propriétés différentes que celles qu’il a par défaut, grâce au langage CSS.
Bonjour et merci pour cet article super clair ! J’utilise maintenant Popup Maker.
Par contre je souhaite afficher un bouton sur le Popup afin qu’il redirige vers une autre page du site. J’ai trouvé pour ajouter le bouton avec le short code mais pas moyen d’y ajouter le lien de la page à rediriger… Tu aurais une piste ? Merci à toi !
Bonjour Vincent, il y a plein de manières de procéder pour ajouter un bouton cliquable, il y a pas mal d’exemples ici. Je ne sais pas comment ton bouton a été créé car sur ma version, je ne vois pas de shortcode bouton. J’ai juste un bouton Fermer dans les shortcodes proposés. Tu as pris la version pro du plugin ?
Bonjour et merci Marlène pour cet article, je ne savais qu’il existait un plugin gratuit aussi performant pour la création de popup.
On trouve des choses formidables en gratuit ! Ça ne répond pas forcément à TOUS les besoins mais ça permet parfois de limiter les investissements.
Bonjour, pouvez vous me dire comment intégrer un lien vers ma page Facebook sur le pop up? Ça ne fonctionne pas…si on clique sur le pop up ça affiche une page erreur du site web merci
Bonjour, le champ de rédaction du contenu de la pop-up fonctionne exactement comme lors de la rédaction d’un article de blog, donc l’ajout d’un lien fonctionne à l’identique :) Si ça ne marche pas, il ne faut pas hésiter à poster un message sur le forum de support du plugin !
Bonjour!
J’ai créé mon popup, par contre je n’ai pas accès au paramètre pour le déclencheur et les autres option….
Pouvez-vous m’aider?
Merci!
Bonjour Meghan, quand vous êtes sur la page de création de la popup, jetez un œil au menu « Options de l’écran » en haut de page à droite et regardez s’il y a des options que vous pouvez cocher pour afficher ces champs. Sinon, n’hésitez pas à poster un message sur le forum de support du plugin.
L’option « Paramètres du Pop-Up» apparait dans le bas de la page, mais lorsque je clique pour faire défiler les options, rien n’apparait.
Comme si je n’avait aucun paramètres….
Merci!
Hello Meghan, c’est après avoir cliqué sur « Ajouter un nouveau déclencheur » qu’il ne se passe rien ? Cf ma capture d’écran dans la partie « Les déclencheurs de la popup » de l’article.
Bonjour!
Je ne vois pas les option déclencheur, ciblé, affichage, fermer et avancé. Lorsque je clique sur paramètre du popup rien n’affiche
Hello Meghan, si ça n’apparaît pas il doit y avoir un bug sur ton site, je te conseille donc de poster sur le forum de support du plugin. Peut-être une erreur à l’installation ou un conflit entre deux plugins.
Bonjour Marlène,
Merci pour ce tuto très complet! Une petite question : Saurais-tu me dire quelle est la différence, dans les déclencheurs, entre « soumission du formulaire » et « temporisation/ouverture automatique »?
Hello Vincent, de mémoire l’option Temporisation/Ouverture automatique permet d’ouvrir automatiquement une pop-up après un certain délai. L’option « Soumission du formulaire » permet quant à elle de traiter les données lorsqu’un formulaire contenu dans la pop-up est soumis (en d’autres termes, utilisé seul, ce déclencheur ne provoque pas l’affichage d’une pop-up, il permet juste d’envoyer les données une fois qu’une personne a complété le formulaire figurant dans la pop-up).
Hi Marlène,
Je vous remercie pour cette mini formation. Tres claire. Je commence seulement sur wordpress et toutes ameliorations sont les bienvenues.
Sarah
Blog Bonheur et Confiance en Soi
Hello Sarah, beaucoup de choses à découvrir quand on prend en main WordPress, n’hésite pas à te promener sur le blog car il y a beaucoup de ressources pour bien paramétrer WordPress et développer sa visibilité !
Bjr ! Merci pour ce super article, très clair et très pédagogique !
Merci d’avoir pris le temps de laisser un commentaire !
Merci Marlène pour cet article éclairant sur le pop up Maker. Moi j’utilise le pop up de Mailchimp et il fonctionne bien. Mais je voulais savoir si on pouvait être pénalisé par Google si on utilise un pop up. Surtout qui apparaît sur Mobile. Car j’ai remarqué que sur certains mots clés (j’étais toujours en 2 ou 3 page) et que subitement je ne suis plus sur les pages! Merci pour ta réponse.
Donc, pour le moment je enlevé le pop up Mailchimp de mon blog pour voir si le problème ne viendrait pas de ça et si je remonte dans les pages de mes mots clés.
Hello, une pop-up n’est pas source de pénalité… en revanche, j’ai eu une lectrice qui a eu un souci en copiant-collant un code tout fait pour une newsletter : il contenait une instruction « noindex » que Google prenait en compte et qui l’a poussé à désindexer des pages du site. Donc vérifie ce point car ça peut arriver !
Merci Marlène pour ta réponse rapide. En effet, je copie et colle un code pour installer ma pop up Mailchimp dans le header php de mon thème. Donc cela doit venir de ça. Je vais donc enlever définitivement mon pop up et voir si je reviens sur les pages de Google, sur mes mots clés. Tant pis pour le pop up, j’ai déjà la newsletter de jetpack.
Un bon petit plugin gratuit qui fait le café. Merci Marlène :)
Pour un message simple sans ambitions marketing c’est parfait et surtout léger (j’utilise Thrive Leads et c’est assez lourd en terme de requêtes etc)
Je viens de remarquer ton encart « Confidentialité » en bas à droite, sympa de le laisser accessible de cette façon, si tu ne m’en veux pas je vais surement te piquer l’idée :D
Bonne semaine !
Hello Benjamin, cet encart est généré automatiquement par ma régie publicitaire mais effectivement, je trouve ça pratique !