COMMENT CRÉER UNE POPUP SUR WORDPRESS AVEC LE PLUGIN POPUP MAKER ?
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).
INSTALLER POPUP MAKER POUR CRÉER UNE POPUP SUR WORDPRESS
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.
MODIFICATION DES PARAMÈTRES DE POPUP MAKER
Le plugin crée un nouveau menu dans votre administration WordPress.
MENU POPUP MAKER SUR 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.
TROIS DESIGNS DE POPUP POUR WORDPRESS
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.
OPTIONS GÉNÉRALES SUR POPUP MAKER
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.
MENU SOUSCRIPTIONS SUR POPUP MAKER
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.
OPTIONS DIVERSES SUR POPUP MAKER
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 !
CRÉER UNE POPUP SUR WORDPRESS
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 ».
WORDPRESS ÉDITEUR TEXTE HTML
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 !
PARAMÉTRER SA POPUP SUR WORDPRESS
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).
AJOUTER UN DÉCLENCHEUR DE POPUP
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éé.
PERSONNALISER LE COOKIE DE LA POPUP
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.
OPTIONS DE CIBLAGE DE LA POPUP
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.
AFFICHAGE DE LA POPUP GRÂCE À POPUP MAKER
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.
FERMETURE DE LA POPUP SUR WORDPRESS
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.
PERSONNALISER LE DESIGN DE SA POPUP SUR WORDPRESS
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.
CRÉER UNE POPUP POUR ATTIRER L’ATTENTION DES INTERNAUTES
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 !