Comment créer des pop-ups dans WordPress avec Gutenberg

Avez-vous déjà navigué sur Internet et été soudainement accueilli par une fenêtre contextuelle ? Une fenêtre contextuelle qui apparaît en superposition pendant que vous visitez une page Web. 

Parfois, ces fenêtres contextuelles peuvent s'avérer très utiles et vous proposer des informations utiles ou des offres intéressantes. Elles peuvent aussi être un peu ennuyeuses et intrusives.

Mais du point de vue du propriétaire d'un site Web, les fenêtres contextuelles se sont révélées être un moyen puissant de capter l'attention, de promouvoir des offres et de générer des prospects.

Il est donc essentiel de créer des pop-ups adaptés qui engagent l’utilisateur sans le gêner en même temps.

Pour vous aider, nous vous guiderons à travers chaque étape de la configuration de fenêtres contextuelles efficaces adaptées aux objectifs de votre site Web. À la fin de ce guide, vous disposerez du moyen le plus simple de créer des fenêtres contextuelles qui non seulement attirent l'attention, mais améliorent également l'expérience utilisateur.

Qu'est-ce qu'une fenêtre contextuelle sur le site Web ?

Les fenêtres contextuelles sont de petites fenêtres qui apparaissent sur une page Web, généralement sous forme de superposition, pour attirer l'attention de l'utilisateur. Ces fenêtres peuvent inclure diverses formes de contenu, comme des publicités promotionnelles, des offres d'abonnement, des notifications ou des appels à l'action. 

Les fenêtres contextuelles nécessitent souvent une interaction, comme entrer ou sortir d'une page, cliquer sur un bouton pour les fermer ou remplir un formulaire. Elles sont conçues pour se démarquer du reste de la page afin de susciter un engagement immédiat.

Quand les gens utilisent-ils généralement des fenêtres contextuelles sur leurs sites Web ?

Les fenêtres contextuelles sont généralement utilisées pour atteindre des objectifs spécifiques liés à l'engagement et à la conversion des utilisateurs. Voici quelques scénarios courants dans lesquels les gens utilisent des fenêtres contextuelles sur leurs sites Web :

• À capturer des prospects ou créer une liste de courrier électronique avec un abonnement.
• Promouvoir des offres exclusives, des remises ou des offres à durée limitée.
• Annoncer de nouveaux produits, fonctionnalités ou mises à jour majeures.
• Pour fournir avis importants pour alerter les visiteurs. 
• Demandez aux visiteurs de créer un compte sur le site.
• À recueillir des commentaires ou mener des enquêtes parmi les publics.
• Montrer consentement aux cookies ou politique de confidentialité notification.
• Conduire les utilisateurs à s'inscrire aux événements, webinaires ou ateliers.

Ces utilisations stratégiques des popups contribuent à améliorer l'engagement et la conversion des utilisateurs, mais il est essentiel de les mettre en œuvre de manière réfléchie pour éviter de perturber l'expérience utilisateur.

Comment créer des popups WordPress dans Gutenberg

Passons à la partie principale de ce didacticiel sur la façon d’ajouter une fenêtre contextuelle sur WordPress à l’aide de l’éditeur de blocs Gutenberg.

L'éditeur Gutenberg par défaut n'est pas fourni avec un générateur de pop-up. Vous devez donc choisir un plugin de pop-up WordPress pour l'éditeur de blocs. Pour ce tutoriel, nous avons utilisé le plugin GutenKit.

GutenKit est un plugin d'éditeur de blocs qui est livré avec un générateur de pop-ups conçu spécifiquement pour Gutenberg. Avec ce générateur de pop-ups, créer des pop-ups dans Gutenberg est désormais plus facile que jamais.

Voici le processus étape par étape de création d’une fenêtre contextuelle Gutenberg dans l’éditeur WordPress.

Installer et activer un plugin popup WordPress pour Gutenberg

Pour installer le générateur de pop-ups GutenKit, vous devez avoir installé le plug-in d'édition de blocs GutenKit sur votre site Web. Voici les plug-ins et thèmes requis pour utiliser le générateur de pop-ups de manière transparente sur votre site Web.

☑️Plugin(s) prérequis :

• Version gratuite de GutenKit
• ou, Version GutenKit Pro

☑️ Thème: Thème Hello Blocks ou n'importe quel thème de bloc WordPress.

Une fois que vous avez installé le plugin GutenKit, accédez à GutenKit > Modules. Trouvez le Générateur de fenêtres contextuelles et cliquez sur le Installer bouton. Avec le Popup Builder activé, vous êtes prêt à commencer à créer des popups WordPress dans Gutenberg pour votre site WordPress.

