Basculer le menu

Comment créer des fenêtres contextuelles Beaver Builder (2 méthodes)

Publié: 2022-10-07

Enregistrez les modèles de création de pages et les ressources de conception dans le cloud ! Démarrez avec Assistant.Pro

how-to-create-beaver-builder-popups-2-methods
  • Castor Bâtisseur

Comment créer des fenêtres contextuelles Beaver Builder (2 méthodes)

Amener les visiteurs de votre site Web à agir peut parfois être difficile. Bien que vous puissiez avoir de puissants appels à l'action (CTA) ou des boutons proéminents, certains utilisateurs négligeront ces éléments et se concentreront sur ce pour quoi ils sont venus à l'origine. Heureusement, les popups peuvent être un moyen efficace de générer des conversions sur votre site WordPress.

Dans cet article, nous discuterons des avantages de l'utilisation des popups. Ensuite, nous vous montrerons comment les créer dans Beaver Builder. Enfin, nous examinerons quelques bonnes pratiques d'utilisation des popups. Commençons!

Table des matières:

  • Meilleures pratiques pour l'utilisation de popups sur votre site Web
  • Les avantages de l'utilisation de popups sur votre site Web
  • Comment créer des fenêtres contextuelles Beaver Builder (2 méthodes)
    1. Créateur de fenêtres contextuelles
    2. L'extension PowerPack
  • Conclusion
  • questions connexes

Meilleures pratiques pour l'utilisation de popups sur votre site Web

Les popups peuvent être efficaces, mais ils peuvent aussi gêner vos visiteurs et les faire fuir. Si vous souhaitez créer des popups puissants sur votre site Web, il y a quelques bonnes pratiques à garder à l'esprit.

Tout d'abord, vous voudrez éviter d'utiliser des fenêtres contextuelles d'entrée. Ce sont des fenêtres qui apparaissent dès qu'un visiteur atterrit sur votre page. Ils peuvent être intrusifs et peuvent inciter les utilisateurs à quitter votre site.

De plus, vous voudrez peut-être éviter d'utiliser le même message pour tout le monde. Personnaliser vos popups peut vous aider à générer plus de conversions.

Vous pouvez le faire en segmentant vos visiteurs en fonction de leur emplacement, de leurs intérêts et d'autres facteurs. De cette façon, vous pouvez leur montrer les messages les plus pertinents :

Pixel Happy Studio est construit avec Beaver Builder et utilise une fenêtre contextuelle pour capturer les e-mails

Vous voudrez également garder vos popups sur la marque. Ils doivent s'intégrer à l'apparence générale de votre site Web. L'utilisation de popups qui ne correspondent pas à votre marque visuelle peut donner l'impression que votre site n'est pas professionnel.

De plus, il est important de garder votre contenu à jour. Les visiteurs peuvent quitter votre site sans conversion si une fenêtre contextuelle contient des offres expirées ou des informations obsolètes.

Enfin, rappelez-vous que moins c'est plus. L'affichage de plusieurs popups peut être un peu écrasant pour vos visiteurs. Vous voudrez également vous assurer que chaque popup a un seul focus. Essayer d'accomplir trop de choses avec un seul popup ne fera que confondre vos visiteurs.

Les avantages de l'utilisation de popups sur votre site Web

La création de popups peut être un moyen puissant de promouvoir votre contenu, d'engager des clients et d'augmenter les taux de conversion. Ils peuvent être utilisés à diverses fins, telles que :

  • Annoncer une offre spéciale
  • Diriger le visiteur vers un article de blog connexe
  • Construire une liste de diffusion

Si vous essayez de gagner plus d'abonnés, vous pouvez créer une fenêtre contextuelle avec un formulaire d'inscription. Vous pouvez également mettre en évidence les avantages de rejoindre votre liste de diffusion (par exemple, des offres régulières ou des cadeaux) pour augmenter les conversions.

Les popups peuvent être difficiles à ignorer. Si vous souhaitez promouvoir un produit ou une offre en particulier, ils peuvent vous aider à augmenter vos ventes sur votre site.

Comment créer des fenêtres contextuelles Beaver Builder (2 méthodes)

Voyons maintenant deux façons de créer des popups à fort taux de conversion pour votre site.

1. Créateur de fenêtres contextuelles

La première méthode pour afficher des popups sur votre site Beaver Builder consiste à utiliser un outil comme Popup Maker. Une fois activé, ce plugin vous donnera la possibilité de créer votre première popup :

Écran d'accueil du créateur de popups

Vous pouvez commencer par entrer un nom pour votre popup. Ensuite, vous pouvez créer le contenu :

Créer un nouveau popup dans Popup Maker

De plus, vous pouvez insérer un module ou une mise en page Beaver Builder enregistré avec un shortcode. Par exemple, vous pouvez créer une conception contextuelle dans le générateur, puis l'ajouter ici.

Vous pouvez utiliser les codes abrégés Beaver Builder pour les lignes, les colonnes, les mises en page et les publications enregistrées. Accédez à Beaver Builder > Modules enregistrés et sélectionnez Ajouter nouveau . Donnez un nom à votre module, puis choisissez Module enregistré sous Type et Boîte modale sous Module :

Ensuite, cliquez sur Ajouter un module enregistré et sélectionnez Lancer Beaver Builder pour créer votre popup :

Création d'une fenêtre contextuelle en tant que modèle enregistré dans Beaver Builder.

Lorsque vous êtes prêt, cliquez sur Terminé et Publier . Ensuite, revenez à Beaver Builder> Module enregistré et localisez votre fenêtre contextuelle. Ici, vous verrez un shortcode pour votre module :

