Multicolumn

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation Company XYZ sur les paramètres des commandes du diaporama
3. Documentation Company XYZ sur le bloc bannière
4. Documentation Company XYZ sur le bloc article de blog
5. Documentation Company XYZ sur le bloc produit
6. Documentation Company XYZ sur le bloc image
7. Documentation Company XYZ sur le bloc vidéo
8. Documentation Company XYZ sur le bloc texte enrichi
9. Documentation Company XYZ sur le bloc témoignage
10. Documentation Company XYZ sur le bloc formulaire de contact
11. Documentation Company XYZ sur le bloc fil d’Ariane
12. Documentation Company XYZ sur les paramètres des en-têtes
13. Documentation Company XYZ sur les paramètres d’espacement de la section
14. Documentation Company XYZ sur les paramètres des arrière-plans de section
15. Documentation Shopify sur la personnalisation des sections
16. Documentation Company XYZ sur les paramètres des séparateurs
17. Documentation Company XYZ sur les paramètres de visibilité
18. 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

Utilisez Multicolumn pour créer des mises en page flexibles à contenu mixte dans une seule section. Vous pouvez combiner du texte, des médias, du contenu promotionnel, des cartes et des blocs utilitaires, puis contrôler le nombre de colonnes affichées sur chaque appareil et déterminer si les visiteurs mobiles voient un diaporama à faire défiler au lieu d’une grille standard. Pour une présentation plus large du fonctionnement des sections et des blocs dans l’éditeur de thème, consultez la documentation Shopify sur les sections et les blocs

Paramètres de base

Ces paramètres définissent la disposition globale avant que vous n’affiniez les blocs individuels. Commencez ici pour décider si la section doit paraître dense, aérée ou interactive.

Disposition et alignement

Utilisez l’alignement du contenu pour contrôler la façon dont les blocs se placent dans chaque ligne lorsqu’ils ont des hauteurs différentes. Cela est particulièrement important lorsque vous mélangez de courts blocs de texte avec des bannières, des images ou des vidéos plus hautes.

Le nombre de colonnes sur ordinateur, tablette et mobile définit la grille pour chaque taille d’écran. La tablette peut hériter de la valeur de l’ordinateur lorsqu’elle est laissée à 0, ce qui est utile lorsque vous voulez moins d’ajustements spécifiques à chaque appareil.

Comportement du diaporama sur mobile

Activez Afficher en diaporama sur mobile lorsque la section semble trop haute ou trop chargée sur les petits écrans. Cela transforme l’expérience mobile d’une grille consultée en un ensemble à faire défiler.

Si vous activez le diaporama mobile, examinez soigneusement l’ordre des blocs. Les visiteurs verront la section une diapositive à la fois plutôt que la mise en page complète en une seule fois.

Lignes de même hauteur

Utilisez Étendre le contenu verticalement lorsque vous souhaitez une grille plus nette et plus uniforme. Les blocs s’étendront pour correspondre au bloc le plus haut de la même ligne, ce qui fonctionne particulièrement bien pour les cartes, les témoignages et les bannières.

Laissez cette option désactivée si vous souhaitez que chaque bloc conserve sa hauteur naturelle.

Paramètres du diaporama

Lorsque le comportement du diaporama est actif, ces paramètres contrôlent la manière dont les visiteurs parcourent le contenu. Pour plus de détails, consultez la référence des contrôles du diaporama.

Le style d’animation a le plus grand impact visuel. Le style par défaut conserve une mise en page plus proche d’un carrousel, tandis que Fade crée une présentation un élément à la fois.

Note

L’animation Fade impose une mise en page à une seule diapositive. Elle désactive également les aperçus de la diapositive suivante et les styles de pagination qui dépendent de plusieurs diapositives visibles.

La lecture automatique, le délai, la répétition en boucle et la pause au survol vous aident à décider si la section doit ressembler davantage à un curseur promotionnel passif ou à une galerie de contenu manuelle. La pause au survol s’applique uniquement sur ordinateur, donc la lecture automatique doit rester confortable sur les appareils tactiles.

