Dernières nouvelles de SeedProd

Tutoriels, astuces et ressources WordPress pour développer votre activité

Comment ajouter un message d'alerte personnalisé WordPress

Comment ajouter un message d'alerte personnalisé à WordPress 

Écrit par : image de l'auteur Stacey Corrin
image de l'auteur Stacey Corrin
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.
     Reviewed By : John Turner
image du réviseur John Turner
John Turner est le cofondateur de SeedProd. Il a plus de 20 ans d'expérience dans le domaine des affaires et du développement et ses plugins ont été téléchargés plus de 25 millions de fois.

Vous souhaitez ajouter un message d'alerte à votre site web WordPress ?

Avec un message d'alerte personnalisé, vous pouvez informer les visiteurs des mises à jour importantes, des notifications ou des erreurs. Cependant, les fonctionnalités par défaut de WordPress ne sont pas toujours suffisantes pour le type d'alerte que vous souhaitez afficher.

Heureusement, l'ajout de messages d'alerte personnalisés sur WordPress est un processus simple qui peut améliorer l'expérience utilisateur de votre site web. Dans cet article, nous allons explorer les étapes nécessaires à l'ajout d'un message d'alerte personnalisé dans WordPress.

Qu'est-ce qu'un message d'alerte dans WordPress ?

Un message d'alerte est un message qui apparaît sur votre site WordPress pour informer les visiteurs de mises à jour importantes, de notifications ou d'erreurs. Vous pouvez les afficher à différents endroits de votre site, tels que l'en-tête, le pied de page, la barre latérale ou à l'intérieur des articles et des pages de blog.

WordPress fournit des messages d'alerte par défaut pour divers événements, par exemple lorsqu'un utilisateur se connecte avec succès ou lorsqu'il y a une erreur dans l'envoi d'un formulaire de contact. Ces messages d'alerte par défaut sont conçus pour être informatifs et conviviaux, mais ils ne sont pas toujours suffisants pour répondre aux besoins spécifiques de votre site web.

Pourquoi ajouter un message d'alerte à votre site WordPress ?

L'ajout de messages d'alerte personnalisés à WordPress vous permet d'afficher des messages adaptés à vos besoins spécifiques.

Par exemple, vous pouvez informer les utilisateurs d'une nouvelle fonctionnalité sur votre site web ou leur fournir un code de réduction pour un produit de commerce électronique. De même, vous pouvez avertir les utilisateurs des articles qui se trouvent encore dans leur panier et afficher un message de réussite après le passage à la caisse.

checkout warning alert message

En ajoutant des messages d'alerte personnalisés, vous pouvez améliorer l'expérience de l'utilisateur sur votre site web, communiquer des informations importantes à votre public et augmenter l'urgence pour l'inciter à agir.

Comment ajouter un message d'alerte personnalisé à WordPress

Il y a plusieurs façons d'ajouter un message d'alerte personnalisé à WordPress. Vous pouvez coder manuellement la fonctionnalité, installer un plugin de barre de notification WordPress, utiliser un plugin de popup, ou essayer un logiciel de notification. Aujourd'hui, nous allons vous montrer comment utiliser 2 des méthodes les plus simples : en utilisant un plugin de construction de page WordPress et un puissant logiciel de popup.

Ces deux solutions sont très simples, ne nécessitent pas de connaissances techniques, et vous n'aurez pas besoin d'utiliser des CSS, HTML, PHP, Javascript ou tout autre code.

Plongeons dans l'aventure !

Méthode 1 : Créer un message d'alerte WordPress avec SeedProd

Pour la première méthode, nous utiliserons SeedProd. Avec plus d'un million d'utilisateurs, c'est le meilleur plugin de construction de pages pour WordPress.

SeedProd Constructeur de site web WordPress Drag and Drop

SeedProd dispose d'une puissante interface "drag-and-drop" qui facilite l'ajout de nouvelles mises en page sur WordPress. Avec sa bibliothèque de modèles professionnels et son système de conception basé sur des blocs, vous pouvez ajouter des messages d'alerte personnalisés et des widgets n'importe où sur votre site en quelques minutes.

Vous pouvez également utiliser SeedProd pour :

Si vous êtes prêt à commencer, suivez les étapes ci-dessous pour créer un message d'alerte personnalisé dans WordPress avec SeedProd. 

Étape 1. Installer et activer SeedProd

La première chose à faire est de visiter la page de tarification de SeedProd et de télécharger le plugin. Si vous avez besoin d'aide, vous pouvez suivre notre documentation sur l'installation de SeedProd.

