Paramètres de couleur de bannière

Liens en vedette

1. Documentation Shopify sur l’éditeur de thème
2. Documentation Shopify sur les sections et les blocs

Vidéos utiles

Vidéo Shopify Academy : personnaliser votre boutique

Vidéo Shopify Academy : personnaliser votre boutique

Utilisez ce groupe de paramètres pour donner au contenu basé sur des bannières son propre traitement de couleur, sans modifier le reste de la palette de votre thème. Ces contrôles remplacent les couleurs par défaut du thème pour les bannières, ce qui les rend utiles pour les promotions, les annonces, le contenu héro et d’autres zones qui ont besoin d’un aspect plus distinctif. Pour savoir où ces paramètres sont ajustés, consultez la documentation Shopify sur l’éditeur de thème. Pour une vue d’ensemble plus large de la manière dont les zones de bannière sont կառուցites, consultez la documentation Shopify sur les sections et les blocs

Couleurs de bannière

Les principaux contrôles de couleur définissent la surface de la bannière et le contenu affiché dessus. Vous pouvez façonner l’apparence générale avec les couleurs d’arrière-plan et de bordure, puis affiner la hiérarchie du contenu avec des couleurs distinctes pour les titres, les sous-titres, le texte et les icônes.

Pour obtenir le résultat le plus net, choisissez d’abord l’arrière-plan et la couleur principale du texte. La couleur du texte de la bannière sert de solution de secours pour le contenu textuel de la bannière lorsqu’aucune couleur de texte plus spécifique n’est appliquée ; c’est donc le meilleur point de départ pour établir un contraste lisible.

Construisez les couleurs de bannière comme un ensemble, et non un paramètre à la fois. Si l’arrière-plan, le texte, les icônes et les bordures ne partagent pas un schéma de contraste clair, la bannière peut sembler plus difficile à parcourir et moins intentionnelle.

Dégradés et profondeur visuelle

Vous pouvez ajouter un dégradé à l’arrière-plan de la bannière lorsqu’une couleur unie semble trop simple ou trop lourde. Cela fonctionne bien pour les bannières qui ont besoin de plus de profondeur visuelle sans dépendre d’images supplémentaires.

Un dégradé subtil paraît généralement plus soigné qu’un dégradé spectaculaire. Si la bannière inclut déjà du texte en gras, des visuels forts ou plusieurs couches de contenu, conserver un dégradé discret aide le message à rester au centre de l’attention.

Overlay et opacité

Les contrôles d’overlay ajoutent une couche teintée sur la zone de bannière, ce qui peut aider à séparer le texte de l’arrière-plan. C’est particulièrement utile lorsque le contenu de la bannière se superpose à des images ou à d’autres surfaces visuellement chargées.

Les contrôles d’opacité de l’overlay déterminent à quel point cette couche devient visible. Un réglage de 0 % rend l’overlay totalement transparent, tandis que le réglage de remplacement utilise l’opacité déjà définie dans vos principaux paramètres de couleur. Ce réglage de remplacement est utile lorsque vous souhaitez que les overlays de bannière restent alignés avec le style général de votre site.

Astuce

Si le texte est difficile à lire sur une image d’arrière-plan, essayez d’intensifier l’overlay avant de modifier toutes vos couleurs de texte. Un léger ajustement de l’opacité corrige souvent la lisibilité de manière plus nette.

Bordures, icônes et détails de support

Les couleurs de bordure et d’icône aident à finaliser le style de la bannière, mais elles fonctionnent mieux comme accents de support. Si elles sont trop proches de l’arrière-plan, elles peuvent disparaître. Si elles sont beaucoup plus marquées que le texte, elles peuvent détourner l’attention du message principal.

Une bonne approche consiste à garder des bordures discrètes et à utiliser la couleur de l’icône pour soutenir la hiérarchie du contenu. Laissez les titres et les actions principales porter la majeure partie de l’accent visuel, sauf si la bannière doit être guidée par l’icône.

Notes d’utilisation

1. Commencez par le contraste. Définissez d’abord l’arrière-plan et la couleur principale du texte afin que toutes les autres couleurs de bannière puissent être ajustées autour d’une base lisible.
2. Utilisez les dégradés avec parcimonie. Gardez des dégradés subtils lorsque les bannières incluent déjà des visuels forts, une typographie en gras ou plusieurs couches de contenu.
3. Ajustez les overlays avant de réécrire la palette. Un overlay plus fort améliore souvent la clarté du texte plus rapidement que le changement de plusieurs couleurs de texte et d’accent.
4. Gardez les accents au second plan. Les couleurs de bordure et d’icône doivent renforcer le style de la bannière sans devenir le point focal principal.
5. Utilisez les solutions de remplacement de manière intentionnelle. Les valeurs vides, transparentes ou par défaut préservent généralement le style de bannière environnant, tandis que des couleurs et des dégradés explicites donnent à la zone de bannière une impression d’indépendance plus marquée.