La position de la navigation, les contrôles de navigation et les paramètres de pagination aident les visiteurs à comprendre qu’il y a davantage de contenu disponible. L’aperçu des diapositives suivantes est utile lorsque vous souhaitez suggérer du contenu supplémentaire, mais il convient moins aux mises en page plus serrées ou plus centrées.

Paramètres de couleur

Ce groupe vous permet de remplacer les couleurs du texte et des icônes de la section sans modifier le style global de votre thème. C’est particulièrement utile lorsque l’arrière-plan de la section ou le mélange des blocs nécessite un contraste différent pour rester lisible.

Si des blocs individuels utilisent également leurs propres paramètres de couleur, visez une hiérarchie claire. Les couleurs au niveau de la section fonctionnent mieux lorsque toute la section doit partager un ton cohérent.

Types de blocs pris en charge

1. Banner
2. Blog post
3. Breadcrumbs
4. Contact form
5. Heading
6. Image
7. Product
8. Rich text
9. Testimonial
10. Video

Bannière

Utilisez les blocs Banner pour les promotions, les messages mis en avant ou les appels à l’action visuels. Ils prennent en charge leurs propres médias d’arrière-plan, le contenu au premier plan, une image de premier plan facultative et des étendues de colonnes personnalisées.

Consultez le Bannière pour plus de détails sur les blocs.

1. Utilisez des étendues plus larges lorsque la bannière comprend à la fois des médias et du texte.
2. Les rapports hauteur/largeur fixes aident à créer une grille plus ordonnée.
3. Les styles de lien sur bloc entier fonctionnent mieux lorsque toute la bannière doit agir comme une seule cible cliquable.

Blog post and Product

Ces blocs ajoutent des cartes d’articles et de produits sélectionnées à la mise en page. Les deux prennent en charge des étendues personnalisées et un style de carte au niveau du bloc, ce qui les rend adaptés lorsque vous souhaitez une section mixte à la fois éditoriale et marchande.

Consultez les Article de blog et Produit pour les détails de configuration.

1. Conservez des styles de carte cohérents lorsque vous souhaitez que la section soit perçue comme une seule collection.
2. Utilisez des étendues plus grandes de manière ciblée pour mettre en avant un seul élément.
3. En mode diaporama mobile, l’ordre des blocs compte plus que leur largeur.

Image and Video

Utilisez les blocs média pour ajouter des repères visuels entre des contenus riches en texte ou en cartes. Les deux prennent en charge les rapports hauteur/largeur, les légendes, les superpositions, les contrôles d’alignement et des étendues personnalisées.

Consultez les bloc Image et bloc Video pour les options spécifiques aux médias.

1. Faites correspondre les rapports hauteur/largeur entre les blocs média proches pour une mise en page plus nette.
2. Utilisez les superpositions uniquement lorsqu’elles améliorent la lisibilité ou la cohérence.
3. Ajoutez une image de poster lorsqu’une vidéo hébergée a besoin d’une première image plus forte.

Rich text and Heading

Ces blocs aident à structurer les mises en page plus longues et à introduire des groupes de contenu. Utilisez-les pour aérer les grilles denses, ajouter de courts contenus éditoriaux ou placer des appels à l’action ciblés dans la section.

Consultez le Texte riche pour les options de mise en forme du contenu.

1. Utilisez les blocs Heading pour créer une structure interne dans les sections plus longues.
2. Limitez l’usage des boutons afin que les actions ne se concurrencent pas.
3. Évitez d’utiliser plusieurs titres H1 sur la même page.

Témoignage

Les blocs Testimonial associent un contenu de citation à un contexte de produit facultatif et à des médias d’accompagnement facultatifs. Ils fonctionnent bien lorsque vous souhaitez intégrer une preuve sociale dans une mise en page promotionnelle mixte.

Consultez le Témoignage pour les paramètres de citation et de médias.

1. Gardez les citations courtes pour que le bloc reste équilibré.
2. Liez un produit associé lorsque le témoignage soutient un article précis.
3. Si vous ajoutez une vidéo, gardez les blocs voisins visuellement plus simples.

