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

Vous souhaitez 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 bien plus encore.

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

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 commercial en cours, d'une mise à jour de vos horaires 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 d'achat, une offre gratuite. C'est une excellente option si vous exploitez une boutique en ligne.

Il est préférable d’utiliser une barre d’alerte plutôt que de simplement mettre une annonce sur votre page d’accueil. Votre barre d'alerte peut apparaître bien en vue en haut de chaque page de l'ensemble de votre site.

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

Méthode 1 : création d'une barre d'alerte à l'aide d'OptinMonster

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

OptinMonster propose un générateur de campagne par glisser-déposer. Il est livré avec de superbes fenêtres contextuelles lightbox, des tapis de bienvenue, des comptes à rebours 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édéfinis facilitent 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 créer un compte. Vous aurez besoin au moins du forfait Basic car il inclut le type de campagne Floating Bar.

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

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

Lors de l'activation, vous verrez l'écran de bienvenue et l'assistant de configuration. Allez-y et cliquez sur le bouton « Connecter votre compte existant ».

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

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

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

Ensuite, accédez simplement à OptinMonster » Campagnes dans votre tableau de bord WordPress. Allez-y et cliquez sur le bouton « Créez votre première campagne ».

Cela ouvrira le générateur de campagne OptinMonster.

À partir de là, vous devez sélectionner la « 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 de code de coupon promotionnel pour notre barre d'alerte.

Ensuite, il vous sera demandé de donner un nom à votre modèle. Une fois que vous avez nommé votre campagne, cliquez simplement sur le bouton « Commencer à créer ».

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 glisser-déposer sur le modèle. Par exemple, vous pouvez ajouter une image, du texte, un bouton et bien plus encore à votre barre d'alerte.

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

Pour le déplacer vers le 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 vers le haut de la page.

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

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

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 la date et l'heure de fin spécifiées.

D’un autre côté, il existe un type de compte à rebours « dynamique ». 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 du design de votre barre d’alerte, n’oubliez pas de cliquer sur le bouton « Enregistrer » en haut de votre écran.

Ensuite, vous devez accéder à 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 soit resté sur la page pendant 5 secondes.

Nous allons changer cela à 0 seconde pour que la barre d'alerte apparaisse instantanément. Pour ce faire, changez simplement la valeur « sec » à 0.

En plus de cela, vous pouvez également sélectionner l'endroit où la barre d'alerte apparaîtra. Vous pouvez utiliser le paramètre par défaut, à savoir « le chemin de l’URL actuel est n’importe quelle page ». De cette façon, votre barre d’alerte apparaîtra sur toutes les pages de votre site 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 choisir si vous souhaitez émettre un effet sonore lorsque la barre d'alerte apparaît.

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

Ici, vous verrez un résumé de vos règles d’affichage. Vous pouvez apporter les dernières modifications et modifications à 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 accéder à l'onglet Publier en haut et modifier le statut de publication en « Publier ». Une fois cela fait, vous devrez cliquer sur le bouton « Enregistrer » et fermer le générateur 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 » lorsque vous avez terminé.

Désormais, visitez simplement n’importe quelle page de votre site Web et vous verrez votre campagne en action.

Méthode 2 : création d'une barre d'alerte à l'aide de Thrive Leads

Une autre façon d’ajouter des barres d’alerte à votre site Web WordPress consiste à utiliser Thrive Leads. Il fait partie de la suite Thrive Themes et vous aide à générer des prospects via des barres d'alerte, des lightbox, des fenêtres contextuelles coulissantes, etc.

Tout d’abord, vous devrez visiter le site Web Thrive Themes et créer un compte. Cliquez simplement sur le bouton « Démarrer 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 la façon d'installer un plugin WordPress.

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

Une fois que vous avez installé le plugin, accédez simplement à la page Product Manager depuis votre zone d'administration WordPress.

À partir de là, continuez et 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 est prêt à être utilisé, vous verrez un message de réussite.

Vous pouvez ensuite cliquer sur le bouton « Accéder au tableau de bord des thèmes Thrive ».

Ensuite, vous devrez accéder à Thrive Dashboard » Thrive Leads à partir du panneau d'administration WordPress.

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

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

Vous pouvez saisir 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.

Allez-y et 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 du 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 n'importe lequel de vos formulaires existants.

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

Maintenant, vous verrez une fenêtre contextuelle apparaître sur votre écran.

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

Votre formulaire sera ajouté au groupe de prospects du ruban.

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

Ensuite, Thrive Leads affichera 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 le générateur visuel avec un aperçu en direct, où vous pourrez personnaliser votre barre d'alerte.

Par exemple, vous pouvez sélectionner le texte dans le 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é les modifications, cliquez sur le bouton « Enregistrer le travail » en bas.

Vous pouvez maintenant fermer l'éditeur visuel et revenir aux paramètres du formulaire. Ici, vous verrez les options de réglage du déclencheur de la barre d'alerte, de la fréquence d'affichage et de 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 vers le bas 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 revenir à la page Thrive Leads à partir de votre tableau de bord WordPress.

Après cela, cliquez simplement sur l'icône en forme de rouage pour ouvrir les paramètres d'affichage.

À partir de là, vous pouvez choisir sur quelles publications et pages la barre d’alerte apparaîtra.

Par exemple, vous pouvez l'afficher uniquement sur la première page ou choisir tous les articles et pages. Il existe également une option pour exclure certaines pages et publications 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 boutons pour afficher votre barre d'alerte sur les ordinateurs de bureau et les appareils 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 de diffusion.

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

Méthode 3 : créer manuellement une barre d'alerte à l'aide de HTML/CSS personnalisé

Que faire si vous ne souhaitez pas utiliser OptinMonster ou Thrive Leads ? Dans cette méthode, nous allons vous montrer comment créer une barre de notification en utilisant du code HTML et CSS.

Remarque : Nous ne recommandons pas cette méthode aux débutants. Si vous êtes nouveau sur WordPress ou si vous ne vous sentez pas à l’aise pour ajouter du code à votre site, nous vous suggérons d’utiliser l’une des méthodes ci-dessus.

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 consiste à utiliser WPCode. C’est le meilleur plugin d’extrait de code pour WordPress qui vous aide à ajouter du code personnalisé à votre site Web.

Remarque : WPCode est l'un des plugins propres à WPBeginner. Nous l'avons créé pour faciliter l'ajout de scripts, de code HTML et bien 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, etc.

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

Lors de l'activation, vous devez vous diriger vers Extraits de code » + Ajouter un extrait à partir du 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 Aperçu du code.

Vous devrez également modifier le type de code en option « Extrait CSS ».

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

Puisque nous souhaitons 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 paramètre « Exécuter partout ».

Une fois cela fait, vous pouvez cliquer sur le bouton « Enregistrer l’extrait » en haut.

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

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

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

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

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

Vous pouvez modifier le texte de l'alerte par tout autre texte de votre choix. 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. Il devrait apparaître en haut de chaque page comme ceci :

Conseil : Dans certains thèmes WordPress, votre barre d'alerte peut chevaucher votre menu. Vous pouvez modifier la hauteur de la barre à 40 px ou 30 px 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 : ajoutez 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. Il s'agit du meilleur constructeur de sites Web et de pages de destination pour WordPress.

Le plugin propose un générateur par glisser-déposer pour créer un thème personnalisé et des pages de site Web sans modifier le code. Il propose é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 des articles particuliers sont en vente ou d'autres avertissements urgents.

Vous pouvez simplement ajouter le bloc 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 davantage d'options de personnalisation pour le bloc 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 façon de créer des pages personnalisées dans WordPress.

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

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.