Concevez des popups pour WordPress en utilisant n'importe quel bloc Gutenberg

Naviguez maintenant vers GutenKit > Pop-up et cliquez Créer une nouvelle fenêtre contextuelle pour ouvrir l'éditeur dans lequel vous allez créer la fenêtre contextuelle.

Vous pouvez ensuite utiliser le bloc pour créer la fenêtre contextuelle dans l'éditeur.

Avec le générateur de popups GutenKit, vous pouvez utiliser n'importe quel bloc Gutenberg pour concevoir votre popup. 

Vous pouvez utiliser plus de 65 blocs GutenKit et plus de 18 modules pour concevoir une fenêtre contextuelle moderne et sophistiquée pour votre site.

Cela inclut des blocs tels que des titres, des paragraphes, des boutons, des images et même des vidéos dans votre fenêtre contextuelle, ce qui la rend hautement personnalisable. 

Créez des popups Gutenberg avec des modèles prédéfinis

D'autre part, au lieu de partir de zéro, vous pouvez économiser du temps et des efforts en utilisant des modèles prêts à l'emploi. Avec plus de 500 modèles et modèles disponibles dans la bibliothèque de modèles de GutenKit, vous pouvez créer rapidement des popups d'aspect professionnel en quelques minutes seulement.

Pour importer les modèles prêts à l'emploi

1. Éditeur de création de popups pour Gutenberg.
2. Clique sur le bibliothèque de modèles bouton.
3. Choisissez un motif de la bibliothèque.

Après cela, vous pouvez modifier le contenu et personnaliser les styles pour les adapter à votre campagne. C'est un moyen rapide et simple de créer et de faire fonctionner de superbes pop-ups !

Utilisez des conditions intelligentes pour afficher les fenêtres contextuelles Gutenberg sur votre site Web

Vous avez la possibilité de choisir les pages sur lesquelles vous souhaitez que vos fenêtres contextuelles apparaissent. Rendez-vous simplement dans l'éditeur de blocs de fenêtres contextuelles et, sous l'onglet « Contenu », vous verrez une option intitulée « Conditions ». 

À partir de là, cliquez simplement sur le  + Ajouter une condition et définissez les règles selon lesquelles vous souhaitez que votre popup s'affiche. C'est aussi simple que ça !

Avec le générateur de popups GutenKit, vous pouvez définir les conditions d'inclusion et d'exclusion.

• Inclure la condition : Avec les conditions d'inclusion, vous pouvez ajouter des fenêtres contextuelles à l'ensemble du site Web, à des pages spécifiques ou à des pages d'archives.
• Exclure la condition : Vous pouvez décider où ne pas afficher les fenêtres contextuelles sur votre site avec les conditions d'exclusion.

Voici comment vous pouvez afficher des fenêtres contextuelles sur votre site Web à l'aide de conditions intelligentes :

Afficher les pop-ups Gutenberg sur l'ensemble du site Web

Pour afficher le popup sur toutes les pages de votre site Web, 

👉 Étape 1: Ajoutez une nouvelle condition pour les popups.

👉 Étape 2: Sélectionnez la condition « Inclure ».

👉 Étape 3 : Choisissez « Site entier » pour afficher une fenêtre contextuelle sur chaque page.

Désactiver l'affichage de fenêtres contextuelles sur des pages spécifiques

Il peut arriver que vous ne souhaitiez pas que des fenêtres contextuelles apparaissent sur certaines pages. Vous pouvez le faire avec Exclure conditions. 

👉 Étape 1 : Ajoutez une nouvelle condition pour les popups.

👉 Étape 2 : Sélectionnez la condition « Exclure ».

👉 Étape 3 : Choisissez « Singulier ».

👉 Étape 4 : Sélectionnez une page pour exclure l'apparition des fenêtres contextuelles.

Afficher les fenêtres contextuelles sur des pages spécifiques uniquement

Si vous souhaitez des campagnes plus ciblées, vous souhaiterez peut-être afficher des fenêtres contextuelles sur certaines pages de votre site Web.

👉 Étape 1 : Ajoutez une nouvelle condition pour les popups.

👉 Étape 2 : Sélectionnez la condition « Inclure ».

👉 Étape 3 : Choisissez « Singulier ».

👉 Étape 4 : Sélectionnez une page pour afficher une fenêtre contextuelle.

De plus, pour être sûr que le popup n'apparaisse pas sur d'autres pages, vous pouvez ajouter un exclure la conditionet sélectionnez l'ensemble du site pour empêcher la fenêtre contextuelle de s'afficher sur l'ensemble du site Web.

