Comment créer une barre flottante « collante » dans WordPress

Vous voulez attirer l'attention de vos visiteurs avec une barre flottante collante dans WordPress ?

Avec une bannière ou une barre flottante collante, vous pouvez afficher un message en haut ou en bas de votre site Web sans perturber l'expérience utilisateur. Cela vous permet de promouvoir les inscriptions à la newsletter, les produits, les ventes flash, les comptes de réseaux sociaux et d'afficher tout message personnalisé. Par exemple, vous pourriez vouloir afficher les paramètres des cookies pour demander au visiteur la permission de suivre ses données pendant qu'il navigue sur votre site.

Dans ce guide étape par étape, nous vous montrerons la manière la plus simple de créer une bannière flottante WordPress. Avant de commencer le tutoriel, clarifions ce qu'est exactement une barre flottante collante.

Qu'est-ce qu'une barre flottante collante ?

Une bannière flottante collante reste en haut ou en bas de votre page Web pendant que vos visiteurs font défiler la page. 

Ces barres sont toujours visibles pour l'utilisateur et il peut interagir avec votre message à tout moment pendant son parcours de navigation.

Les barres collantes sont conçues pour être flexibles et servir à plusieurs objectifs. Vous pouvez donc les adapter pour afficher le message de votre choix. Pour vous donner quelques exemples, vous pouvez ajouter des remises de bienvenue pour les nouveaux visiteurs ou promouvoir un produit nouvellement ajouté afin de maximiser la visibilité.

Utilisées de la bonne manière, vous pouvez utiliser les barres flottantes pour :

• Améliorer vos ventes et vos revenus grâce aux ventes flash, aux remises et aux offres
• Générer du trafic vers votre contenu en ligne (podcasts, articles, guides, vidéos, etc.)
• Augmenter l'engagement et les conversions sur le site Web
• Générer des prospects et des abonnés pour développer votre liste de marketing par e-mail 
• Stimuler l'engagement et le nombre d'abonnés sur les réseaux sociaux
• Accroître la notoriété de la marque

Il existe de nombreuses façons d'utiliser les barres collantes à votre avantage. Cela dit, apprenons à créer une bannière flottante WordPress attrayante pour votre site.

Créer une bannière flottante collante pour WordPress

Il existe pas mal de plugins de barres flottantes pour WordPress, mais tous n'offrent pas les fonctionnalités dont vous avez besoin pour en créer et personnaliser une facilement.

Nous allons vous montrer comment en créer un en moins de 5 minutes sans toucher une seule ligne de code en utilisant notre outil de bannière flottante préféré appelé OptinMonster.

OptinMonster est l'outil de génération de prospects n°1 qui vous permet de créer des campagnes marketing accrocheuses pour convertir vos visiteurs en clients. Celles-ci incluent des barres flottantes, des pop-ups, des formulaires coulissants, des formulaires intégrés, et plus encore.

OptinMonster est livré avec une bibliothèque de plus de 50 modèles de barres flottantes pré-conçus, vous n'aurez donc pas à partir de zéro.

Vous y trouverez des designs pour les annonces, les réductions, les offres de fêtes populaires, les abonnements à la newsletter, et bien plus encore.

Vous pouvez prévisualiser et sélectionner un modèle de votre choix. Ensuite, il y a un constructeur par glisser-déposer si facile à utiliser. Vous pouvez personnaliser votre texte, le design de l'image, les couleurs, et plus encore, le tout en quelques clics de souris.

De plus, OptinMonster vous permet de définir des règles de ciblage afin que vous puissiez afficher vos bannières flottantes aux bonnes personnes au bon moment et au bon endroit. Par exemple, vous pouvez configurer votre campagne pour qu'elle apparaisse uniquement aux nouveaux utilisateurs ou à ceux qui sont sur le point de quitter votre site Web. Il vous permet également de recibler et de suivre vos prospects pour améliorer l'engagement. 

De plus, OptinMonster suit et affiche toutes les statistiques importantes dont vous avez besoin directement dans son tableau de bord. Vous pouvez voir le nombre de visiteurs qui ont vu et cliqué sur votre bannière flottante WordPress, et même combien d'argent vous gagnez grâce à la campagne. 

Pour vous donner un aperçu de ce que vous pouvez faire avec OptinMonster, voici quelques exemples de campagnes :

Le meilleur atout d'OptinMonster est qu'il vous offre la flexibilité de créer et de gérer toutes vos campagnes, y compris les barres flottantes, directement depuis votre tableau de bord WordPress. 

Maintenant, ne perdons pas de temps et commençons à créer notre bannière flottante WordPress avec OptinMonster.

Étape 1 : Installer et activer le plugin OptinMonster

Tout d'abord, vous devez créer un compte OptinMonster. Le plugin commence à 9 $ par mois avec une garantie de remboursement de 30 jours.

Ensuite, vous devrez installer le plugin OptinMonster pour connecter le compte à votre site. 