Note : SeedProd a une version gratuite ; cependant, nous utiliserons SeedProd Pro pour la fonction de boîte d'alerte.

Après avoir activé le plugin, allez dans SeedProd " Settings et collez votre clé de licence dans la boîte de licence.

entrez votre clé de licence

La clé de licence se trouve sur le site web de SeedProd dans le tableau de bord de votre compte. Après avoir saisi votre clé, cliquez sur le bouton Vérifier la clé.

Ensuite, vous devrez décider du type de mise en page que vous souhaitez créer. Avec SeedProd, vous pouvez soit créer des pages WordPress individuelles avec le Landing Page Builder, soit créer des thèmes WordPress personnalisés avec le Theme Builder.

Si vous souhaitez continuer à utiliser votre thème WordPress actuel, nous vous recommandons l'option Landing Page Builder. Cependant, si vous souhaitez remplacer votre thème et ajouter des boîtes d'alerte à votre en-tête, pied de page, barre latérale et autres modèles de thème, le Theme Builder est le meilleur choix.

Pour ce tutoriel, nous utiliserons l'option Theme Builder. Mais si vous souhaitez créer une page d'atterrissage, vous pouvez suivre ce guide sur la création d'une page d'atterrissage dans WordPress.

Astuce : vous pouvez utiliser la fonction Boîte d'alerte avec les deux options.

Étape 2. Choisir un modèle préfabriqué

Puisque nous choisissons l'option Theme Builder, l'étape suivante est de visiter la page SeedProd " Theme Builder. Sur cette page, vous devrez cliquer sur le bouton Theme Template Kits pour choisir un modèle de site web pré-fait.

Kits de modèles de thèmes

Vous verrez immédiatement une bibliothèque de kits de sites web que vous pouvez ajouter à votre site en un seul clic. En utilisant les filtres de la barre supérieure, vous pouvez trier les modèles par popularité, nouveauté, WooCommerce, et plus encore.

Kits de modèles SeedProd

Lorsque vous trouvez un modèle qui vous plaît, survolez-le et sélectionnez l'icône de la coche pour l'ajouter à votre site WordPress. En quelques secondes, SeedProd importera l'ensemble du modèle, y compris les pages spécifiques et le contenu de la démo.

Choisir un modèle personnalisé

À partir de là, vous verrez les différentes parties qui composent votre thème dans votre tableau de bord WordPress. Vous pouvez personnaliser n'importe quelle partie du thème en la survolant et en cliquant sur le lien Modifier le design.

Parties du thème SeedProd

Par exemple, à l'aide des tutoriels ci-dessous, vous pouvez :

En outre, vous pouvez personnaliser des pages individuelles, telles que les pages"A propos", "Contact" et " Services". Il vous suffit de visiter Pages " All Pages et de cliquer sur le lien Edit with SeedProd à côté de la page que vous souhaitez personnaliser.

Pour commencer, nous allons vous montrer comment ajouter un message d'alerte à votre page d'accueil WordPress. Pour cela, survolez le modèle de page d'accueil et cliquez sur le lien Modifier le design.

modifier la page d'accueil

Étape 3. Ajouter le bloc de messages d'alerte

Lorsque vous ouvrirez le modèle, vous verrez le constructeur de pages par glisser-déposer de SeedProd. Il y aura des blocs WordPress et des réglages sur la gauche et un aperçu en direct de votre page d'accueil sur la droite.

Interface du constructeur de pages SeedProd

Vous pouvez cliquer n'importe où sur l'aperçu pour personnaliser le contenu du modèle et voir les changements en temps réel. En outre, vous pouvez faire glisser de nouveaux blocs WordPress depuis le panneau de gauche sur votre page afin d'ajouter des caractéristiques et des fonctionnalités supplémentaires.

C'est ainsi que nous ajouterons un message d'alerte à la page d'accueil. Trouvez le bloc Alerte dans le panneau Blocs avancés et faites-le glisser à l'endroit où vous souhaitez l'afficher.

Bloc d'alerte SeedProd

Une fois le bloc en place, vous pouvez personnaliser son apparence et le message qu'il affiche aux visiteurs de votre site web.

Tout d'abord, cliquez sur le menu déroulant "Type" et choisissez un type d'alerte, tel que Info, Succès, Avertissement ou Danger.

options du type de boîte d'alerte

Ensuite, donnez un titre à votre alerte. Vous pouvez également activer ou désactiver le bouton de fermeture, qui permet aux utilisateurs de rejeter le message.

Titre du message d'alerte de WordPress

