Vidéo avec texte

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation de Company XYZ sur le bloc Rich text
3. Documentation de Company XYZ sur le bloc Video
4. Documentation de Company XYZ sur les paramètres d’en-tête
5. Documentation de Company XYZ sur les paramètres d’espacement de section
6. Documentation de Company XYZ sur les paramètres d’arrière-plan de section
7. Documentation de Company XYZ sur les paramètres de séparateur
8. Documentation de Company XYZ sur les paramètres de visibilité
9. Documentation de 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 cette section pour associer une vidéo à du texte d’accompagnement dans une mise en page épurée en deux parties. Elle fonctionne particulièrement bien pour les explications de produit, les récits de marque, les tutoriels et le contenu de campagne, lorsque la vidéo a besoin de contexte, d’un titre et d’une prochaine étape claire. Pour un aperçu plus large de l’organisation du contenu du thème, consultez documentation Shopify sur les sections et les blocs

Paramètres de base

Ces paramètres contrôlent la relation globale entre la vidéo et les blocs de texte. Vous pouvez également modifier l’ordre des blocs pour décider de quel côté apparaît en premier.

1. Alignement du contenu détermine comment les deux côtés s’alignent verticalement lorsqu’ils sont affichés côte à côte. Un alignement en haut convient au contenu éditorial, un alignement au milieu paraît plus équilibré, et un alignement en bas peut aider les deux côtés à se terminer sur une ligne visuelle similaire.
2. Activer le contenu fixe maintient le côté le plus court figé près du haut pendant que les visiteurs font défiler le côté le plus long. C’est particulièrement utile lorsqu’un bloc est beaucoup plus long que l’autre.
3. Empiler sur mobile passe la section en une seule colonne sur les petits écrans. Utilisez cette option lorsque le contenu côte à côte paraît serré ou lorsque la vidéo a besoin de plus d’espace.
4. Empiler sur ordinateur transforme également la mise en page en une séquence verticale sur les grands écrans. Cela fonctionne mieux lorsque la lecture du contenu est plus naturelle élément par élément qu’en deux colonnes.

Le contenu fixe fonctionne uniquement sur ordinateur et ne s’applique pas lorsque les mises en page empilées sont actives.

Paramètres de couleur

Ces contrôles de couleur au niveau de la section vous permettent de remplacer le style de texte par défaut pour cette section. Ils sont utiles lorsque la section utilise un arrière-plan personnalisé ou lorsque vous avez besoin d’un contraste plus marqué autour du média.

Utilisez ces paramètres avec précaution si votre vidéo ou l’arrière-plan de la section est déjà visuellement chargé. De petits changements de couleur peuvent améliorer la lisibilité plus efficacement que l’ajout de styles supplémentaires.

Types de blocs pris en charge

1. Rich text
2. Video

Bloc Rich text

Le bloc Rich text fournit la partie texte de la mise en page, y compris le titre, le texte principal, l’icône et un bouton facultatif. Voir Texte riche.

1. Utilisez-le pour l’explication principale, l’histoire d’accompagnement ou l’appel à l’action qui donne du contexte à la vidéo.
2. Gardez le message ciblé si la vidéo assure l’essentiel du travail visuel.
3. Ce bloc comprend également ses propres contrôles d’arrière-plan, de couleur et de visibilité, ce qui peut aider la partie texte à ressembler davantage à un panneau de contenu encadré.

Bloc Video

Le bloc Video affiche une vidéo hébergée ou un lien Vimeo ou YouTube, avec des contrôles pour le format, la lecture, la largeur, les sous-titres, le style de l’overlay et l’alignement. Voir documentation Company XYZ sur le bloc Video.

1. Utilisez une image d’aperçu si nécessaire afin que la section soit soignée avant le début de la lecture.
2. Choisissez des formats séparément pour les grands et les petits écrans si le cadrage par défaut paraît inadapté.
3. Définissez une largeur maximale lorsque la section globale est large mais que la vidéo doit rester visuellement contenue.

Si l’overlay vidéo est défini sur Always show, les contrôles du lecteur vidéo sont désactivés même si les contrôles sont activés ailleurs.

Paramètres standard de section

Paramètres d’en-tête

Utilisez Paramètres d’en-tête pour ajouter une introduction facultative au-dessus du contenu côte à côte. Cette zone est utile pour un titre de section, du texte d’accompagnement et un bouton lorsque la vidéo a besoin de plus de préparation ou d’un appel à l’action plus fort.

Paramètres d’espacement

Utilisez Paramètres d’espacement pour contrôler l’espace au-dessus et au-dessous de la section. Réduisez l’espacement lorsque cette section doit sembler étroitement liée au contenu voisin, ou ajoutez davantage d’espacement lorsque la vidéo a besoin d’une séparation visuelle plus marquée.

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

Utilisez Paramètres d’arrière-plan de section pour ajouter une couleur, un dégradé, une image ou une vidéo derrière l’ensemble de la section. Les arrière-plans peuvent renforcer l’ambiance de la section, mais ils peuvent aussi entrer en concurrence avec la vidéo et le texte s’ils sont trop utilisés.

Attention

Si la section contient déjà une vidéo visuellement riche, une image ou une vidéo d’arrière-plan forte peut donner une impression d’encombrement et réduire la clarté du texte.

Paramètres de séparateur

Utilisez Paramètres de séparateur pour ajouter une ligne au-dessus ou au-dessous de la section. Cela peut aider à distinguer la section du contenu voisin lorsque la page utilise des mises en page similaires à la suite.

Paramètres de visibilité

Utilisez Paramètres de visibilité pour afficher ou masquer la section selon la taille de l’appareil. C’est utile lorsque vous voulez un flux de contenu différent sur mobile et sur ordinateur.

Paramètres de largeur

Utilisez Paramètres de largeur pour contrôler à la fois l’enveloppe de la section et la largeur du contenu interne. Des paramètres plus larges donnent davantage de présence à la vidéo, tandis que des largeurs de contenu plus étroites peuvent rendre la partie texte plus facile à lire.

Notes d’utilisation

1. Commencez par une priorité. Décidez si la vidéo ou le texte est l’élément principal, puis laissez l’autre côté en soutien afin que la section ne paraisse pas surchargée.
2. Vérifiez les deux formats d’affichage. Les contrôles pour ordinateur et mobile peuvent modifier l’alignement, la visibilité et le comportement du média, alors vérifiez les deux tailles avant de publier.
3. Utilisez le contenu des blocs de façon intentionnelle. L’ajout de blocs peut modifier sensiblement la section, alors assurez-vous que les nouveaux blocs vidéo ou texte soutiennent toujours le message d’origine.
4. Gardez des paramètres simples par défaut. Un style vide ou transparent préserve généralement l’apparence de repli, tandis que des couleurs fortes, des dégradés ou des remplacements de média rendent la section plus autonome.
5. Vérifiez le cadrage des médias. Les médias séparés pour ordinateur et mobile peuvent être rognés et s’afficher différemment, alors confirmez que les deux versions restent claires et lisibles.
6. Testez les mises en page fixes dans leur contexte. Le contenu fixe fonctionne mieux lorsqu’un côté est clairement plus court et que la mise en page sur ordinateur reste non empilée.