Collage

Liens en vedette

1. Documentation Company XYZ sur la section collage
2. Documentation Shopify sur les sections et les blocs
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 formulaire de contact
6. Documentation Company XYZ sur le bloc image
7. Documentation Company XYZ sur le bloc produit
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 vidéo
11. Documentation Company XYZ sur les paramètres d’en-tête
12. Documentation Company XYZ sur les paramètres d’arrière-plan de section
13. Documentation Company XYZ sur les paramètres d’espacement de section
14. Documentation Company XYZ sur les paramètres de séparateur
15. Documentation Company XYZ sur les paramètres de visibilité
16. Documentation Company XYZ sur les paramètres de largeur de mise en page

Vidéos utiles

Vidéo Shopify Academy : Personnaliser votre boutique

Vidéo Shopify Academy : Personnaliser votre boutique

Utilisez Collage pour créer une mise en page mixte à deux colonnes avec un rendu plus éditorial, de style bento. C’est un excellent choix pour les pages d’atterrissage et les mises en page narratives où vous souhaitez combiner promotions, médias, produits, témoignages et texte d’accompagnement dans une seule section structurée. Pour le modèle de section plus large à l’origine de ce type de mise en page, consultez documentation Shopify sur les sections et les blocs

La mise en page met automatiquement en avant le premier bloc comme bloc principal. Vous pouvez en savoir plus sur le comportement de la section.

Paramètres de base

Les principaux contrôles de mise en page déterminent la façon dont le collage s’organise sur ordinateur et sur mobile. Ces paramètres sont les plus importants lorsque vous combinez différents types de blocs et cherchez à créer une hiérarchie visuelle claire.

1. Collage style contrôle si le grand bloc mis en avant apparaît en premier à gauche ou en dernier à droite sur ordinateur. Sur mobile, ce même choix détermine aussi si le premier bloc apparaît en haut ou en bas.
2. Stack on mobile bascule la section vers une mise en page mobile en une seule colonne. Utilisez ce réglage lorsque les blocs côte à côte semblent trop comprimés ou lorsque vous voulez un flux de lecture plus simple.
3. Stretch content vertically fait en sorte que les blocs d’une même ligne aient la même hauteur que le bloc le plus haut. Cela crée généralement une grille plus nette lorsque vous combinez du texte, des cartes et des médias de hauteurs naturelles différentes.

Le premier bloc est toujours le bloc principal. Si un élément spécifique doit ouvrir la mise en page, placez ce bloc en premier.

Note

Les contrôles de largeur des blocs ne modifient pas la largeur des colonnes dans cette section. Chaque bloc s’étire pour remplir sa colonne ; utilisez donc plutôt l’ordre des blocs, le ratio d’aspect et la longueur du contenu pour façonner la mise en page.

Paramètres de couleur

Ce groupe vous permet de remplacer les couleurs du texte, du sous-titre et des icônes de la section sans modifier la palette globale de votre thème. C’est particulièrement utile lorsque vous ajoutez un arrière-plan de section personnalisé ou que vous souhaitez que cette section se distingue visuellement.

Vérifiez soigneusement le contraste si vous utilisez une image, un dégradé ou une vidéo derrière le contenu. Un remplacement rapide des couleurs ici suffit souvent à préserver la lisibilité des titres et du texte d’accompagnement.

Types de blocs pris en charge

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

Bannière

Utilisez Banner pour les promotions, les messages de campagne ou une tuile de mise en avant visuellement riche. Il prend en charge son propre média d’arrière-plan, son contenu au premier plan, une image au premier plan facultative et le comportement du lien, ce qui en fait l’un des blocs les plus flexibles de cette section. En savoir plus sur le Bannière.

1. Utilisez Banner en premier lorsque vous souhaitez un bloc d’ouverture de type hero.
2. Gardez le texte concis si vous voulez que le bloc conserve une forme plus maîtrisée.
3. Les styles de lien sur tout le bloc fonctionnent mieux lorsque le banner a une destination claire.

Article de blog

