Texte riche

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation Company XYZ sur les icônes
3. Documentation Company XYZ sur les paramètres de couleurs
4. Documentation Company XYZ sur le bloc Button
5. Documentation Company XYZ sur les paramètres d’espacement de section
6. Documentation Company XYZ sur les paramètres d’arrière-plan de section
7. Documentation Company XYZ sur les paramètres de séparateur
8. Documentation Company XYZ sur les paramètres de visibilité
9. Documentation Company XYZ sur les paramètres de largeur de mise en page

Vidéos utiles

Vidéo Shopify Academy : personnaliser votre boutique

Vidéo Shopify Academy : personnaliser votre boutique

Utilisez Rich text pour ajouter une zone de contenu simple centrée sur le texte, avec des icônes facultatives, un texte d’accompagnement et des appels à l’action. Pour un aperçu plus large de la manière dont les sections sont construites et organisées dans un thème, consultez la documentation Shopify sur les sections et les blocs. Ce format convient bien aux introductions, aux promotions, aux messages de marque, aux points forts des politiques ou à tout bloc de contenu court qui nécessite un meilleur contrôle de la présentation.

Paramètres de contenu

C’est ici que vous construisez le message principal de la section. Vous pouvez combiner une légende, une en-tête, du contenu en texte riche et une icône facultative pour créer aussi bien une annonce compacte qu’un bloc de contenu plus éditorial.

L’alignement du texte définit la direction de lecture générale de la section ; c’est donc généralement le premier choix de mise en page à faire. Le type d’en-tête aide la section à s’intégrer plus naturellement à la structure de la page, que vous souhaitiez que le titre ressemble à une en-tête principale ou à un libellé plus discret.

Le champ d’icône accepte soit un emoji soit un nom d’icône. Les positions en haut et en bas conviennent bien aux mises en page empilées et centrées, tandis que les positions à gauche et à droite paraissent souvent plus épurées pour les textes plus courts ou les contenus orientés action. Pour obtenir de l’aide sur les icônes, consultez le guide des icônes.

Le champ de texte riche prend en charge les liens et la mise en forme de base, ce qui le rend utile pour les textes explicatifs ou promotionnels courts. Si vous ajoutez aussi un bouton, gardez un texte concis afin que l’appel à l’action reste clair.

Bouton au niveau de la section

Vous pouvez ajouter un bouton intégré directement dans la section pour une action principale liée au message principal. C’est l’option la plus simple lorsque vous n’avez besoin que d’un seul appel à l’action.

Le style du bouton contrôle l’emphase, tandis que la mise en page du bouton contrôle la façon dont l’icône et le libellé apparaissent ensemble. Les styles remplis conviennent généralement mieux aux actions principales, les styles plus légers fonctionnent mieux pour les actions secondaires, et les mises en page avec icône seule sont à réserver aux actions très évidentes.

Ces paramètres de bouton s’appliquent uniquement au bouton intégré de la section. Ils n’affectent pas les blocs Button ajoutés.

Un bouton mobile pleine largeur peut améliorer la facilité de clic et rendre l’action plus visible sur les petits écrans. C’est particulièrement utile pour les sections promotionnelles où le bouton doit être facile à repérer et à utiliser.

Paramètres de couleur

Ces paramètres remplacent uniquement pour cette section les couleurs habituelles du thème. Ils sont utiles lorsque vous souhaitez que le contenu paraisse plus marqué par la marque, plus promotionnel ou plus distinct des sections environnantes. Pour un comportement de couleur plus large, consultez la référence des paramètres de couleur.

Vous pouvez ajuster séparément les couleurs des bordures, des icônes, des en-têtes, du texte de légende et du corps du texte. Lorsque vous associez des couleurs de texte personnalisées à un arrière-plan personnalisé, vérifiez soigneusement la lisibilité afin que la section reste claire et équilibrée.

Astuce

Si vous appliquez à la fois des couleurs de texte personnalisées et un média d’arrière-plan, vérifiez la section sur mobile comme sur ordinateur pour vous assurer que le contraste reste suffisant.

Types de blocs pris en charge

1. Button

Bouton

Utilisez les blocs Button lorsque vous avez besoin d’appels à l’action supplémentaires en plus du bouton intégré de la section. Cela fonctionne bien pour des actions jumelées, comme un parcours d’achat principal et un lien d’accompagnement plus discret. Consultez le Bouton pour les paramètres spécifiques au bloc.

