Comment créer une barre d'alerte dans WordPress (3 méthodes faciles)

Voulez-vous ajouter une barre d'alerte à votre site WordPress ?

Une barre d'alerte ou une barre de notification est un excellent moyen d'informer les visiteurs des mises à jour importantes, des offres spéciales, des lancements de nouveaux produits, et plus encore.

Dans cet article, nous vous montrerons comment créer une barre d'alerte dans WordPress avec 3 solutions faciles.

Pourquoi créer une barre d'alerte dans WordPress ?

Une barre d'alerte est un excellent moyen d'informer vos visiteurs de quelque chose d'important sur votre site Web. Il peut s'agir d'un événement de vente en cours, d'une mise à jour de vos heures d'ouverture ou de modifications de vos services.

Vous pouvez également utiliser une barre d'alerte pour informer les visiteurs d'une offre spéciale, telle qu'une offre "un acheté, un offert". C'est une excellente option si vous gérez une boutique en ligne.

Utiliser une barre d'alerte est mieux que de simplement placer une annonce sur votre page d'accueil. Votre barre d'alerte peut apparaître de manière proéminente en haut de chaque page de votre site.

Il est facile de créer une barre d'alerte dans WordPress. Nous examinerons des méthodes utilisant les meilleurs plugins de barre de notification et une méthode manuelle utilisant du code HTML et CSS. Cliquez simplement sur les liens ci-dessous pour accéder directement à chaque option :

• Méthode 1 : Créer une barre d'alerte avec OptinMonster
• Méthode 2 : Créer une barre d'alerte avec Thrive Leads
• Méthode 3 : Créer manuellement une barre d'alerte avec du HTML/CSS personnalisé
• Bonus : Ajouter des messages d'alerte personnalisés aux pages WordPress

Méthode 1 : Créer une barre d'alerte avec OptinMonster

OptinMonster est le meilleur logiciel d'optimisation de conversion et de génération de prospects du marché. Il vous aide à convertir davantage de visiteurs de votre site web en abonnés et en clients.

OptinMonster propose un constructeur de campagnes par glisser-déposer. Il est livré avec de magnifiques popups lightbox, des tapis de bienvenue, des compteurs, et d'autres superpositions dynamiques qui vous aident à augmenter le nombre d'abonnés et les ventes sur votre site web.

Vous pouvez également utiliser OptinMonster pour créer une barre d'alerte pour votre site web. Leurs modèles pré-conçus facilitent grandement la création d'une barre d'alerte qui a fière allure en quelques minutes.

Tout d'abord, vous devez visiter le site web OptinMonster et vous inscrire pour un compte. Vous aurez besoin au minimum du plan Basic car il inclut le type de campagne Barre flottante.

Ensuite, vous devez installer et activer le plugin OptinMonster WordPress. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Ce plugin vous permet de connecter votre site WordPress au logiciel OptinMonster.

Après l'activation, vous verrez l'écran de bienvenue et l'assistant de configuration. Cliquez sur le bouton « Connecter votre compte existant ».

Ensuite, une nouvelle fenêtre s'ouvrira où vous devrez connecter votre site WordPress à OptinMonster.

Cliquez simplement sur le bouton « Connecter à WordPress » pour continuer.

Vous pouvez maintenant suivre les instructions à l'écran pour connecter votre compte OptinMonster.

Ensuite, allez simplement dans OptinMonster » Campagnes dans votre tableau de bord WordPress. Cliquez sur le bouton « Créer votre première campagne ».

Cela ouvrira le constructeur de campagnes OptinMonster.

À partir d'ici, vous devez sélectionner « Barre flottante » comme type de campagne pour créer une barre d'alerte.

Ensuite, vous verrez un choix de modèles de campagne. Choisissez un modèle que vous souhaitez utiliser.

Il vous suffit de passer votre souris dessus et de cliquer sur le bouton « Utiliser le modèle » pour le sélectionner. Nous allons utiliser le modèle « Coupon Code Promo » pour notre barre d'alerte.

Ensuite, il vous sera demandé de donner un nom à votre modèle. Une fois que vous aurez nommé votre campagne, cliquez simplement sur le bouton « Démarrer la construction ».

Maintenant, vous verrez l'éditeur de campagne. C'est ici que vous pouvez concevoir votre barre d'alerte.

OptinMonster propose différents blocs que vous pouvez simplement faire glisser et déposer sur le modèle. Par exemple, vous pouvez ajouter une image, du texte, un bouton, et plus encore à votre barre d'alerte.

