Comment faire une bannière de site (3 façons simples)

Vous cherchez un moyen facile de créer une bannière de site dans WordPress ?

Une bannière peut mettre en avant les produits, les services ou les mises à jour de nouvelles proposés par votre site de manière accrocheuse. Elle peut accroître l’engagement des comptes, augmenter votre taux de CTR et encourager les internautes à passer à l’action.

Dans cet article, nous allons vous afficher comment réaliser facilement une bannière pour votre site WordPress.

Qu’est-ce qu’une bannière de site ?

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 le nom et le logo d’une marque, ainsi que d’autres éléments de conception, afin de promouvoir un produit, un service ou un évènement spécifique.

Par exemple, si une boutique e-commerce vient d’annoncer des soldes, elle peut afficher une bannière en haut de ses pages pour informer les nouveaux internautes des offres de remise et les inciter à effectuer un achat.

Une bannière bien conçue peut faire forte impression et inviter les internautes à explorer le reste de votre site. En outre, les bannières peuvent être utilisées pour promouvoir des produits affiliés, établir l’identité de la marque, constituer une liste d’e-mails en encourageant les internautes à s’inscrire à votre lettre d’information 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 réseaux sociaux et encourager les internautes à suivre ou à aimer vos pages.

Quelle est la meilleure taille de bannière pour un site ?

La taille idéale d’une bannière de site 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.

Parmi les autres tailles de bannières les plus populaires et les plus utilisées, on peut citer

• Bannière moyenne : 300 x 250
• Tableau de bord : 728 x 90
• Gratte-ciel large : 160 x 600
• Demi-page : 300 x 600
• Grand tableau d’affichage : 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 colonne latérale, vous pouvez utiliser les tailles de bannière Wide Skyscraper ou Half-Page. De même, vous pouvez utiliser la taille de bannière Medium pour afficher une bannière de forme carrée sur votre page.

Si vous souhaitez afficher des bannières publicitaires, vous pouvez consulter notre guide du débutant sur les tailles et formats de bannières Google Adsense les plus performants pour WordPress.

Cela dit, voyons comment vous pouvez facilement faire une bannière sur votre site WordPress. Pour ce tutoriel, nous allons couvrir trois méthodes pour faire une bannière, et vous pouvez utiliser les liens ci-dessous pour passer à la méthode de votre choix :

Méthode 1 : Créer une bannière de site à l’aide d’OptinMonster (Recommandé)

OptinMonster est la meilleure extension WordPress de création de bannières sur le marché qui vous permet de créer facilement des barres flottantes et des fenêtres surgissantes pour votre site.

C’est le meilleur outil d’ optimisation des conversions et de génération de prospects qui vous aide à transformer les internautes en abonnés/abonnés et en clients.

De plus, de nombreux modèles de bannières d’OptinMonster comportent des champs d’optin qui vous permettent de collecter les noms, adresses e-mail et numéros de téléphone des visiteurs de votre site.

Pour plus de détails, consultez notre avis terminé sur OptinMonster.

Étape par étape : Installer OptinMonster sur votre site

Tout d’abord, vous devez ouvrir un compte OptinMonster. Pour ce faire, il vous suffit de vous rendre sur le site d’OptinMonster et de cliquer sur le bouton « Get OptinMonster Now ».

Ensuite, vous devez installer et activer l’extension gratuite OptinMonster sur votre site WordPress. Pour des instructions détaillées, vous pouvez consulter notre guide du débutant sur l’installation d’une extension WordPress.

Une fois activé, l’assistant de configuration d’OptinMonster s’ouvrira dans votre panneau d’administration WordPress.

Cliquez ensuite sur le bouton « Connecter votre compte existant » pour connecter votre site WordPress à votre compte OptinMonster.

Une nouvelle fenêtre s’ouvre alors sur l’écran de votre ordinateur.

Cliquez ensuite sur le bouton « Connecter à WordPress » pour continuer.

Étape 2 : Créer et personnaliser votre bannière

Maintenant que vous avez connecté votre compte WordPress avec OptinMonster, rendez-vous sur la page OptinMonster  » Campagnes depuis la colonne latérale de l’administrateur WordPress.

Cliquez ensuite sur le bouton « Créer votre première campagne » pour commencer à créer la bannière de votre site.

Vous accédez alors à la page « Modèles », où vous pouvez 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 « Fenêtres surgissantes » pour afficher votre bannière sous forme de fenêtre surgissante.

Ensuite, 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 êtes en train de créer. Tapez simplement le nom de votre choix et cliquez sur le bouton « Commencer la Version » pour continuer.

Cela lancera l’interface de glisser-déposer d’OptinMonster sur votre écran, où vous pourrez commencer à personnaliser votre bannière. A partir de là, vous pouvez faire glisser et déposer les champs de votre choix depuis la colonne latérale de gauche sur la bannière.