Chaque bloc Button possède ses propres contrôles de texte, de lien, de style, d’icône et de visibilité. Cela facilite le mélange des niveaux d’emphase des boutons ou le masquage d’une action spécifique sur ordinateur ou sur mobile sans masquer toute la section.

Lorsque vous utilisez plusieurs boutons, gardez la hiérarchie claire. Une action doit généralement paraître principale, les actions d’accompagnement étant stylées de façon plus légère.

Paramètres standard de section

Paramètres d’espacement

Les paramètres d’espacement contrôlent l’espace au-dessus et au-dessous du contenu de la section sur ordinateur et sur mobile. Utilisez un espacement plus serré pour le contenu utilitaire et un espacement plus généreux lorsque la section doit paraître plus mise en avant ou plus facile à parcourir.

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

Les paramètres d’arrière-plan de section vous permettent de placer une couleur, un dégradé, une image ou une vidéo derrière le contenu. Cela peut transformer Rich text en une zone plus marquante ou en un bloc de message plus fortement marqué par la marque.

Les couleurs et dégradés de superposition sont particulièrement utiles lorsque le média d’arrière-plan risquerait sinon de concurrencer le texte. Les images ou vidéos d’arrière-plan spécifiques au mobile peuvent aussi vous aider à éviter des recadrages gênants sur les petits écrans.

Attention

Les médias d’arrière-plan peuvent modifier à la fois la lisibilité et la perception de l’espacement. Après avoir ajouté un arrière-plan, vérifiez ensemble le contraste, l’espacement et la largeur.

Paramètres de séparateur

Les paramètres de séparateur ajoutent une ligne en haut ou en bas de la section afin de créer une limite plus nette avec le contenu voisin. Ils sont surtout utiles lorsque le contenu est simple mais nécessite tout de même une séparation visuelle.

Si vous laissez la couleur du séparateur transparente, la section utilise le comportement habituel de couleur de bordure. Cela aide les séparateurs à mieux se fondre dans le reste de la page.

Paramètres de visibilité

Les paramètres de visibilité contrôlent si la section apparaît sur ordinateur, sur mobile ou sur les deux. C’est utile lorsque vous souhaitez un message plus simple, un espacement différent ou des appels à l’action différents sur les petits écrans.

Les blocs Button incluent aussi leur propre contrôle de visibilité, ce qui vous permet de masquer certaines actions sans masquer toute la section.

Paramètres de largeur

Les paramètres de largeur contrôlent la largeur du contenu et la largeur externe de la section. La largeur du contenu est le principal choix de largeur de lecture, tandis que la largeur de la section est surtout importante lorsque vous utilisez une couleur d’arrière-plan, une image, un dégradé ou une vidéo.

Des largeurs de contenu plus étroites améliorent généralement la lisibilité des textes plus longs. Des largeurs de section plus importantes peuvent créer un impact visuel plus fort, mais il est préférable de vérifier la page en ligne, car l’éditeur peut ne pas refléter entièrement la mise en page finale.

Notes d’utilisation

1. Gardez un message ciblé. Utilisez un en-tête clair, une idée de soutien et une action principale afin que la section soit facile à parcourir.
2. Faites correspondre l’emplacement de l’icône à la mise en page. Un placement en haut ou en bas convient au contenu éditorial centré, tandis qu’un placement à gauche ou à droite fonctionne généralement mieux pour des messages plus courts orientés action.
3. Utilisez clairement la hiérarchie des boutons. Si vous combinez le bouton de la section avec des blocs Button, faites d’une action la principale et stylisez les autres comme secondaires.
4. Préservez le contraste du texte. Revérifiez les en-têtes, les légendes et le corps du texte chaque fois que vous ajoutez des couleurs personnalisées, des dégradés, des images ou des arrière-plans vidéo.
5. Prévisualisez les changements de largeur dans la boutique en ligne. La largeur de lecture et la largeur de section peuvent donner une impression différente dans l’éditeur et sur la page en ligne.
6. Vérifiez les deux points de rupture. Les contrôles pour ordinateur et mobile peuvent modifier l’alignement, la visibilité, le choix du média et l’espacement de différentes manières.
7. Surveillez le style de repli. Les valeurs transparentes ou de style par défaut préservent généralement l’apparence du thème environnant, tandis que des choix explicites de couleur ou de média rendent la section plus indépendante.
8. Choisissez le média avec intention. Si vous définissez des médias différents pour ordinateur et mobile, vérifiez le recadrage et la lisibilité sur les deux tailles avant de publier.