Comment créer des boîtes d'alerte dans WordPress

Si votre site Web reçoit un nombre important de visiteurs, mais que les inscriptions ou les conversions sont inférieures à ce que vous souhaiteriez, vous n'êtes pas seul. Il existe des tonnes de ressources disponibles pour vous aider à augmenter votre trafic, mais faire en sorte que ce trafic prenne les bonnes mesures sur votre site est une autre histoire.

Une solution possible consiste à utiliser une boîte d'alerte. Il s'agit d'un outil puissant et simple qui peut augmenter considérablement les conversions sur votre site WordPress. De plus, il est très facile de créer et de personnaliser cette fonctionnalité.

Dans cet article, nous expliquerons ce qu'est une boîte d'alerte et pourquoi vous devriez en utiliser une. Ensuite, nous vous montrerons comment créer votre propre boîte d'alerte dans WordPress. Plongeons-nous !

Qu'est-ce qu'une boîte d'alerte ?

Une boîte d'alerte est exactement ce que cela ressemble. Il s'agit d'une alerte qui apparaît sur un site Web pour informer les visiteurs que quelque chose s'est produit. Vous connaissez peut-être mieux cette fonctionnalité en tant que "popup".

Les boîtes d'alerte dans WordPress prennent généralement l'une des deux formes. Vous pouvez voir une fenêtre contextuelle qui apparaît à l'écran ou une barre qui s'affiche en haut de votre page (parfois appelée « barre de bonjour »).

Pourquoi créer une boîte d'alerte ?

Les boîtes d'alerte sont généralement utilisées pour informer (ou alerter) les utilisateurs de quelque chose d'important qui se passe sur votre site. Par exemple, vous pouvez utiliser une boîte d'alerte WordPress pour informer les visiteurs d'une vente spéciale sur un produit qu'ils ne verraient peut-être pas autrement, ou d'une série de publications en vedette.

