Blog

Comment ajouter une bannière WordPress personnalisée

Date de la dernière mise à jour : 
Comment ajouter une bannière WordPress personnalisée

Si vous utilisez WordPress pour vendre un produit ou développer une liste d’e-mails, une bannière en haut de votre page peut s’avérer précieuse. C’est souvent ce que les visiteurs remarquent en premier, ce qui en fait un endroit idéal pour annoncer une promotion saisonnière, présenter un nouveau produit ou proposer un téléchargement gratuit en échange d’une adresse e-mail. 

WordPress propose bien des moyens natifs pour créer une bannière, et une bannière personnalisée dans Gutenberg consiste généralement à combiner un bloc Bannière (Cover) avec un titre et un bouton, puisqu’il n’existe pas de bloc dédié aux bannières. Pour une simple annonce accompagnée d’un lien, ces options suffisent. Mais si vous voulez que votre bannière génère des clics plutôt que de se fondre dans la page et d’être ignorée au défilement, vous aurez peut-être besoin de quelque chose d’un peu différent.

Ces blocs ne permettent aucune interactivité, puisqu’il n’y a ni compte à rebours pour les promotions ni champ de capture d’e-mail dans la bannière elle-même. Pour créer une bannière avec ce type d’éléments (sans écrire de HTML ni de CSS), deux approches sont possibles : vous pouvez soit installer une extension dédiée aux bannières, soit utiliser un widget hébergé gratuit et coller son code d’intégration dans un bloc HTML personnalisé.

Si vous êtes blogueur, éditeur ou commerçant WooCommerce et que vous souhaitez ajouter une bannière personnalisée à WordPress avec un compte à rebours ou un formulaire d’inscription, poursuivez votre lecture. Ce guide explique comment ajouter une bannière WordPress, en commençant par les extensions, puis avec le widget.

Option 1 : Installer une extension dédiée aux bannières WordPress

L’approche standard de WordPress consiste à installer une extension depuis le répertoire. Des dizaines d’extensions de bannières et de barres de notification sont disponibles, et une fois l’une d’elles activée, vous pouvez configurer votre campagne depuis votre tableau de bord plutôt que depuis l’éditeur de blocs.

Voici comment ajouter une bannière WordPress à l’aide d’une extension :

  1. Depuis votre tableau de bord WordPress, rendez-vous dans Extensions, recherchez une extension de bannière ou de barre de notification, puis cliquez sur Installer maintenant et activer.
  2. Capture d’écran de la page de l’extension Hello Bar Popup Builder
  1. Repérez le nouvel élément de menu de l’extension dans votre barre latérale gauche ; actualisez le tableau de bord s’il n’apparaît pas immédiatement. Activez la bannière, puis ajoutez votre texte, vos images, vos couleurs et votre URL cible.
  2. Choisissez les pages ou les articles sur lesquels la bannière s’affichera, définissez les règles de planification ou de ciblage, enregistrez vos modifications, puis consultez votre site en ligne pour vérifier que tout s’affiche correctement.

Les versions gratuites varient considérablement quant à leur contenu, et les fonctionnalités premium qui rendent une bannière vraiment utile — comptes à rebours, règles de ciblage et suppression du logo d’un tiers de votre promotion — nécessitent souvent un abonnement payant.

Par exemple, l’offre gratuite de Hello Bar vous limite à une seule barre et conserve la marque Hello Bar à moins de passer à une version supérieure, les formules payantes démarrant à 29 $ par mois avec facturation annuelle. OptinMonster propose une offre gratuite, mais les types de campagnes et les limites de trafic évoluent avec les formules payantes allant de 7 à 49 $ par mois. Quant à Icegram, sa formule premium débute à 129 $ par an. 

Plusieurs de ces solutions nécessitent également un compte auprès du service propre à l’extension, car celle-ci sert de connecteur tandis que la campagne est modifiée dans le tableau de bord cloud de l’entreprise. C’est un point à connaître si vous préférez travailler uniquement sur votre propre site.

Option 2 : Ajouter un widget de bannière interactif gratuit (recommandé)

Si vous souhaitez une bannière avec un compte à rebours, un code promo ou un champ e-mail, sans avoir à payer une extension premium pour l’obtenir, un widget de bannière gratuit pour WordPress répond à vos besoins. Vous configurez la bannière dans un éditeur visuel, copiez le code d’intégration, puis le collez dans un bloc HTML personnalisé de Gutenberg.

