Comment ajouter un message d'alerte personnalisé à WordPress 

J'ai utilisé des messages d'alerte dans WordPress pour avertir les clients de stocks faibles, confirmer les paiements réussis et même mettre en avant de nouvelles fonctionnalités de blog. Ce sont ces petites boîtes stylisées qui apparaissent sur votre site pour partager des mises à jour, des erreurs ou des notifications, juste au moment où vos visiteurs ont besoin de les voir.

WordPress affiche certaines alertes par défaut, comme lorsqu'un formulaire échoue ou qu'une connexion réussit. Mais elles sont limitées, et leur personnalisation implique généralement de modifier le code.

Dans ce guide, je vais vous montrer deux méthodes simples pour créer vos propres messages d'alerte à l'aide d'outils qui ne nécessitent pas de code personnalisé. Il suffit de glisser, déposer et c'est parti.

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

Un message d'alerte est une boîte de notification stylisée qui apparaît sur votre site WordPress pour informer les visiteurs d'importantes mises à jour, erreurs ou confirmations. Vous pouvez les afficher dans divers emplacements de votre site, tels que l'en-tête, le pied de page, la barre latérale, ou à l'intérieur des articles de blog et des pages.

WordPress fournit des messages d'alerte par défaut pour divers événements, comme lorsqu'un utilisateur se connecte avec succès ou lorsqu'il y a une erreur lors de la soumission d'un formulaire de contact. Ces messages d'alerte par défaut sont conçus pour être informatifs et conviviaux, mais peuvent ne pas toujours être suffisants pour les besoins spécifiques de votre site Web.

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

Votre visiteur est sur le point de quitter la page de paiement sans finaliser sa commande. Une simple alerte d'avertissement, « Plus que 2 articles en stock », peut être le coup de pouce qui conclut la vente.

Par exemple, vous pourriez vouloir informer les utilisateurs d'une nouvelle fonctionnalité sur votre site Web ou leur fournir un code de réduction pour un produit e-commerce. De même, vous pourriez vouloir avertir les utilisateurs des articles encore dans leurs paniers d'achat et afficher un message de succès après un paiement réussi.

Des études montrent que les popups de notification les plus performants convertissent à plus de 9 %, une amélioration significative par rapport aux éléments de page standards. En ajoutant un message d'alerte personnalisé, vous pouvez communiquer des informations importantes à votre public et augmenter l'urgence.

Types de messages d'alerte que vous pouvez utiliser dans WordPress

Il existe plusieurs types de messages d'alerte dans WordPress, parfois appelés boîtes d'alerte WordPress, que vous pouvez ajouter en fonction de ce que vous voulez que les visiteurs fassent ou sachent. Chacun sert un objectif différent, et le style du message aide les utilisateurs à reconnaître ce qui se passe d'un coup d'œil.

• Messages d'information : Utilisez-les pour des conseils généraux, des rappels ou des mises à jour, comme informer les utilisateurs de nouvelles fonctionnalités ou de nouveaux articles de blog.
• Messages de succès : Ceux-ci confirment qu'une action a réussi, comme la soumission d'un formulaire, la création d'un compte ou un achat terminé.
• Messages d'avertissement ou d'erreur : Idéal pour les alertes qui nécessitent une attention urgente, telles que le faible stock, les actions échouées ou les erreurs système.

Voici un guide rapide pour associer chaque type au bon moment :

• Information : Nouvelles fonctionnalités, annonces ou conseils utiles ne nécessitant aucune action.
• Succès : Confirmations de commande, soumissions de formulaires ou toute action terminée.
• Avertissement : Avis de stock bas, offres expirant ou articles laissés dans un panier.
• Danger : Erreurs système, alertes de sécurité ou problèmes critiques nécessitant une attention immédiate.

Comment ajouter un message d’alerte personnalisé dans WordPress (2 méthodes faciles)

Il existe 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, je vais vous montrer comment utiliser 2 des méthodes les plus simples : en utilisant un constructeur de site WordPress glisser-déposer et un puissant logiciel de popup.

