Image avec du texte

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation Shopify sur la personnalisation des sections
3. Documentation Company XYZ sur le bloc Image
4. Documentation Company XYZ sur le bloc Rich text
5. Documentation Company XYZ sur les paramètres d’en-tête
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 visibilité
10. Documentation Company XYZ sur les paramètres de largeur de mise en page
11. Documentation Shopify sur l’éditeur de thème

Vidéos utiles

Vidéo de Shopify Academy : personnaliser votre boutique

Vidéo de Shopify Academy : personnaliser votre boutique

Utilisez cette section pour combiner une image et du contenu écrit dans une mise en page propre en deux parties. Vous pouvez réorganiser les blocs pour modifier le côté qui apparaît en premier, puis ajuster l’alignement, l’empilement, l’espacement et le style de couleur afin de convenir à différents types de contenu et tailles d’écran. Pour un aperçu plus large de la façon dont cela s’intègre dans la mise en page de votre boutique, consultez la documentation Shopify sur les sections et les blocs

Paramètres de base

Ces paramètres définissent la manière dont les deux côtés se comportent en tant que mise en page avant que vous ne stylisiez les blocs individuels.

1. L’alignement du contenu contrôle l’alignement vertical de l’image et du texte. L’alignement en haut fonctionne généralement mieux pour les textes plus longs, tandis que l’alignement au milieu convient mieux aux contenus promotionnels plus courts.
2. Contenu sticky garde le côté le plus court visible pendant le défilement sur ordinateur de bureau. C’est particulièrement utile lorsqu’un côté est beaucoup plus haut que l’autre, par exemple une longue zone de texte à côté d’une seule image.
3. Empiler sur mobile transforme la mise en page en une seule colonne sur les écrans plus petits. Utilisez cette option lorsque le contenu côte à côte semble à l’étroit ou lorsque vous souhaitez une séquence de lecture plus claire.
4. Empiler sur ordinateur de bureau crée également une mise en page verticale sur les écrans plus grands. Cela peut bien fonctionner pour des présentations plus éditoriales ou lorsque l’image doit se placer clairement au-dessus ou au-dessous du texte.

Le contenu sticky est réservé à l’ordinateur de bureau et ne s’applique pas lorsque l’empilement est activé. Si vous souhaitez l’effet sticky, conservez la section côte à côte sur ordinateur de bureau.

Paramètres spécifiques à la section

Paramètres de couleur

Ces remplacements de couleur permettent à cette section d’utiliser son propre traitement du texte au lieu de dépendre entièrement des couleurs globales du thème. Ils sont particulièrement utiles lorsque l’image, l’arrière-plan ou le ton du contenu nécessitent un contraste plus marqué ou une présentation plus personnalisée.

1. Ajustez ensemble les couleurs de l’icône, du texte et du sous-titre afin que la section conserve une cohérence visuelle.
2. Vérifiez la lisibilité après avoir modifié les couleurs, surtout si vous utilisez également des superpositions ou une image d’arrière-plan.
3. Utilisez les remplacements de façon sélective sur la page afin que cette section se distingue pour une raison précise, et pas seulement parce qu’elle est stylisée différemment.

Types de blocs pris en charge

1. Image
2. Rich text

Cette section prend en charge jusqu’à 4 blocs, mais elle est généralement plus efficace lorsqu’elle est utilisée comme une simple mise en page en deux parties, avec un bloc visuel et un bloc de texte. Pour les bases de l’édition, consultez la documentation Shopify sur la personnalisation des sections

Bloc Image

Le bloc Image fournit la partie visuelle de la mise en page, avec des commandes pour la forme de l’image, la taille, le ratio d’aspect, les légendes, les superpositions et la visibilité. Consultez la documentation Company XYZ sur le bloc Image.

1. Utilisez ensemble la largeur maximale de l’image et le ratio d’aspect pour contrôler le degré de mise en avant de l’image.
2. Ajoutez une légende uniquement lorsqu’elle apporte un contexte utile, comme une étiquette, une note d’accompagnement ou un crédit.
3. Utilisez les paramètres de superposition avec parcimonie si l’image doit rester nette et détaillée.

Bloc Rich text

Le bloc Rich text fournit la partie écrite de la mise en page, notamment les titres, le corps du texte, les icônes, un bouton et un style d’arrière-plan facultatif au niveau du bloc. Consultez la Texte riche.

