Paramètres d’espacement de section

Liens en vedette

1. Documentation Company XYZ sur les paramètres d’espacement de section
2. Documentation Shopify sur les sections et les blocs
3. Documentation Shopify sur l’éditeur de thème

Vidéos utiles

Vidéo Shopify Academy : personnaliser votre boutique

Vidéo Shopify Academy : personnaliser votre boutique

Utilisez ces paramètres pour contrôler l’espace au-dessus et au-dessous du contenu d’une section. Ils vous aident à affiner la sensation d’ouverture, de compacité ou de continuité de chaque partie d’une page sur différentes tailles d’écran. Pour un aperçu plus large de la mise en page basée sur les sections, consultez la documentation Shopify sur les sections et les blocs

Paramètres d’espacement

Ce groupe vous offre des paramètres d’espacement supérieur et inférieur distincts pour ordinateur et mobile. Cela facilite la création d’un rythme vertical cohérent sans imposer le même espacement sur chaque appareil.

Sur les écrans plus grands, l’espacement a un effet important sur la finition et l’aération d’une mise en page. Davantage d’espace peut aider le contenu mis en avant à se démarquer, tandis qu’un espacement plus serré peut permettre aux pages riches en produits ou en informations d’avancer plus efficacement.

Sur les petits écrans, l’espacement doit souvent être réduit. Une valeur qui paraît équilibrée sur ordinateur peut sembler trop grande sur mobile, surtout en haut d’une page, où un espacement supplémentaire repousse le contenu important plus bas.

Pour plus d’informations sur le comportement de ces paramètres, consultez l’espacement des sections ou la documentation Shopify sur l’éditeur de thème

Astuce

Ajustez l’espacement en affichant les sections situées au-dessus et au-dessous de celle que vous modifiez. Les décisions d’espacement sont plus faciles à évaluer dans leur contexte que sur une seule section isolée.

Équilibrer l’espacement supérieur et inférieur

L’espacement supérieur et inférieur n’a pas besoin d’être identique. Des valeurs différentes peuvent créer des transitions plus fluides entre les zones de contenu et aider une section à mieux s’intégrer naturellement à ce qui précède ou suit.

Par exemple, un espacement supérieur supplémentaire peut donner plus de présence à une nouvelle zone de contenu, tandis qu’un espacement inférieur réduit peut rapprocher visuellement la zone suivante. Cela est particulièrement utile lors de la combinaison de bannières, de sections de texte, de collections ou de contenu centré sur l’image.

Si deux sections voisines utilisent toutes deux un espacement généreux, l’espace entre elles peut sembler bien plus grand que prévu. Lorsque l’espacement semble trop lâche, réduisez d’abord un côté avant de modifier les deux sections.

Stratégie d’espacement sur ordinateur et mobile

Des paramètres distincts pour ordinateur et mobile vous permettent de conserver une mise en page aérée sur les grands écrans tout en facilitant la lecture sur les petits écrans. Dans la plupart des cas, il est préférable de définir d’abord l’espacement sur ordinateur, puis d’affiner les valeurs mobiles uniquement lorsque la mise en page semble trop haute ou trop comprimée.

Un espacement nul peut être utile lorsque vous souhaitez que des zones voisines paraissent visuellement liées. Utilisez-le avec prudence, toutefois, car supprimer trop d’espace peut donner une impression d’encombrement ou réduire le contraste entre différents types de contenu.

Notes d’utilisation

1. Adaptez l’espacement au contenu. Utilisez un espacement plus important pour le contenu mis en avant et un espacement plus réduit pour les zones plus denses et orientées tâche.
2. Vérifiez les sections ensemble. Examinez l’espacement avec le contenu voisin afin que la page entière paraisse équilibrée plutôt qu’irrégulière.
3. Ajustez le mobile indépendamment. Réduisez l’espacement mobile lorsque le contenu apparaît trop bas à l’écran ou que la page semble trop étirée.
4. Utilisez un espacement asymétrique volontairement. Des valeurs supérieure et inférieure différentes peuvent créer de meilleures transitions qu’un espacement parfaitement identique.
5. Surveillez les espaces cumulés. Un grand espacement sur des sections adjacentes peut créer un vide inutile, même si chaque section semble correcte isolément.
6. Prévisualisez les deux affichages. L’espacement sur ordinateur et sur mobile peut sembler nettement différent, alors vérifiez la section dans les deux tailles avant de terminer.