Image

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation Company XYZ sur les paramètres d’en-tête
3. Documentation Company XYZ sur les paramètres d’espacement de section
4. Documentation Company XYZ sur les paramètres d’arrière-plan de section
5. Documentation Company XYZ sur les paramètres de séparateur
6. Documentation Company XYZ sur les paramètres de visibilité
7. 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 cette section pour mettre en valeur une image avec des options d’affichage flexibles et un contenu complémentaire facultatif. Pour obtenir une vue d’ensemble plus large du contenu de thème basé sur les sections, consultez la documentation Shopify sur les sections et les blocs. Elle convient parfaitement aux photographies éditoriales, aux bannières simples, aux encarts promotionnels et aux séparations visuelles liées entre d’autres sections.

Paramètres de l’image

Ces paramètres contrôlent l’image elle-même, notamment sa forme, sa largeur, son recadrage et son lien facultatif. Les choix les plus importants sont généralement la largeur et le rapport hauteur/largeur, car ils influencent le plus la place visuelle de l’image dans la mise en page.

Utilisez le paramètre de largeur maximale de l’image pour déterminer si l’image doit produire une impression immersive ou rester contenue. Une image pleine largeur crée davantage d’impact, tandis qu’une largeur limitée paraît souvent plus nette et plus facile à associer au contenu environnant.

Les paramètres de rapport hauteur/largeur vous permettent de conserver une forme d’image cohérente, même lorsque les images sources varient. Choisissez le rapport naturel lorsque la composition est prioritaire, et utilisez un rapport fixe lorsque vous souhaitez une mise en page plus uniforme sur toute la page. Le rapport distinct pour mobile est particulièrement utile lorsqu’un recadrage pour ordinateur paraît trop large ou trop serré sur les petits écrans.

Le style d’image vous offre un traitement visuel rapide sans modifier le fichier lui-même. Les coins arrondis conviennent généralement aux mises en page éditoriales plus douces, tandis qu’un recadrage circulaire fonctionne mieux lorsque l’image importée est déjà proche du carré.

Les rapports hauteur/largeur forcés peuvent recadrer l’image. Vérifiez les affichages sur ordinateur et sur mobile afin que les éléments importants de l’image restent visibles.

Si vous ajoutez un lien, associez-le étroitement à l’image afin que la section paraisse intentionnelle plutôt que simplement décorative.

Paramètres de légende

Utilisez la zone de légende pour ajouter une courte note au-dessus ou au-dessous de l’image. Elle convient notamment aux crédits photo, à une brève description ou à un petit contexte complémentaire qui doit rester associé au média.

Les légendes supérieures aident à présenter l’image avant son affichage, tandis que les légendes inférieures conviennent généralement mieux aux crédits ou aux informations secondaires. Gardez le texte de la légende court afin qu’il accompagne l’image sans lui faire concurrence.

Paramètres de superposition

Les paramètres de superposition ajoutent une couleur unie ou un dégradé par-dessus l’image. Cette fonction est utile pour adoucir une image chargée, créer une ambiance ou améliorer le contraste lorsque l’image se trouve à proximité d’autres éléments visuels.

Une superposition subtile produit souvent le meilleur effet avec le moins d’impact visuel. Les superpositions marquées peuvent être efficaces pour des images dramatiques, mais elles peuvent également masquer des détails si elles sont trop accentuées.

Paramètres standard de section

Paramètres d’en-tête

Utilisez les paramètres d’en-tête partagés pour ajouter une légende, un titre, un sous-titre, une icône et un bouton facultatif au-dessus de la zone d’image. Dans cette section, l’en-tête est utile lorsque l’image a besoin de contexte ou lorsque vous souhaitez transformer la section en un simple encart visuel avec une action claire.

Associez étroitement le bouton à l’image ou au message du titre. Sur mobile, la position du bouton et son comportement pleine largeur peuvent rendre l’appel à l’action plus visible et plus facile à toucher.

Paramètres d’espacement

Utilisez les paramètres d’espacement partagés pour contrôler l’espace au-dessus et au-dessous de la section. Un espacement plus important permet à une image mise en avant de se démarquer, tandis qu’un espacement plus réduit l’intègre davantage au contenu voisin.

Il est souvent utile d’ajuster séparément l’espacement sur ordinateur et sur mobile, car les grandes images peuvent sembler équilibrées sur ordinateur, mais excessivement hautes sur les petits écrans.

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

Utilisez les paramètres d’arrière-plan de section partagés pour ajouter une couleur, des dégradés, des images ou une vidéo derrière la section. Cela peut aider à présenter l’image comme un bloc de contenu conçu plutôt que comme un élément isolé.

Les arrière-plans vierges ou transparents préservent généralement le style du thème environnant. Des couleurs d’arrière-plan, des dégradés ou des médias plus explicites donnent à la section un aspect plus autonome.

Si l’image principale est déjà très chargée visuellement, utilisez les effets d’arrière-plan avec modération afin que la section ne paraisse pas encombrée.

Paramètres de séparateur

Utilisez les paramètres de séparateur partagés pour placer une ligne en haut ou en bas de la section. Il s’agit d’un moyen simple de distinguer l’image du contenu environnant sans ajouter de poids visuel supplémentaire.

Les styles de séparateur subtils fonctionnent généralement mieux lorsque l’image constitue le principal point focal.

Paramètres de visibilité

Utilisez les paramètres de visibilité partagés pour afficher ou masquer la section selon l’appareil. Cette fonction est utile lorsque vous souhaitez un traitement d’image sur ordinateur et un recadrage différent ou une section de remplacement sur mobile.

La visibilité et les choix de médias spécifiques à chaque appareil peuvent modifier la mise en page, l’alignement et la lisibilité. Vérifiez donc les deux tailles d’écran avant de publier.

Masquez la section sur un appareil uniquement lorsqu’une autre section ou une autre option de mise en page remplit clairement mieux cette fonction.

Paramètres de largeur

Utilisez les paramètres de largeur partagés pour contrôler la largeur du contenu et celle de la section extérieure. Dans cette section, la largeur du contenu détermine la largeur d’affichage possible de l’image et du contenu d’en-tête, tandis que la largeur de la section est surtout importante lorsque vous ajoutez un arrière-plan ou souhaitez que le conteneur de la section s’étende davantage.

Une largeur plus étroite peut donner à la section un aspect plus éditorial, tandis que des paramètres plus larges créent une présentation plus immersive. Lorsque cela est possible, prévisualisez les modifications de largeur sur la page en ligne, car l’éditeur ne reflète pas toujours exactement la mise en page finale.

Notes d’utilisation

1. Préservez la composition. Vérifiez les recadrages sur ordinateur et sur mobile chaque fois que vous utilisez un rapport hauteur/largeur forcé.
2. Adaptez la largeur à l’objectif. Utilisez des largeurs plus importantes pour produire de l’impact et des largeurs plus réduites pour un rendu plus contenu et éditorial.
3. Gardez les légendes courtes. Les légendes brèves ajoutent du contexte sans détourner l’attention de l’image.
4. Utilisez les superpositions avec précaution. Ajoutez uniquement l’intensité nécessaire pour améliorer l’ambiance ou la clarté sans aplatir l’image.
5. Simplifiez les éléments concurrents. Si l’image, l’en-tête, le bouton et l’arrière-plan attirent tous l’attention, réduisez l’importance d’un ou deux éléments afin que la section ait un point focal clair.