Une bannière visuellement frappante est l'une des premières choses que les visiteurs remarquent lorsqu'ils arrivent sur votre site. Elle donne le ton de votre marque, communique votre message et encourage les conversions, ce qui en fait un outil puissant pour mettre en valeur vos produits, services ou mises à jour importantes.
Au fil des ans, nous avons utilisé différents types de bannières sur WPBeginner pour promouvoir notre newsletter, mettre en avant les offres du Black Friday, partager des cours gratuits, afficher nos services professionnels, et plus encore.
Grâce à ces campagnes, nous avons remarqué que les bannières attirent constamment l'attention des gens, encouragent les clics sur les boutons d'appel à l'action et génèrent des prospects pour notre entreprise.
Dans cet article, nous allons vous montrer comment créer facilement une bannière pour votre site WordPress. Ainsi, vous pourrez exploiter tous ces avantages pour améliorer votre entreprise.
Qu'est-ce qu'une bannière de site web ?
Une bannière est un affichage graphique qui s'étend sur le haut, le bas ou le côté d'un site WordPress. Elle comprend souvent un nom de marque et un logo, ainsi que d'autres éléments de conception, pour promouvoir un produit, un service ou un événement spécifique.
Par exemple, si une boutique de commerce électronique vient d'annoncer une promotion, elle peut afficher une bannière en haut de ses pages pour informer les nouveaux visiteurs des offres de réduction et les encourager à effectuer un achat.
Une bannière bien conçue peut faire une forte impression et inviter les visiteurs à explorer le reste de votre site. De plus, les bannières peuvent être utilisées pour promouvoir des produits d'affiliation, établir l'identité de la marque, constituer une liste d'e-mails en encourageant les visiteurs à s'inscrire à votre newsletter et générer du trafic vers d'autres pages de votre site.
Vous pouvez également utiliser des bannières pour promouvoir vos comptes de médias sociaux et encourager les visiteurs à suivre ou aimer vos pages.
Quelle est la meilleure taille de bannière de site Web ?
La taille idéale d'une bannière de site Web dépend de la mise en page et des objectifs marketing spécifiques de votre blog WordPress.
Par exemple, si vous souhaitez afficher une bannière rectangulaire et fine en haut de l'écran, vous pouvez utiliser la taille Large Leaderboard, qui est de 970 x 90.
Voici quelques-unes des autres tailles de bannières populaires et les plus utilisées :
- Bannière Moyenne : 300 x 250
- Leaderboard : 728 x 90
- Gratte-ciel Large : 160 x 600
- Demi-Page : 300 x 600
- Grand Leaderboard : 970 x 90
- Panneau d'affichage : 970 x 250
- Grand Rectangle : 326 x 280
- Bannière Verticale : 120 x 240
- Bannière Complète : 468 x 60
- Demi-Bannière : 234 x 60
Si vous souhaitez afficher une bannière pour un événement dans la barre latérale, vous pouvez utiliser les tailles de bannière Gratte-ciel Large ou Demi-Page. De même, vous pouvez également utiliser la taille de bannière Moyenne pour afficher une bannière carrée sur votre page.
Si vous cherchez à afficher des bannières publicitaires, vous voudrez peut-être consulter notre guide pour débutants sur les tailles et formats de bannières Google AdSense les plus performants pour WordPress.
Cela dit, voyons comment vous pouvez facilement créer une bannière sur votre site WordPress. Pour ce tutoriel, nous couvrirons trois méthodes pour créer une bannière, et vous pouvez utiliser les liens ci-dessous pour accéder à la méthode de votre choix :
- Méthode 1 : Créer une bannière de site web avec OptinMonster (recommandé)
- Méthode 2 : Créer une bannière de site web avec Canva (gratuit)
- Méthode 3 : Créer une bannière de site Web avec Thrive Leads
- Bonus : Ajouter des bannières d'application intelligentes dans WordPress
Méthode 1 : Créer une bannière de site web avec OptinMonster (recommandé)
OptinMonster est le meilleur plugin de création de bannières WordPress sur le marché qui vous permet de créer facilement des bannières flottantes et des pop-ups pour votre site Web.
C'est le meilleur outil d'optimisation de la conversion et de génération de prospects qui vous aide à transformer les visiteurs de votre site Web en abonnés et en clients.
De plus, de nombreux modèles de bannières d'OptinMonster comportent des champs d'inscription qui vous permettent de collecter les noms, les adresses e-mail et les numéros de téléphone de vos visiteurs.
Au fil des ans, nous avons utilisé cet outil plusieurs fois pour ajouter des bannières et mener à bien des campagnes de génération de prospects sur WPBeginner. Pour plus de détails, consultez notre avis complet sur OptinMonster.
Étape 1 : Installer OptinMonster sur votre site web
Tout d'abord, vous devrez créer un compte OptinMonster. Pour ce faire, il suffit de visiter le site Web OptinMonster et de cliquer sur le bouton « Obtenir OptinMonster maintenant ».
Après cela, vous devez installer et activer le plugin gratuit OptinMonster sur votre site web WordPress. Pour des instructions détaillées, vous pouvez consulter notre guide pour débutants sur comment installer un plugin WordPress.
Après activation, l'assistant de configuration d'OptinMonster s'ouvrira dans votre panneau d'administration WordPress.
À partir de là, cliquez sur le bouton « Connecter votre compte existant » pour connecter votre site WordPress à votre compte OptinMonster.
Cela ouvrira une nouvelle fenêtre sur l'écran de votre ordinateur.
À partir de là, cliquez sur le bouton « Connecter à WordPress » pour continuer.
Étape 2 : Créez et personnalisez votre bannière
Maintenant que vous avez connecté votre compte WordPress à OptinMonster, rendez-vous sur la page OptinMonster » Campagnes depuis la barre latérale d'administration de WordPress.
À partir de là, cliquez sur le bouton « Créer votre première campagne » pour commencer à concevoir votre bannière de site web.
Cela vous dirigera vers la page « Modèles », où vous pourrez commencer par choisir un type de campagne.
Par exemple, si vous souhaitez afficher votre bannière sous forme de barre en haut de l'écran, vous pouvez choisir la campagne « Barre flottante ». De même, vous pouvez sélectionner le type de campagne « Popup » pour afficher votre bannière sous forme de popup.
Après cela, vous devrez également sélectionner un modèle pour la campagne que vous avez choisie.
Pour ce tutoriel, nous choisirons un modèle pour le type de campagne « Barre flottante ».
Ensuite, il vous sera demandé de donner un nom à la campagne que vous créez. Tapez simplement un nom de votre choix et cliquez sur le bouton « Démarrer la construction » pour continuer.
Cela lancera l'interface glisser-déposer d'OptinMonster sur votre écran, où vous pourrez commencer à personnaliser votre bannière. À partir de là, vous pouvez faire glisser et déposer les champs de votre choix depuis la barre latérale gauche sur la bannière.
Par exemple, si vous souhaitez ajouter des icônes de médias sociaux à votre bannière pour augmenter vos abonnés, vous pouvez alors faire glisser et déposer le bloc Médias sociaux depuis la barre latérale gauche.
Après cela, cliquez simplement sur le bloc pour ouvrir ses paramètres dans la colonne de gauche.
À partir de là, vous pouvez modifier le titre du bouton, ajouter votre URL de média social, et même changer votre plateforme de média social à partir du menu déroulant.
Vous pouvez également ajouter d'autres blocs pour afficher des vidéos, des images, du texte ou des appels à l'action dans la conception de la bannière de votre site Web.
Une fois que vous avez fait cela, vous devez sélectionner la position de la bannière.
Par défaut, la barre flottante d'OptinMonster est affichée en bas de l'écran de votre site Web une fois que vous commencez à faire défiler.
Cependant, vous pouvez facilement modifier ce paramètre en cliquant sur l'icône « Paramètres » en bas de la barre latérale gauche.
Cela ouvrira les paramètres dans la colonne de gauche, où vous devrez développer l'onglet « Paramètres de la barre flottante ». À partir de là, il suffit d'activer l'interrupteur « Charger la barre flottante en haut de la page ? » pour afficher la bannière en haut.
Étape 3 : Ajouter des déclencheurs pour votre bannière
Une fois que vous avez conçu votre bannière, passez à l'onglet « Règles d'affichage » en haut. À partir de là, vous pouvez ajouter des règles pour l'affichage de votre bannière.
N'oubliez pas que vous n'avez besoin de passer à cet onglet que si vous souhaitez ajouter un déclencheur d'affichage spécifique pour votre bannière. Sinon, vous pouvez passer à l'étape suivante.
Par exemple, si vous souhaitez afficher votre bannière lorsque l'utilisateur est sur le point de quitter votre site, vous devez choisir l'option « Intention de sortie ».
Une fois que vous avez fait cela, sélectionnez simplement l'option « Sur tous les appareils » dans le menu déroulant du milieu. Si vous souhaitez utiliser cette règle d'affichage uniquement pour les appareils mobiles, vous pouvez également choisir cette option.
Après cela, choisissez la sensibilité à l'intention de sortie selon vos préférences et cliquez sur le bouton « Étape suivante ».
Cela vous mènera à un nouvel écran. Ici, vous devez vous assurer que l'option « Optin » est sélectionnée pour le menu déroulant « Afficher la vue de la campagne ».
Une fois que vous avez fait cela, cliquez simplement sur le bouton « Étape suivante ».
Votre règle d'affichage pour la bannière sera maintenant affichée à l'écran.
Si vous souhaitez modifier quelque chose ici, vous pouvez cliquer sur le bouton « Modifier » pour y remédier.
Étape 4 : Publier votre bannière
Vous pouvez maintenant passer à l'onglet « Publier » en haut et cliquer sur le bouton « Enregistrer » dans le coin supérieur droit de l'écran.
Après cela, cliquez simplement sur le bouton « Publier » pour afficher la bannière sur votre site Web.
Maintenant, visitez votre site Web pour voir la bannière en haut de votre écran.
Voici à quoi cela ressemblait sur notre site de démonstration.
Méthode 2 : Créer une bannière de site web avec Canva (gratuit)
Si vous souhaitez créer une bannière de site Web gratuitement, alors cette méthode est pour vous.
Canva est un outil populaire basé sur le Web pour créer toutes sortes de graphiques, y compris des bannières, des logos, des affiches, des couvertures de livres, et plus encore. Il offre également une version gratuite que vous pouvez utiliser pour créer un design de bannière de site Web.
Étape 1 : Créez un compte Canva
Tout d'abord, visitez le site Web de Canva et cliquez sur le bouton « S'inscrire » pour créer un compte.
Si vous avez déjà un compte Canva, vous pouvez simplement vous connecter.
Après la création de votre compte, vous serez dirigé vers la page d'accueil de votre compte Canva.
À partir d'ici, vous devez passer à l'onglet « Modèles » dans la colonne de gauche, puis rechercher des modèles de bannières à l'aide de la barre de recherche en haut.
Cela affichera tous les modèles de bannières disponibles dans Canva. Cependant, certains de ces modèles peuvent être verrouillés car il s'agit de fonctionnalités payantes.
Étape 2 : Concevez votre bannière de site Web
Une fois que vous avez sélectionné un modèle, l'interface de conception de Canva se lancera à l'écran.
À partir d'ici, vous pouvez personnaliser votre bannière selon vos envies. Vous pouvez modifier le contenu existant en cliquant sur les blocs et en ajoutant votre texte.
Vous pouvez même ajouter différents éléments graphiques comme des autocollants, des photos et des vidéos en passant à l'onglet « Éléments » dans la colonne de gauche.
Après avoir ajouté un élément, vous pouvez modifier son animation, sa position et sa transparence à partir du menu en haut.
Vous pouvez également télécharger des fichiers multimédias depuis votre ordinateur en passant à l'onglet « Téléchargements » dans la colonne de gauche.
Pour ajouter du texte à votre bannière, passez à l'onglet « Zone de texte » dans la colonne de gauche.
Une fois sur place, vous pouvez utiliser les styles de texte par défaut ou différentes combinaisons de polices pour ajouter du contenu à votre bannière.
Vous pouvez même ajouter un appel à l'action avec un lien en sélectionnant le texte à la souris. Cela affichera une icône de lien en haut du texte.
Cliquez simplement sur cette icône et copiez-collez le lien que vous souhaitez ajouter.
Après cela, cliquez sur le bouton « Terminé » pour l'enregistrer.
Étape 3 : Obtenir un code d'intégration pour la bannière
Une fois que vous êtes satisfait de la personnalisation de votre bannière, cliquez simplement sur le bouton « Partager » en haut à droite de l'écran.
Cela ouvrira une fenêtre contextuelle où vous devrez sélectionner l'option « Plus » en bas.
Vous serez maintenant dirigé vers le menu « Toutes les options », où vous devrez sélectionner l'option « Intégrer ».
Une fois que vous aurez fait cela, une nouvelle fenêtre s'ouvrira à l'écran. À partir de là, cliquez simplement sur le bouton « Intégrer ».
Canva créera maintenant un code d'intégration HTML pour vous.
Une fois qu'il s'affiche à l'écran, cliquez sur le bouton « Copier » sous l'option « Code d'intégration HTML ».
Étape 4 : Ajouter le code d'intégration HTML dans WordPress
Vous pouvez maintenant afficher votre bannière sur votre page, article ou barre latérale WordPress selon vos préférences. Pour ce tutoriel, nous afficherons notre bannière sur une page WordPress.
Tout d'abord, vous devez ouvrir la page ou l'article où vous souhaitez ajouter la bannière.
Une fois sur place, cliquez sur le bouton « Ajouter un bloc » (+) en haut à gauche pour trouver et ajouter le bloc HTML personnalisé à la page.
Une fois que vous avez fait cela, collez simplement le code d'intégration que vous avez copié dans le bloc.
Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos modifications.
Visitez maintenant votre site Web pour voir la bannière WordPress en action.
Méthode 3 : Créer une bannière de site Web avec Thrive Leads
Vous pouvez également créer une bannière de site Web en utilisant Thrive Leads. C'est un plugin de popup WordPress populaire utilisé par plus de 114 000 sites Web.
Avec Thrive Leads, vous pouvez concevoir des bannières de haute qualité qui vous aideront à capturer des prospects sur votre site WordPress et à développer votre liste d'e-mails.
Nous avons testé cet outil en temps réel et l'avons trouvé très convivial pour les débutants, avec une interface intuitive et des modèles attrayants. Pour plus de détails, consultez notre avis sur Thrive Themes Suite.
Étape 1 : Installez Thrive Leads sur votre site Web WordPress
Tout d'abord, vous devez visiter le site Web Thrive Themes et vous inscrire pour un compte. Une fois que vous avez fait cela, rendez-vous sur votre tableau de bord membre.
À partir de là, cliquez sur le lien « Télécharger et installer le plugin Thrive Product Manager ».
Ensuite, visitez votre site Web WordPress pour installer et activer le plugin Thrive Product Manager. Pour des instructions détaillées, vous voudrez peut-être consulter notre guide étape par étape sur comment installer un plugin WordPress.
Après l'activation, rendez-vous dans l'onglet Product Manager depuis le tableau de bord d'administration WordPress et cliquez sur le bouton « Se connecter à mon compte ».
Après avoir saisi vos informations de connexion, vous pourrez voir votre tableau de bord Thrive Product Manager.
À partir d'ici, vous pouvez sélectionner les produits que vous souhaitez installer et utiliser sur votre site. Choisissez simplement le plugin « Thrive Leads » et cliquez sur le bouton « Installer les produits sélectionnés ».
Étape 2 : Créer une bannière de site web
Après l'installation du plugin, vous devez visiter la page Tableau de bord Thrive » Thrive Leads depuis la barre latérale d'administration de WordPress.
Une fois sur place, cliquez simplement sur le bouton « Ajouter » à côté de l'option « Groupes de prospects ».
Cela affichera la fenêtre contextuelle « Ajouter un nouveau groupe de prospects » sur votre écran, où vous devrez taper un nom pour le groupe de prospects que vous créez.
Assurez-vous de nommer le groupe de prospects d'une manière qui vous aidera à l'identifier.
Par exemple, si vous créez une bannière pour constituer votre liste d'e-mails, vous pouvez nommer votre groupe de prospects « Campagne de liste d'e-mails ».
Après cela, le groupe de prospects que vous avez créé apparaîtra à l'écran. Pour y accéder, cliquez sur le bouton « Ajouter un nouveau type de formulaire d'opt-in ».
Cela ouvrira une nouvelle invite où vous devrez choisir le type de bannière que vous souhaitez créer.
Vous pouvez créer une bannière de type slide-in, ruban, widget, in-content, lightbox ou scroll mat selon vos préférences.
Ces bannières fonctionneront comme un formulaire car elles collecteront des données auprès de vos utilisateurs, y compris les adresses e-mail, les numéros de téléphone, et plus encore.
Pour ce tutoriel, nous allons créer une bannière de type ruban pour notre site.
Une fois que vous avez choisi un type de conception de bannière de site Web, l'invite disparaîtra automatiquement de l'écran.
Maintenant, pour ouvrir le tableau de bord de votre groupe de prospects, vous devez cliquer sur le bouton « Ajouter » dans le coin droit de votre onglet Groupes de prospects.
Cela vous mènera au tableau de bord de vos groupes de prospects, où tous les formulaires et rapports de prospects pour le groupe seront affichés une fois votre campagne lancée.
Par exemple, si vous souhaitez créer une bannière pour capturer des adresses e-mail, toutes les informations utilisateur que vous collectez via la bannière seront affichées ici.
Pour l'instant, il vous suffit de cliquer sur le bouton « Créer un formulaire » pour commencer à construire votre bannière.
Cela ouvrira une nouvelle invite où vous devrez fournir un nom pour le formulaire et cliquer sur le bouton « Créer un formulaire ».
Une fois votre formulaire créé, il sera affiché dans le tableau de bord de vos groupes de prospects.
À partir de là, cliquez sur le bouton « Modifier la conception » dans le coin droit pour commencer à construire votre bannière.
Étape 3 : Personnalisez votre bannière de site Web
L'éditeur visuel Thrive sera maintenant lancé dans un nouvel onglet de votre écran.
À partir de là, vous pouvez commencer par sélectionner un modèle pour votre bannière dans l'invite « Bibliothèque Thrive Leads ».
Vous pouvez ensuite utiliser l'un des modèles préfabriqués tel quel ou le personnaliser davantage avec l'éditeur visuel. Une fois votre choix effectué, cliquez simplement sur le bouton « Choisir le modèle » pour continuer.
Après avoir ajouté un modèle pour une bannière de type ruban, vous pouvez facilement personnaliser les éléments qu'il contient en cliquant sur chacun d'eux. Cela ouvrira les paramètres de l'élément dans la barre latérale gauche.
Par exemple, si vous souhaitez modifier la couleur du bouton de votre modèle, vous devez cliquer dessus pour ouvrir ses paramètres dans la barre latérale.
Si vous souhaitez ajouter un tout nouvel élément à votre bannière, vous pouvez également le faire en cliquant sur l'icône « + » dans le coin droit de l'écran.
Cela ouvrira la barre latérale « Ajouter des éléments » sur la droite, où vous pourrez faire glisser et déposer les éléments de votre choix sur la bannière.
Par exemple, si vous souhaitez ajouter des boutons de compte de médias sociaux à votre bannière, vous devrez faire glisser et déposer l'élément « Suivi social » depuis la barre latérale droite.
Une fois que vous êtes satisfait, cliquez sur le bouton « Enregistrer le travail » en bas à gauche pour sauvegarder vos modifications.
Après cela, vous devez retourner à votre tableau de bord des groupes de prospects.
Étape 4 : Configurer les paramètres de la bannière
Une fois de retour sur votre tableau de bord, vous pouvez modifier la position de votre bannière en cliquant sur l'option « Position » dans la ligne du formulaire.
Cela ouvrira l'invite « Paramètres de position », où vous pourrez choisir la position de bannière préférée dans le menu déroulant.
Après cela, cliquez sur le bouton « Enregistrer ».
Ensuite, pour configurer la fréquence d'affichage de la bannière, cliquez sur l'option « Fréquence d'affichage » dans la ligne du formulaire.
Cela ouvrira l'invite « Paramètres d'affichage », où vous pourrez utiliser le curseur pour déterminer le nombre de fois où la bannière doit être affichée à l'écran.
Si vous laissez le nombre à 0, la bannière sera affichée en permanence. Une fois votre choix effectué, cliquez sur le bouton « Enregistrer » pour sauvegarder vos paramètres.
Si vous souhaitez ajouter un déclencheur spécifique pour l'affichage de votre bannière, vous devez cliquer sur l'option « Déclencheur » dans la ligne du formulaire.
Cela affichera l'invite « Paramètres du déclencheur ». Ici, vous pouvez choisir un déclencheur pour votre bannière dans le menu déroulant, par exemple après une certaine période ou lorsqu'un utilisateur atteint le bas de la page.
Une fois que vous avez terminé, cliquez sur le bouton « Enregistrer » pour sauvegarder vos paramètres.
Étape 5 : Publier votre bannière
Après avoir configuré les paramètres de la bannière, vous devez quitter votre tableau de bord Lead Groups et retourner au tableau de bord Thrive Leads en cliquant sur le lien en haut.
Une fois sur place, développez votre onglet Lead Groups et activez le commutateur « Afficher sur ordinateur » sur « Activé ». Si vous souhaitez également afficher votre bannière sur les appareils mobiles, vous pouvez activer le commutateur « Afficher sur mobile » sur « Activé ».
Après cela, cliquez sur l'icône d'engrenage dans le coin supérieur droit de l'onglet Lead Groups pour ouvrir les paramètres d'affichage.
Ici, vous pouvez sélectionner les pages du site Web sur lesquelles vous souhaitez que la bannière soit affichée. Par exemple, si vous souhaitez que la bannière s'affiche en haut de toutes les pages et publications, vous pouvez cocher la case à côté de ces options.
Enfin, cliquez sur le bouton « Enregistrer et fermer » pour sauvegarder vos modifications.
Vous pouvez maintenant visiter votre site Web pour voir la bannière affichée en haut de la page.
Voici à quoi cela ressemblait sur notre site Web de démonstration.
Bonus : Ajouter des bannières d'application intelligentes dans WordPress
Si vous avez une application mobile pour votre site web, il est alors judicieux d'afficher des bannières d'application intelligentes. Ces bannières feront la promotion de vos applications et encourageront les utilisateurs d'iPhone ou iPad à les télécharger.
Une fois que les visiteurs cliquent sur cette bannière, ils seront redirigés vers l'App Store, où ils pourront télécharger votre application. Si l'application est déjà installée sur leur appareil, la bannière d'application intelligente leur demandera de l'ouvrir à la place.
Vous pouvez facilement ajouter une bannière d'application intelligente dans WordPress avec WPCode. À notre avis, c'est le meilleur plugin d'extraits de code WordPress du marché. Il vous permet d'ajouter facilement l'ID de votre application à votre site web.
Pour plus d'informations, consultez notre tutoriel sur comment ajouter facilement une bannière d'application intelligente dans WordPress.
Nous espérons que cet article vous a aidé à apprendre comment créer facilement une bannière de site web pour WordPress. Vous pourriez également consulter notre guide pour débutants sur comment personnaliser les couleurs de votre site web WordPress et nos meilleurs choix pour le meilleur logiciel de conception web.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Ralph
J'avais l'habitude de créer des bannières simples en jpeg/png dans Canva et d'y insérer des images cliquables avec des liens vers où elles devaient rediriger. Cependant, c'était toujours un mauvais choix. Ce qui est beau sur ordinateur est moche sur mobile et vice versa.
Les images peuvent s'adapter et s'ajuster à l'écran, mais elles ne s'adaptent pas comme les bannières codées normalement, qui sont bien meilleures. La première méthode semble très prometteuse et professionnelle, ce qui, je l'espère, m'aidera à augmenter mes conversions.