Comment créer et afficher un popup par balise de publication dans WordPress

Souhaitez-vous créer et afficher un popup par balise de publication dans WordPress ? Alors continuez à lire cet article.

Nous sommes convaincus que vous êtes déjà familier avec la petite fenêtre qui apparaît lors de la navigation sur un site web. Eh bien, cela s’appelle une fenêtre contextuelle ou “popup”. Les popups peuvent apparaître dans différentes tailles et positions à l’écran sur un site web.

Dans WordPress, il existe de nombreux plugins permettant de créer des popups, tels que Elementor Pro, JetPopup, Brizy Pro, et d’autres encore.

L’élément important à retenir est que les fenêtres contextuelles ne doivent pas être ennuyeuses pour les visiteurs de votre site web. Par conséquent, créez un popup aussi simple et attrayante que possible.

Table des matières

Quelques plugins WordPress pour créer des popups

Elementor Pro

Elementor Pro est une extension d’Elementor avec des centaines de fonctionnalités premium. Il vous offre de puissants outils professionnels qui accélèrent votre flux de travail et votre conception. Elementor Pro vous donne un contrôle total sur la mise en page et le design de votre site web. Dans ce cas, vous pouvez personnaliser librement le design de votre popup.

Utiliser Elementor Pro pour créer une fenêtre contextuelle par balise de publication est très simple et facile à utiliser. Vous pouvez facilement définir les conditions d’affichage de votre popup de manière très précise.

JetPopup de Crocoblock est une extension pour Elementor. Vous pouvez l’acheter en tant que plugin autonome ou l’acheter dans un ensemble avec d’autres plugins de Crocoblock. L’avantage d’utiliser JetPopup pour créer une fenêtre contextuelle est qu’il propose de nombreuses fonctionnalités intéressantes.

Vous pouvez jouer avec les déclencheurs de la fenêtre contextuelle.
Vous pouvez créer des animations pour la fenêtre contextuelle.
Un grand nombre de modèles de fenêtres contextuelles sont disponibles.

Brizy Pro

Le popup builder de Brizy Pro vous propose deux options. La première est le popup activé par un clic, et la deuxième est les déclencheurs et les conditions automatiques.

Ouverture au clic : Votre popup peut être déclenché simplement en cliquant sur les éléments de votre page.
Déclencheurs et conditions automatiques : Vous pouvez configurer les actions des visiteurs qui détermineront le moment où les popups sont affichés.

Comme mentionné précédemment, vous avez plusieurs options pour créer un popup dans WordPress. Dans ce tutoriel, nous vous montrerons comment créer et afficher un popup par balise de publication en utilisant la version Elementor Pro, assurez-vous donc d’en avoir déjà une.

La première chose à faire est de créer un nouveau modèle de Popup. Pour créer un nouveau modèle de Popup, allez dans Modèles > Popups sur votre tableau de bord WordPress et cliquez sur le bouton Ajouter un nouveau.

Ensuite, ajoutez le nom de votre Popup et cliquez sur le bouton CRÉER UN MODÈLE.

Vous serez dirigé vers la bibliothèque de modèles, vous pouvez choisir un modèle dans la fenêtre de la bibliothèque ou concevoir votre propre modèle de Popup. Pour utiliser un modèle de la bibliothèque, cliquez simplement sur le bouton Insérer.

Mais dans ce tutoriel, nous allons créer le modèle de Popup à partir de zéro. Cliquez sur l’icône X pour fermer la bibliothèque de modèles.

Nous devons effectuer quelques ajustements dans les paramètres du Popup avant de commencer à créer un modèle de Popup. Vous pouvez trouver les meilleurs paramètres pour votre site. Dans ce tutoriel, nous vous montrerons les paramètres de Popup de votre choix.

Cliquez sur l’icône d’engrenage dans le coin inférieur gauche. Dans les paramètres du Popup, changez la Largeur en 90% de la largeur de la vue (VW) et la Position en Centre-Bas.

Ensuite, concevez votre modèle du Popup. Ajoutez une nouvelle section et sélectionnez la structure en 5 colonnes. Dans les paramètres de la section, définissez la Largeur sur 950. Vous pouvez jouer avec vos paramètres.

Par exemple, vous pouvez aller dans l’onglet Style pour définir l’arrière-plan, aller dans l’onglet Avancé pour personnaliser la marge, et bien d’autres encore.

Revenons maintenant à vos colonnes. Dans la colonne de gauche, définissez la largeur à 33 %, et pour les quatre autres, à 16 %.

Dans la colonne de gauche, nous ajouterons un widget Titre avec un peu de texte. Vous pouvez ajouter du texte invitant les visiteurs de votre site web à consulter d’autres contenus pertinents par rapport au contenu actuel, ou tout autre texte de votre choix.

À droite, nous ajouterons un widget Image. Vous pouvez ajouter des images à partir des miniatures/des images en vedette des articles ou les téléverser manuellement.

Maintenant, la structure est prête. Revenez aux Paramètres du Popup pour personnaliser les animations d’entrée, de sortie et la marge. Dans ce tutoriel, nous avons défini l’entrée sur Fondu vers le bas et la sortie sur Fondu vers le haut. Ensuite, allez dans l’onglet Avancé et définissez la marge sur 30 (valeur commune pour les liens).

Maintenant que la conception est prête, cliquez sur le bouton PUBLIER pour définir les conditions d’affichage et les déclencheurs. Pour définir la condition d’affichage, cliquez sur le bouton AJOUTER UNE CONDITION et sélectionnez votre option dans la liste déroulante.

Comme vous souhaitez afficher le Popup par balise de publication, vous pouvez définir les conditions d’affichage suivantes (voir l’animation).

Cliquez sur Suivant. Dans l’onglet Déclencheurs, définissez le déclencheur sur Au Défilement en basculant l’interrupteur sur Oui. Définissez la Direction sur Bas et la Largeur sur 95 %. Car nous voulons que le Popup s’affiche lorsque les visiteurs atteignent la fin de notre article.

Dans ce tutoriel, nous n’allons pas définir de Règles Avancées. Cliquez donc sur ENREGISTRER ET FERMER. Eh bien, maintenant nous avons terminé.

Voyons à quoi cela ressemble.

Voila vous venez de terminer votre popup. Consultez aussi nos articles connexes :

Téléchargez Elementor Pro

Partager cet Article :

Mikhos Gartner

Mikhos Gartner est un expert en outils numériques qui achète, teste et examine les outils SAAS pour les petites entreprises. S'appuyant sur plusieurs années d'expérience dans le domaine de la technologie, il fournit des critiques perspicaces. Son contenu est largement consommé, servant des millions d'utilisateurs chaque mois.