Obtenir le shortcode pour le module enregistré.

Vous pouvez maintenant revenir à votre popup dans le Popup Maker, et copier/coller ce shortcode :

Saisie de shortode dans Popup maker.

Si vous faites défiler jusqu'à Popup Settings , vous pouvez définir les déclencheurs de votre popup :

Section Déclencheurs de Popup Maker

Dans la section Ciblage , vous avez la possibilité d'afficher votre popup à des utilisateurs particuliers, en fonction d'une condition sélectionnée :

Options de ciblage de Popup Maker

Dans la section Affichage , vous pouvez sélectionner un type de popup, modifier son apparence, changer sa taille, etc. :

Afficher les préréglages de Popup Maker

Si vous allez dans l'onglet Fermer , vous trouverez quelques paramètres pour le bouton de fermeture :

Fermer les options de Popup Maker

Une fois que vous êtes satisfait de vos modifications, cliquez sur Publier !

2. L'extension PowerPack

Notre plugin Beaver Builder est livré avec une grande variété de modules parmi lesquels choisir. Pour encore plus d'options, cependant, vous pouvez consulter une extension comme le PowerPack Addon. Il ajoute diverses nouvelles fonctionnalités au constructeur, y compris un module contextuel. Vous pouvez choisir parmi divers modèles prédéfinis ou créer votre popup à partir de zéro.

Pour commencer à utiliser la deuxième méthode, vous devez avoir installé et activé Beaver Builder et l'extension PowerPack sur votre site. Ouvrez ensuite une page dans WordPress et sélectionnez l'option Lancer Beaver Builder .

Cliquez sur le bouton + dans le coin supérieur droit de votre écran. Dans l'onglet Modules , sélectionnez PowerPack Modules et recherchez la Modal Box :

Recherche de la boîte modale dans Beaver Builder

Faites glisser et déposez la boîte modale dans la page et accédez au panneau des paramètres sur la gauche :

La boîte modale PowerPack dans Beaver Builder

Dans l'onglet Général , vous pouvez modifier la largeur et la hauteur de la fenêtre contextuelle. Si vous faites défiler jusqu'à la section Contenu , vous pouvez sélectionner le type de contenu que vous souhaitez afficher :

Choisir le type de contenu à afficher dans la popup Beaver Builder

Pour ce didacticiel, nous allons créer un formulaire d'inscription. Changez simplement le Type en Contenu et entrez le shortcode de votre formulaire. Alternativement, vous pouvez ajouter le module Subscribe Form à votre popup :

Insérez votre shortcode opt-in

Dans l'onglet Paramètres , vous pouvez définir certaines conditions pour votre popup. Par exemple, vous pouvez le faire apparaître sur la page après 10 secondes :

Ajout d'un délai pour le popup dans Beaver Builder.

Vous pouvez également le déclencher lors de l'intention de sortie ou lorsqu'un utilisateur fait défiler 50 % de la page.

Sous Paramètres de sortie , vous pouvez permettre à l'utilisateur de fermer la fenêtre contextuelle avec un bouton ou en appuyant sur Échap sur son clavier :

Modification des paramètres de la boîte modale dans Beaver Builder

Dans l'onglet Style modal , vous pouvez modifier l'apparence de votre contenu, y compris la couleur d'arrière-plan :

Modification du style de la fenêtre contextuelle dans Beaver Builder

Vous pouvez également personnaliser le bouton de fermeture pour le rendre plus visible. Si vous cliquez sur les trois ellipses, vous pouvez ajouter une animation à votre popup. Par exemple, vous pouvez le faire apparaître et disparaître de la page :

Ajout d'animation aux fenêtres contextuelles de Beaver Builder

Lorsque vous êtes prêt, appuyez sur Enregistrer , puis sélectionnez Terminé > Publier . Ça y est : vous avez créé votre première popup avec Beaver Builder !

Conclusion

Si vous avez du mal à interagir avec vos visiteurs et à les faire agir, les popups pourraient être la solution. Une fenêtre contextuelle peut être difficile à ignorer pour les utilisateurs et, si elle est présentée correctement, elle peut apporter des résultats positifs.

Dans cet article, nous avons examiné deux manières de créer des popups Beaver Builder :

  1. Installez un plugin comme Popup Maker : vous pouvez utiliser cet outil pour créer une variété de popups et ajouter des modules Beaver Builder, des lignes et plus encore avec des shortcodes.
  2. Utilisez le module complémentaire PowerPack : Cela vous donne accès au module Modal Box , qui vous permet de créer différentes fenêtres contextuelles et de personnaliser leurs paramètres.

questions connexes

Comment puis-je déclencher une boîte modale via une URL ?

Pour déclencher une Modal Box via une URL lors de l'utilisation de Beaver Builder et du module Modal Popup Box trouvé dans le plugin PowerPack Add-on, allez simplement dans Modal Box Settings > Settings > Trigger > Trigger Method > Other , et copiez la classe CSS depuis le champ. Ensuite, ajoutez la classe CSS à l'URL existante. Par exemple : https://www.monsite.com/#[classe CSS collée]

Puis-je empêcher les prospects convertis de voir les fenêtres contextuelles ?

Il existe une option pour empêcher les prospects convertis de voir les fenêtres contextuelles. Vous pouvez le faire via les paramètres des cookies dans le plugin WordPress Popup Maker . En appliquant diverses options de contrôle des cookies pour les fenêtres contextuelles après qu'un visiteur a effectué une action, vous pouvez l'empêcher de revoir la fenêtre contextuelle d'origine.