Contact form and Breadcrumbs

Ces blocs utilitaires permettent à Multicolumn de gérer plus que du contenu promotionnel. Utilisez Contact form pour des mises en page flexibles de pages d’atterrissage, et Breadcrumbs lorsque vous avez besoin d’un contexte de navigation dans une composition personnalisée.

Consultez le Formulaire de contact et le Fil d’Ariane pour les options des blocs utilitaires.

1. Accordez suffisamment de largeur aux blocs fonctionnels pour qu’ils restent faciles à utiliser.
2. Placez les breadcrumbs près du début du flux de contenu.
3. Évitez de mélanger trop de blocs utilitaires dans une petite section.

Paramètres standard de section

Paramètres d’en-tête

Utilisez les Paramètres d’en-tête partagés pour introduire la section avec un titre, une légende, un texte d’accompagnement, une icône et un bouton facultatif. Dans Multicolumn, cela est particulièrement utile lorsque la mise en page mélange plusieurs types de contenu et a besoin d’une introduction ou d’une action claire.

Paramètres d’espacement

Utilisez les Paramètres d’espacement partagés pour contrôler l’espacement au-dessus et au-dessous de la section. Augmentez l’espacement lorsque la mise en page a besoin de plus d’air, et réduisez-le lorsque la page doit sembler plus dense.

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

Utilisez les Paramètres d’arrière-plan de section partagés pour ajouter une couleur, un dégradé, une image ou une vidéo derrière toute la section. Les arrière-plans marqués peuvent modifier le contraste et l’espacement perçu, alors vérifiez-les avec les couleurs de votre texte et de vos blocs. Si vous avez besoin d’aide pour la configuration dans l’éditeur de thème, consultez la documentation Shopify sur la personnalisation des sections

Paramètres de séparateur

Utilisez les Paramètres de séparateur partagés pour ajouter une ligne au-dessus ou au-dessous de la section. Cela est utile lorsque Multicolumn se trouve entre des sections visuellement similaires et a besoin d’une frontière plus nette.

Paramètres de visibilité

Utilisez les Paramètres de visibilité partagés pour afficher ou masquer la section selon l’appareil. Cela est utile lorsque vous voulez une mise en page pour les grands écrans et une configuration de section différente pour mobile.

Paramètres de largeur

Utilisez les Paramètres de largeur partagés pour contrôler à la fois la largeur du contenu et la largeur extérieure de la section. Dans Multicolumn, les paramètres de largeur influencent fortement la densité de la grille, surtout lorsque vous utilisez de nombreuses colonnes ou ajoutez un arrière-plan de section.

Notes d’utilisation

1. Passez la section en revue après avoir ajouté des blocs. De nouveaux blocs peuvent modifier l’équilibre et la perception de toute la mise en page, alors vérifiez de nouveau la composition après chaque changement de contenu important.
2. Testez les deux expériences par appareil. Les contrôles pour ordinateur et mobile peuvent modifier la mise en page, l’alignement et la navigation, alors vérifiez la section dans les deux tailles avant de publier.
3. Utilisez les remplacements intentionnellement. Les valeurs vides ou de style par défaut conservent généralement le style de secours du thème, tandis que des couleurs explicites, des dégradés ou des médias séparés rendent la section plus autonome.
4. Vérifiez la lisibilité des médias sur chaque appareil. Lorsque les médias desktop et mobile sont configurés séparément, le recadrage et les superpositions peuvent changer, alors confirmez que les légendes, les points focaux et le texte restent clairs.
5. Gardez les formulaires faciles à parcourir. Si vous utilisez un bloc de formulaire de contact, assurez-vous que les messages de succès et d’erreur restent lisibles par rapport au contenu environnant.
6. Considérez le mode diaporama mobile comme une séquence. Disposez les blocs dans l’ordre dans lequel les visiteurs doivent les faire défiler, car la mise en page ne sera plus perçue comme une grille complète.