Popups WordPress sur les pages d'archives

Vous pouvez également afficher des popups sur n'importe quelle page d'archive WordPress en définissant une condition. Pour cela, Ajouter une condition > Inclure > Archiver > Sélectionner une archive page.

D'autre part, si vous souhaitez empêcher l'affichage de fenêtres contextuelles sur une page d'archive particulière, vous pouvez définir une condition d'exclusion. Suivez simplement les mêmes étapes : Pour cela, Ajouter une condition > Exclure > Archiver > Sélectionner une archive page.

Décidez comment et quand déclencher les popups Gutenberg

Vous avez un contrôle total sur la manière dont les fenêtres contextuelles s'affichent sur les pages de votre site Web. Vous pouvez décider si les fenêtres contextuelles s'affichent au chargement de la page, à la sortie ou après une interaction.

Sur le générateur de pop-ups GutenKit, vous pouvez sélectionner la manière dont les pop-ups se déclencheront sur votre site Web à partir de Contenu > Événements ouverts sur l'éditeur de blocs..

Cela vous aide à développer différents types de popups sur Gutenberg. Voici les types de pop-ups WordPress sur Gutenberg, vous pouvez concevoir avec GutenKit Popup Builder.

1. Fenêtres contextuelles d'entrée

• Déclenchement: Déclenché instantanément lorsque la page se charge sur le navigateur de l'utilisateur.
• But: Engage les utilisateurs dès qu'ils arrivent sur le site Web.
• Cas d'utilisation : Accueille les utilisateurs avec une remise, une annonce d'événement ou demande un abonnement immédiat.

💡 Comment déclencher ? Sélectionnez l'événement ouvert comme «Au chargement de la page»

2. Fenêtres contextuelles d'intention de sortie

• Déclenchement: Activé lorsque l'utilisateur souhaite fermer l'onglet ou le navigateur.
• But: Capture les utilisateurs avant qu'ils ne quittent le site.
• Cas d'utilisation : Offre une remise, un abonnement à une newsletter ou une offre spéciale.

💡 Comment déclencher ? Sélectionnez l'événement ouvert comme «Intention de sortie sur la page»

3. Pop-ups de déclenchement de défilement

• Déclenchement: Déclenché par le défilement d'une page par l'utilisateur.
• But: Propose une offre promotionnelle ou demande des commentaires après que l'utilisateur a exploré une certaine partie de la page.
• Cas d'utilisation : Fait la promotion de contenu supplémentaire, d'un formulaire d'inscription ou d'une offre à durée limitée.

💡 Comment déclencher ? Sélectionnez l'événement ouvert comme «Page défilée».

Après cela, définissez le «Progression du défilement de la page pour décider à quel moment la fenêtre contextuelle apparaîtra lorsque l'utilisateur fait défiler la page.

4. Fenêtres contextuelles d'inactivité de l'utilisateur

• Déclenchement: Lorsque l'utilisateur est inactif pendant un certain temps.
• But: Réengager les utilisateurs qui sont restés inactifs pendant un certain temps sur le site.
• Cas d'utilisation : Rappelle aux utilisateurs des offres spéciales, les invite à agir ou suggère des articles qu'ils ont peut-être laissés dans leur panier.

💡 Comment déclencher ? Sélectionnez l'événement ouvert comme «Après l'inactivité».

Maintenant, réglez le Temps d'inactivité de l'utilisateur en quelques secondes pour décider quand la fenêtre contextuelle apparaîtra une fois que l'utilisateur sera devenu inactif.

5. Pop-ups au clic

• Déclenchement: Activé par l'interaction de l'utilisateur avec une section de la page.
• But: Affiche le contenu lorsque l'utilisateur clique sur un élément de page spécifique (par exemple, un bouton ou une image).
• Cas d'utilisation : Souvent utilisé pour les détails du produit, les soumissions de formulaires supplémentaires ou les lectures vidéo.

💡 Comment déclencher ? Sélectionnez l'événement ouvert comme «Cliquez sur le sélecteur personnalisé».

Ajoutez maintenant Classe de sélecteur pour la section. 

Avec ces différents types de popups WordPress disponibles dans Gutenberg, vous avez la possibilité de choisir le meilleur format qui correspond à vos objectifs et améliore l'expérience utilisateur, rendant votre site Web plus attrayant et efficace pour capter l'attention et générer des conversions.

Planifiez l'activation des fenêtres contextuelles pour votre campagne