Les deux solutions sont faciles, ne nécessitent aucune connaissance technique et vous n’aurez pas besoin d’utiliser de CSS, HTML, PHP, Javascript personnalisés, ou tout autre code.

Si vous êtes à l’aise avec la modification de PHP et CSS, vous pouvez également ajouter une barre d’alerte avec quelques lignes de code. Mais ces méthodes sans code sont plus rapides et ne nécessitent pas de développeur.

Méthode 1 : Afficher un message d’alerte WordPress avec SeedProd

Pour la première méthode, nous utiliserons SeedProd. C’est un constructeur de site web par glisser-déposer pour WordPress, utilisé par plus d’un million d’utilisateurs.

SeedProd permet d’ajouter facilement des boîtes d’alerte n’importe où sur votre site WordPress sans toucher à aucun code. Vous choisissez le type, personnalisez le style, et c’est en ligne.

Donc, 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 le plugin 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, et nous utiliserons SeedProd (le bloc d’alerte est disponible sur tous les plans, y compris Basic).

Après avoir activé le plugin, allez dans SeedProd » Paramètres et collez votre clé de licence dans la case de licence.

La clé de licence se trouve sur le site web de SeedProd dans votre tableau de bord de compte. Après avoir entré 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 Constructeur de pages de destination, soit créer des thèmes WordPress personnalisés avec le Constructeur de thèmes.

Si vous souhaitez continuer à utiliser votre thème WordPress actuel, nous vous recommandons l’option Constructeur de pages de destination. 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 Constructeur de thèmes est le meilleur choix.

Pour ce tutoriel, nous utiliserons l’option Constructeur de thèmes. Mais si vous souhaitez créer une page de destination, vous pouvez suivre ce guide sur comment créer une page de destination dans WordPress.

Astuce Pro : Vous pouvez utiliser la fonctionnalité de boîte d’alerte avec les deux options.

Étape 2 : Choisir un kit de modèles WordPress

Puisque nous allons utiliser l’option Theme Builder, l’étape suivante consiste à visiter la page SeedProd » Theme Builder. Sur cette page, vous devrez cliquer sur le bouton Kits de modèles de thème pour choisir une disposition de site web pré-faite.

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.

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

À 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.

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

• Créer une page de blog personnalisée
• Construire un modèle d'article unique personnalisé
• Modifier votre page d'accueil WordPress
• Personnaliser votre en-tête WordPress
• Modifier votre pied de page WordPress
• Créer une barre latérale personnalisée
• Et plus encore.

De plus, vous pouvez personnaliser des pages individuelles, telles que votre page À propos, Contact et Services. Visitez simplement Pages » Toutes les pages et cliquez sur le lien Modifier avec 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. Alors, survolez le modèle de page d’accueil et cliquez sur le lien Modifier le design.

Étape 3 : Ajouter et personnaliser le bloc de message d'alerte

Lorsque vous ouvrez le modèle, vous verrez le constructeur de site web par glisser-déposer de SeedProd. Il contiendra des blocs WordPress et des paramètres sur la gauche, et un aperçu en direct de votre page d’accueil sur la droite.

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. De plus, vous pouvez faire glisser de nouveaux blocs WordPress depuis le panneau de gauche sur votre page pour ajouter plus de fonctionnalités.

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

Une fois le bloc en place, vous pouvez personnaliser son apparence et le message qu'il affiche à vos visiteurs.

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

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

Maintenant, entrez une description pour votre alerte afin de donner plus d'informations aux utilisateurs. Vous pouvez également modifier la taille, l'alignement et le niveau de titre du titre et de la description.

Pour que l'alerte se démarque, vous pouvez ajouter une icône personnalisée. SeedProd dispose de centaines d'icônes Font Awesome, il existe donc de nombreuses options.

Si vous souhaitez utiliser des couleurs personnalisées pour votre message d'alerte, cliquez sur l'onglet Avancé dans les paramètres du bloc. Ici, vous pouvez modifier la typographie, changer les couleurs de la description, du titre et de l'arrière-plan, et sélectionner une ombre de texte.

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