Utilisez Blog post pour mettre en avant du contenu éditorial dans le collage. Il récupère un article sélectionné et vous permet d’ajuster la présentation de la carte afin qu’elle s’intègre au reste de la mise en page. En savoir plus sur le Article de blog.

1. Utilisez des paramètres de texte compacts lorsque l’article est un élément d’accompagnement plutôt que le point principal.
2. Les cartes de style banner donnent davantage de poids visuel à l’image mise en avant.

Formulaire de contact

Utilisez Contact form lorsque vous voulez un bloc orienté réponse dans le collage, par exemple pour des demandes de renseignements, des invites d’assistance ou la capture de prospects. Il inclut ses propres contrôles d’en-tête, de bouton, d’arrière-plan et de couleur. En savoir plus sur le Formulaire de contact.

1. Gardez le texte d’introduction court afin que le formulaire reste facile à parcourir.
2. Un arrière-plan de bloc personnalisé peut aider le formulaire à se distinguer des blocs de contenu voisins.

Image

Utilisez Image pour la photographie, les ressources de marque, les visuels d’accompagnement ou les tuiles visuelles liées. Il inclut des contrôles de ratio d’aspect, de légende, d’overlay, d’alignement et de couleur pour une présentation flexible. En savoir plus sur le bloc Image.

1. Choisissez les ratios d’aspect avec soin lorsque vous placez des blocs Image à côté de contenus riches en texte.
2. Utilisez des légendes uniquement lorsque l’image a besoin de contexte ou d’une signification supplémentaire.

Produit

Utilisez Product pour ajouter des produits sélectionnés dans le collage sans passer à une section produit dédiée. Cela fonctionne bien pour le merchandising narratif, les guides cadeaux et les pages de campagne. En savoir plus sur le Produit.

1. Conservez des styles de carte produit cohérents sur plusieurs blocs Product pour obtenir une mise en page plus nette.
2. N’activez les sélecteurs de variantes que lorsque cette interaction supplémentaire apporte clairement de la valeur.

Texte riche

Utilisez Rich text pour du texte d’accompagnement, une narration, des instructions ou de courts encarts entre des blocs plus visuels. Il vous donne une tuile compacte basée sur du texte avec des contrôles optionnels d’icône, de titre, de corps de texte, de bouton, d’arrière-plan et de couleur. En savoir plus sur le Texte riche.

1. Un texte plus court fonctionne généralement mieux que de longs paragraphes dans cette mise en page.
2. Les paramètres d’arrière-plan et de couleur peuvent aider le bloc à ressembler à une carte conçue plutôt qu’à du texte brut.

Témoignage

Utilisez Testimonial pour ajouter une preuve sociale à côté de produits, de médias ou de contenu promotionnel. Vous pouvez inclure une citation, une note, une source, un produit associé et des images ou une vidéo facultatives. En savoir plus sur le Témoignage.

1. Les citations courtes sont plus faciles à équilibrer dans la grille.
2. Relier le témoignage à un produit l’aide à soutenir à la fois la confiance et la conversion.

Vidéo

Utilisez Video pour du contenu vidéo intégré ou hébergé dans le collage. Il prend en charge le ratio d’aspect, l’image de poster, le comportement de lecture automatique, les overlays, les légendes et les options d’alignement. En savoir plus sur le bloc Video.

1. Ajoutez une image de poster lorsque vous voulez une première impression plus nette avant le début de la lecture.
2. Passez en revue ensemble les choix de lecture automatique et d’overlay afin que le comportement de lecture semble intentionnel.

Astuce

Le collage le plus équilibré combine généralement un bloc visuel dominant avec des blocs d’accompagnement plus simples, comme un Banner principal associé à des blocs Product, Rich text ou Image.

Paramètres standard de section

Paramètres d’en-tête

Utilisez Paramètres d’en-tête pour ajouter une légende, un titre, un texte d’accompagnement, une icône et un bouton facultatifs au-dessus du collage. Cela aide à encadrer le contenu et donne à la section une structure plus claire sur les pages longues.

Gardez le titre concis afin qu’il introduise la section sans concurrencer les blocs mis en avant. Si vous ajoutez un bouton de section, considérez-le comme l’action principale au niveau de la section.

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