Par exemple, si vous souhaitez ajouter des icônes de réseaux sociaux à votre bannière pour augmenter le nombre de vos abonnés, vous pouvez faire glisser le bloc Médias sociaux depuis la colonne latérale gauche.

Ensuite, il suffit de cliquer sur le bloc pour ouvrir ses Réglages dans la colonne de gauche.

À partir de là, vous pouvez modifier le titre du bouton, ajouter l’URL de votre réseau social et même changer de plateforme de réseau social à partir du menu déroulant.

Vous pouvez également ajouter d’autres blocs pour afficher des vidéos, des images, du texte ou des CTA dans la conception de la bannière de votre site.

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 s’affiche en bas de l’écran de votre site dès que vous commencez à défiler.

Toutefois, vous pouvez facilement modifier ce paramètre en cliquant sur l’icône « Réglages » en bas de la colonne latérale de gauche.

Les réglages s’ouvrent alors dans la colonne de gauche, où vous devez déplier l’onglet « Réglages de la barre flottante ». À partir de là, il vous suffit de permuter le commutateur « Charger la barre flottante en haut de la page » pour afficher la bannière en haut de la page.

Étape par étape : 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 de la page. À partir de là, vous pouvez ajouter des règles pour l’affichage de votre bannière.

Rappelez-vous que vous devez uniquement passer à cet onglet si vous souhaitez ajouter un déclencheur d’affichage spécifique pour votre bannière. Sinon, vous pouvez aller à 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, il suffit de sélectionner l’option  » Sur tous les appareils  » dans le menu déroulant au milieu. Si vous souhaitez utiliser cette règle d’affichage uniquement pour les appareils mobiles, alors vous pouvez également choisir cette option.

Ensuite, choisissez la sensibilité de l’intention de sortie selon vos préférences et cliquez sur le bouton « Étape par étape ».

Un nouvel écran s’affiche. Confirmez-vous que l’option « Optin » est sélectionnée dans le menu déroulant « Afficher la vue de la campagne ».

Une fois que vous avez fait cela, cliquez simplement sur le bouton « Étape par étape ».

Votre règle d’affichage pour la bannière s’affiche alors à l’écran.

Si vous souhaitez modifier quelque chose ici, vous pouvez cliquer sur le bouton « Modifier » pour le corriger.

Étape par étape : 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.

Ensuite, il vous suffit de cliquer sur le bouton « Publier » pour afficher la bannière sur votre site.

Maintenant, visitez votre site pour voir la bannière en haut de votre écran.

Voici à quoi cela ressemble sur notre site de démonstration.

Méthode 2 : Créer une bannière de site à l’aide de Canva (gratuit)

Si vous souhaitez réaliser une bannière de site gratuitement, cette méthode est faite pour vous.

Canva est un outil Web populaire qui vous permet de créer toutes sortes de graphiques, notamment des bannières, des logos, des affiches, des couvertures de livres, etc. Il propose également une version gratuite que vous pouvez utiliser pour créer un design de bannière de site.

Étape par étape : Créer un compte Canva

Tout d’abord, vous devez vous rendre sur le site de Canva et cliquer sur le bouton « S’inscrire » pour créer un compte.

Si vous disposez déjà d’un compte Canva, il vous suffit de vous connecter.

Lors de la création de votre compte, vous serez dirigé vers la page d’accueil de votre compte Canva.

Il est indispensable de passer à l’onglet « Modèles » dans la colonne de gauche, puis de rechercher des modèles de bannières à l’aide du champ de recherche situé en haut de la page.

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 par étape : Conception de la bannière de votre site

Une fois que vous avez sélectionné un modèle, l’interface de conception de Canva se lance à l’écran.

À partir de là, vous pouvez personnaliser votre bannière à votre guise. 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 situé en haut de la page.

Vous pouvez également téléverser des fichiers multimédias depuis votre ordinateur en passant à l’onglet « Téléversés » dans la colonne de gauche.

Pour ajouter du texte à votre bannière, il vous suffit de passer à 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 à l’aide de votre souris. Une icône de lien s’affiche alors en haut du texte.

Il suffit de cliquer sur cette icône et de copier-coller le lien que vous souhaitez ajouter.

Cliquez ensuite sur le bouton « Terminé » pour l’enregistrer.

Étape par étape : Obtenir un code de Contenu embarqué pour la bannière

Une fois que vous êtes satisfait de la personnalisation de votre bannière, il vous suffit de cliquer sur le bouton  » Partager  » en haut à droite de l’écran.

Un menu s’ouvre alors, dans lequel vous devez sélectionner l’option « More » (Plus) en bas de page.

Vous accédez alors au menu « Toutes les options », dans lequel vous devez sélectionner l’option « Contenu embarqué ».