Le plugin connecteur est disponible gratuitement, vous pouvez donc le télécharger facilement depuis votre tableau de bord WordPress. Pour plus de détails, vous pouvez consulter notre guide sur comment installer un plugin WordPress.

Lorsque vous installez et activez le plugin OptinMonster sur votre site, il lancera un assistant de configuration. Vous aurez la possibilité de connecter votre compte nouvellement créé.

Gardez à l'esprit que si vous êtes connecté à votre compte OptinMonster dans un autre onglet, le plugin le détectera automatiquement et synchronisera votre site Web.

Maintenant, vous pouvez commencer à créer votre première bannière flottante WordPress avec OptinMonster.

Étape 2 : Créer une nouvelle campagne de barre flottante

OptinMonster vous permet de créer et de personnaliser des bannières flottantes à l'intérieur de votre tableau de bord d'administration WordPress. 

Pour cela, allez dans l'onglet OptinMonster, et vous verrez différents types de campagnes de génération de prospects tels que popup, barre flottante, plein écran, inline, et plus encore. 

Pour créer une campagne de barre collante WordPress, nous choisirons l'option Barre flottante. 

Cela lancera la bibliothèque de modèles composée de superbes modèles de bannières flottantes que vous pouvez choisir. 

Ici, vous pouvez survoler n'importe quel modèle pour prévisualiser la barre flottante collante sur la même page. Lorsque vous avez trouvé le meilleur design pour votre campagne, cliquez sur le bouton Utiliser le modèle pour créer votre bannière flottante.

Cela ouvrira une fenêtre popup où vous pourrez donner un nom à votre campagne de barre flottante. 

Ensuite, cliquez sur le bouton Commencer la construction pour lancer le constructeur de campagne OptinMonster. 

Étape 3 : Personnaliser votre bannière flottante WordPress

Dans le constructeur de campagne, vous verrez tous les blocs d'éléments sur la gauche et l'aperçu de votre barre collante sur le côté droit. Ici, vous pouvez facilement faire glisser et déposer les blocs requis sur votre bannière.

Vous trouverez les 12 blocs que vous pouvez utiliser pour rendre votre bannière plus attrayante et interactive. 

Voici quelques-uns des blocs d'éléments utiles : 

• Compte à rebours
• ChatBot
• Icônes sociales
• Champs d'optin
• Bouton Oui/Non

1. Modifier les blocs de contenu

Si vous souhaitez personnaliser un bloc de contenu, cliquez simplement dessus et vous verrez l'éditeur de bloc s'ouvrir dans la barre des tâches de gauche.

Par exemple, vous pouvez remplacer l'image en téléchargeant la vôtre ou en choisissant une image dans la bibliothèque de médias existante. Vous pouvez également modifier les paramètres de l'image tels que l'opacité, la largeur, le texte alternatif, etc.

En plus de cela, OptinMonster vous permet d'ajouter des liens à vos images afin que les utilisateurs puissent cliquer dessus pour être redirigés vers la page de votre choix. Il existe une option pour que l'URL du lien s'ouvre dans une nouvelle fenêtre et vous pouvez activer le suivi des clics pour voir combien de personnes cliquent sur l'image.

De la même manière, vous pouvez modifier le texte du contenu de vos bannières flottantes et modifier également le bouton d'optin. Tout ce que vous avez à faire est de sélectionner l'élément dans votre aperçu et d'entrer votre texte personnalisé.

Une fois que vous avez terminé de personnaliser vos blocs de contenu, cliquez sur le bouton Enregistrer.

2. Configurer les paramètres de la campagne

OptinMonster vous permet de modifier les paramètres de la campagne à l'intérieur du constructeur. Pour cela, vous devrez cliquer sur l'icône Paramètres en bas à gauche du constructeur de campagne.

Ensuite, vous verrez les 4 paramètres principaux sur le côté gauche et l'aperçu en direct de la barre flottante sur le côté droit de la page. Les paramètres incluent :

• Détails de la campagne : Permet de modifier le nom de la campagne, la description et d'autres informations sur votre barre flottante.
• Style d'affichage : Offre de nombreuses options de conception et de style pour correspondre à la marque de votre site Web.
• Paramètres d'affichage : Choisissez le nombre de fois où votre campagne sera affichée aux visiteurs.
• Paramètres de la barre flottante : Changez la position de votre barre flottante du haut vers le bas et vice versa.

Parce que les modèles OptinMonster ont fière allure et fonctionnent bien dès le départ, vous n'aurez pas besoin de les personnaliser beaucoup, sauf pour modifier quelques détails afin de correspondre aux objectifs de votre campagne. Mais vous pouvez facilement apporter des modifications à la conception et au style si nécessaire.

Dans l'option Style d'affichage, vous pouvez modifier les options générales de style et de conception. Les paramètres de base vous permettent de modifier le style, la couleur d'arrière-plan, l'image, le bouton de fermeture, et plus encore.

Les paramètres avancés vous permettent de personnaliser même les plus petits détails tels que les bordures, les espacements, les ombres, et plus encore.