Utilisez Paramètres d’arrière-plan de section pour ajouter une couleur, un dégradé, une image ou une vidéo derrière l’ensemble de la section. C’est utile lorsque vous voulez que le collage se distingue du contenu environnant.

Un média d’arrière-plan peut rendre la section plus spectaculaire, mais il peut aussi affecter la lisibilité et la perception de l’espacement. Utilisez des overlays lorsque vous avez besoin d’un contraste plus fort sans perdre le traitement d’arrière-plan.

Paramètres d’espacement

Utilisez Paramètres d’espacement pour contrôler l’espace au-dessus et au-dessous du collage. De petits ajustements ici peuvent faire paraître la section plus serrée et davantage orientée utilité, ou au contraire plus aérée et premium.

Un espacement plus important fonctionne souvent mieux lorsque la section possède son propre arrière-plan. Un espacement plus serré peut aider lorsque cette section s’insère dans un flux de page dense.

Paramètres de séparateur

Utilisez Paramètres de séparateur pour ajouter une ligne en haut ou en bas de la section. Cela donne au collage une limite plus claire sans modifier son espacement ni son arrière-plan.

Un séparateur discret suffit généralement. Si la couleur du séparateur est transparente, la section utilise la couleur de bordure par défaut de vos paramètres de thème.

Paramètres de visibilité

Utilisez Paramètres de visibilité pour afficher ou masquer la section selon la taille de l’appareil. C’est utile lorsque vous voulez une organisation de contenu différente sur les petits écrans.

Utilisez la visibilité spécifique à l’appareil avec prudence afin de ne pas créer de contenu dupliqué inutile. Si vous créez des versions distinctes, gardez la cohérence des messages et des liens.

Paramètres de largeur

Utilisez Paramètres de largeur pour contrôler à la fois la largeur du contenu et la largeur extérieure de la section. Dans Collage, les changements de largeur peuvent fortement influencer l’impression d’ouverture, de densité ou d’aspect éditorial de la mise en page.

La largeur du contenu est la principale contrainte de mise en page, tandis que la largeur de section compte surtout lorsque vous utilisez un traitement d’arrière-plan. Prévisualisez autant que possible les changements de largeur sur la boutique en ligne en direct, car l’éditeur peut donner l’impression que l’espacement est plus contraint qu’il ne le sera sur la page.

Notes d’utilisation

1. Commencez avec intention. Placez votre bloc le plus important ou le plus visuel en premier, car il deviendra toujours le grand bloc mis en avant.
2. Planifiez l’ordre sur mobile. Si le flux sur mobile est important, testez les deux options de style de collage et décidez si l’empilement donne une histoire plus claire de haut en bas.
3. Équilibrez blocs lourds et légers. Mélangez des blocs riches en texte avec des blocs visuels plus simples afin qu’un côté de la mise en page ne paraisse pas surchargé.
4. Utilisez les hauteurs égales avec parcimonie. L’étirement vertical aide à créer une grille plus propre, mais revoyez-le si un bloc contient beaucoup plus de contenu que les autres.
5. Vérifiez le contraste après le stylage. Chaque fois que vous ajoutez des arrière-plans personnalisés ou des remplacements de couleur, revérifiez la lisibilité sur ordinateur et sur mobile.
6. Passez en revue les deux points de rupture. Les contrôles d’ordinateur et de mobile peuvent produire des comportements différents en matière de mise en page, d’alignement, de visibilité ou de médias ; vérifiez donc la section aux deux tailles de vue.
7. Traitez les formulaires et les produits comme des éléments interactifs. Les blocs de contact et de produit peuvent changer selon la saisie du client, les états de validation, les variantes sélectionnées, la quantité et la disponibilité ; vérifiez donc aussi les états vides, de succès et d’erreur, ainsi que les actions commerciales.
8. Utilisez les remplacements de média avec parcimonie. Les valeurs vides ou de style par défaut conservent généralement le style de secours, tandis que les couleurs explicites, les dégradés ou des choix de média distincts pour ordinateur et mobile rendent la zone locale plus autonome et peuvent affecter le recadrage, le chargement et la lisibilité.