Réussi
Bannière
Créez une bannière promotionnelle flexible avec des médias, du texte, des superpositions et un appel à l’action clair.
- Documentation Shopify sur les sections et les blocs
- Documentation Company XYZ sur l’utilisation de vidéos
- Documentation Company XYZ sur les icônes
- Documentation Company XYZ sur les paramètres de couleurs de bannière
- Documentation Company XYZ sur les paramètres d’espacement de section
- Documentation Company XYZ sur les paramètres d’arrière-plan de section
- Documentation Company XYZ sur les paramètres de séparateur
- Documentation Company XYZ sur les paramètres de visibilité
- Documentation Company XYZ sur les paramètres de largeur de mise en page
- Documentation Shopify sur la personnalisation des sections
- Documentation Shopify sur l’éditeur de thème
Utilisez Banner pour créer une mise en avant promotionnelle unique avec des médias superposés, du texte et un appel à l’action facultatif. Cela fonctionne bien pour les sections hero, les annonces, les campagnes saisonnières et les messages de marque, et cela peut s’agrandir si votre contenu a besoin de plus de hauteur que celle fournie par le ratio sélectionné. Pour une vue d’ensemble plus large, consultez la documentation Shopify sur les sections et les blocs
Paramètres de base
Section intitulée « Paramètres de base »Les principaux paramètres de mise en page contrôlent la forme de la bannière sur ordinateur et sur mobile. Choisissez un ratio d’aspect fixe lorsque vous voulez un cadre visuel marqué, ou utilisez le ratio par défaut lorsque la longueur du contenu peut varier et que la bannière doit s’adapter plus naturellement.
Le mobile peut utiliser son propre ratio, ce qui est utile lorsque le cadrage sur ordinateur paraît trop peu profond sur les petits écrans. Un ratio mobile plus élevé donne souvent davantage d’espace au texte, aux visages et aux détails des produits sans nécessiter une image distincte.
Arrière-plan de la bannière
Section intitulée « Arrière-plan de la bannière »Ce groupe contrôle la zone d’arrière-plan propre à la bannière, séparée de l’arrière-plan de la section externe. Vous pouvez utiliser une image ou une vidéo et, en option, fournir des médias spécifiques au mobile lorsque la version ordinateur ne se recadre pas bien sur les petits écrans.
L’ajustement de l’image d’arrière-plan détermine si le média remplit la zone de la bannière ou reste entièrement visible à l’intérieur de celle-ci. Utilisez une approche de type remplissage lorsque la bannière doit être immersive, et une approche contenue lorsque la préservation de l’intégralité de l’image compte davantage que la couverture d’un bord à l’autre.
Si vous ajoutez du contenu au premier plan, n’oubliez pas que la bannière peut devenir plus haute pour l’accueillir. Cette hauteur supplémentaire peut modifier la manière dont le média d’arrière-plan est recadré.
Vérifiez les bannières avec un texte plus long ou des médias ajoutés au premier plan sur ordinateur et sur mobile, car la hauteur du contenu peut modifier sensiblement le recadrage de l’arrière-plan.
Pour les arrière-plans vidéo, gardez des clips courts et visuellement clairs afin que le message fonctionne toujours sans son. Des consignes sur les fichiers vidéo sont disponibles dans la documentation Company XYZ sur l’utilisation de la vidéo.
Premier plan de la bannière
Section intitulée « Premier plan de la bannière »Ce groupe contrôle le contenu superposé au-dessus de l’arrière-plan. Vous pouvez combiner une icône, une légende, un titre, un texte d’accompagnement et une action principale, et tout contenu vide reste masqué.
L’alignement horizontal et vertical aide à positionner le message dans la bannière. L’alignement en bas convient souvent aux bannières centrées sur l’image, tandis qu’un placement centré fonctionne généralement le mieux pour des messages promotionnels simples.
Choisissez le type de titre en fonction du rôle de la bannière dans la page. Utilisez un niveau de titre lorsque la bannière introduit une section importante, et utilisez un style de paragraphe lorsque le texte est plus décoratif ou répété ailleurs.
Les paramètres de bouton contrôlent le libellé, l’icône, la taille et la disposition. Des boutons mobiles pleine largeur peuvent améliorer le confort de clic lorsque la bannière sert de point d’entrée principal.
Le style de lien modifie la part de la bannière qui est cliquable. Les styles plein bloc peuvent rendre la bannière plus facile à utiliser, mais ils suppriment les liens du texte du sous-titre.
Pour les icônes, vous pouvez utiliser des emoji ou des noms d’icône pris en charge. Des consignes sur les icônes sont disponibles dans la documentation Company XYZ sur les icônes.
Médias au premier plan de la bannière
Section intitulée « Médias au premier plan de la bannière »Utilisez des médias au premier plan lorsque la bannière a besoin d’une couche visuelle supplémentaire, comme un logo, un badge, une découpe de produit ou une image secondaire. Ce média apparaît à côté du contenu texte plutôt que derrière lui.
Le style d’image aide le média à paraître plus éditorial ou plus proche d’un badge. Les traitements arrondis ou circulaires conviennent souvent aux logos et aux portraits, tandis que le style par défaut est généralement meilleur pour les images de produits.
La largeur maximale de l’image est l’outil principal pour garder le média proportionné au texte. Si l’image commence à dominer la bannière, réduisez sa largeur avant de raccourcir votre texte.
Vous pouvez également ajouter un lien à l’image du premier plan. C’est utile lorsque l’image représente une marque mise en avant, une collection ou un produit, et doit servir de point d’entrée visuel à part entière.
Couleurs de la bannière
Section intitulée « Couleurs de la bannière »Ces paramètres remplacent les choix de couleurs habituels de la bannière pour cette section uniquement. Utilisez-les lorsque la bannière a besoin d’une palette spécifique à la campagne, d’un contraste de texte plus marqué ou d’un traitement de superposition personnalisé.
La couleur et l’opacité de la superposition sont particulièrement utiles lorsque l’image ou la vidéo d’arrière-plan est visuellement chargée. Dans de nombreux cas, l’ajustement de la superposition améliore la lisibilité plus proprement que la modification de chaque couleur de texte.
Si vous utilisez à la fois une couleur unie et un dégradé, le dégradé est prioritaire lorsque cela s’applique. Il en va de même pour les dégradés de superposition.
Des consignes de couleur pour les bannières sont disponibles dans la documentation Company XYZ sur les couleurs de bannière.
Paramètres standard de section
Section intitulée « Paramètres standard de section »Paramètres d’espacement
Section intitulée « Paramètres d’espacement »Paramètres d’espacement contrôle l’espace au-dessus et au-dessous de la section Banner. Utilisez un espacement plus serré lorsque la bannière doit être étroitement liée au contenu voisin, et un espacement plus généreux lorsqu’elle doit se distinguer comme un moment mis en avant.
Comme les bannières sont souvent visuellement dominantes, de petits changements d’espacement peuvent avoir un effet important sur le rythme de la page. Vérifiez l’espacement sur ordinateur et sur mobile.
Paramètres d’arrière-plan de section
Section intitulée « Paramètres d’arrière-plan de section »Paramètres d’arrière-plan de section affectent l’enveloppe de la section externe plutôt que la bannière elle-même. C’est utile lorsque vous voulez que la bannière s’insère dans une zone encadrée plus large ou lorsque la section environnante a besoin de sa propre image, vidéo, couleur ou superposition.
Faites attention lorsque vous combinez un arrière-plan de section externe avec le média d’arrière-plan de la bannière elle-même. Utiliser les deux peut donner une impression de surcharge, sauf si vous construisez volontairement un design superposé ou en retrait.
Paramètres de séparateur
Section intitulée « Paramètres de séparateur »Paramètres de séparateur ajoutent une ligne en haut ou en bas de la section. Ils aident à définir la bannière lorsqu’elle se situe entre des sections aux couleurs ou à l’espacement similaires.
Gardez les séparateurs discrets si la bannière inclut déjà une imagerie forte, des bordures ou du contraste. Trop d’arêtes visuelles peuvent alourdir la mise en page.
Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Paramètres de visibilité vous permettent d’afficher ou de masquer cette section selon la taille de l’appareil. C’est utile lorsque vous voulez une disposition de bannière distincte pour ordinateur et mobile.
Si vous créez des versions spécifiques à l’appareil, conservez la cohérence du message et de la destination afin que les visiteurs ne voient pas des promotions différentes selon la taille de l’écran.
Paramètres de largeur
Section intitulée « Paramètres de largeur »Paramètres de largeur contrôlent à la fois la largeur du contenu à l’intérieur de la bannière et celle de l’enveloppe de la section. Utilisez la largeur du contenu pour gérer la lisibilité, et la largeur de la section pour décider si la bannière doit paraître contenue, pleine largeur ou bord à bord.
Ces changements peuvent apparaître différemment dans l’éditeur que sur la page en direct, en particulier dans les mises en page plus larges. Prévisualisez les mises à jour de largeur sur la boutique en ligne avant de les finaliser. Pour les contrôles de l’éditeur, consultez la documentation Shopify sur la personnalisation des sections et la documentation Shopify sur l’éditeur de thème
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Faites correspondre le ratio au message. Utilisez des ratios fixes pour les campagnes centrées sur l’image, et utilisez le ratio par défaut lorsque des textes plus longs ou des médias ajoutés nécessitent une hauteur flexible.
- Anticipez le recadrage mobile. Ajoutez un ratio ou un fichier média spécifique au mobile lorsque l’arrière-plan sur ordinateur masque des points focaux importants sur les petits écrans.
- Vérifiez les deux points de rupture. Les contrôles pour ordinateur et mobile peuvent produire des comportements différents d’alignement, de visibilité et de média ; prévisualisez donc la bannière aux deux tailles de fenêtre avant de publier.
- Utilisez les superpositions pour la lisibilité. Ajustez la couleur et l’opacité de la superposition de la bannière avant de réécrire le texte ou de modifier plusieurs couleurs de texte.
- Gardez l’action claire. Utilisez un seul bouton fort et choisissez les styles de lien plein bloc uniquement lorsque toute la bannière doit mener à une seule destination.
- Prévisualisez le comportement réel de la largeur. Vérifiez la page en direct après avoir modifié les paramètres de largeur ou d’arrière-plan, car les aperçus de l’éditeur peuvent sous-estimer les changements d’espacement et de recadrage.