Vous verrez que votre barre d'alerte apparaît par défaut en bas de votre écran.

Pour la déplacer en haut de l'écran, vous devez cliquer sur « Paramètres de la barre flottante » sur le côté gauche. Ensuite, cliquez simplement sur le curseur pour déplacer la barre flottante en haut de la page.

Pour modifier le texte de la barre flottante, cliquez simplement sur la zone que vous souhaitez modifier et tapez le texte de votre choix.

Vous pouvez également modifier la police, la taille et la couleur du texte, et plus encore.

Pour modifier les paramètres du compte à rebours, sélectionnez simplement la minuterie.

Ensuite, entrez la date et l'heure de fin souhaitées. OptinMonster vous permet également de choisir le type de compte à rebours. Vous pouvez sélectionner le type « Statique » si vous souhaitez afficher une minuterie standard avec votre date et heure de fin spécifiées.

D'autre part, il existe un type de compte à rebours « Dynamique » compte à rebours. La minuterie fonctionnera en fonction du comportement de chaque utilisateur sur votre site. Le compte à rebours est défini séparément pour chaque visiteur de votre site Web.

Une fois que vous êtes satisfait de la conception de votre barre d'alerte, n'oubliez pas de cliquer sur le bouton « Enregistrer » en haut de votre écran.

Ensuite, vous devez aller dans l'onglet « Règles d'affichage » pour sélectionner quand et où votre barre d'alerte s'affichera sur votre site. La règle par défaut est que votre barre d'alerte s'affiche après que le visiteur a passé 5 secondes sur la page.

Nous allons changer cela à 0 seconde afin que la barre d'alerte apparaisse instantanément. Pour ce faire, il suffit de changer la valeur « sec » à 0.

En dehors de cela, vous pouvez également sélectionner où la barre d'alerte apparaîtra. Vous pouvez utiliser le réglage par défaut, qui est « le chemin d'URL actuel est n'importe quelle page ». De cette façon, votre barre d'alerte apparaîtra sur toutes les pages de votre site Web WordPress.

Ensuite, cliquez sur le bouton « Étape suivante » pour modifier les paramètres d'action. Vous pouvez laisser les paramètres « afficher la vue de la campagne » sur Optin et sélectionner si vous souhaitez jouer un effet sonore lorsque la barre d'alerte apparaît.

Après avoir effectué vos modifications, cliquez à nouveau sur le bouton « Étape suivante ».

Ici, vous verrez un résumé de vos règles d'affichage. Vous pouvez apporter des modifications et des ajustements finaux à votre campagne de barre d'alerte.

Une fois que vous êtes satisfait, cliquez simplement sur le bouton « Enregistrer » en haut de l'écran.

Après cela, vous pouvez aller à l'onglet « Publier » en haut et changer le « Statut de publication » en « Publier ». Une fois cela fait, vous devrez cliquer sur le bouton « Enregistrer » et fermer le constructeur de campagne.

Ensuite, vous verrez les « Paramètres de sortie de la campagne ».

La dernière étape consiste à activer la campagne sur votre site Web lui-même. Changez simplement le « Statut » de « En attente » à « Publié ».

N'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » une fois que vous avez terminé.

Maintenant, visitez simplement n'importe quelle page de votre site Web, et vous verrez votre campagne en action.

Méthode 2 : Créer une barre d'alerte avec Thrive Leads

Une autre façon d'ajouter des barres d'alerte à votre site Web WordPress est d'utiliser Thrive Leads. Il fait partie de la suite Thrive Themes et vous aide à générer des prospects grâce à des barres d'alerte, des lightboxes, des popups déroulants, et plus encore.

Tout d'abord, vous devrez visiter le site Web de Thrive Themes et vous inscrire pour un compte. Cliquez simplement sur le bouton « Commencer maintenant » pour commencer.

Ensuite, vous devrez installer et activer le plugin Thrive Product Manager sur votre site web. Pour plus de détails, veuillez consulter notre guide sur comment installer un plugin WordPress.

Vous pouvez trouver le plugin Thrive Product Manager dans votre espace client.

Une fois le plugin installé, allez simplement à la page Product Manager depuis votre zone d'administration WordPress.

À partir de là, cliquez sur le bouton « Se connecter à mon compte ».

Après vous être connecté à votre compte, vous verrez différents plugins et outils proposés par Thrive Themes.

Sélectionnez simplement le plugin Thrive Leads, puis cliquez sur le bouton « Installer les produits sélectionnés » en bas.

Lorsque Thrive Leads sera prêt à l'emploi, vous verrez un message de succès.

