Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 901.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits.

Les popups ont depuis la nuit des temps eu pour principal objectif de pousser des visiteurs à l’action. Sur WordPress, ils sont très populaires (c’est le cas d’OptinMonster) et ont presque tous le même objectif : Convertir des visiteurs en abonnés, voire clients.

Sur WordPress, il existe une très grande variété de plugins adaptés à la création de popup mais tous n’ont pas toujours les mêmes fonctionnalités… et le choix devrait se faire en fonction des besoins. Pour vous, j’en ai sélectionné un, qui s’intitule tout simplement « Popups », et qui est disponible sur WordPress.

Dans ce tutoriel, je vous monterai comment proposer un popup sur votre blog WordPress afin d’augmenter le nombre de personnes qui vous suivent sur les réseaux sociaux.

Comment installer et configurer Popups

Je vous invite à installer le plugin directement depuis votre tableau de bord. Vous pouvez le télécharger directement sur WordPress.org.

Après l’activation du plugin, vous remarquerez sur le menu latéral gauche de votre tableau bord un nouveau menu intitulé « Popups ». Cliquez sur « Add New », pour créer une nouvelle popup.

Comment créer  popup

Sur cette nouvelle page, identique à l’éditeur d’article, vous pouvez fournir un titre, un contenu et effectuer certaines configurations sur les différentes sections disponibles plus bas.

Une version premium existe, et celle-ci ajoutera de nouvelles fonctionnalités (j’y reviendrai plus tard), qui seront disponibles dans la boite « Popups Premium ».

Plus bas, dans la section « Popup Shortcode », vous pouvez voir les différents shortcodes qui seront utilisés pour afficher les différents boutons facebook, twitter et google+.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer Facilement et Gratuitement n'importe quel design de site Web ou blog avec un look professionnel. Arrêtez de payer cher pour un site internet que pouvez faire vous-même.

Le shortcode :

  • [spu-facebook] sera utilisé pour ajouter un bouton j’aime pour facebook.
  • [spu-google] sera utilisé pour ajouter un bouton ajouter dans les cercles de google+
  • [spu-twitter] sera utilisé pour ajouter un bouton « follow » de twitter.

Remarque : vous devez à chaque fois intégrer ces shortcodes dans l’éditeur visuel précédent pour afficher ces différents boutons. Chacun de ses shortcodes possède des paramètres que vous pouvez activer. Consultez les détails de ces paramètres en cliquant sur « View Facebook Options » pour les paramètres du shortcode facebook, « View Google+ options » pour les paramètres du shortcode Google+ ainsi de suite.

options-popup-shortcodes

La section « Popup display Rules » présente des options sur les règles d’affichage, grosso modo, avec ces options vous pourrez déterminer les conditions dans quelles le popup peut s’afficher.

Donc l’option « Show this popup if » vous donne la possibilité de choisir un élément (articles, pages, etc.), qui s’affiche lorsque ce dernier est égal (ou pas) à une option disponible dans la dernière liste d’option. Il peut s’agir de la page d’accueil « Home Page », la page d’accueil du blog « Post Page ».

En gros, si vous n’avez pas compris, vous pouvez choisir d’afficher ce popup sur la page d’accueil, le blog, etc.

popup-display-rules-section-popups

La section « Display Options » vous donne la possibilité de configurer certaines options à l’affichage, notamment :

  • La position de la popup « Box Position »
  • De définir le nombre de secondes avant que ce dernier ne s’affiche ou lorsque la page est définie jusqu’à un certain pourcentage « Trigger Action »
  • L’option « Auto-hide », permet de masquer automatiquement une fenêtre lorsque l’utilisateur fait définir la page vers le haut.
  • L’option « Animation », permet de choisir une animation d’ouverture de la popup

Vous ne souhaiterez certainement pas toujours afficher la fenêtre à chaque visite. C’est pourquoi il est nécessaire d’ajouter des cookies qui permettront de définir le nombre de jours après lesquels la fenêtre sera affichée à nouveau sur un même ordinateur.

option-section-display-options

La mini section « Appearance », vous donne la possibilité de personnaliser l’opacité de l’arrière-plan « Background Opacity », de choisir la couleur d’arrière-plan « background color », la couleur du texte « text color », la largeur du popup « box width », la couleur de la bordure « border color » ainsi que son épaisseur « border width ».

option-section-apparence

Voici à quoi ressemblera une fenêtre sur le blog.

presentation-popups

Remarque : Vous devez faire attention de ne pas publier plusieurs popups avec les mêmes règles d’affichages, car ces dernièrs s’afficheront en même temps, donc forcément certaines ne seront pas visibles.

En ce qui concerne la version premium, elle ajoutera :

  • 8 nouvelles animations
  • La technologie « Exit Intent Technology » afin de détecter lorsque les utilisateurs envisagent de quitter la page
  • De nouveaux déclencheurs
  • Un délai pour fermer automatiquement les popups
  • La possibilité de désactiver le bouton de fermeture
  • La possibilité de désactiver les méthodes de fermetures avancées tel qu’en cliquant sur « Esc » ou hors de la boite.
  • Une assistance premium.

C’est tout pour ce tutoriel sur la création d’une popup sur WordPress. N’hésitez pas à le partager avec vos amis sur les réseaux sociaux.

%d blogueurs aiment cette page :