Bienvenue sur Libre et Digital ! Si tu es nouveau ici, tu voudras sans doute lire mon ebook qui t'explique comment créer une belle page d'accueil cliquez ici pour télécharger le livre gratuitement ! 🙂
Bienvenue à nouveau sur Libre et Digital ! Comme ce n'est pas la 1ère fois que tu viens ici, tu voudras sans doute lire mon ebook qui t'explique comment créer une belle page d'accueil cliquez ici pour télécharger le livre gratuitement ! 🙂
Hé oh… j’ai une nouvelle promotion… Ou alors, hé oh… regardez j’organise un super évènement… tu voudrais sûrement faire cela avec ton site ? créer une bannière publicitaire pour annoncer un super évènement le tout en 5 minutes ? que ton public arrive sur ta page d’accueil, un de tes articles, dans ton e-commerce, page contact… il verra cette barre évènement et ne pourra pas louper cette promo ou évènement.
Un petit aperçu des résultats possibles, bien sûr, la seule limite est ton imagination…
![1 Exemple d'une bannière réalisée avec le plugin "Simple banner"](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/bannier-simple-banner-exemple.png?fit=768%2C22&ssl=1)
![Second exemple d'une bannière réalisée avec le plugin "Simple banner"](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/bannier-simple-banner-exemple-2.png?fit=768%2C212&ssl=1)
![Second exemple d'une bannière réalisée avec le plugin "Simple banner"](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/bannier-simple-banner-exemple-2.png?fit=768%2C212&ssl=1)
![Second exemple d'une bannière réalisée avec le plugin "Simple banner"](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/bannier-simple-banner-exemple-2.png?fit=768%2C212&ssl=1)
Bannière publicitaire : le plugin
Bannière publicitaire : installation du plugin
Tout d’abord, commence à télécharger le plugin « Simple banner« :
- Pour commencer, survol Extensions.
- Ensuite, clique sur Ajouter.
- Puis, écris « simple banner ».
- Ensuite, clique sur Installer maintenant.
- Enfin, clique sur Activer.
![Télécharger, installer et activer le plugin "Simple banner"](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/telecharger-plugin-simple-banner.png?fit=768%2C203&ssl=1)
![Télécharger, installer et activer le plugin "Simple banner"](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/telecharger-plugin-simple-banner.png?fit=768%2C203&ssl=1)
C’est un plugin de Ryan Petersen, il est apprécié avec cinq étoiles sur cinq pour trente-quatre votants. Il est installé sur quarante mille sites et compatible avec mon WordPress, les mises à jour ont été faites il y a trois semaines. Tout est parfait, alors continuons.
Simple banner : les réglages principaux
Maintenant que tu as installé et activé le plugin, nous allons pouvoir cliquer notre barre d’évènement :
- Pour commencer, Clique sur Simple Banner.
- Ensuite, si tu souhaites changer la couleur de fond de ta bannière.
- Tu peux également modifier la couleur du texte de la barre.
- Enfin, si tu souhaites modifier la couleur du lien.
![Réglage des couleurs de la bannière](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/simple-banner-modifier-design.png?fit=768%2C621&ssl=1)
![Réglage des couleurs de la bannière](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/simple-banner-modifier-design.png?fit=768%2C621&ssl=1)
Pour afficher la bannière sur ton site, copie le morceau de code et colle-le dans la zone plus-bas. Assure-toi d’avoir le début du code. Enfin, tout en-bas de la page tu trouveras le bouton Enregistrer les modifications :
![Afficher la bannière sur son site](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/simple-banner-lien-site.png?fit=768%2C703&ssl=1)
![Afficher la bannière sur son site](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/simple-banner-lien-site.png?fit=768%2C703&ssl=1)
Bien sûr, tu t’en doutes, nous n’allons pas garder cette bannière, le message n’est pas terrible et le lien nous dirige vers WordPress, pas top…
Pour commencer, restons dans la zone dans laquelle nous avons collé le code :
- Ensuite, nous allons placer notre message avant le <a…
- Par ailleurs, entre le chevron fermant, tu vas mettre le message de ton lien.
- Enfin, tu vas placer ici l’URL vers laquelle tu souhaites diriger tes visiteurs.
ATTENTION, place bien ton URL entre les doubles apostrophes sinon ton lien ne va pas fonctionner.
![Modification du code](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/modifier-message-simple-banner.png?fit=768%2C169&ssl=1)
![Modification du code](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/modifier-message-simple-banner.png?fit=768%2C169&ssl=1)
Résultat :
![1 Exemple d'une bannière réalisée avec le plugin "Simple banner"](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/bannier-simple-banner-exemple.png?fit=768%2C22&ssl=1)
![1 Exemple d'une bannière réalisée avec le plugin "Simple banner"](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/bannier-simple-banner-exemple.png?fit=768%2C22&ssl=1)
![1 Exemple d'une bannière réalisée avec le plugin "Simple banner"](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/bannier-simple-banner-exemple.png?fit=768%2C22&ssl=1)
Ensuite, pour le second exemple, j’ai agrandi la police d’écriture, puis j’ai défini tout le texte comme lien et j’ai ajouté des émoticônes :
![Réglage de la deuxième bannière](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/bannier-simple-banner-exemple2.png?fit=768%2C287&ssl=1)
![Réglage de la deuxième bannière](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/bannier-simple-banner-exemple2.png?fit=768%2C287&ssl=1)
<span style="font-size: 25px;">🇨🇺</span> <a href="https://libreetdigital.com">Vendredi 14 avril 2022 : Soirée salsa, venez-vous inscrire ici, si vous souhaitez danser jusqu'au petit matin...</a> <span style="font-size: 25px;">🇨🇺</span>
</p>
Résultat :
![Second exemple d'une bannière réalisée avec le plugin "Simple banner"](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/bannier-simple-banner-exemple-2.png?fit=768%2C212&ssl=1)
![Second exemple d'une bannière réalisée avec le plugin "Simple banner"](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/bannier-simple-banner-exemple-2.png?fit=768%2C212&ssl=1)
![Second exemple d'une bannière réalisée avec le plugin "Simple banner"](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/bannier-simple-banner-exemple-2.png?fit=768%2C212&ssl=1)
Simple banner : désactiver la bannière et utiliser le CSS
Si tu souhaites désactiver la bannière, il te suffit de cocher le bouton Yes de Hide Simple Banner, n’oublie pas d’enregistrer :
![Cacher la bannière](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/simple-banner-desactiver-banniere.png?fit=732%2C346&ssl=1)
![Cacher la bannière](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/simple-banner-desactiver-banniere.png?fit=732%2C346&ssl=1)
Tu souhaites modifier le design te ta super bannière ? si tu connais le CSS tu vas pouvoir le faire ici :
![Modifier le CSS](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/simple-banner-css.png?fit=768%2C146&ssl=1)
![Modifier le CSS](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/simple-banner-css.png?fit=768%2C146&ssl=1)
Simple banner : choix du positionnement de la bannière
Ensuite, si tu veux positionner ta barre de promo d’une certaine manière. En choisissant fixed, en scrollant la bannière va rester affichée à l’écran, footer, la barre d’évènement va rester tout en bas…
![Positionner la bannière promo](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/simple-banner-banniere-position.png?fit=768%2C123&ssl=1)
![Positionner la bannière promo](https://i0.wp.com/libreetdigital.com/wp-content/uploads/2021/08/simple-banner-banniere-position.png?fit=768%2C123&ssl=1)
Très important, vérifie que la bannière s’affiche bien sur les supports mobils, parfois il peut y avoir de mauvaises surprises…
Plus bas, il t’est possible d’activer la version payante, tu pourras par exemple afficher la bannière uniquement sur certaines pages ou articles.
Ce qu'il faut retenir
Que tu sois un expert de WordPress ou pas, cette extension est très pratique.
Même si tu sais coder et concevoir une bannière, avec ce plugin ta bannière promo sera plus rapidement conçue. Cependant, en rajoutant du code CSS, j’ai remarqué que certaines valeurs ne fonctionnent pas : sûrement pour nous pousser à prendre la version payante.
Pour quel évènement penses-tu utiliser cette bannière ? Je suis curieux de découvrir tes idées et la thématique de ton site.
Merci ! Cet article est très clair. Je suis sûre qu il me sera très utile. Je ne savais pas qu’une bannière était aussi simple à réaliser.
Merci, Muriel pour ton commentaire. Oui, ce plugin est très pratique.
Top, il faut que je n’oublie cet article lorsque je souhaiterai mettre en place une bannière publicitaire, car c’est expliqué très simplement.
Hello Marie,
Merci pour le commentaire, le blog est là pour ça, pour t’aider… Au plaisir
Hello Marc, une bonne idée ce plugin pour faire discrètement la promotion de ses événements du moment ! 😉
Hello Emy,
Oui, tu es sûr que ton public ne pourra pas rater le message. Merci pour ton commentaire 😉
Tuto génial, merci Marc ! 🌷
Dans mon cas, j’ai un bug d’affichage sans doute dû à mon « thème » wordpress (pourtant compatible ???) Je n’arrive pas à mettre la bannière en haut, j’ai essayé toutes les options (enfin je crois), cela semble être caché par ma barre de menu. En revanche cela fonctionne très bien en pied de page, j’ai donc installé la bannière ici par défaut ahah.
Hello,
Merci pour ton commentaire. Non, il n’y a pas de raison que le thème ne soit pas compatible. Quel est le thème que tu utilises ? Remets la barre en haut et essais avec ce code
z-index:999999!important;
, dans Simple banner custom CSS, il s’agit du champ en carré -> (.simple-banner {).Merci pour cet article très détaillé… il tombe à pic pour un lancement prochain…
Ah ben voilà… J’espère que cela va t’aider à atteindre tes objectifs… Merci pour le commentaire 😉
Merci Marc pour cet article ! J’aime les choses simples. Je l’utiliserai pour mon lancement ! 🙂
Merci pour ton commentaire. Top…