Bannière

Liens en vedette

1. Documentation Company XYZ sur le bloc Banner
2. documentation Shopify sur les sections et les blocs
3. Documentation Company XYZ sur l’utilisation de la vidéo
4. Documentation Company XYZ sur les icônes
5. Documentation Company XYZ sur les paramètres de couleurs de Banner
6. Documentation Company XYZ sur les paramètres de visibilité
7. documentation Shopify sur l’éditeur de thème

Vidéos utiles

Vidéo de la Shopify Academy : personnaliser votre boutique

Vidéo de la Shopify Academy : personnaliser votre boutique

Utilisez le bloc Banner pour créer tout, d’une simple barre d’annonce à une promotion plus visuelle avec des médias d’arrière-plan, du texte superposé et un appel à l’action clair. Il prend en charge des médias mobiles séparés, des images au premier plan facultatives et un contrôle des couleurs par bloc, afin que vous puissiez adapter chaque bannière au message qu’elle doit transmettre. Pour une référence au niveau du champ, consultez Bannière.

Pour une vue d’ensemble plus large du fonctionnement des blocs dans l’éditeur, consultez la documentation Shopify sur les sections et les blocs

Paramètres de base

Commencez par choisir le ratio d’aspect de la bannière. Les ratios fixes sont utiles lorsque vous souhaitez une forme plus travaillée, axée sur l’image, tandis que Default fonctionne mieux lorsque le contenu doit déterminer la hauteur.

Vous pouvez définir un ratio mobile séparé si la forme sur ordinateur semble trop haute, trop basse ou trop serrée sur les petits écrans. Si le ratio mobile reste sur Default, il reprend le paramètre du ratio principal.

Note

Le bloc s’agrandit si son contenu a besoin de plus d’espace que ne le permet le ratio sélectionné. Cela permet d’éviter que le texte et les boutons soient tronqués.

Arrière-plan de la bannière

Ce groupe contrôle le traitement d’arrière-plan de la bannière elle-même. Utilisez-le pour ajouter la couche visuelle principale derrière le contenu au premier plan.

Vous pouvez utiliser une image ou une vidéo, avec des versions mobiles séparées si nécessaire. C’est particulièrement utile lorsque le recadrage des visuels sur ordinateur est peu adapté sur les petits écrans ou lorsque vous souhaitez une composition mobile plus légère et plus ciblée.

Le mode d’ajustement de l’image d’arrière-plan contrôle la façon dont le média image remplit la zone de la bannière. Cover est généralement le meilleur choix pour des visuels immersifs, tandis que Contain est préférable lorsque l’image complète doit rester visible.

Évitez de placer du texte essentiel ou des détails de produit dans le visuel d’arrière-plan, sauf si vous avez vérifié la façon dont il est recadré sur ordinateur et sur mobile.

Si vous utilisez une vidéo, gardez-la courte et visuellement simple afin que le contenu au premier plan reste lisible. Pour des indications sur les fichiers et des conseils pratiques de configuration, consultez using video.

Premier plan de la bannière

Ce groupe contrôle le contenu affiché au-dessus de l’arrière-plan. Tout champ laissé vide reste masqué, ce qui permet de conserver facilement un bloc minimal.

Utilisez l’alignement horizontal et vertical pour placer le contenu à l’endroit où il semble le plus naturel dans la bannière. Les mises en page centrées conviennent généralement aux messages simples, tandis que les mises en page alignées en bas ou sur les bords fonctionnent souvent mieux pour des promotions axées sur l’image.

Vous pouvez combiner une icône, une légende, un titre et un sous-titre pour construire une hiérarchie de contenu claire. Pour les champs d’icône, vous pouvez saisir un emoji ou un nom d’icône ; consultez le guide des icônes pour connaître les usages pris en charge.

Choisissez le type de titre en fonction du rôle de la bannière sur la page. Un niveau de titre plus fort convient à un message promotionnel principal, tandis qu’un style de texte plus léger est préférable lorsque la bannière est plus d’accompagnement que dominante.

Les paramètres du bouton contrôlent l’action principale de la bannière, notamment le texte, le traitement de l’icône, la taille et la disposition. Un bouton mobile pleine largeur peut améliorer la facilité de toucher lorsque la bannière est principalement orientée vers l’action.

Le style du lien modifie le degré d’interactivité de la bannière. Un lien sur tout le bloc peut rendre les bannières promotionnelles plus faciles à utiliser, mais cela affecte les liens à l’intérieur de la zone de texte.

Attention