Parfois, vous utiliserez les fenêtres contextuelles pour promouvoir des campagnes sur votre site Web. Ces campagnes ont une date et une heure de lancement précises. Vous devez donc respecter ce calendrier exact pour activer la fenêtre contextuelle.

Vous pouvez le faire avec le Règles avancées. 

➡️ Étape 1: Basculez le bouton sur « Activé » pour « Date et heure prévues».

➡️ Étape 2 : Met le Temps quand vous souhaitez activer le popup.

➡️ Étape 3 : Choisir la Date du lancement de la campagne pop-up.

Pourquoi choisir le générateur de popups GutenKit pour WordPress ?

Le Générateur de pop-ups GutenKit se distingue comme un choix de premier ordre pour la création de popups dans WordPress en raison de son intégration transparente avec l'éditeur de blocs Gutenberg, offrant une expérience intuitive et hautement personnalisable pour les utilisateurs. Voici pourquoi c'est une excellente solution pour les sites WordPress :

✅ Intégration transparente de Gutenberg :

GutenKit est spécialement conçu pour Gutenberg, ce qui signifie que vous pouvez concevoir et gérer des fenêtres contextuelles à l'aide de la même interface basée sur des blocs que vous connaissez déjà. Cela élimine le besoin de générateurs de fenêtres contextuelles externes ou de codage, ce qui simplifie l'ensemble du processus et permet une expérience cohérente.

✅ Modèles prédéfinis pour une configuration rapide :  

   GutenKit propose une variété de modèles de pop-up conçus par des professionnels qui peuvent être facilement personnalisés pour s'adapter au style de votre marque. Ces modèles permettent de gagner du temps et des efforts, offrant un point de départ pour ceux qui ne veulent pas créer de pop-ups à partir de zéro mais qui souhaitent néanmoins un design soigné et moderne.

✅ Règles d'affichage avancées : 

Avec GutenKit, vous avez un contrôle total sur le moment et l'endroit où vos pop-ups apparaissent. Vous pouvez définir des conditions d'affichage précises en fonction des pages sur lesquelles vous souhaitez afficher la pop-up. 

Cela garantit que vos popups s'affichent aux moments les plus optimaux, améliorant ainsi l'engagement sans être intrusif.

✅ Plusieurs options de déclenchement :

GutenKit propose plusieurs options de déclenchement pour l'affichage de fenêtres contextuelles, par exemple lors du chargement de la page, après un délai, lors du défilement ou lorsque l'utilisateur est sur le point de quitter la page. 

Vous pouvez également déclencher des fenêtres contextuelles lorsque les utilisateurs interagissent avec des éléments spécifiques, vous donnant ainsi un contrôle total sur le parcours utilisateur.

✅ Personnalisation flexible

Le générateur de popups GutenKit permet une personnalisation étendue de vos popups, des animations et des styles à la typographie et aux couleurs. 

Vous pouvez même ajouter du CSS personnalisé pour un style plus avancé, garantissant que vos fenêtres contextuelles correspondent à la conception et à l'image de marque uniques de votre site Web.

✅ Réactif et optimisé pour les mobiles 

Les pop-ups créés avec GutenKit sont entièrement réactifs et adaptés aux appareils mobiles, ce qui garantit que vos pop-ups s'affichent parfaitement sur n'importe quel appareil. Vous pouvez personnaliser l'apparence avec des animations d'entrée et de sortie, des styles d'arrière-plan, des couleurs de superposition, etc.

✅ Léger et axé sur la performance 

Contrairement à de nombreux autres plugins contextuels, GutenKit est conçu pour être léger et optimisé en termes de performances. 

Cela signifie que vous n'aurez pas à vous soucier des fenêtres contextuelles qui ralentissent votre site, ce qui est crucial pour l'expérience utilisateur et le référencement.

Emballer

En suivant ces étapes, vous pourrez facilement créer et afficher des popups sur vos sites WordPress. Avec le générateur de popups GutenKit, vous pouvez facilement intégrer des popups dynamiques à votre site WordPress, vous permettant ainsi de communiquer efficacement avec votre public. 

Tirez les leçons de ce guide et commencez à expérimenter différentes stratégies de pop-up pour maximiser le potentiel de votre site !

Tout comme Popup Builder, GutenKit est livré avec plus de 65 blocs, plus de 18 modules et plus de 500 modèles prêts à l'emploi pour vous offrir une expérience de création de pages avancée dans l'éditeur de blocs Gutenberg. Alors installez GutenKit dès aujourd'hui et commencez à créer le site Web de vos rêves dans WordPress.