Aller au contenu

Image

Ajoutez une image autonome avec des contrôles flexibles de taille, de recadrage, de légende, d’overlay et de mise en page mobile.

Utilisez ce bloc pour ajouter une image autonome avec des contrôles d’affichage flexibles. Vous pouvez ajuster sa forme, sa largeur, son comportement de recadrage, sa légende, son traitement en overlay, son alignement et son comportement de lien pour l’adapter à la mise en page environnante. Pour une vue d’ensemble plus large de la façon dont cela s’intègre au contenu du thème, consultez la documentation Shopify sur les sections et les blocs

Ce groupe contrôle l’image elle-même et son apparence. Pour des conseils plus larges sur les contrôles liés aux images, consultez la référence des paramètres d’image.

Choisissez d’abord l’image, puis affinez son affichage. Le style d’image modifie la forme visuelle, tandis que la largeur maximale de l’image vous permet de contenir l’image ou de l’étendre sur l’espace disponible. Régler la largeur maximale de l’image sur 0 permet à l’image d’utiliser toute la largeur disponible.

Le ratio d’aspect est utile lorsque vous souhaitez une mise en page plus cohérente, surtout si plusieurs images apparaissent ensemble. Le ratio par défaut conserve les proportions naturelles de l’image, tandis que les ratios fixes créent une grille plus ordonnée, mais peuvent recadrer l’image visible.

Le ratio d’aspect mobile peut suivre le ratio principal ou utiliser son propre réglage. C’est utile lorsqu’un recadrage large sur ordinateur semble trop court ou trop serré sur les petits écrans.

Si vous ajoutez un lien, l’image devient cliquable. L’ouverture dans un nouvel onglet est surtout utile pour les destinations externes ou les téléchargements.

Les ratios d’aspect fixes peuvent recadrer les bords de l’image. Vérifiez à la fois sur ordinateur et sur mobile si l’image inclut des visages, des détails de produit ou du texte.

Utilisez la légende lorsque l’image a besoin d’une étiquette, d’une brève explication ou d’une ligne de crédit. Vous pouvez la placer au-dessus ou au-dessous de l’image, puis ajuster l’alignement et la taille du texte pour correspondre à son rôle.

Les légendes courtes fonctionnent généralement le mieux. Si la légende nécessite une emphase plus forte, augmentez la taille du texte, mais restez bref afin que l’image demeure le point focal.

Les paramètres d’overlay ajoutent une couleur unie ou un dégradé au-dessus de l’image. Cela peut aider à créer un style visuel plus marqué ou à améliorer le contraste de la légende sur une photographie chargée.

L’opacité contrôle l’intensité de l’effet de l’overlay sur l’image. Une opacité plus faible préserve davantage de détails de l’image, tandis qu’une opacité plus élevée crée un effet teinté plus marqué.

Ces paramètres contrôlent la façon dont le bloc se place dans l’espace disponible sur ordinateur et sur mobile. Ils sont surtout importants lorsque l’image ne remplit pas toute la largeur.

L’alignement centré est souvent le choix le plus sûr pour les images autonomes. Un alignement à gauche ou à droite peut bien fonctionner lorsque l’image fait partie d’une mise en page plus éditoriale ou qu’elle est associée à du contenu proche.

Ces contrôles vous permettent de remplacer les couleurs habituelles de ce bloc, y compris la couleur de la bordure et du texte. Utilisez-les lorsque cette image doit se démarquer de la mise en page environnante ou lorsque la légende a besoin d’un traitement de contraste plus clair. Consultez la référence des paramètres de couleur.

Utilisez les contrôles de visibilité pour afficher ou masquer ce bloc selon l’appareil. C’est utile lorsque vous souhaitez des traitements d’image distincts pour les mises en page sur ordinateur et sur mobile. Consultez la référence des paramètres de visibilité.

Les paramètres de l’éditeur vous aident à nommer clairement le bloc dans la barre latérale de l’éditeur. Un titre d’éditeur personnalisé est particulièrement utile lorsque vous avez plusieurs blocs d’image dans la même zone. Pour l’interface d’édition du bloc, consultez la documentation Shopify sur l’éditeur de thème

  1. Examinez séparément l’affichage sur ordinateur et sur mobile. La mise en page, l’alignement, la visibilité et le comportement des médias peuvent varier selon la zone d’affichage, alors vérifiez les deux vues avant de publier.
  2. Conservez le style de repli lorsque vous le pouvez. Des choix de couleur vides ou au style par défaut préservent généralement l’apparence environnante, tandis que des couleurs explicites, des dégradés ou des remplacements de média rendent le bloc plus indépendant.
  3. Considérez les médias distincts comme un choix délibéré. Des images différentes sur ordinateur et sur mobile peuvent améliorer l’adéquation, mais elles peuvent aussi modifier le recadrage, le chargement, le comportement de repli et la lisibilité.
  4. Surveillez le contenu important de l’image. Si l’image inclut des visages, des détails de produit ou du texte, vérifiez que le recadrage choisi conserve le sujet lisible sur les deux tailles d’écran.