Contenu du blog

Liens en vedette

1. Documentation Shopify sur la personnalisation des sections
2. Documentation Shopify sur les sections et les blocs
3. Documentation Company XYZ sur le bloc de groupe de filtres
4. Documentation Company XYZ sur les paramètres des en-têtes
5. Documentation Company XYZ sur les paramètres des cartes
6. Documentation Company XYZ sur les paramètres d’espacement de section
7. Documentation Company XYZ sur les paramètres d’arrière-plan de section
8. Documentation Company XYZ sur les paramètres de séparateur
9. Documentation Company XYZ sur les paramètres de largeur de mise en page
10. 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

Affichez vos articles de blog dans une mise en page d’archive configurable avec des options de tri, de filtrage et de présentation des cartes. Elle fonctionne mieux sur les pages d’accueil du blog, où les lecteurs doivent parcourir rapidement un ensemble plus large d’articles et affiner ce qu’ils veulent lire.

Paramètres de l’interface de grille

Ces paramètres contrôlent l’expérience de navigation globale de la grille d’articles. Vous pouvez définir le nombre par défaut de colonnes sur ordinateur et sur mobile, choisir combien d’articles apparaissent par page et décider si les lecteurs peuvent ajuster eux-mêmes la taille de la grille.

Utilisez une grille plus aérée lorsque les images des articles sont importantes pour la découverte. Utilisez une grille plus dense lorsque votre blog est axé sur le texte ou lorsque les lecteurs gagnent à voir davantage de titres en même temps.

L’interface collante maintient les contrôles de l’archive visibles pendant que les lecteurs font défiler la page. Cela est utile pour les longs index de blog, mais peut sembler inutile sur des archives plus petites où les contrôles ne doivent être utilisés qu’une seule fois.

Le tri aide à façonner la manière dont les lecteurs découvrent votre contenu. Le tri par date convient généralement aux blogs actifs, tandis que le tri par titre peut mieux fonctionner pour des contenus de référence, intemporels ou classés par ordre alphabétique. Pour un aperçu plus large de la manière dont les sections d’archive sont gérées, consultez documentation Shopify sur la personnalisation des sections

Astuce

Si vous activez l’interface de taille de grille, définissez d’abord une taille par défaut cohérente. Les contrôles destinés aux lecteurs fonctionnent mieux lorsque la mise en page de départ paraît déjà naturelle.

Paramètres de filtre

Ces paramètres ajoutent un filtrage basé sur les balises à l’archive du blog. Ils sont particulièrement utiles lorsque vos articles suivent déjà une structure de balises claire et que vous souhaitez permettre aux lecteurs d’affiner les résultats sans quitter la page.

Le bouton principal de filtre active le filtrage pour la section, tandis que le paramètre ouvert par défaut contrôle si la zone de filtre s’affiche développée au départ. Laisser les filtres ouverts peut favoriser la découverte, mais un démarrage replié garde souvent la page plus nette.

Les filtres fonctionnent mieux avec des balises cohérentes et bien pensées. Si le balisage est incomplet ou incohérent, l’expérience de filtrage peut sembler confuse plutôt qu’utile.

Paramètres de couleur des cartes

Ces paramètres remplacent le traitement habituel des couleurs des cartes pour cette section. Utilisez-les lorsque l’archive de votre blog a besoin d’un style visuel distinct ou lorsque la mise en page de cartes choisie nécessite un contraste plus fort.

Les paramètres de superposition de la bannière s’appliquent uniquement lorsque vous utilisez le style de carte Bannière. Si vous n’utilisez pas de cartes bannière, concentrez-vous plutôt sur l’arrière-plan général de la carte, la bordure, l’en-tête et les couleurs du texte.

L’opacité de la superposition est particulièrement importante pour les cartes axées sur l’image. Une superposition trop faible peut rendre les titres difficiles à lire, tandis qu’une superposition trop forte peut donner aux cartes un aspect lourd ou atténué.

Paramètres de couleur

Ces paramètres contrôlent les couleurs de l’icône, de l’en-tête et du texte d’accompagnement au niveau de la section. Ils sont utiles lorsque cette archive de blog se trouve sur un arrière-plan personnalisé ou doit se distinguer des sections environnantes.

Ajustez ces couleurs ensemble plutôt qu’une par une afin que l’en-tête reste cohérent. Si vous utilisez également une image d’arrière-plan, un dégradé ou une vidéo, vérifiez à nouveau le contraste sur ordinateur et sur mobile.

Types de blocs pris en charge

1. Groupe de filtre

Groupe de filtre

Utilisez les blocs Groupe de filtre pour créer des modules de filtrage personnalisés basés sur des balises dans l’archive. Chaque bloc devient son propre groupe extensible, ce qui vous aide à organiser les filtres en catégories plus claires au lieu d’afficher une longue liste unique. Pour le comportement général de l’éditeur, consultez documentation Shopify sur les sections et les blocs

1. Ajoutez un titre court et simple afin que les lecteurs comprennent immédiatement ce que le groupe contient.
2. Gardez la liste de balises ciblée et intentionnelle, surtout si vous prévoyez d’empiler plusieurs groupes.
3. Utilisez le paramètre ouvert par défaut du bloc avec discernement afin que la zone de filtre ne paraisse pas encombrée.