Vous pourrez alors cliquer sur le bouton « Aller au tableau de bord Thrive Themes ».

Ensuite, vous devrez accéder à Thrive Dashboard » Thrive Leads depuis le panneau d'administration de WordPress.

À côté de l'en-tête Groupes de prospects, cliquez simplement sur le bouton « Ajouter nouveau ».

Après cela, une fenêtre contextuelle s'ouvrira.

Vous pouvez entrer un nom pour votre nouveau groupe de prospects et cliquer sur le bouton « Ajouter un groupe de prospects ».

Ensuite, vous devrez créer un nouveau formulaire d'inscription.

Cliquez sur le bouton « Ajouter un nouveau type de formulaire d'inscription ».

Après cela, Thrive Leads vous demandera de sélectionner un type de formulaire.

Vous pouvez sélectionner le type « Ruban » pour ajouter une barre d'alerte à votre site web.

Après avoir ajouté le type de formulaire d'inscription Ruban, vous devrez maintenant ajouter un formulaire.

Cliquez simplement sur l'option « Ajouter un formulaire » sous Groupes de prospects.

Sur l'écran suivant, vous pouvez choisir parmi tous vos formulaires existants.

Comme c'est la première fois que vous créez un formulaire, cliquez sur le bouton « Créer un formulaire ».

Maintenant, vous verrez une fenêtre contextuelle apparaître à l'écran.

Vous pouvez entrer un nom pour votre formulaire et cliquer sur le bouton « Créer un formulaire ».

Votre formulaire sera ajouté au groupe de prospects Ruban.

Pour modifier la conception du formulaire, cliquez simplement sur l'icône en forme de crayon.

Ensuite, Thrive Leads vous présentera plusieurs modèles parmi lesquels choisir.

Sélectionnez simplement un modèle et cliquez sur le bouton « Choisir un modèle » en bas.

Cela lancera l'éditeur visuel avec un aperçu en direct, où vous pourrez personnaliser votre barre d'alerte.

Par exemple, vous pouvez sélectionner le texte du modèle et le modifier selon vos besoins. Ou cliquez sur l'image dans la barre d'alerte et modifiez-la.

Une fois que vous avez terminé la modification, cliquez sur le bouton « Enregistrer le travail » en bas.

Vous pouvez maintenant fermer l'éditeur visuel et retourner aux paramètres du formulaire. Ici, vous verrez des options pour régler le déclencheur de la barre d'alerte, la fréquence d'affichage et la position.

Par défaut, la barre d'alerte apparaîtra en haut lors du chargement d'une page. Cependant, vous pouvez modifier ces paramètres.

Par exemple, si vous cliquez sur l'option Déclencheur, vous verrez plus d'options, comme afficher la barre d'alerte après un certain temps, lorsqu'un utilisateur fait défiler une certaine quantité, ou lorsqu'un utilisateur atteint le bas de la page.

En plus de cela, vous pouvez également modifier la fréquence d'affichage. La barre d'alerte apparaîtra tout le temps par défaut pour tous les utilisateurs.

Cependant, vous pouvez modifier cela et afficher votre barre d'alerte au même visiteur après un certain nombre de jours.

Ensuite, vous pouvez retourner à la page Thrive Leads depuis votre tableau de bord WordPress.

Après cela, cliquez simplement sur l'icône en forme de roue dentée pour ouvrir les Paramètres d'affichage.

À partir de là, vous pouvez choisir sur quels articles et pages la barre d'alerte apparaîtra.

Par exemple, vous pouvez l'afficher uniquement sur la page d'accueil ou choisir tous les articles et pages. Il existe également une option pour exclure certains articles et pages de l'affichage de votre message d'alerte.

Lorsque vous avez terminé, cliquez simplement sur le bouton « Enregistrer et fermer ».

La dernière étape consiste à cliquer sur les bascules pour afficher votre barre d'alerte sur les appareils de bureau et mobiles.

Une fois cela fait, votre barre d'alerte est maintenant prête à collecter les adresses e-mail des utilisateurs et à créer votre liste d'e-mails.

Vous pouvez visiter votre site Web pour le voir en action.

Vous pouvez consulter notre avis complet sur Thrive Themes pour plus de détails.

Méthode 3 : Créer manuellement une barre d'alerte avec du HTML/CSS personnalisé

Et si vous ne souhaitez pas utiliser OptinMonster ou Thrive Leads ? Dans cette méthode, nous vous montrerons comment créer une barre de notification à l'aide de code HTML et CSS.

