Comment ajouter une fenêtre contextuelle aux sites Web WordPress librement et rapidement

Lorsque vous visitez un site Web, avez-vous déjà vu une image ou un message s'afficher soudainement à l'écran ? C'est la fenêtre contextuelle ou la fenêtre de notification du site Web.

Popup est une stratégie marketing populaire et efficace, utilisée par de nombreux entrepreneurs et propriétaires de sites Web. Pour ajouter un popup comme celui-ci à WordPress, vous pouvez utiliser un plugin gratuit pour le rendre rapide et simple. Même si vous n'êtes pas un expert, cela ne prend que 10 minutes pour suivre nos instructions.

Pourquoi devriez-vous utiliser une fenêtre contextuelle sur un site Web d'entreprise ?

L'image ci-dessous est un exemple pour le popup d'un site Web d'entreprise. Ça a l'air super, n'est-ce pas ?

Popup est non seulement époustouflant (si vous parvenez à en concevoir un bien assorti et attrayant), mais présente également de nombreux autres avantages tels que :

• Promouvoir des informations importantes, des campagnes de vente et de marketing,…
• Appel à l'action, augmentez le taux de conversion
• Générer du plomb

Ajouter un Popup à WordPress avec le plugin Popup Builder

Pour ajouter une fenêtre contextuelle à votre site Web WordPress, vous pouvez engager une entreprise de conception Web crédible ou un codeur. Cependant, pour gagner du temps et de l'argent, le plugin est la meilleure option. Parmi de nombreux plugins contextuels, Popup Builder est peut-être le plus facile à utiliser et le plus efficace.

C'est un plugin gratuit et disponible sur wordpress.org, il vous suffit donc d'installer et d'activer le plugin directement dans le tableau de bord.

Une fois terminé, suivez les étapes ci-dessous.

Étape 1 : Choisissez le type de popup

Maintenant, le sous-menu Popup Builder apparaîtra sur le tableau de bord. Allez-y, cliquez sur Ajouter des nouvelles et choisissez l'un des 4 types de popup fournis.

Pour une meilleure illustration, l'image ci-dessous montre comment les 4 types de popup fournis par ce plugin s'affichent sur le front-end.

Après avoir choisi le type que vous voulez, passez à l'étape suivante.

Étape 2 : ajouter du contenu à la fenêtre contextuelle

Tout d'abord, donnez un nom à la popup pour la gérer plus facilement.

Différents types de popup ont besoin de contenus différents. Creusons dans chaque type.

Ajouter du contenu aux fenêtres contextuelles Facebook

Sur l'interface pour créer des popups Facebook, vous devez renseigner ces informations :

1. Le message qui s'affiche dans la fenêtre contextuelle. Vous devez utiliser une phrase d'incitation à l'action pour encourager les lecteurs à interagir. En outre, vous devez ajouter des images, des bannières pour que ce soit plus époustouflant.
2. Insérez l'URL Facebook.
3. Choisissez une mise en page pour le popup sur un coup de tête. Fondamentalement, ces dispositions ne sont pas si différentes. Ainsi, vous pouvez les essayer et choisir votre préféré.
4. Cliquez ici pour masquer le bouton de partage si vous le souhaitez.

Et voici ce que j'ai :

Ajouter du contenu aux fenêtres contextuelles d'image

Ici, il vous suffit de télécharger l'image ou d'insérer le lien de l'image. Ce plugin prend en charge JPG, PNG et GIF.

Voici une magnifique bannière que j'ai réalisée moi-même pour la campagne Black Friday de mon site internet :

Ajouter du contenu aux fenêtres contextuelles HTML

Ajouter du contenu à une fenêtre contextuelle HTML, c'est comme écrire un article dans l'éditeur WordPress Gutenberg. Vous pouvez insérer des images, des vidéos, des tableaux, des boutons, des citations, … ou tout autre contenu pris en charge par l'éditeur WordPress. L'interface est un peu similaire à l'éditeur Gutenberg, elle est donc assez conviviale et native.

Et voici mon popup HTML sur le front-end :

Ajouter du contenu aux fenêtres contextuelles d'abonnement

Ici, nous avons beaucoup de contenu à remplir et à personnaliser pour votre formulaire d'abonnement. Cependant, ce que vous devez le plus remarquer, ce sont les champs du formulaire, tels que Prénom , Nom de famille , E - mail , et personnalisez leur espace réservé et le champ Obligatoire .

Après cela, faites défiler vers le bas et personnalisez l'affichage du formulaire en termes d' options d'arrière- plan du formulaire, de style des entrées, de styles de bouton Soumettre pour le rendre plus étonnant et plus adapté au site Web.

Notamment, dans la section Après un abonnement réussi , choisissez avec tact un message approprié ou des informations que vous souhaitez montrer à vos utilisateurs après leur abonnement. Par exemple, vous pouvez afficher des remerciements, des coupons, des cadeaux, des cartes cadeaux, … pour ces abonnés. En faisant cela, vous pouvez faire glisser les impressions des utilisateurs et améliorer leur expérience.

Par exemple, il s'agit de la fenêtre contextuelle de mon e-mail d'abonnement. Une fois qu'ils auront soumis, j'afficherai une notification sur la campagne de vente du Black Friday, invitant les clients à faire leurs achats.

Accédez à Popup Builder > Tous les abonnés pour gérer les abonnés.

