Paramètres d’arrière-plan de section

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation Company XYZ sur l’utilisation de la vidéo

Vidéos utiles

Vidéo Shopify Academy : personnaliser votre boutique

Vidéo Shopify Academy : personnaliser votre boutique

Utilisez cet ensemble de paramètres pour contrôler le traitement d’arrière-plan derrière le contenu d’une section. Pour un contexte de configuration plus général, consultez la documentation Shopify sur les sections et les blocs. Vous pouvez rester simple avec une couleur, ajouter de la profondeur avec des dégradés, ou utiliser des arrière-plans d’image et de vidéo avec des overlays pour créer plus d’impact visuel tout en protégeant la lisibilité.

Style d’arrière-plan

Choisissez le traitement le plus léger qui convient au rôle de la section.

1. Utilisez une couleur d’arrière-plan pour des sections épurées et peu distrayantes.
2. Utilisez un dégradé d’arrière-plan lorsque vous voulez plus de profondeur ou un style de marque.
3. Utilisez une image d’arrière-plan pour la photographie, la texture ou l’illustration.
4. Utilisez une vidéo d’arrière-plan lorsque le mouvement soutient clairement le message.

Si un dégradé est appliqué, il prend le dessus sur le paramètre de couleur unie correspondant.

Si une couleur d’arrière-plan ou une couleur d’overlay ne semble pas se mettre à jour, vérifiez si un dégradé est défini. Les dégradés remplacent la couleur unie équivalente.

Contrôles de l’overlay

Les paramètres d’overlay aident à garder le texte, les boutons et les autres contenus lisibles sur des arrière-plans d’image ou de vidéo. Vous pouvez utiliser un overlay uni ou un overlay en dégradé, puis ajuster l’opacité pour trouver l’équilibre entre lisibilité et quantité de média encore visible.

Une opacité plus faible laisse davantage voir l’arrière-plan. Une opacité plus élevée est généralement préférable pour les sections avec plus de texte, une typographie plus petite ou plusieurs actions.

Média d’arrière-plan

Les images sont généralement le moyen le plus sûr d’ajouter de la richesse visuelle sans donner l’impression que la page est trop chargée. La vidéo fonctionne mieux lorsque le mouvement est subtil et soutient le contenu au lieu de lui faire concurrence.

Pour les arrière-plans vidéo, utilisez de courts clips qui restent compréhensibles sans son et ne dépendent pas de détails fins. Pour des conseils pratiques, consultez la documentation Company XYZ sur les bonnes pratiques pour les fichiers vidéo.

Attention

Des médias d’arrière-plan volumineux ou trop chargés peuvent rendre une section plus difficile à parcourir, surtout sur mobile. Si la lisibilité devient irrégulière, simplifiez le média ou renforcez l’overlay.

Médias spécifiques au mobile

Vous pouvez définir des images ou des vidéos d’arrière-plan distinctes pour mobile lorsque l’élément de bureau est mal recadré ou perd son point focal sur les petits écrans. Si vous laissez le paramètre spécifique au mobile vide, l’image ou la vidéo d’arrière-plan principale est utilisée à la place.

Utilisez un élément spécifique au mobile lorsque le sujet nécessite un recadrage différent, lorsqu’une composition en portrait fonctionne mieux, ou lorsque la vidéo de bureau paraît trop large ou visuellement dense sur les téléphones.

Choix de configuration pratiques

Les meilleurs résultats proviennent généralement de l’association du style d’arrière-plan à la densité de contenu de la section.

1. Choisissez couleur ou dégradé uniquement pour les sections riches en contenu où la clarté compte le plus.
2. Choisissez image plus overlay pour les sections promotionnelles ou éditoriales qui ont besoin de plus d’atmosphère.
3. Choisissez vidéo plus overlay uniquement lorsque le mouvement apporte une valeur claire et que la section dispose de suffisamment d’espace pour bien le montrer.
4. Ajoutez des médias spécifiques au mobile uniquement lorsque l’élément principal crée un vrai problème de recadrage ou de lisibilité.

Notes d’utilisation

1. Commencez simplement. Commencez par une couleur ou un dégradé avant d’ajouter des médias, et n’augmentez la complexité visuelle que lorsqu’elle améliore le message de la section.
2. Vérifiez le contraste tôt. Ajustez l’overlay avant de modifier les styles de texte afin que les titres, le corps du texte et les boutons restent faciles à lire.
3. Vérifiez les deux affichages. Les contrôles de bureau et de mobile peuvent produire des comportements différents en matière de recadrage, d’alignement, de visibilité et de médias ; testez donc les deux avant de publier.
4. Attendez-vous à un style de repli. Les valeurs vides, transparentes ou par défaut conservent généralement l’apparence existante, tandis que des couleurs, des dégradés ou des médias explicites rendent la section plus indépendante.
5. Utilisez la vidéo de façon sélective. Réservez les arrière-plans animés aux zones à fort impact plutôt que de les répéter dans de nombreuses sections.
6. Préservez la hiérarchie. Les traitements d’arrière-plan forts attirent l’attention, alors utilisez-les là où vous souhaitez que la section se démarque le plus.