Vignette ou arrière-plan: comment choisir – ZenBlocks buttonBasic
Conclusion
La **vignette** affiche une image indépendante à l’intérieur du bouton. L’**arrière-plan** sert de couche visuelle pour tout le bouton. Si vous voulez montrer un visuel précis, utilisez la vignette; si vous voulez créer une ambiance, utilisez l’arrière-plan.
—
Comparaison
| Critère | Vignette | Image d’arrière-plan |
|—|—|—|
| Position | Cadre image interne au bouton | Fond global du bouton |
| Relation avec le texte | Côté à côté ou en haut/bas | Texte posé par-dessus |
| Contrôle de taille | `Width` / `Height` dédiés | `Background Size` (`cover`, `contain`, etc.) |
| Survol | Variation de taille/position possible | Variation via overlay/couleurs |
| Vidéo | Non | Oui |
| Overlay | Non | Oui |
| Rayon de bordure | Réglage propre à la vignette | Suit souvent le bouton |
| Responsive | Réglages par appareil | Réglages par appareil |—
Choisir selon l’objectif
### La vignette est adaptée si
1. Vous devez montrer un produit ou un logo précis.
2. Vous voulez composer texte + image dans le bouton.
3. Vous voulez styliser l’image (bordure, rayon, etc.).
4. Vous voulez un effet de zoom image au survol.Exemples:
– Bouton “Voir les détails du produit” avec image produit.
– Bouton “Profil auteur” avec avatar.
– Bouton “Télécharger le catalogue” avec visuel de couverture.### L’arrière-plan est adapté si
1. Vous voulez créer l’ambiance globale du bouton.
2. Vous affichez du texte sur une photo avec overlay.
3. Vous avez besoin d’une vidéo de fond.
4. Vous voulez des états `Default/Hover` différents.Exemples:
– Bouton style bannière promo avec visuel saisonnier.
– Bouton utilisant une texture de marque en fond.
– CTA avec courte boucle vidéo de fond.### Utiliser les deux ensemble
C’est possible:
– l’arrière-plan crée l’ambiance,
– la vignette porte le visuel produit,
– le texte CTA conserve la lisibilité.—
Points d’attention
– La vignette utilise `object-fit`; selon le ratio, une partie de l’image peut être recadrée.
– Avec arrière-plan + overlay, un alpha trop élevé peut masquer l’image.
– Des médias lourds (vignette + fond) peuvent dégrader les performances.—
Paramètres liés
– [Paramètres de vignette](../08-thumbnail-settings.md)
– [Paramètres d’arrière-plan](../06-background-settings.md)
– [Paramètres de mise en page](../10-layout-settings.md)