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, etc.
Dans cet article, nous allons vous montrer comment créer une barre d’alerte dans WordPress avec 2 solutions simples.
Pourquoi créer une barre d’alerte dans WordPress ?
Une barre d’alerte est un excellent moyen d’informer vos visiteurs de tout ce qui est important. Il peut s’agir d’un événement de vente en cours, d’une mise à jour sur vos heures d’ouverture ou de modifications apportées à vos services.
Vous pouvez également utiliser une barre d’alerte pour informer les visiteurs d’une offre spéciale, telle que l’achat d’une offre gratuite. C’est une excellente option si vous gérez une boutique en ligne.
L’utilisation d’une barre d’alerte est préférable à la simple diffusion d’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 couvrirons le meilleur plugin 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éation d’une barre d’alerte à l’aide d’OptinMonster
OptinMonster est le meilleur logiciel d’optimisation de conversion sur le marché. Il vous aide à convertir davantage de visiteurs de votre site Web en abonnés et en clients.
Il est livré avec de superbes fenêtres contextuelles, des tapis de bienvenue, des compte à rebours et d’autres superpositions dynamiques qui vous aident à augmenter le nombre d’abonnés et les ventes de votre site Web.
Vous pouvez également utiliser OptinMonster pour créer une barre d’alerte pour votre site Web. Voici celui que nous allons créer :
Il existe de nombreux modèles prédéfinis dans OptinMonster. Cela permet de créer très facilement une barre d’alerte qui a fière allure en quelques minutes.
Tout d’abord, vous devez visiter le Site Internet OptinMonster et créez un compte.
Ensuite, vous devez installer et activer le OptinMonster WordPress brancher. 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 devrez maintenant connecter votre compte. Pour commencer, rendez-vous simplement sur OptinMonster » Paramètres depuis votre tableau de bord WordPress.
Ensuite, allez-y et cliquez sur le bouton « Connecter un compte existant ».
Vous verrez maintenant une fenêtre contextuelle vous demandant d’entrer votre adresse e-mail. Sélectionnez simplement votre adresse e-mail et cliquez sur le bouton « Se connecter à WordPress ».
Vous pouvez maintenant suivre les invites à l’écran pour connecter votre compte OptinMonster.
Après avoir connecté OptinMonster, allez simplement sur OptinMonster » Campagnes dans votre tableau de bord WordPress. Allez-y et cliquez sur le bouton « Créez votre première campagne ».
À 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 simplement 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 « Promo » pour notre barre d’alerte.
Ensuite, vous serez invité à donner un nom à votre modèle. Une fois que vous avez nommé votre campagne, cliquez sur le bouton « Commencer à créer ».
Maintenant, vous verrez l’éditeur de campagne. C’est ici que vous pouvez concevoir votre campagne.
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, cliquez sur « Paramètres flottants » 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 sur 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, etc.
Pour modifier le compte à rebours, sélectionnez simplement le compte à rebours sur le modèle, puis cliquez sur l’onglet Compte à rebours dans le menu de gauche. Ensuite, allez-y et entrez la date et l’heure de fin souhaitées.
Vous pouvez également régler la minuterie pour qu’elle agisse comme un compte à rebours permanent au lieu d’un compte à rebours statique, si vous préférez. Un compte à rebours permanent est défini séparément pour chaque visiteur de votre site.
Allez-y et apportez autant de modifications que vous le souhaitez à votre barre d’alerte. Une fois que vous en êtes satisfait, n’oubliez pas de cliquer sur le bouton Enregistrer en haut de votre écran.
Ensuite, vous devez vous rendre 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 ait été sur la page pendant 5 secondes.
Nous allons changer cela à 0 seconde, donc la barre d’alerte apparaît instantanément. Pour ce faire, modifiez simplement le compte à rebours « sec » à 0.
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 jouer un effet sonore lorsque la barre d’alerte apparaît.
Après avoir apporté des modifications, continuez et cliquez à nouveau sur le bouton « Étape suivante », et vous verrez un résumé.
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 ».
La dernière étape consiste à activer la campagne sur votre site Web lui-même.
Pour cela, vous pouvez fermer l’éditeur de campagne puis aller dans OptinMonster » Campagnes. Vous verrez votre campagne répertoriée ici et son statut sera En attente.
Allez-y et cliquez sur le statut En attente pour le changer en « Publier » dans le menu déroulant.
Maintenant, visitez simplement n’importe quelle page de votre site Web et vous verrez votre campagne en action.
Méthode 2 : créer manuellement une barre d’alerte à l’aide de HTML/CSS personnalisé
Que faire si vous ne voulez pas utiliser OptinMonster ? Dans cette méthode, nous allons vous montrer comment créer une barre de notification en utilisant du code HTML et CSS.
Noter: 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 la méthode ci-dessus à la place.
Tout d’abord, vous devrez copier et coller du code CSS personnalisé pour la barre d’alerte. Allez simplement sur Apparence » Personnalisateur dans votre tableau de bord, puis cliquez sur l’onglet « CSS supplémentaire » en bas.
Maintenant, allez-y et copiez et collez ce code CSS dans cette zone :
.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;
}
Après avoir copié ce code, il devrait ressembler à ceci. Cliquez simplement sur le bouton Publier en haut de la page pour enregistrer votre code CSS.
Ensuite, vous devez ajouter le code HTML du texte de la barre d’alerte à votre site.
La meilleure façon de le faire est d’installer et d’activer le logiciel gratuit Insérer un plugin d’en-têtes et de pieds de page.
Noter: Insérer des en-têtes et des pieds de page est l’un des propres plugins de Themelocal. Nous l’avons créé pour faciliter l’ajout de scripts, de code HTML et plus encore aux pages de votre site Web.
Après avoir activé le plugin, allez à Paramètres » Insérer des en-têtes et des pieds de page dans votre administrateur WordPress. Copiez et collez simplement la ligne de code HTML suivante dans la zone « Scripts dans le corps » :
<div class="alertbar">We are currently closed due to Covid-19.</div>
Voici à quoi devrait ressembler ce code dans la zone « Scripts dans le corps » d’Insérer les en-têtes et les pieds de page :
Bien sûr, vous pouvez changer le texte d’alerte en tout ce que vous voulez. N’oubliez pas de cliquer sur le bouton « Enregistrer » en bas de la page une fois que vous avez terminé.
Maintenant, vous pouvez visiter votre site pour voir la barre d’alerte. Il devrait apparaître en haut de chaque page, comme ceci :
Conseil: Dans quelques thèmes WordPress, votre barre d’alerte peut chevaucher votre menu. Vous pouvez modifier la hauteur de la barre à 40 ou 30 pixels 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.
Nous espérons que cet article vous a aidé à apprendre à créer une barre d’alerte dans WordPress. Vous aimerez peut-être également notre comparaison des meilleurs constructeurs de pages par glisser-déposer WordPress pour vous aider à personnaliser davantage votre site sans écrire de code, et notre liste des meilleurs plugins WooCommerce pour augmenter les ventes de votre magasin.