Pour des détails propres au bloc, consultez le bloc Groupe de filtre.

Paramètres standard de section

Paramètres d’en-tête

Paramètres d’en-tête vous permettent de présenter l’archive avec une icône facultative, une légende, un en-tête, un texte d’accompagnement et un bouton. Cela est utile pour donner du contexte à la page du blog, améliorer sa structure et orienter les lecteurs vers une destination mise en avant.

Gardez l’en-tête clair et descriptif. Utilisez le bouton uniquement lorsqu’il soutient l’archive, par exemple en renvoyant vers un article mis en avant, une page associée ou une destination d’inscription à la newsletter.

Paramètres de carte

Paramètres de carte contrôlent la manière dont chaque article apparaît dans la grille, y compris le traitement de l’image, la visibilité du texte, l’alignement, les légendes et le style du bouton de carte. Ces paramètres remplacent uniquement les valeurs par défaut plus générales des cartes pour cette section.

Choisissez un style de carte en fonction du caractère axé sur l’image ou sur le texte de votre blog. L’affichage du titre et de l’extrait favorise généralement le mieux la découverte, tandis que des mises en page plus compactes, limitées au titre, fonctionnent bien lorsque les titres des articles font déjà l’essentiel du travail.

Paramètres d’espacement

Paramètres d’espacement contrôlent l’espace au-dessus et au-dessous de la section. Utilisez-les pour séparer l’archive des sections voisines ou resserrer la page lorsque la grille du blog dispose déjà de suffisamment d’espace.

Si vous ajoutez un en-tête plus grand ou un traitement d’arrière-plan marqué, un peu plus d’espacement peut aider la section à paraître intentionnelle. Sur mobile, un espacement légèrement réduit facilite souvent la lecture de la page.

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

Paramètres d’arrière-plan de section vous permettent d’ajouter une couleur, un dégradé, une image ou une vidéo derrière l’archive. Cela peut aider la section à se démarquer, mais affecte aussi la lisibilité et la perception de l’espacement.

Utilisez des superpositions pour maintenir le contraste des en-têtes et des cartes. Si vous définissez un média mobile distinct, vérifiez que le recadrage et la zone focale soutiennent toujours bien le contenu.

Attention

Un média d’arrière-plan trop marqué peut rendre une archive de blog chargée plus difficile à parcourir. Si la lisibilité baisse, simplifiez l’arrière-plan ou augmentez le contraste de la superposition avant de modifier le contenu des cartes.

Paramètres de séparateur

Paramètres de séparateur ajoutent une ligne en haut ou en bas de la section. Ils sont utiles lorsque vous souhaitez une limite visuelle plus nette sans ajouter beaucoup d’espace supplémentaire.

Utilisez des séparateurs lorsque les sections voisines ont des arrière-plans similaires ou une densité de cartes similaire. Si l’archive se distingue déjà clairement, vous n’en avez peut-être pas besoin.

Paramètres de largeur

Paramètres de largeur contrôlent la largeur maximale du contenu de l’archive et la largeur du conteneur de section. Ces paramètres sont particulièrement utiles pour équilibrer la lisibilité, la densité des cartes et la présentation de l’arrière-plan.

Une largeur de contenu plus étroite peut rendre les extraits plus faciles à lire, tandis qu’un réglage plus large peut accueillir davantage de cartes confortablement sur les grands écrans. Lorsque vous ajustez la largeur de la section pour des traitements d’arrière-plan, prévisualisez la page en direct ainsi que l’éditeur. Pour les contrôles de l’éditeur, consultez documentation Shopify sur l’éditeur de thème

Notes d’utilisation

1. Faites correspondre la grille au contenu. Utilisez moins de colonnes lorsque les images et les extraits sont importants, et des mises en page plus denses lorsque les lecteurs parcourent surtout par titre.
2. Utilisez les filtres de manière intentionnelle. N’activez le filtrage que lorsque vos balises sont cohérentes, reconnaissables et pertinentes pour la navigation.
3. Gardez les cartes faciles à parcourir. Affichez uniquement le texte, les légendes et le style de bouton qui aident les lecteurs à choisir rapidement un article.
4. Vérifiez séparément sur mobile. Examinez la taille de la grille, le comportement des filtres, l’emplacement des boutons et le média d’arrière-plan sur les petits écrans avant de publier.
5. Prévisualisez la largeur réelle de la page. Revérifiez l’espacement, les contrôles collants et la largeur du contenu sur la page en direct afin que l’archive reste équilibrée dans des conditions de navigation réelles.
6. Testez le contenu des blocs avec la section. Les blocs ajoutés peuvent modifier la mise en page et l’accent de l’archive ; confirmez donc le résultat final après les avoir ajoutés ou réorganisés.
7. Laissez le style de secours intact lorsque c’est nécessaire. Des couleurs vides ou de style par défaut préservent généralement l’apparence existante de la section, tandis que des remplacements plus marqués et des médias distincts rendent la zone plus indépendante.