Une autre utilisation très courante de cette fonctionnalité consiste à capturer les adresses e-mail des visiteurs. De nombreux plugins de boîte d'alerte WordPress peuvent être configurés pour apparaître lorsqu'un utilisateur éloigne son curseur du site (pour fermer l'onglet ou appuyer sur le bouton de retour, par exemple).

Ces alertes de « dernière minute » peuvent être un excellent moyen de capturer les coordonnées des visiteurs avant leur départ, ce qui pourrait entraîner une conversion en cours de route. Ces alertes peuvent être extrêmement efficaces – les popups les plus performants ont un taux de conversion de plus de 9 %. En d'autres termes, ils valent bien l'effort de mise en œuvre.

Créer une boîte d'alerte avec un plugin

Grâce aux plugins WordPress, créer vos propres boîtes d'alerte est simple. Nous vous guiderons à chaque étape en utilisant le puissant (et gratuit) plugin Popup Maker.

Étape 1 : Téléchargez un plugin (tel que Popup Maker)

La première chose que vous devrez faire est de choisir un plugin dédié. Comme nous l'avons mentionné ci-dessus, le plugin gratuit Popup Maker est bien évalué et constitue un choix solide.

Pour installer cet outil, rendez-vous sur votre tableau de bord WordPress et accédez à Plugins > Ajouter un nouveau . Recherchez "popup maker", et ce devrait être la première entrée :

Cliquez ensuite sur Installer maintenant . Une fois l'installation terminée, n'oubliez pas d'activer le plugin en sélectionnant Activer . Notez que bien que Popup Maker lui-même soit gratuit, certaines fonctionnalités nécessitent un plan premium pour être utilisées.

Étape 2 : créer une fenêtre contextuelle

Avec Popup Maker installé, vous devriez voir une nouvelle entrée dans votre barre latérale WordPress qui porte le nom du plugin . Cliquez dessus pour ouvrir une liste de toutes vos fenêtres contextuelles. Au début, il sera vide, mais vous êtes sur le point d'y remédier.

Pour créer un popup, cliquez sur Ajouter un nouveau popup en haut de l'écran. Cela ouvrira l'éditeur WordPress :

Lorsque vous visiterez cet écran, un didacticiel apparaîtra vous montrant comment créer une fenêtre contextuelle. La première chose qu'on vous demande de faire est d'entrer un nom, afin que vous puissiez identifier la fenêtre contextuelle plus tard.

Après cela, vous pouvez saisir un titre facultatif qui apparaîtra dans la fenêtre contextuelle en tant que titre. Dans le champ principal de l'éditeur, vous pouvez également saisir le contenu que vous souhaitez afficher dans la fenêtre contextuelle. Si vous souhaitez simplement créer un formulaire de contact simple, vous pouvez également utiliser un shortcode prédéfini.

Ces shortcodes se trouvent sous un nouveau bouton avec le logo Popup Maker dans la barre d'outils :

Cliquez sur Formulaire d'abonnement pour insérer un formulaire de contact de base pour la capture d'e-mails. Le texte des champs et la clause de non-responsabilité en matière de confidentialité peuvent être personnalisés en cliquant sur le formulaire et en sélectionnant le bouton Modifier. Il existe un certain nombre d'options pour les styles et la mise en page, en plus du texte.

Étape 3 : Configurez les déclencheurs pour votre popup

Une fois votre formulaire contextuel créé, l'étape suivante consiste à configurer ses déclencheurs. Ceux-ci déterminent quand la boîte d'alerte apparaît.

Sur l'écran de l'éditeur contextuel, faites défiler jusqu'à Paramètres contextuels et sélectionnez Déclencheurs dans la liste. Cliquez ensuite sur Ajouter un nouveau déclencheur :

Le plugin de base Popup Maker contient trois options ici : Cliquez sur Ouvrir , Délai/Ouverture automatique et Soumission de formulaire . Vous pouvez également sélectionner l'intention de sortie comme déclencheur si vous êtes sur un plan premium - c'est l'option à utiliser si vous voulez que la fenêtre contextuelle apparaisse lorsqu'un utilisateur essaie de quitter votre site.

Vous pouvez également ajuster les pages sur lesquelles la boîte d'alerte apparaît sous l'onglet Ciblage . Assurez-vous de personnaliser ce paramètre si vous souhaitez empêcher certaines pages ou certains types d'appareils de voir l'alerte.

Étape 4 : Personnalisez votre boîte d'alerte

Enfin, vous pouvez modifier l'apparence de votre nouvelle boîte d'alerte pour mieux correspondre au thème de votre site. Dans la zone Paramètres de la fenêtre contextuelle , sélectionnez Affichage . Là, vous pouvez modifier l'endroit où la fenêtre contextuelle apparaît à l'écran (y compris sous forme de barre supérieure), définir sa taille et sa position, et choisir parmi l'un des thèmes disponibles :

Lorsque vous avez terminé, assurez-vous de sélectionner le bouton Publier pour enregistrer vos modifications et activer votre popup.

Créer une boîte d'alerte sans plugin

Si vous préférez ne pas utiliser de plugin, vous pouvez également créer vous-même une boîte d'alerte en utilisant du code et un peu d'huile de coude. Vous devrez modifier votre fichier header.php et ajouter du CSS à votre site. Pour cet exemple, nous allons créer une barre d'alerte en haut de la page.

Étape 1 : Modifier votre fichier header.php

La première chose que vous devrez faire est d'ajouter du code à votre fichier header.php . Ceci est accessible à l'aide de l'éditeur de thème WordPress. Depuis votre tableau de bord, accédez à Apparence > Éditeur de thèmes . Sélectionnez ensuite Theme Header (header.php) dans la barre latérale à droite :

Copiez et collez le code suivant dans le fichier à la fin de la section <head> :

<div class="alertbar">All items 20% off!</div>

Voici à quoi devrait ressembler le fichier après cet ajout :

Cela affichera le message "Tous les articles à 20 % de réduction !" dans votre barre d'alerte. Vous pouvez personnaliser le texte comme bon vous semble.

Étape 2 : Ajouter un CSS personnalisé

Enfin, vous devrez utiliser des feuilles de style en cascade (CSS) pour styliser votre alerte. Vous pouvez ajouter du CSS à l'aide de WordPress Customizer.

Pour ce faire, rendez-vous sur votre tableau de bord WordPress et accédez à Apparence > Personnaliser. Cela ouvrira votre site dans le Customizer. Dans la barre latérale, sélectionnez CSS supplémentaire . Cela ouvre une boîte de code dans laquelle vous pouvez entrer du CSS personnalisé.

Collez le code suivant dans le champ de texte :

.alertbar {

background-color: #A9A9A9;

color: #FFFFFF;

display: block;

line-height: 45px;

height: 50px;

position: relative;

text-align: center;

text-decoration: none;

top: 0px;

width: 100%;

z-index: 100;

}

Voici à quoi ressemble l'alerte :

Le code ci-dessus crée une barre gris foncé avec du texte blanc - mais vous pouvez modifier les couleurs et la taille comme bon vous semble pour correspondre à votre thème. Lorsque vous avez terminé, cliquez sur Publier pour enregistrer vos modifications.

Améliorez votre site avec WP Engine

Que vous cherchiez à augmenter les inscriptions par e-mail ou que vous ayez besoin d'un moyen simple d'informer les visiteurs des offres spéciales, une boîte d'alerte est une solution élégante et efficace. En implémenter un sur votre site WordPress peut augmenter considérablement votre taux de conversion.

Vous pouvez implémenter une boîte d'alerte avec un plugin WordPress tel que Popup Maker. Vous pouvez également en coder un vous-même relativement facilement avec un peu de CSS. Dans tous les cas, vous recevrez une alerte personnalisable conçue pour augmenter les inscriptions et les conversions.

Si vous souhaitez améliorer encore plus votre site, assurez-vous de consulter nos plans d'hébergement WordPress dédiés !