1. Utilisez ce bloc pour le message principal, les détails d’accompagnement et une prochaine étape claire.
2. Si vous ajoutez un arrière-plan de bloc, assurez-vous qu’il soutient l’image plutôt que d’entrer en concurrence avec elle.
3. Conservez un style de bouton cohérent avec l’importance de l’action afin que la mise en page ne paraisse pas trop chargée.

Paramètres standard de section

Paramètres d’en-tête

Paramètres d’en-tête ajoutent une introduction facultative au-dessus de la mise en page principale. Utilisez-les lorsque l’image et le texte ont besoin d’un titre, d’une légende, d’une icône ou d’une action au niveau de la section avant que le contenu des blocs ne commence.

Paramètres d’espacement

Paramètres d’espacement contrôlent l’espace au-dessus et au-dessous de la section. Un espacement plus important aide les mises en page centrées sur l’image à respirer, tandis qu’un espacement plus serré fonctionne mieux lorsque cette section s’insère dans une série de blocs de contenu connexes.

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 toute la section. Ces paramètres peuvent créer une ambiance visuelle plus forte, mais ils peuvent aussi affecter le contraste et l’impression d’espace de la mise en page.

Attention

Si vous avez déjà une image forte dans la section, une image ou une vidéo d’arrière-plan marquée peut donner à la mise en page un aspect trop chargé. Simplifiez l’arrière-plan ou le média au premier plan si le contenu devient plus difficile à parcourir.

Paramètres de séparateur

Paramètres de séparateur ajoutent une ligne en haut ou en bas de la section. Utilisez-les pour créer des limites plus nettes lorsque cette mise en page apparaît entre des zones de contenu similaires.

Paramètres de visibilité

Paramètres de visibilité contrôlent si la section apparaît sur ordinateur de bureau, sur mobile ou sur les deux. C’est particulièrement utile lorsque vous souhaitez une présentation dédiée au mobile plutôt que de vous appuyer sur une seule mise en page partout.

Paramètres de largeur

Paramètres de largeur contrôlent à la fois la largeur du contenu interne et la largeur externe de la section. Des largeurs plus étroites facilitent la lecture du texte, tandis que des réglages plus larges donnent aux mises en page centrées sur l’image un rendu plus immersif.

L’aperçu de l’éditeur peut limiter la clarté avec laquelle les changements de largeur apparaissent, alors vérifiez les principales mises à jour de largeur sur la page en ligne avant de les finaliser. Pour plus de détails sur l’interface d’édition, consultez la documentation Shopify sur l’éditeur de thème

Notes d’utilisation

1. Commencez par l’ordre des blocs. Placez l’image ou le texte en premier selon l’élément qui doit porter l’histoire ou la promotion.
2. Utilisez le contenu sticky avec des mises en page inégales. Il est le plus efficace lorsqu’un côté est nettement plus court que l’autre sur ordinateur de bureau.
3. Gardez une hiérarchie visuelle claire. Si vous utilisez ensemble des superpositions, des couleurs de texte personnalisées et des arrière-plans, réduisez l’un d’eux pour préserver la lisibilité.
4. Adaptez la largeur de la mise en page au contenu. Utilisez des largeurs plus étroites pour les récits riches en texte et des mises en page plus larges pour les sections centrées sur l’image.
5. Vérifiez les mises en page empilées sur mobile. Assurez-vous que l’ordre de lecture, le recadrage de l’image et l’emplacement du bouton restent intentionnels sur les petits écrans.
6. Examinez les deux tailles de zone d’affichage. Les commandes pour ordinateur de bureau et mobile peuvent produire des différences d’alignement, de visibilité et de comportement des médias, donc testez la section sur les deux.
7. Considérez les blocs supplémentaires comme un changement de conception. L’ajout de davantage de blocs peut modifier suffisamment l’équilibre de la section pour que la mise en page simple en deux parties ne semble plus être l’élément principal.
8. Choisissez les médias en tenant compte du recadrage. Des médias distincts pour ordinateur de bureau et mobile peuvent améliorer l’adaptation, mais aussi modifier le cadrage, le chargement et la lisibilité.
9. Gardez les états de formulaire lisibles. Si vous utilisez du contenu qui dépend de la saisie du client, assurez-vous que les états vide, d’erreur et de réussite restent faciles à lire.
10. Vérifiez le contenu sticky dans son contexte. Examinez-le avec les sections voisines et sur chaque taille d’écran afin qu’il ne masque pas ou n’encombre pas le contenu important pendant le défilement.