Une fois que vous avez fait cela, une nouvelle invite s’ouvre à l’écran. Cliquez alors sur le bouton « Contenu embarqué ».

Canva va maintenant créer un code HTML embarqué pour vous.

Une fois qu’il est affiché à l’écran, cliquez sur le bouton « Copier » sous l’option « Code HTML embarqué ».

Étape par étape : Ajouter le code HTML Contenu embarqué dans WordPress

Vous pouvez maintenant afficher votre bannière sur votre page WordPress, votre publication ou votre colonne latérale selon vos préférences. Pour ce tutoriel, nous allons afficher notre bannière sur une page WordPress.

Tout d’abord, vous devez ouvrir la page ou la publication où vous souhaitez ajouter la bannière.

Cliquez ensuite sur le bouton « Ajouter un bloc » (+) dans le coin supérieur gauche pour trouver et ajouter le bloc HTML personnalisé à la page.

Une fois que vous avez fait cela, il suffit de coller 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.

Maintenant, visitez votre site pour voir la bannière WordPress en action.

Méthode 3 : Faire une bannière de site à l’aide de Thrive Leads.

Vous pouvez également créer une bannière de site en utilisant Thrive Leads. C’est une extension populaire de fenêtres surgissantes WordPress utilisée 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.

Étape par étape : Installer Thrive Leads sur votre site WordPress

Tout d’abord, vous devez visiter le site de Thrive Themes et vous inscrire pour un compte. Une fois que vous avez fait cela, dirigez-vous vers votre tableau de bord de membre.

À partir de là, allez-y et cliquez sur le lien  » Télécharger et installer l’extension Thrive Product Manager « .

Ensuite, rendez-vous sur votre site WordPress pour installer et activer l’extension Thrive Product Manager. Pour des instructions détaillées, vous pouvez consulter notre guide étape par étape sur l ‘installation d’une extension WordPress.

Une fois activé, rendez-vous dans l’onglet Gestionnaire de produits du tableau de bord 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 de là, vous pouvez sélectionner les produits que vous souhaitez installer et utiliser sur votre site. Choisissez simplement l’extension  » Thrive Leads  » et cliquez sur le bouton  » Installer les produits sélectionnés « .

Étape par étape : Création d’une bannière pour le site

Après l’installation du plugin, vous devez vous rendre sur la page Tableau de bord de Thrive  » Thrive Leads depuis la colonne latérale de l’administrateur WordPress.

Une fois que vous y êtes, cliquez sur le bouton « Ajouter une nouvelle » à côté de l’option « Groupes de prospects ».

La fenêtre surgissante « Ajouter un nouveau groupe de prospects » s’affiche, dans laquelle vous devez saisir un nom pour le groupe de prospects que vous êtes en train de créer.

Confirmez vous-même le nom du groupe expéditeur de manière à vous aider à 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 ».

Ensuite, le groupe de prospects que vous avez créé sera ajouté à l’écran. Cliquez ensuite sur le bouton « Ajouter un nouveau type de formulaire d’accord ».

Une nouvelle fenêtre s’ouvre, dans laquelle vous devez choisir le type de bannière que vous souhaitez créer.

Vous pouvez créer une bannière diapositive, un ruban, un widget, un contenu, une visionneuse ou un défilement selon vos préférences.

Ces bannières s’apparenteront à un formulaire puisqu’elles collecteront les données de vos utilisateurs/utilisatrices, notamment les adresses e-mail, les numéros de téléphone et bien plus encore.

Pour ce tutoriel, nous allons créer une bannière de ruban pour notre site.

Lorsque vous choisissez un type de bannière de site, l’invite disparaît automatiquement de l’écran.

Maintenant, pour ouvrir votre tableau de bord de groupe de prospects, vous devez cliquer sur le bouton  » Ajouter  » dans le coin droit de votre onglet Groupes de prospects.

Vous accéderez ainsi à votre tableau de bord Groupes de prospects, où tous les formulaires et rapports de prospects du groupe s’afficheront après la mise en ligne de votre campagne.

Par exemple, si vous souhaitez créer une bannière pour capturer des adresses e-mail, toutes les informations sur les utilisateurs/utilisatrices collectées par le biais de 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.

Une nouvelle fenêtre s’ouvre, dans laquelle vous devez donner un nom au formulaire et cliquer sur le bouton « Créer un formulaire ».

Une fois votre formulaire créé, il s’affichera dans votre Tableau de bord Groupes de prospects.

Cliquez ensuite sur le bouton « Modifier la conception » dans le coin droit pour commencer à créer votre bannière.

Étape 3 : Personnaliser la bannière de votre site

L’éditeur visuel Thrive sera désormais lancé dans un nouvel onglet sur votre écran.

