Paramètres de la disposition des blocs

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. 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 ce groupe de paramètres pour contrôler l’espace horizontal occupé par un élément de contenu dans sa grille parente. Cela vous aide à créer une hiérarchie visuelle plus forte, à faire tenir plus d’éléments sur une ligne ou à donner davantage d’espace aux contenus mis en avant.

Étendue des colonnes

Le principal choix consiste à déterminer le nombre de colonnes que le contenu doit occuper pour chaque taille d’appareil. Des étendues plus grandes donnent à un élément une présence plus marquée et offrent davantage d’espace au texte, aux médias ou aux actions. Des étendues plus petites sont utiles pour le contenu d’accompagnement compact et les mises en page multi-colonnes plus serrées.

L’étendue sur ordinateur définit généralement l’intention globale de la mise en page. Les étendues sur tablette et mobile vous permettent de conserver cette structure lisible à mesure que l’espace d’écran se réduit, sans obliger chaque appareil à utiliser la même largeur.

Pour un aperçu plus large du fonctionnement de ces mises en page, consultez documentation Shopify sur les sections et les blocs

Comportement sur tablette et mobile

La tablette peut utiliser sa propre étendue ou suivre l’étendue de l’ordinateur. Ce comportement de repli est utile lorsque votre mise en page sur ordinateur s’adapte déjà bien et n’a pas besoin d’un ajustement spécifique pour la tablette.

Le mobile doit être configuré en privilégiant d’abord la lisibilité. Si le texte passe à la ligne de manière maladroite, si les boutons semblent à l’étroit ou si le contenu s’empile de façon inégale, l’étendue mobile est souvent le premier paramètre à réexaminer.

Vérifiez séparément la tablette et le mobile, même lorsque la mise en page sur ordinateur semble correcte. Une étendue équilibrée sur grand écran peut se comporter différemment lorsque la largeur disponible diminue.

Astuce

Si les mises en page sur tablette semblent trop chargées, réduisez l’étendue de la tablette au lieu de la faire correspondre exactement à celle de l’ordinateur. Une mise en page de tablette légèrement plus simple est souvent plus facile à parcourir.

Limites de la grille parente

Ce groupe de paramètres fonctionne à l’intérieur de la structure de colonnes de la mise en page parente. Si l’étendue choisie est supérieure au nombre de colonnes disponibles dans la mise en page parente, le contenu s’étend sur toute la ligne.

Ce comportement est utile pour la flexibilité, mais il peut aussi modifier la façon dont les éléments se répartissent. Si quelque chose passe de manière inattendue sur sa propre ligne, comparez son étendue avec les colonnes disponibles de la mise en page parente avant de modifier l’espacement ou le contenu.

Si l’étendue sélectionnée est supérieure au nombre de colonnes de la mise en page parente, le contenu occupera toute la ligne.

Comportement du diaporama sur mobile

Lorsque la mise en page parente est définie pour s’afficher en diaporama sur mobile, l’étendue mobile habituelle de ce groupe de paramètres ne contrôle pas la largeur finale sur mobile de manière normale. À la place, le comportement de la mise en page mobile suit le paramètre de colonne mobile de la mise en page parente.

Si les mises en page pour téléphone ne correspondent pas à vos attentes, vérifiez d’abord les paramètres de mise en page mobile de la mise en page parente. C’est particulièrement important lorsque vous attendez une présentation mobile plus étroite ou plus large, mais voyez plutôt un dimensionnement basé sur le diaporama.

Si vous avez besoin d’aide pour localiser ces paramètres dans l’éditeur, consultez documentation Shopify sur l’éditeur de thème

Notes d’utilisation

1. Faites correspondre la largeur à l’importance. Donnez au contenu mis en avant une étendue plus grande et gardez les éléments d’accompagnement plus étroits pour une hiérarchie visuelle plus claire.
2. Vérifiez d’abord les colonnes parentes. Si un élément passe sans cesse sur sa propre ligne, son étendue est peut-être supérieure à ce que permet la mise en page parente.
3. Utilisez les remplacements de tablette avec discernement. Conservez l’alignement de la tablette sur l’ordinateur sauf si la lisibilité ou l’espacement nécessite clairement un ajustement séparé.
4. Privilégiez la clarté sur mobile. Choisissez des étendues mobiles qui évitent le texte serré, les boutons irréguliers et les retours à la ligne maladroits.
5. Testez chaque viewport. Vérifiez séparément l’ordinateur, la tablette et le mobile, car une même étendue peut créer un alignement ou un espacement différent à chaque taille.
6. Testez séparément les mises en page en diaporama. Lorsque le diaporama mobile est actif, examinez le paramètre de colonne mobile de la mise en page parente avant de résoudre les problèmes de comportement de largeur.