Réussi
Grille de logos
Créez une grille de logos réactive pour des signaux de confiance, des marques partenaires ou une navigation visuelle.
- Documentation Shopify sur les sections et les blocs
- Documentation de Company XYZ sur le bloc de bouton
- Documentation de Company XYZ sur le bloc d’élément de logo
- Documentation de Company XYZ sur le bloc de texte enrichi
- Documentation de Company XYZ sur les paramètres d’en-tête
- Documentation de Company XYZ sur les paramètres d’espacement de section
- Documentation de Company XYZ sur les paramètres d’arrière-plan de section
- Documentation de Company XYZ sur les paramètres de séparateur
- Documentation de Company XYZ sur les paramètres de visibilité
- Documentation de Company XYZ sur les paramètres de largeur de mise en page
Affichez une grille claire de logos, de badges ou de vignettes image liées. Cette section convient particulièrement aux marques partenaires, aux signaux de confiance, aux revendeurs, aux certifications ou à une navigation simple basée sur des images lorsque les mises en page riches en texte semblent trop chargées. Pour un aperçu plus large de la façon dont cela s’intègre dans un thème, consultez la documentation Shopify sur les sections et les blocs
Paramètres principaux
Section intitulée « Paramètres principaux »Les principaux contrôles de mise en page déterminent à quel point la grille de logos paraît dense ou aérée. Utilisez l’alignement horizontal pour positionner la grille dans la zone de contenu, puis ajustez le nombre de colonnes sur ordinateur, tablette et mobile afin que les logos restent reconnaissables sur toutes les tailles d’écran.
La tablette peut reprendre le nombre de colonnes de l’ordinateur lorsque vous n’avez pas besoin d’une mise en page intermédiaire distincte. Cela simplifie la configuration et fonctionne généralement bien lorsque la plupart des logos ont des proportions similaires.
Si les logos commencent à paraître trop petits, réduisez le nombre de colonnes avant d’augmenter la largeur individuelle des logos. Une grille plus lisible fonctionne généralement mieux qu’une grille plus dense.
Groupes de paramètres spécifiques à la section
Section intitulée « Groupes de paramètres spécifiques à la section »Paramètres de couleur
Section intitulée « Paramètres de couleur »Ces remplacements stylisent la zone d’en-tête de la section, y compris l’icône, le titre et le sous-titre. Utilisez-les lorsque cette grille de logos a besoin de son propre traitement visuel sans modifier le reste de la page.
Si les logos eux-mêmes sont colorés, gardez des couleurs d’en-tête simples afin que la section ne paraisse pas surchargée. Lorsqu’ils sont combinés à un arrière-plan personnalisé, vérifiez soigneusement le contraste.
Types de blocs pris en charge
Section intitulée « Types de blocs pris en charge »- Button
- Logo item
- Rich text
Le bloc Button ajoute un appel à l’action distinct au sein de la section. Cela fonctionne bien lorsque les logos renvoient vers une destination plus large, comme une page complète de partenaires, une page média ou une page d’informations sur la vente en gros.
En savoir plus sur le Bouton.
- Utilisez un bloc Button lorsque la section a besoin d’une prochaine étape claire au-delà des liens individuels des logos.
- Gardez un objectif distinct pour le bouton si les logos eux-mêmes sont également cliquables.
- L’affichage mobile en pleine largeur peut rendre l’action plus facile à toucher vers la fin d’une page.
Élément de logo
Section intitulée « Élément de logo »Le bloc Logo item est le principal bloc de contenu de cette section. Chacun peut inclure une image, une légende ou du texte facultatif, ainsi qu’un lien facultatif, afin de fonctionner soit comme un simple mur de logos, soit comme un élément de navigation visuelle.
En savoir plus sur le Élément de logo.
- Utilisez des images sources de taille similaire pour obtenir une grille globale plus soignée.
- Ajustez la largeur maximale de l’image par bloc pour corriger les logos qui paraissent visuellement trop grands ou trop petits.
- Ajoutez des légendes uniquement lorsqu’elles apportent un contexte utile, comme le type de partenaire ou la destination.
Texte riche
Section intitulée « Texte riche »Le bloc Rich text ajoute un bref texte d’accompagnement dans la section. Utilisez-le pour un contexte court, par exemple pour expliquer pourquoi ces logos comptent ou ce que les visiteurs peuvent attendre si les logos servent de navigation.
En savoir plus sur le Texte riche.
- Gardez le texte court afin que la section reste principalement perçue comme une grille de logos.
- Utilisez un alignement distinct sur ordinateur et sur mobile si le texte nécessite un positionnement différent sur les petits écrans.
- La couleur d’arrière-plan du bloc peut aider le texte d’accompagnement à se démarquer, mais utilisez-la avec parcimonie.
Paramètres standard de section
Section intitulée « Paramètres standard de section »Paramètres d’en-tête
Section intitulée « Paramètres d’en-tête »Paramètres d’en-tête vous permettent d’ajouter une légende, un titre, un sous-titre, une icône et un bouton facultatif au niveau de la section au-dessus de la grille de logos. C’est utile lorsque les logos ont besoin de contexte, comme des marques mises en avant, des certifications ou des mentions dans les médias.
Un titre court améliore souvent la clarté et la lecture rapide. Si vous ajoutez aussi des blocs Button, assurez-vous que chaque action serve un objectif différent.
Paramètres d’espacement
Section intitulée « Paramètres d’espacement »Paramètres d’espacement contrôlent l’espace au-dessus et en dessous de la section. Augmentez l’espacement lorsque la liste de logos doit paraître plus mise en avant, ou réduisez-le lorsqu’elle se situe entre plusieurs sections de contenu compactes.
L’espacement mobile nécessite souvent un ajustement séparé, car les lignes empilées peuvent donner l’impression que la section est plus haute que prévu.
Paramètres d’arrière-plan de section
Section intitulée « 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 la section. Cela peut créer un moment de marque plus fort, mais des arrière-plans chargés peuvent entrer en concurrence avec les logos.
Paramètres de séparateur
Section intitulée « Paramètres de séparateur »Paramètres de séparateur ajoutent une ligne au-dessus ou au-dessous de la section. Ils sont particulièrement utiles lorsque la liste de logos a besoin d’une séparation visuelle plus nette du contenu environnant.
Pour la plupart des sections de logos, des séparateurs discrets fonctionnent mieux que des séparateurs décoratifs.
Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Paramètres de visibilité contrôlent si la section apparaît sur ordinateur, mobile ou les deux. C’est utile lorsque vous souhaitez une présentation mobile plus simple ou une section différente ailleurs pour les petits écrans.
Les contrôles de visibilité au niveau du bloc peuvent aussi vous aider à réduire le contenu d’accompagnement sans masquer toute la section.
Paramètres de largeur
Section intitulée « Paramètres de largeur »Paramètres de largeur contrôlent la largeur du contenu et la largeur externe de la section. Des mises en page plus larges peuvent prendre en charge des grilles multi-colonnes de logos plus équilibrées, tandis que des mises en page plus étroites peuvent donner l’impression qu’un plus petit ensemble de logos est plus intentionnel.
L’éditeur peut ne pas refléter pleinement les changements de largeur, alors vérifiez l’aperçu de la page en direct lors du réglage fin de la mise en page.
Conseils d’utilisation
Section intitulée « Conseils d’utilisation »- Priorisez la reconnaissance. Choisissez des nombres de colonnes qui permettent d’identifier facilement les logos en un coup d’œil.
- Harmonisez la taille visuelle. Utilisez des ajustements de largeur par logo pour équilibrer des marques aux proportions très différentes.
- Liez avec intention. Si les logos servent de navigation, assurez-vous que chaque destination est claire et utile.
- Ajoutez du contexte si nécessaire. Utilisez l’en-tête ou un court bloc Rich text pour expliquer pourquoi ces logos sont regroupés.
- Prévisualisez sur plusieurs appareils. Vérifiez les mises en page sur ordinateur, tablette et mobile avant de publier, surtout lorsque vous mélangez logos, texte ou boutons.
- Vérifiez séparément sur mobile. Les contrôles pour ordinateur et mobile peuvent modifier l’alignement, la visibilité et le comportement des images ; confirmez donc les deux vues avant de publier.
- Gardez les visuels forts lisibles. Les fichiers transparents, les arrière-plans personnalisés ou des médias distincts pour ordinateur et mobile peuvent modifier le contraste et le cadrage ; testez donc la combinaison finale pour en vérifier la lisibilité.
- Utilisez un style simple pour les zones partagées. Conservez les couleurs et les arrière-plans par défaut lorsque vous souhaitez que la grille se fonde dans l’ensemble ; utilisez des remplacements explicites uniquement lorsque vous voulez que cette section se démarque.