Hero - Basique

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation Shopify sur la personnalisation des sections
3. Documentation Company XYZ sur les paramètres de couleur
4. Documentation Company XYZ sur les paramètres d’espacement de section
5. Documentation Company XYZ sur les paramètres de séparateur
6. Documentation Company XYZ sur les paramètres de visibilité
7. Documentation Company XYZ sur les paramètres de largeur de mise en page

Vidéos utiles

Vidéo de Shopify Academy : personnaliser votre boutique

Vidéo de Shopify Academy : personnaliser votre boutique

Hero - Basic met en avant le titre de la page et les principaux détails d’accompagnement en haut des pages d’article et de blog. Il peut également intégrer l’image mise en avant lorsqu’elle est disponible, ce qui facilite la création d’un en-tête visuel plus fort sans ajouter de blocs de contenu supplémentaires. Pour un aperçu de l’organisation des sections du thème, consultez la documentation Shopify sur les sections et les blocs

Paramètres de base

Ces paramètres déterminent la structure globale du hero et définissent la quantité d’informations d’accompagnement affichées autour du titre.

1. Emplacement de l’image mise en avant définit le ton visuel de l’en-tête. Utilisez une image d’arrière-plan pour un rendu plus immersif, choisissez un placement à gauche ou à droite lorsque vous souhaitez une séparation plus nette entre l’image et le texte, ou supprimez complètement l’image pour une mise en page éditoriale plus simple.
2. Alignement du texte influence le caractère formel, spectaculaire ou lisible de l’en-tête. L’alignement à gauche est généralement le plus facile à parcourir pour le contenu d’un article, tandis qu’un texte centré peut convenir à une présentation plus stylisée.
3. Détails de la page vous permettent d’afficher ou de masquer des éléments tels que les fils d’Ariane, l’auteur, la date, les tags, le partage et l’impression. Activez uniquement les détails qui aident les visiteurs à comprendre ou à utiliser la page afin que l’en-tête reste concentré.
4. Affichage de l’extrait ajoute un court résumé lorsque le contenu d’extrait existe. L’option extensible est utile lorsque vous souhaitez ajouter davantage de contexte sans laisser un long résumé dominer le haut de la page.

Si vous affichez à la fois un extrait long et plusieurs éléments de métadonnées, le hero peut vite sembler encombré. Lorsque le titre est déjà descriptif, un résumé plus court fonctionne généralement mieux.

Paramètres de couleur

Les paramètres de couleur vous permettent de remplacer le traitement de couleur par défaut de la section pour ce hero uniquement. Cela est particulièrement utile lorsque l’image mise en avant ou le traitement d’arrière-plan nécessite un contraste plus fort que le reste de la conception de la page. Consultez la documentation Company XYZ sur les paramètres de couleur.

1. Couleurs du titre et du texte doivent être ajustées ensemble afin que le titre reste l’élément le plus fort tandis que les détails secondaires restent lisibles.
2. Couleur de l’icône aide les éléments utilitaires tels que les actions de partage ou d’impression à rester visibles sans éclipser le contenu principal.
3. Couleur de superposition, dégradé et opacité sont les plus importants lorsque l’image mise en avant est utilisée comme arrière-plan. Utilisez-les pour améliorer la lisibilité tout en conservant suffisamment de détails de l’image pour soutenir la conception.

Astuce

Commencez par définir l’intensité de la superposition avant de modifier les couleurs du texte. Dans la plupart des cas, une superposition bien équilibrée résout les problèmes de lisibilité plus proprement que l’utilisation de couleurs de texte trop claires ou trop sombres.

Paramètres standard de section

Si vous souhaitez un aperçu plus large des contrôles de section dans l’éditeur de thème, consultez la documentation Shopify sur la personnalisation des sections

Paramètres d’espacement

Paramètres d’espacement contrôlent l’espace au-dessus et au-dessous du contenu du hero sur ordinateur et mobile. Utilisez davantage d’espacement lorsque la section inclut une image d’arrière-plan ou un extrait afin que l’en-tête paraisse intentionnel plutôt que serré. Réduisez l’espacement lorsque vous souhaitez un en-tête de page plus compact et davantage axé sur l’utilitaire.

Paramètres de séparateur

Paramètres de séparateur vous permettent d’ajouter une ligne au-dessus ou au-dessous de la section. Dans ce hero, les séparateurs fonctionnent bien lorsque vous souhaitez une séparation plus nette entre l’en-tête de la page et le contenu environnant. Si vous laissez la couleur du séparateur transparente, le comportement de couleur de bordure par défaut du thème est utilisé.

Paramètres de visibilité

Paramètres de visibilité contrôlent si la section apparaît sur ordinateur, sur mobile ou sur les deux. Cela peut être utile lorsqu’un en-tête riche en images semble efficace sur les grands écrans mais trop haut sur les plus petits. Assurez-vous que la page conserve un contexte de titre clair sur tout appareil où le hero est masqué.

Paramètres de largeur

Paramètres de largeur contrôlent la largeur maximale du contenu et la largeur extérieure de la section elle-même. Des largeurs de contenu plus étroites peuvent améliorer la lisibilité des titres et des extraits, tandis que des largeurs de section plus grandes ont un impact plus fort lorsque vous utilisez une image d’arrière-plan. Vérifiez les modifications de largeur dans la vue de la page en direct lorsque c’est possible, car le cadrage de l’éditeur peut donner une impression différente de l’espacement.

Notes d’utilisation

1. Choisissez l’emplacement de l’image avec intention. Les images d’arrière-plan créent une déclaration visuelle plus forte, tandis qu’un placement latéral ou l’absence d’image conserve le titre et les détails plus faciles à parcourir.
2. Sélectionnez les détails d’accompagnement avec parcimonie. Affichez uniquement les métadonnées et les actions utilitaires qui apportent une réelle valeur afin que l’en-tête n’entre pas en concurrence avec le contenu de la page.
3. Utilisez les extraits pour donner du contexte, pas pour répéter. Un bon extrait doit ajouter un résumé utile au lieu de reformuler le titre de manière plus longue.
4. Privilégiez le contraste. Lorsque vous utilisez une image d’arrière-plan, ajustez ensemble la superposition et les couleurs du texte afin que l’en-tête reste facile à lire sur toute la zone de l’image.
5. Vérifiez soigneusement la mise en page mobile. Contrôlez l’espacement, la visibilité et la longueur de l’extrait sur les petits écrans afin que l’en-tête reste équilibré et ne repousse pas trop le contenu principal vers le bas.
6. Comparez les deux zones d’affichage. Les contrôles pour ordinateur et mobile peuvent produire des comportements différents en matière d’alignement, de visibilité et de média ; examinez donc le hero sur les deux tailles d’écran avant la publication.
7. Utilisez les remplacements locaux avec parcimonie. Les valeurs vides ou de style par défaut conservent généralement le style de repli, tandis que des couleurs, des dégradés ou des choix de média explicites rendent ce hero plus indépendant du reste de la page.