Le widget Bannière de Jotform prend en charge les éléments que les blocs de Gutenberg ne peuvent pas gérer. Vous pouvez utiliser une couleur unie, un dégradé, une image ou une vidéo YouTube ou Vimeo comme arrière-plan, puis ajouter des boutons d’appel à l’action, des liens texte, des codes promo, des comptes à rebours ou un formulaire de capture d’e-mail. Et vous pouvez rendre toute la bannière cliquable si vous le souhaitez.

Voici comment ajouter une bannière WordPress à l’aide d’un widget :

  1. Sur votre page Espace de travail Jotform, cliquez sur Créer, sélectionnez Widget de site web, recherchez « Bannière », puis cliquez sur Utiliser le widget.
  2. Résultats de recherche de bannières dans le répertoire des widgets de site web de Jotform
  1. Choisissez un style de bannière et ajoutez les éléments dont votre campagne a besoin, qu’il s’agisse d’un compte à rebours, d’un code promo, d’un formulaire d’inscription ou d’un bouton.
  2. Éditeur du widget Bannière avec contenu et paramètres de campagne personnalisables
  1. Définissez votre arrière-plan, vos couleurs et votre mise en page ; choisissez un affichage horizontal ou vertical ; ajustez la largeur, les marges intérieures et le rayon des angles ; et décidez si la bannière s’affiche sur tous les appareils ou uniquement sur ordinateur ou mobile.
  2. Paramètres de style pour personnaliser l’apparence d’une bannière de promotion de voyage
  1. Cliquez sur Publier, puis sur Copier le code dans la section Intégrer. Le menu Plateformes propose également des instructions d’intégration spécifiques à WordPress.
  2. Section d’intégration de la bannière Jotform avec le code prêt à copier
  1. Dans l’éditeur Gutenberg, cliquez sur l’icône + pour ajouter un bloc, puis recherchez et sélectionnez HTML personnalisé. Cliquez sur Modifier le HTML et collez votre code d’intégration, puis cliquez sur Mettre à jour et Enregistrer.
  2. Bloc HTML personnalisé affichant la bannière intégrée dans l’éditeur Gutenberg de WordPress

Modifier la bannière ultérieurement consiste à ouvrir le widget plutôt qu’à passer à une formule supérieure pour débloquer une fonctionnalité. Un CSS personnalisé est également disponible si vous souhaitez un contrôle plus précis, et Jotform limite ces sélecteurs au widget afin que votre mise en forme n’affecte pas les autres éléments de la page.

Boostez votre site WordPress avec des widgets intelligents et sans serveur

Une bannière n’est que l’un des nombreux éléments que vous pouvez ajouter à un site WordPress sans souscrire à une autre extension premium. Le répertoire des widgets de site web gratuits de Jotform propose plus de 150 options, notamment

  • le widget Barre d’annonce, qui fait office d’alternative à une barre d’annonce WordPress en se passant totalement d’extension et en offrant la fine bande de notification en haut d’une page
  • le widget Pop-up pour les offres d’intention de sortie et d’inscription, généralement incluses dans les extensions de conversion premium
  • le widget Tableau de tarifs, qui présente vos formules sans module complémentaire de création de pages

Chaque widget s’intègre via un bloc HTML personnalisé, de la même manière que le widget Bannière. Vous n’ajoutez donc pas une extension, un compte et un renouvellement annuel chaque fois que vous souhaitez un élément de plus sur une page.

En tant que créateur, éditeur ou commerçant WooCommerce, votre budget devrait servir à développer votre activité et à créer des choses qui méritent d’être mises en avant, et non à payer des frais annuels pour afficher une bannière temporaire. Le widget Bannière de Jotform vous offre le compte à rebours, le code promo et le champ d’inscription sans toutes ces complications, et les formulaires WordPress fonctionnent de la même manière lorsque vous avez besoin de recueillir des informations plutôt que d’annoncer une promotion ou un événement.

Cet article s’adresse aux propriétaires de sites WordPress, aux blogueurs et aux commerçants WooCommerce qui souhaitent intégrer des bannières promotionnelles riches et interactives avec des comptes à rebours ou des formulaires de capture de prospects, sans se limiter aux blocs Gutenberg de base ni installer d’extensions lourdes.

Envoyer un commentaire:

Jotform Avatar
Ce site est protégé par reCAPTCHA, et les Politique de confidentialité et Conditions de service de Google s'appliquent.

Podo Comment Soyez le premier à commenter.