Assurez-vous de cliquer sur le bouton Enregistrer avant de personnaliser d’autres pages.

Les messages d’alerte sont un excellent moyen d’attirer l’attention sur d’autres zones de votre site. Dans la capture d’écran ci-dessous, nous avons ajouté un message de succès à la page de confirmation de commande d’une boutique en ligne.

Alors, faites preuve de créativité avec des notifications personnalisées, puis suivez la dernière étape pour les mettre en ligne sur votre site Web.

Étape 4 : Publiez le message d'alerte sur votre site WordPress

Après avoir modifié un modèle de thème SeedProd, vous devrez activer le thème pour afficher les modifications sur votre site Web en direct. Pour ce faire, quittez le constructeur de pages et retournez au tableau de bord du constructeur de thèmes.

À partir de là, trouvez le bouton Activer le thème SeedProd et basculez-le sur la position verte « Oui ».

Maintenant, vous pouvez visiter votre site Web et voir votre message d'alerte en action !

Utilisation des messages d’alerte sur les pages WooCommerce

Si vous gérez une boutique WooCommerce, les messages d'alerte deviennent encore plus utiles aux moments les plus importants : avertissements de stock bas sur les pages produits, confirmations de paiement ou rappels de panier abandonné.

Le Theme Builder de SeedProd vous donne un contrôle total sur les modèles de pages WooCommerce. Vous pouvez ajouter le bloc d'alerte directement à vos modèles de panier, de paiement ou de page produit en utilisant le même flux de travail glisser-déposer que dans la méthode 1.

Voici quelques cas d'utilisation par lesquels je commencerais :

• Stock bas : Ajoutez une alerte d'avertissement aux modèles de pages produits, par exemple « Plus que 3 articles restants, commandez avant qu'ils ne disparaissent ».
• Paiement réussi : Ajoutez une alerte de succès à votre modèle de page de remerciement pour confirmer que la commande a été traitée.
• Panier abandonné : Ajoutez une alerte d'avertissement à la page du panier, par exemple « Vous avez des articles dans votre panier. Finalisez votre commande pour bloquer le prix d'aujourd'hui. »

Pour ce faire, allez dans SeedProd » Theme Builder et ouvrez le modèle WooCommerce (Panier, Paiement ou Produit unique) que vous souhaitez modifier. Suivez ensuite les mêmes étapes que dans la méthode 1 pour ajouter et configurer le bloc d'alerte.

Méthode 2 : Afficher une barre de notification dans WordPress avec OptinMonster

Une autre façon d'ajouter un message d'alerte à votre site WordPress est de créer une barre de notification flottante. La barre d'alerte se placera en haut ou en bas de votre site Web et affichera un message personnalisé aux visiteurs.

Pour cette méthode, nous utiliserons OptinMonster, un outil d'optimisation de la conversion qui fait partie de la famille Awesome Motive.

OptinMonster vous permet d'ajouter des barres d'alerte flottantes qui restent en haut ou en bas de votre site. Vous pouvez les utiliser pour des offres à durée limitée, des avertissements de produits ou des annonces sur l'ensemble du site, le tout sans code.

Voici celle que nous allons créer dans ce tutoriel :

Commençons !

Étape 1 : Installer OptinMonster et connecter votre site

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

Ensuite, installez et activez le plugin WordPress OptinMonster. Pour obtenir de l'aide à ce sujet, vous pouvez consulter ce guide sur comment installer 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 devrez connecter votre compte. Pour ce faire, allez dans OptinMonster » Paramètres depuis votre administration WordPress.

De là, cliquez sur le bouton Connecter un compte existant.

Une fenêtre apparaîtra vous demandant d'entrer votre adresse e-mail. Une fois votre e-mail ajouté, cliquez sur le bouton Se connecter à WordPress.

Étape 2 : Sélectionner un modèle de barre d'alerte 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.

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

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

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.

Nous utiliserons le modèle « Alerte » pour notre barre d'alerte.

