Titre

Liens en vedette

1. Documentation de Company XYZ sur les paramètres d’en-tête
2. Documentation de Company XYZ sur les paramètres d’espacement des sections
3. Documentation de Company XYZ sur les paramètres d’arrière-plan des sections
4. Documentation de Company XYZ sur les paramètres des séparateurs
5. Documentation de Company XYZ sur les paramètres de visibilité
6. Documentation de Company XYZ sur les paramètres de largeur de mise en page
7. Documentation Shopify sur les sections et les blocs
8. Documentation Shopify sur l’éditeur de thème

Vidéos utiles

Vidéo de Shopify Academy : personnaliser votre boutique

Vidéo de Shopify Academy : personnaliser votre boutique

Utilisez cette section pour ajouter un titre stylisé partout où vous avez besoin d’une coupure de contenu plus claire, d’une introduction plus marquée ou d’un simple appel à l’action. Elle est particulièrement utile sur les pages d’accueil et les mises en page au format long, où la structure des titres aide les visiteurs à parcourir la page. Pour une vue d’ensemble plus large de la manière dont les sections sont construites, consultez documentation Shopify sur les sections et les blocs

Utilisez un seul H1 par page. Si la page contient déjà un titre principal, choisissez ici H2 ou un niveau inférieur.

Paramètres de couleur

Ces paramètres remplacent les couleurs habituelles du thème pour cette zone de titre uniquement. Ils sont particulièrement utiles lorsque la section se trouve sur un fond personnalisé ou qu’elle a besoin d’un contraste plus fort que celui de la page environnante.

Ajustez ensemble les couleurs de l’icône, du texte du titre et du sous-titre afin que la section paraisse cohérente. Si vous utilisez des couleurs plus claires ou plus atténuées, prévisualisez-les aussi bien sur mobile que sur ordinateur afin de vous assurer que le texte reste confortable à lire.

Paramètres standard de section

Paramètres d’en-tête

Paramètres d’en-tête contrôlent le contenu et la mise en page de cette section, y compris l’alignement, l’icône, la légende, le titre, le sous-titre et le bouton optionnel. Utilisez-les pour créer aussi bien un simple titre de section qu’un bloc d’introduction plus promotionnel. Pour les détails de configuration dans l’éditeur, consultez documentation Shopify sur l’éditeur de thème

Choisissez le type de titre en fonction de la structure de la page, et pas seulement de l’apparence. Utilisez la légende pour un contexte court, le sous-titre pour un texte d’accompagnement bref, et le bouton uniquement lorsqu’il existe une étape suivante claire pour le visiteur.

Si vous ajoutez un bouton, faites attention à sa position sur ordinateur et sur mobile. Le placer sous le texte peut créer un flux de lecture plus net, tandis qu’un bouton pleine largeur sur mobile peut rendre l’action plus facile à toucher.

Paramètres d’espacement

Paramètres d’espacement contrôlent l’espace au-dessus et au-dessous du titre. Utilisez davantage d’espacement lorsque le titre doit se suffire à lui-même, et moins lorsqu’il doit rester visuellement associé au contenu voisin.

Des espacements différents sur ordinateur et sur mobile peuvent aider la section à paraître équilibrée sur tous les appareils. Si le titre inclut un sous-titre ou un bouton, laissez suffisamment d’espace pour que le contenu ne paraisse pas à l’étroit.

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

Paramètres d’arrière-plan de section vous permettent de placer le titre sur un arrière-plan de couleur, de dégradé, d’image ou de vidéo. Cela peut transformer un simple titre en séparateur visuel plus fort ou en introduction de type bannière.

Les superpositions sont utiles lorsque du texte se trouve sur un média et a besoin d’un meilleur contraste. Comme les arrière-plans peuvent modifier la perception de l’espacement et de la largeur, prévisualisez la section sur plusieurs tailles d’écran avant de la publier.

Attention

Des images chargées ou des arrière-plans vidéo peuvent rendre les titres difficiles à lire. Si la lisibilité diminue, utilisez une superposition ou passez à un arrière-plan plus simple.

Paramètres de séparateur

Paramètres de séparateur ajoutent une ligne au-dessus ou au-dessous de la section. Ils fonctionnent bien lorsque vous souhaitez une délimitation de contenu plus nette sans ajouter plus de texte ni d’espacement supplémentaire.

Un séparateur simple suffit généralement pour les titres. Si la page comporte déjà des divisions visuelles fortes, utilisez les séparateurs avec parcimonie pour éviter l’encombrement.

Paramètres de visibilité

Paramètres de visibilité contrôlent si ce titre apparaît sur ordinateur, sur mobile ou sur les deux. C’est utile lorsque vous souhaitez des traitements de titre différents selon la taille de l’appareil.

Si vous masquez la section sur un appareil, assurez-vous que les visiteurs y voient tout de même un titre clair et tout contexte essentiel. Évitez d’utiliser les changements de visibilité d’une manière qui rompt la hiérarchie du contenu de la page.

Paramètres de largeur

Paramètres de largeur contrôlent la largeur maximale du contenu et la largeur de la section elle-même. Des largeurs de contenu plus étroites améliorent souvent la lisibilité, tandis que des largeurs de section plus grandes se remarquent surtout lorsque vous utilisez un arrière-plan.

Utilisez la largeur du contenu pour que les lignes du titre et du sous-titre restent confortables à lire. Utilisez la largeur de la section lorsque vous souhaitez que le traitement de l’arrière-plan reste contenu ou s’étende davantage sur la page.

Note

Les changements de largeur peuvent apparaître différemment dans l’éditeur que sur la page en ligne. Vérifiez l’aperçu de la page avant de les finaliser.

Notes d’utilisation

1. Conservez une hiérarchie de titres logique. Utilisez H1 uniquement pour le titre principal de la page et des niveaux inférieurs pour préserver une hiérarchie de contenu claire.
2. Séparez le message du détail. Mettez le point principal dans le titre, utilisez la légende pour un léger contexte et gardez le sous-titre bref et utile.
3. Utilisez les boutons avec intention. Ajoutez un bouton uniquement lorsque le titre doit mener à une prochaine action claire, et vérifiez sa position sur mobile avant de publier.
4. Concevez d’abord pour la lisibilité. Lorsque vous utilisez des couleurs personnalisées ou des arrière-plans média, vérifiez soigneusement le contraste afin que le titre reste facile à lire.
5. Équilibrez ensemble l’espacement et la largeur. Ajustez l’espacement et la largeur comme un duo afin que la section ne paraisse ni trop serrée ni déconnectée du contenu qui l’entoure.
6. Examinez les deux vues d’appareil. Les contrôles pour ordinateur et mobile peuvent affecter différemment l’alignement, la visibilité et le comportement des médias ; vérifiez donc la section dans les deux affichages avant de publier.
7. Considérez les remplacements comme un engagement plus fort. Les valeurs vides ou de style par défaut conservent généralement le style environnant, tandis que des couleurs, dégradés ou choix de médias explicites rendent la zone de titre plus indépendante.
8. Vérifiez la lisibilité des médias. Si vous utilisez des médias différents pour ordinateur et mobile, contrôlez le recadrage, le chargement, le repli et la lisibilité du texte sur chaque taille d’écran.