À partir de là, vous pouvez commencer par sélectionner un modèle pour votre bannière à partir de l’invite  » Thrive Leads Bibliothèque « .

Vous pouvez ensuite utiliser l’un des modèles prédéfinis tel quel ou le personnaliser davantage à l’aide de l’éditeur visuel. Après avoir fait votre choix, il vous suffit de cliquer sur le bouton « Choisissez un Modèle » pour continuer.

Après avoir ajouté un Modèle de bannière de ruban, vous pouvez facilement personnaliser les éléments qu’il contient en cliquant sur chacun d’entre eux. Cela ouvrira les réglages de l’élément dans la colonne latérale de gauche.

Par exemple, si vous souhaitez modifier la couleur du bouton dans votre Modèle, vous devez cliquer sur celui-ci pour ouvrir ses Réglages dans la colonne latérale.

Si vous souhaitez ajouter un élément complètement nouveau à votre bannière, vous pouvez également le faire en cliquant sur l’icône « + » dans le coin droit de l’écran.

La colonne latérale « Ajouter des éléments » s’ouvre alors sur la droite, où vous pouvez faire glisser et déposer les éléments de votre choix sur la bannière.

Par exemple, si vous souhaitez ajouter des boutons de comptes de réseaux sociaux à votre bannière, vous devrez alors faire glisser et déposer l’élément Suivi social depuis la colonne latérale droite.

Lorsque vous êtes satisfait, cliquez sur le bouton « Enregistrer le travail » dans le coin inférieur gauche pour stocker vos modifications.

Ensuite, vous devez revenir à votre tableau de bord des groupes de prospects.

Étape par étape : Définir les Réglages de la Bannière

Une fois de retour dans votre Tableau de bord, vous pouvez modifier la position de votre bannière en cliquant sur l’option ‘Position’ dans la ligne du formulaire.

La fenêtre « Réglages de la position » s’ouvre, dans laquelle vous pouvez choisir la position de votre bannière dans le menu déroulant.

Cliquez ensuite 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.

La fenêtre « Réglages d’affichage » s’ouvre et vous pouvez utiliser le Diaporama pour déterminer le nombre de fois que la bannière doit être affichée à l’écran.

Si vous conservez le chiffre 0, la bannière sera affichée en permanence. Après avoir fait votre choix, cliquez sur le bouton « Enregistrer » pour stocker vos Réglages.

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.

La fenêtre « Réglages du déclencheur » s’affiche. 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 enregistrer vos Réglages.

Étape par étape : Publier votre bannière

Après avoir configuré les paramètres de la bannière, vous devez quitter votre tableau de bord Réglages et retourner au tableau de bord Thrive Leads en cliquant sur le lien en haut.

Une fois que vous y êtes, déplier votre onglet Groupes de prospects et permuter le commutateur « Afficher sur l’ordinateur » sur « On ». Si vous souhaitez également afficher votre bannière sur les appareils mobiles, vous pouvez permuter le commutateur « Display On Mobile » sur « On ».

Ensuite, cliquez sur l’icône en forme de roue dentée dans le coin supérieur droit de l’onglet Réglages des prospects pour configurer les paramètres d’affichage.

Ici, vous pouvez sélectionner les pages du site sur lesquelles vous souhaitez que la bannière s’affiche. Par exemple, si vous souhaitez que la bannière s’affiche en haut de toutes les pages et publications, vous pouvez cocher la case située à côté de ces options.

Enfin, cliquez sur le bouton « Enregistrer et fermer » pour enregistrer vos modifications.

Vous pouvez maintenant visiter votre site et consulter la bannière affichée en haut de la page.

Voici à quoi cela ressemble sur notre site de démonstration.

Bonus : Ajouter des bannières d’applications intelligentes dans WordPress

Si vous disposez d’une application mobile pour votre site, alors il est judicieux d’afficher des bannières d’applications intelligentes. Ces bannières feront la promotion de vos applications et encourageront les utilisateurs/utilisatrices d’iPhone ou d’iPad à les télécharger.

Une fois que les internautes auront cliqué sur cette bannière, ils seront dirigés vers le stock d’applications, où ils pourront télécharger votre application. Si l’application est déjà installée sur leur appareil, la bannière de l’application intelligente leur demandera d’ouvrir l’application à la place.

Vous pouvez facilement ajouter une bannière d’application intelligente dans WordPress avec WPCode. C’est la meilleure extension d’extraits de code WordPress sur le marché qui vous permet d’ajouter facilement l’ID de votre application sur le site.

En savoir plus, consultez notre tutoriel sur la façon d’ajouter facilement une bannière d’application intelligente dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment faire facilement une bannière de site pour WordPress. Vous pouvez également consulter notre guide du débutant sur la façon de personnaliser les couleurs sur votre site WordPress et notre top des meilleurs logiciels de création de sites Web.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.