Après avoir sélectionné le modèle, vous verrez une invite vous demandant de nommer votre campagne. Une fois votre nom entré, cliquez sur le bouton Commencer la création.

Étape 3 : Modifier le texte et le design de votre barre 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.

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

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

Si vous souhaitez augmenter l'urgence de votre barre d'alerte, vous pouvez faire glisser le bloc Compte à rebours et le déposer sur la barre flottante.

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

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.

Une fois que votre barre d'alerte vous convient, cliquez sur le bouton Enregistrer en haut de votre écran.

Étape 4 : Définir les règles d'affichage et les paramètres de déclenchement

L'étape suivante consiste à accéder à 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 est resté sur la page pendant 5 secondes.

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

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

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

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

Astuce de pro : Pour de meilleurs résultats, ciblez votre barre d’alerte sur des pages spécifiques ou des comportements de visiteurs. Affichez une alerte de vente uniquement sur les pages de produits ; affichez un avertissement de paiement uniquement sur la page du panier. Le paramètre de ciblage par page d’OptinMonster contrôle cela.

Étape 5 : Publier la barre d'alerte sur votre site WordPress

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

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.

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

Vous pouvez maintenant visiter n'importe quelle page de votre site Web et voir votre barre d'alerte en action.

Questions fréquemment posées

Ai-je besoin de SeedProd Pro pour ajouter des messages d’alerte dans WordPress ?

Non. Le bloc d’alerte est disponible sur tous les plans SeedProd, y compris le plan gratuit Basic. Vous pouvez ajouter des messages d’information, de succès, d’avertissement ou de danger à n’importe quelle page sans mise à niveau.

Quelle est la différence entre une barre d’alerte et une boîte d’alerte dans WordPress ?

Une boîte d’alerte est un bloc de message intégré placé dans une page ou un article ; il se trouve à l’intérieur de votre contenu là où vous le placez. Une barre d’alerte est une bande flottante qui adhère au haut ou au bas de votre site et reste visible lorsque les visiteurs font défiler.

Le bloc d’alerte de SeedProd crée des boîtes d’alerte intégrées. La barre flottante d’OptinMonster crée des barres d’alerte sur l’ensemble du site.

Puis-je afficher un message d’alerte WordPress uniquement sur des pages spécifiques ?

Oui. Avec SeedProd, vous ajoutez le bloc d’alerte à des modèles de page ou de thème individuels, il n’apparaît donc que là où vous le placez. Avec OptinMonster, utilisez la règle d’affichage de ciblage par page pour restreindre votre barre d’alerte à des URL ou des types de pages spécifiques.

Comment ajouter un message d’alerte WooCommerce pour un stock faible ou un paiement ?

Utilisez le constructeur de thème de SeedProd pour modifier vos modèles de page de panier, de paiement ou de produit WooCommerce. Faites glisser le bloc d’alerte dans le modèle, définissez le type sur Avertissement ou Succès, et ajoutez votre message.

Par exemple, une alerte d’avertissement sur la page du panier (« Plus que 2 en stock ») peut réduire l’abandon de panier sans aucun code personnalisé.

Puis-je ajouter un message d’alerte à WordPress sans plugin ?

Oui, vous pouvez ajouter une boîte de message WordPress avec du HTML et du CSS personnalisés directement dans une page ou un article, ou en ajoutant du PHP au fichier functions.php de votre thème. Mais cette approche nécessite des connaissances en codage et peut échouer si votre thème est mis à jour.

L’utilisation d’un plugin comme SeedProd est plus rapide, plus sûre et ne nécessite pas de développeur.

Commencez à ajouter des messages d’alerte WordPress dès aujourd’hui

Les messages d’alerte sont l’un des moyens les plus rapides de communiquer avec les visiteurs au bon moment : avertissements de stock faible, confirmations de paiement ou annonces sur l’ensemble du site.

Le bloc d’alerte de SeedProd permet d’en ajouter facilement n’importe où sur votre site sans code. Obtenez SeedProd et commencez à construire.

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.