Les styles de lien sur tout le bloc suppriment les liens du texte du sous-titre. Utilisez-les uniquement lorsque toute la bannière doit pointer vers une seule destination.

N’ouvrez les liens dans un nouvel onglet que lorsque ce comportement soutient clairement le parcours client, par exemple pour un lien vers une campagne externe ou une ressource d’assistance.

Médias du premier plan de la bannière

Utilisez des médias du premier plan lorsque vous souhaitez afficher une image supplémentaire avec le texte, comme un logo, un badge, un détouré de produit ou un visuel de campagne. Cela fonctionne bien lorsque l’arrière-plan est plus atmosphérique et que l’image promotionnelle doit rester nette et maîtrisée.

Le style de l’image vous aide à harmoniser le traitement visuel avec le reste de la bannière. Le paramètre de largeur vous permet de garder l’image discrète ou de la rendre plus dominante, et le réglage sur 0 lui permet de s’étendre sur l’espace disponible.

Vous pouvez également ajouter un lien à l’image du premier plan. Si le bloc comporte déjà un bouton principal fort ou un style de lien sur tout le bloc, gardez un comportement de clic simple afin que l’action principale reste évidente.

Couleurs de la bannière

Ces paramètres remplacent le traitement de couleur par défaut de la bannière pour ce seul bloc. Utilisez-les lorsqu’une bannière nécessite un style spécifique à une campagne, un contraste plus marqué ou un traitement d’overlay personnalisé. Pour des détails sur les paramètres, consultez la documentation Company XYZ sur les paramètres de couleur de bannière.

Vous pouvez ajuster les couleurs de l’arrière-plan, de la bordure, du titre, de l’icône, du sous-titre, du texte et de l’overlay, y compris les options de dégradé. Dans la plupart des cas, la décision la plus importante consiste à vérifier si le contenu au premier plan reste lisible sur le média d’arrière-plan choisi.

L’opacité de l’overlay est particulièrement utile lorsque l’image ou la vidéo d’arrière-plan est chargée. Un overlay légèrement plus fort améliore souvent la lisibilité plus proprement que de modifier agressivement chaque couleur de texte.

Paramètres standard de bloc

Paramètres de visibilité

Utilisez les contrôles de visibilité pour afficher le bloc sur tous les appareils, uniquement sur ordinateur ou uniquement sur mobile. C’est utile lorsque vous souhaitez des mises en page ou des visuels de bannière distincts pour différentes tailles d’écran. Pour des détails sur les paramètres, consultez la documentation Company XYZ sur les paramètres de visibilité.

Si vous créez des versions distinctes pour ordinateur et mobile, veillez à ce que le message et la destination restent cohérents afin que les clients ne rencontrent pas de promotions contradictoires. Pour les bases de l’éditeur, consultez la documentation Shopify sur l’éditeur de thème

Notes d’utilisation

1. Choisissez le ratio selon l’objectif. Utilisez un ratio fixe pour les promotions visuelles et une configuration plus flexible lorsque la bannière contient un texte plus long ou plusieurs éléments de contenu.
2. Prévoyez séparément les médias mobiles. Ajoutez des images ou des vidéos spécifiques au mobile lorsque l’arrière-plan sur ordinateur se recadre mal ou paraît trop chargé sur les petits écrans.
3. Conservez une action principale. Utilisez les boutons, les médias du premier plan liés et les liens sur tout le bloc avec précaution afin que la bannière conserve un chemin de clic clair.
4. Priorisez la lisibilité. Ajustez ensemble l’intensité de l’overlay et les couleurs du texte jusqu’à ce que le message reste facile à lire sur tous les médias d’arrière-plan.
5. Utilisez la visibilité par appareil de manière intentionnelle. Ne créez des bannières distinctes pour ordinateur et mobile que lorsque la mise en page ou les visuels doivent réellement changer.
6. Vérifiez les deux affichages. Contrôlez l’alignement, le recadrage des médias et la visibilité des contrôles sur ordinateur et mobile avant la publication, car chaque mise en page peut se comporter différemment.
7. Conservez le style de repli lorsque c’est possible. Laissez les champs de couleur vides lorsque vous souhaitez que la bannière hérite de l’apparence environnante ; n’utilisez des couleurs explicites, des dégradés ou des remplacements de médias que lorsque la bannière doit se distinguer.
8. Conservez des états de formulaire lisibles. Si la bannière inclut une saisie client, assurez-vous que les états vides, soumis, de validation et d’erreur restent faciles à parcourir sur le média choisi.