Vous pouvez même envoyer des e-mails aux abonnés dans l'onglet Newsletter .

Après y avoir ajouté du contenu, faites défiler vers le bas. Vous verrez de nombreuses autres options de réglage. Examinons chaque option dans les étapes 4,5,6.

Étape 3 : Configurer l'emplacement d'affichage et la condition de la fenêtre contextuelle

Configurer l'emplacement d'affichage

Dans la section Règles d'affichage des fenêtres contextuelles, nous devons ajuster l'endroit où la fenêtre contextuelle s'affichera / ne s'affichera pas.

Vous pouvez choisir Partout pour l'afficher sur chaque page, publier, baliser ou personnaliser, ou l'afficher à l'endroit de votre choix. Vous pouvez également cliquer sur l'info-bulle (?) pour obtenir plus de détails.

Par exemple, je choisis l'emplacement comme une certaine page, je choisis « est » pour l'afficher et je choisis la page d'affichage comme « Accueil » . De plus, vous pouvez ajouter d'autres emplacements en choisissant Ajouter .

Configurer la condition d'affichage

Dans la section Événements contextuels , choisissez l'heure à laquelle la fenêtre contextuelle s'affiche (lorsque le site Web s'est chargé pendant quelques secondes, lorsque les utilisateurs cliquent quelque part, etc.). Ce plugin prend en charge les conditions d'affichage suivantes :

• Au chargement : La popup s'affichera automatiquement après quelques secondes (vous pouvez ajouter le nombre de secondes dans l'onglet Délai ) à partir de la fin du chargement du site.

• Défini par la classe CC : permet aux utilisateurs de cliquer sur un composant pour activer la fenêtre contextuelle. Ce composant sera basé sur l'ID de celui-ci. Cette partie est un peu compliquée, vous feriez donc mieux de lire attentivement la documentation.

• Au clic : similaire à la section Set by CSS class mais vous n'avez pas besoin d'utiliser l'ID de la popup pour installer le « bouton » pour l'activer.

Au lieu de cela, si vous choisissez Par défaut dans la section Options , le plugin créera une classe par défaut pour la fenêtre contextuelle dans la section Classe par défaut comme ci-dessous.

Si vous choisissez Custom CSS , remplissez la classe que vous avez créée vous-même dans la section Custom Class .

Après cela, ajoutez la classe du popup dans le CSS du composant que vous voulez.

Par exemple, dans cet article, j'ai ajouté un bouton et la classe que je veux dans la section Classes CSS supplémentaires .

Voici le résultat sur le front-end :

• Hover Click : lors du survol d'un composant, la fenêtre contextuelle s'affichera. Vous pouvez faire la même chose que dans la section Au clic .

Étape 4 : Personnaliser l'affichage du popup

Après l'étape 3, vous avez une fenêtre contextuelle de base. Mais si vous voulez que ce soit plus époustouflant, faites défiler jusqu'à la section Design . Ici, vous pouvez personnaliser certains composants comme l'interface, la superposition, l'arrière-plan pour le rendre parfait comme votre favori.

Plus que cela, dans la section Dimensions , ajustez sa largeur et sa longueur en choisissant le mode Personnalisé , ou en choisissant le mode Responsive pour que sa taille corresponde automatiquement à son contenu.

Étape 5 : Personnaliser d'autres paramètres avancés

Ces paramètres avancés vous permettent de configurer l'affichage et l'interaction avec les popup, … de manière plus détaillée.

Par exemple, vous pouvez choisir comment fermer la fenêtre contextuelle dans la section Fermer les paramètres . Il existe de nombreuses façons de le fermer, comme appuyer sur Echap , ou ajouter un bouton de fermeture, … Choisissez-en un ou plusieurs, c'est à vous de décider.

Si vous souhaitez ajouter des effets de fermeture et d'ouverture de fenêtres contextuelles, ou ajuster les heures d'affichage pour un utilisateur, … faites défiler jusqu'à la section Options contextuelles . Il vous suffit de cliquer sur l'option que vous souhaitez, et le tour est joué.

Notez que lorsque vous utilisez le plugin gratuit Popup Builder, les sections nommées Unlock Option colorées en jaune comme l'image ci-dessous sont les fonctionnalités de la version pro. Vous devez acheter plus d'extensions de ce plugin pour les utiliser.

Enfin, sur la barre latérale, il y a une option très intéressante : ajouter un bouton fixe sur le site pour afficher le popup lorsque vous cliquez dessus. Ce bouton flottant est vraiment pratique, permettant aux gens de le voir à tout moment et partout. Son design est également agréable et non gênant.

Voici le bouton flottant sur le site Web :

Ou vous pouvez le désactiver en cliquant sur Désactiver .

Enfin, cliquez sur Publier pour le faire.

Vous avez donc terminé votre popup après 6 étapes, des paramètres de base aux paramètres avancés. Vous avez fait du bon travail !

Derniers mots

Comme vous pouvez le voir, ajouter un popup à WordPress n'est pas vraiment compliqué. Il suffit d'être un peu patient lors de la personnalisation de son affichage, c'est tout le travail !

De plus, il existe de nombreuses choses pour augmenter le taux de conversion du site Web. Si vous souhaitez créer une page de destination efficace, vous feriez mieux de lire d'autres articles sur la création d'une page de destination à fort taux de conversion ou sur la création d'une page de produit.

Bonne chance!