Tout d'abord, vous devrez copier le code CSS personnalisé suivant pour la barre d'alerte :

<pre class="wp-block-syntaxhighlighter-code">
.alertbar {
    background-color: #ff0000;
    color: #FFFFFF;
    display: block;
    line-height: 45px;
    height: 50px;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 100%;
    z-index: 100;
}
</pre>

Un moyen simple d'ajouter du code CSS à votre site Web est d'utiliser WPCode. C'est le meilleur plugin d'extraits de code pour WordPress qui vous aide à ajouter du code personnalisé à votre site Web.

Remarque : WPCode est l'un des plugins de WPBeginner. Nous l'avons créé pour faciliter l'ajout de scripts, de code HTML et plus encore aux pages de votre site Web. Il est livré avec des fonctionnalités telles qu'une bibliothèque d'extraits de code intégrée, une logique conditionnelle, des pixels de conversion, et plus encore.

Tout d'abord, vous devrez installer et activer le plugin gratuit WPCode. Pour plus de détails, veuillez consulter notre guide sur comment installer un plugin WordPress.

Après l'activation, vous devez vous rendre dans Extraits de code » + Ajouter un extrait depuis le tableau de bord WordPress et sélectionner l'option « Ajouter votre code personnalisé (Nouvel extrait) ».

Après cela, entrez un titre pour votre extrait en haut et collez le code CSS dans la zone de prévisualisation du code.

Vous devrez également changer le Type de code en l'option « Extrait CSS ».

Ensuite, vous pouvez faire défiler jusqu'à la section Insertion. C'est là que vous pouvez choisir où le code s'exécutera.

Comme nous voulons que la barre d'alerte apparaisse sur l'ensemble du site Web, vous pouvez utiliser la méthode par défaut « Insertion automatique ». Vous pouvez également conserver le réglage « Exécuter partout ».

Une fois que c'est fait, vous pouvez cliquer sur le bouton « Enregistrer l'extrait » en haut.

Vous devrez également cliquer sur le commutateur pour activer le code.

Après cela, allez dans Extraits de code » En-têtes et pieds de page dans votre tableau de bord d'administration WordPress.

Copiez et collez simplement la ligne de code HTML suivante dans la boîte « En-tête » :

<div class="alertbar">We are currently closed due to Covid-10.</div>

Voici à quoi devrait ressembler ce code dans la boîte « En-tête » dans WPCode :

Vous pouvez modifier le texte de l'alerte pour tout ce que vous souhaitez. N'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » en haut de la page une fois que vous avez terminé.

Maintenant, vous pouvez visiter votre blog WordPress pour voir la barre d'alerte. Elle devrait apparaître en haut de chaque page comme ceci :

Astuce : Dans certains thèmes WordPress, votre barre d'alerte peut chevaucher votre menu. Vous pouvez modifier la hauteur de la barre à 40px ou 30px pour éviter cela. Vous devrez également réduire la hauteur de ligne en conséquence afin que votre texte reste centré verticalement dans la barre.

Bonus : Ajouter des messages d'alerte personnalisés aux pages WordPress

Si vous souhaitez ajouter des messages d'alerte personnalisés à différentes parties de votre site Web, telles que les pages de produits, les pages de paiement et les pages de boutique, vous pouvez utiliser SeedProd. C'est le meilleur constructeur de sites Web et constructeur de pages de destination pour WordPress.

Le plugin offre un constructeur par glisser-déposer pour créer un thème personnalisé et des pages de site Web sans modifier le code. Il offre également un bloc d'alerte que vous pouvez placer n'importe où sur votre site.

Ce bloc d'alerte peut avertir les clients que votre stock est faible, que certains articles sont en promotion ou d'autres avertissements urgents.

Vous pouvez simplement ajouter le bloc d'alerte à votre page, puis ajouter un titre et une description. Le plugin vous permet également d'ajouter du contenu dynamique, ce qui vous permet d'insérer des dates et d'autres paramètres de requête.

Il existe également d'autres options de personnalisation pour le bloc d'alerte. Par exemple, vous pouvez modifier son alignement, ajuster la taille de la police et modifier l'icône.

Pour en savoir plus sur l'utilisation de SeedProd, vous pouvez consulter ce guide sur la création de pages personnalisées dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment créer une barre d'alerte dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur les meilleurs constructeurs de pages WordPress par glisser-déposer pour vous aider à personnaliser davantage votre site et les meilleurs plugins WooCommerce pour augmenter les ventes de votre boutique.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.