Saisissez maintenant une description de votre alerte pour donner plus d'informations aux utilisateurs. En dessous, vous pouvez modifier le titre et la description, la taille, l'alignement et le niveau de l'en-tête.

Message d'alerte Description WordPress

Pour faire ressortir l'alerte, vous pouvez ajouter une icône personnalisée. SeedProd dispose de centaines d'icônes Font Awesome, ce qui offre de nombreuses possibilités.

Icône de message d'alerte WordPress

If you want to use custom colors for your alert message, click the Advanced tab in the block settings. Here, you can edit the typography, change the colors for the description, title, and background, and select a text shadow.

Paramètres avancés du blocage des alertes

Dans le même panneau, vous pouvez modifier l'espacement des blocs, leur visibilité et même ajouter une animation pour les rendre plus attrayants.

Animations des messages d'alerte

Veillez à cliquer sur le bouton Enregistrer avant de personnaliser d'autres pages.

Sauvegarder les modifications apportées à SeedProd

Les messages d'alerte sont un excellent moyen d'attirer l'attention sur d'autres parties de votre site. Dans la capture d'écran ci-dessous, nous avons ajouté un message de réussite à la page de confirmation de commande d'un magasin en ligne.

message d'alerte de confirmation de commande WordPress

Faites preuve de créativité avec des notifications personnalisées, puis suivez la dernière étape pour les intégrer à votre site web.

Étape 4. Publier vos modifications

Après avoir modifié n'importe quel modèle de thème SeedProd, vous devrez activer le thème pour montrer les changements sur votre site web. Pour ce faire, quittez le constructeur de pages et retournez au tableau de bord du constructeur de thèmes.

A partir de là, trouvez la case Enable SeedProd Theme (Activer le thème SeedProd) et mettez-la sur la position verte "Yes" (Oui).

activer le thème seedprod

Désormais, vous pouvez visiter votre site web et voir votre message d'alerte en action !

Exemple de message d'alerte WordPress

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

Une autre façon d'ajouter un message d'alerte à votre site WordPress est de créer une barre de notification d'alerte. La barre d'alerte sera placée en haut ou en bas de votre site web et affichera un message personnalisé à l'intention des visiteurs.

Pour cette méthode, nous utiliserons OptinMonster, le meilleur logiciel d'optimisation de la conversion sur le marché. Avec son interface facile à utiliser, il vous aide à convertir les visiteurs de votre site en abonnés et en clients.

optinmonster boîte à outils d'optimisation des conversions

OptinMonster propose plusieurs types d'opt-in, notamment des fenêtres contextuelles, des tapis de bienvenue, des comptes à rebours, etc., qui peuvent vous aider à augmenter le nombre d'abonnés et les ventes sur votre site Web. Il offre également un nombre illimité de types de notifications et de modules complémentaires pour divers services de marketing par courriel et API.

De plus, comme nous l'avons mentionné plus haut, vous pouvez utiliser OptinMonster pour créer une barre de messages d'alerte pour votre site web. Le logiciel dispose d'un grand nombre de modèles prédéfinis, ce qui facilite grandement la création d'une barre d'alerte esthétique en quelques minutes.

Voici celui que nous allons fabriquer dans ce tutoriel :

Barre d'alerte OptinMonster

C'est parti !

Étape 1. Installer et activer OptinMonster

Tout d'abord, rendez-vous sur le site d'OptinMonster et créez votre compte.

Ensuite, installez et activez le plugin WordPress OptinMonster. Pour vous aider, vous pouvez consulter ce guide sur l 'installation d'un plugin WordPress.

Le plugin OptinMonster vous permet de connecter facilement votre site web au logiciel en quelques clics.

Après avoir activé le plugin, vous devez connecter votre compte. Pour ce faire, allez dans OptinMonster " Réglages depuis l'administration de WordPress.

Cliquez ensuite sur le bouton Connecter un compte existant.

Connectez votre compte OptinMonster

Une fenêtre s'ouvre pour vous demander d'entrer votre adresse électronique. Une fois que vous avez ajouté votre adresse électronique, cliquez sur le bouton Connexion à WordPress.

Connecter OptinMonster à WordPress

Étape 2. Choisir un modèle de barre flottante

Après avoir connecté votre compte OptinMonster, allez dans OptinMonster " Campagnes depuis votre tableau de bord WordPress. Vous pouvez maintenant cliquer sur le bouton Créer votre première campagne.

Créer la première campagne OptinMonster