Par défaut, OptinMonster affiche les bannières flottantes en bas de votre site, mais vous pouvez changer cela et les déplacer en haut.

Pour ce faire, allez dans Paramètres flottants et activez l'option Charger la barre flottante en haut de la page.  

N'oubliez pas de sauvegarder vos paramètres une fois que vous avez terminé.

Maintenant, nous allons découvrir les règles d'affichage que vous pouvez définir pour votre campagne de bannière flottante afin de cibler les visiteurs. 

Étape 4 : Définir les règles de ciblage pour afficher votre bannière flottante

Optinmonster offre de puissantes fonctionnalités de ciblage d'audience pour optimiser les conversions et générer des prospects à partir de vos campagnes.

Pour ajouter de nouvelles règles de ciblage, vous devrez naviguer vers l'onglet Règles d'affichage en haut de l'éditeur.

Ensuite, vous pouvez voir la règle par défaut qui affiche votre bannière si un visiteur reste sur n'importe quelle page de votre site pendant 5 secondes. 

Si vous souhaitez modifier la règle d'affichage, vous pouvez cliquer sur le bouton Modifier ou cliquer sur la règle existante, et vous verrez la liste des règles d'affichage prédéfinies proposées par OptinMonster. 

Toutes les règles sont organisées en différents onglets afin que vous puissiez facilement trouver la règle de ciblage pour votre campagne. Voici quelques points forts :

• Distance de défilement : Afficher uniquement une fois qu'un visiteur a fait défiler une certaine profondeur sur la page
• Heure et date : Cibler des jours fériés spécifiques, des jours de la semaine et des périodes pour lancer des ventes flash ou des offres à durée limitée
• Emplacement physique : Interagir avec les utilisateurs en fonction de leur zone géographique pour localiser l'offre de campagne
• Appareil du visiteur : Afficher/Ne pas afficher les campagnes en fonction de si un utilisateur est sur un ordinateur de bureau ou un appareil mobile

Pour ajouter une règle, il vous suffit de cliquer dessus. C'est aussi simple que ça !

Vous n'aurez jamais besoin d'ajouter de code ou de travailler avec des paramètres complexes pour cibler votre audience. Ensuite, nous vous montrerons comment connecter votre campagne à votre compte e-mail afin que tous vos nouveaux prospects soient automatiquement ajoutés à votre liste de contacts.

Étape 5 : Connexion à votre fournisseur d'e-mail

OptinMonster s'intègre à tous les principaux services de marketing par e-mail tels que Constant Contact, Aweber, ActiveCampaign et ConvertKit.

Lorsque vous synchronisez votre compte e-mail, vous pouvez collecter des adresses e-mail et envoyer des e-mails automatisés à vos nouveaux abonnés. OptinMonster propose également des options intégrées pour segmenter vos prospects afin que votre liste reste organisée et que vous puissiez envoyer des e-mails pertinents en fonction de ce pour quoi ils se sont inscrits.

Pour vous connecter à votre fournisseur d'e-mail, ouvrez l'onglet Intégrations dans l'éditeur de campagne. 

Ici, vous pouvez choisir votre fournisseur de messagerie et vous connecter à votre compte. Certains fournisseurs ont besoin d'une API pour fonctionner, que vous pouvez trouver dans les paramètres de votre compte de messagerie.

N'oubliez pas de sauvegarder vos paramètres après avoir configuré votre intégration.

Vous êtes maintenant prêt à publier votre campagne de bannière flottante adhésive sur votre site WordPress

Étape 6 : Publiez votre bannière flottante WordPress

Rendez-vous dans l'onglet Publication de l'éditeur et vous verrez des options pour voir un aperçu en direct de votre campagne. Lorsque vous êtes prêt, il vous suffit de changer le statut sur Publier.

Après avoir cliqué sur le bouton Publier, vous verrez le statut de la campagne passer à « Publié ». 

Rendez-vous sur votre tableau de bord WordPress et ouvrez l'onglet OptinMonster » Campagnes. Assurez-vous que le statut est également défini sur Publier ici.

Maintenant, lorsque vous visiterez votre site, vous devriez voir votre campagne de barre flottante apparaître selon les règles d'affichage que vous avez définies.

Et c'est tout pour aujourd'hui ! Nous espérons que cet article vous a aidé à apprendre facilement comment créer une bannière flottante adhésive pour votre site WordPress.

Maintenant que vous savez comment utiliser OptinMonster, vous pouvez continuer et créer d'autres campagnes à forte conversion sur votre site comme des popups, des slide-ins, des jeux de roue de coupons, et plus encore. 

Ensuite, pour générer plus de prospects et de conversions sur votre site, vous voudrez certainement lire ces articles :

• Comment créer une page de capture de prospects dans WordPress
• Comment créer un popup dans WordPress (étape par étape)
• Créer une page de destination à forte conversion

Ces articles vous montrent plus d'opportunités pour cibler vos utilisateurs afin de les faire interagir et de les faire s'abonner à votre marque.