Réussi
Texte riche
Créez un bloc de texte flexible avec une icône et un bouton facultatifs pour un message clair et soigné.
- Documentation de Company XYZ sur le bloc de texte enrichi
- Documentation de Company XYZ sur les icônes
- MDN Web Docs
- Documentation de Company XYZ sur les paramètres d’arrière-plan de section
- Documentation de Company XYZ sur l’utilisation de la vidéo
- Documentation de Company XYZ sur les paramètres de couleur
- Documentation de Company XYZ sur les paramètres de visibilité
- Documentation Shopify sur les sections et les blocs
- Documentation Shopify sur la personnalisation des thèmes
Utilisez ce bloc pour ajouter une zone de message compacte avec une icône facultative, un titre, du texte riche et un bouton. Il convient aux courts textes promotionnels, aux déclarations de marque, aux mises en avant de fonctionnalités et au contenu d’accompagnement entre des blocs plus visuels. Pour un résumé des fonctionnalités, consultez la référence Texte riche.
Paramètres de contenu
Section intitulée « Paramètres de contenu »Ces paramètres contrôlent le message lui-même et la manière dont il est présenté. Les configurations les plus claires utilisent une structure simple : légende facultative, titre, texte d’accompagnement et une seule action uniquement lorsque l’étape suivante est évidente.
L’alignement du texte et la position de l’icône influencent l’apparence du bloc dans la mise en page. Un contenu centré fonctionne bien pour de courts messages promotionnels, tandis qu’un contenu aligné à gauche est généralement plus facile à lire lorsque le texte est plus long.
Le champ d’icône accepte soit un emoji, soit un nom d’icône. Laissez-le vide si le message n’a pas besoin d’un repère visuel supplémentaire. Pour obtenir de l’aide sur les icônes, consultez icônes et la bibliothèque de noms d’icônes prise en charge.
Choisissez le type de titre en fonction du rôle du bloc dans la hiérarchie de la page, et pas seulement de la taille visuelle souhaitée. Un niveau de titre plus fort aide ce bloc à introduire une nouvelle zone de contenu, tandis qu’un niveau plus léger fonctionne mieux lorsqu’il prend en charge le contenu à proximité.
Le champ de texte riche prend en charge les liens et la mise en forme de base, ce qui vous permet d’ajouter de l’emphase sans donner l’impression que le bloc est surchargé. Conservez une mise en forme légère afin que le message reste facile à parcourir.
Les paramètres du bouton s’appliquent uniquement au bouton intégré de ce bloc. Utilisez-les pour une seule action claire, et choisissez un style qui correspond à l’importance de l’action. Les dispositions de bouton avec icône seule fonctionnent mieux lorsque le sens est déjà évident d’après le texte à proximité.
Ajoutez ensemble le texte du bouton et le lien du bouton. Un bouton sans libellé ni destination clairs est facile à manquer ou à mal interpréter.
Si la plupart des clics se produiront sur des écrans plus petits, l’option de bouton pleine largeur sur mobile peut rendre l’action plus facile à repérer et à toucher.
Paramètres standard de bloc
Section intitulée « Paramètres standard de bloc »Paramètres d’arrière-plan du bloc
Section intitulée « Paramètres d’arrière-plan du bloc »Utilisez ces paramètres pour donner au bloc sa propre surface visuelle avec une couleur, un dégradé, une image ou un arrière-plan vidéo. Cela peut aider le message à se démarquer, mais des arrière-plans plus marqués peuvent aussi modifier le poids visuel du bloc et l’espacement dans la mise en page. Consultez arrière-plans de section. Pour un aperçu associé de la structure Shopify, consultez la documentation Shopify sur les sections et les blocs
Les paramètres de dégradé remplacent les couleurs d’arrière-plan unies, et les dégradés de superposition remplacent les couleurs de superposition unies. Lorsque vous utilisez une image ou une vidéo en arrière-plan, les superpositions sont particulièrement utiles pour conserver la lisibilité du texte.
Les champs d’image et de vidéo d’arrière-plan mobile vous permettent de remplacer l’élément par défaut par un autre pour les écrans plus petits. Si ces champs sont laissés vides, le mobile utilise l’élément d’arrière-plan principal. Vérifiez les deux tailles de zone d’affichage si vous définissez des médias différents pour ordinateur et mobile, car le recadrage, le chargement et la lisibilité peuvent changer.
Pour des conseils de configuration vidéo, consultez utilisation de la vidéo.
Paramètres de couleur
Section intitulée « Paramètres de couleur »Ces paramètres remplacent les couleurs par défaut du thème pour ce bloc uniquement. Utilisez-les lorsque le bloc a besoin d’un contraste plus fort, d’un accent de marque ou d’une meilleure coordination avec un arrière-plan personnalisé. Consultez paramètres de couleur. Pour un aperçu plus large de la personnalisation du thème, consultez la documentation Shopify sur la personnalisation des thèmes
Ajustez ensemble le titre, le sous-titre et le corps du texte afin que le contenu reste perçu comme un seul système. Si vous stylisez aussi l’icône ou la bordure, gardez ces accents en soutien plutôt que plus visibles que le message lui-même.
Les valeurs vides, transparentes ou de style par défaut conservent généralement au bloc l’apparence de repli du thème, tandis que des couleurs explicites, des dégradés ou des remplacements de médias rendent le bloc plus autonome.
Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Utilisez les contrôles de visibilité pour afficher ou masquer ce bloc selon la taille de l’appareil. Cela est utile lorsque vous souhaitez une version plus courte pour mobile, une version plus aérée pour ordinateur ou une organisation de contenu différente selon les mises en page. Consultez paramètres de visibilité.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Gardez le message ciblé. Utilisez ce bloc pour une idée principale plutôt que d’empiler plusieurs messages concurrents dans un petit espace.
- Adaptez le titre à la structure de la page. Choisissez un type de titre qui correspond à la hiérarchie du contenu environnant, et pas seulement au style visuel.
- Utilisez les icônes avec parcimonie. Ajoutez un emoji ou une icône uniquement lorsqu’il renforce rapidement le message et n’entre pas en concurrence avec le titre.
- Limitez l’appel à l’action. Utilisez le bouton intégré pour une seule étape suivante claire, et envisagez un affichage pleine largeur sur mobile lorsque les tapotements sur petits écrans sont importants.
- Vérifiez le contraste sur chaque appareil. Lorsque vous utilisez des couleurs personnalisées, des dégradés ou des médias, vérifiez la lisibilité et la visibilité du bouton sur ordinateur et sur mobile.
- Examinez attentivement les médias distincts. Si vous définissez des arrière-plans différents pour ordinateur et mobile, confirmez le recadrage, le comportement de chargement et la lisibilité du texte sur chaque zone d’affichage.