Cas d'usage du bandeau décoratif – ZenBlocks buttonBasic
Conclusion
Le réglage de bandeau permet d’ajouter **un ruban diagonal** sur le bouton. C’est utile pour faire ressortir de courts labels comme `SALE`, `NEW`, `Recommandé` ou `Offre limitée` sans modifier le texte principal.
—
Qu’est-ce que le bandeau
Le bandeau est un ruban décoratif placé en diagonale sur un coin du bouton. Il sert à reproduire des marquages visuels de type badge produit ou label de statut.
### Caractéristiques
– Positionnable sur l’un des 4 coins du bouton
– Affichage en diagonale
– Couleur de fond et couleur de texte réglables séparément
– Indépendant du texte/icône principal du bouton
– Compatible responsive (ajustement possible selon appareil)—
Cas d’usage
### Cas 1: promotions et campagnes
– Texte de bandeau: `SALE`, `-50%`, `Offre limitée`
– Position: coin haut gauche ou haut droit
– Couleur: fond rouge visible + texte blanc
– Usage: CTA promo e-commerce### Cas 2: nouveauté et recommandation
– Texte de bandeau: `NEW`, `Recommandé`, `Populaire`
– Position: haut droit
– Couleur: couleur de marque + texte blanc
– Usage: mise en avant d’une nouveauté ou d’un plan conseillé### Cas 3: urgence ou rareté
– Texte de bandeau: `Plus que 3 places`, `Limité à 10`, `J-2`
– Position: haut gauche
– Couleur: fond orange + texte blanc
– Usage: bouton d’inscription événement ou offre limitée### Cas 4: statut d’offre
– Texte de bandeau: `FREE`, `PRO`, `Beta`
– Position: haut droit
– Couleur: gris neutre ou couleur de marque
– Usage: comparaison de plans, différenciation gratuit/payant—
Mise en place
1. Ouvrez le panneau de réglage du bandeau.
2. Saisissez un texte court (recommandé: 2 à 6 caractères).
3. Choisissez la position (haut gauche / haut droit / bas gauche / bas droit).
4. Réglez la couleur de fond et la couleur du texte.
5. Ajustez la taille de police selon le bouton.
6. Vérifiez l’équilibre visuel en front-end.—
Points d’attention
– Un texte trop long peut déborder du ruban diagonal. Gardez un libellé court.
– Sur un bouton avec grand `border-radius`, vérifiez l’équilibre visuel du coin.
– L’effet “promo” peut être fort; assurez la cohérence avec la marque.
– Sur mobile, réduisez légèrement la taille du bandeau via le responsive.—
Paramètres liés
– [Réglages de bandeau](../09-band-settings.md)
– [Paramètres de style](../04-style-settings.md)
– [Paramètres de mise en page](../10-layout-settings.md)