OptinMonster offre le choix entre un modèle préétabli ou l'utilisation de ses playbooks, qui reproduisent les campagnes réussies de marques authentiques. Pour ce guide, nous choisirons l'option Modèles.

Choisir les options de la campagne

Sur cette page, choisissez la barre flottante comme type de campagne pour créer votre barre d'alerte.

Barre flottante type de campagne

Ensuite, vous verrez une sélection de différents modèles de campagne. Pour choisir un modèle, survolez-le et cliquez sur le bouton Utiliser le modèle.

Modèle de barre flottante d'alerte

Nous utiliserons le modèle "Alert" pour notre barre d'alerte.

Après avoir sélectionné le modèle, vous verrez apparaître une invite vous demandant de nommer votre campagne. Une fois que vous avez saisi votre nom, cliquez sur le bouton Commencer à construire.

nom de la barre d'alerte flottante

Étape 3. Personnalisez votre barre de messages d'alerte

Sur l'écran suivant, vous verrez l'éditeur de campagne d'OptinMonster. C'est ici que vous pouvez concevoir et personnaliser votre message d'alerte.

La barre d'alerte apparaît par défaut en haut de l'écran. Pour modifier le texte de la barre flottante, cliquez sur la zone que vous souhaitez modifier et tapez votre message personnalisé.

Personnaliser le texte de la barre d'alerte

Vous pouvez également modifier la police, la taille de la police, la couleur, etc.

Si vous souhaitez renforcer le caractère urgent de votre barre d'alerte, vous pouvez faire glisser le bloc Compte à rebours et le déposer sur la barre flottante.

Ajouter une barre d'alerte avec compte à rebours

À partir de là, vous pouvez sélectionner la minuterie du modèle, personnaliser ses paramètres et saisir la date et l'heure de fin souhaitées.

Paramètres du compte à rebours

Vous pouvez également définir le minuteur comme un compte à rebours permanent. Un compte à rebours permanent est défini séparément pour chaque visiteur de votre site web.

Lorsque vous êtes satisfait de votre barre d'alerte, cliquez sur le bouton Enregistrer en haut de votre écran.

Étape 4. Configurez vos paramètres d'affichage

L'étape suivante consiste à aller dans l'onglet "Règles d'affichage" et à sélectionner quand et où afficher votre barre. La règle par défaut affiche la barre après que le visiteur a été sur la page pendant 5 secondes.

Règles d'affichage d'OptinMonster

Nous allons le remplacer par 0 seconde afin qu'un message d'alerte apparaisse instantanément. Pour ce faire, il suffit de remplacer le compte à rebours "sec" par 0.

Une fois que vous avez fait cela, cliquez sur le bouton Étape suivante pour modifier les paramètres de l'action. Vous pouvez laisser le menu déroulant "Afficher la vue de la campagne" sur Optin et sélectionner si vous voulez jouer un effet sonore lorsque la barre d'alerte apparaît.

Paramètres des actions de campagne OptinMonster

Après avoir effectué ces modifications, cliquez sur le bouton Étape suivante. Sur la page suivante, vous trouverez un résumé de votre campagne.

Si vous êtes satisfait des paramètres, cliquez sur le bouton Enregistrer.

Étape 5. Publier votre barre d'alerte

L'étape suivante consiste à passer à l'onglet Publier et à changer le statut de publication en Publier.

Publier la campagne OptinMonster

La dernière étape consiste à activer la campagne sur votre site WordPress.

Pour ce faire, fermez l'éditeur de campagne et allez dans OptinMonster " Campagnes". Vous verrez votre campagne dans la liste, et le statut sera En attente.

Activer la barre d'alerte dans WordPress

Pour le modifier, cliquez sur le statut En attente et sélectionnez Publier dans le menu déroulant.

Désormais, vous pouvez visiter n'importe quelle page de votre site web et voir votre barre d'alerte en action.

Barre d'alerte flottante WordPress exemple

C'est tout !

Nous espérons que cet article vous a aidé à apprendre comment créer un message d'alerte dans WordPress. Si vous cherchez un autre moyen de recueillir des commentaires, jetez un coup d'œil au plugin UserFeedback. Il est très facile à utiliser et vous permet d'ajouter des formulaires popup élégants en quelques minutes.

Avant de partir, vous aimerez peut-être aussi ces guides sur la façon d'ajouter Google Analytics à WordPress et les meilleurs fournisseurs d'hébergement WordPress.

Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.

Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.

avatar de l'auteur
Stacey Corrin Rédacteur
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Nous ne recommandons que des produits dont nous pensons qu'ils apporteront une valeur ajoutée à nos lecteurs.