Réussi
Vidéo
Ajoutez une section vidéo responsive avec des options flexibles de lecture, de légendes et de mise en page.
- Documentation Shopify sur les sections et les blocs
- Documentation Company XYZ sur les paramètres des vidéos
- Documentation Company XYZ sur les paramètres des en-têtes
- Documentation Company XYZ sur les paramètres d’espacement des sections
- Documentation Company XYZ sur les paramètres d’arrière-plan des sections
- Documentation Company XYZ sur les paramètres des séparateurs
- Documentation Company XYZ sur les paramètres de visibilité
- Documentation Company XYZ sur les paramètres de largeur de mise en page
Utilisez cette section pour mettre en avant une seule vidéo avec une lecture flexible, un redimensionnement et du texte d’accompagnement. Elle fonctionne particulièrement bien pour les démonstrations de produits, les tutoriels, les récits de campagne et les autres moments où la vidéo doit être au premier plan de la page. Pour une vue d’ensemble plus large de la structure des sections dans l’éditeur de thème, consultez la documentation Shopify sur les sections et les blocs
Paramètres vidéo
Section intitulée « Paramètres vidéo »Ce groupe contrôle la source de votre vidéo et la façon dont le cadre du média se comporte sur la page. Vous pouvez utiliser une vidéo hébergée ou un lien Vimeo ou YouTube, selon la manière dont vous préférez gérer la qualité et la diffusion. Pour des conseils plus généraux, consultez la référence des paramètres vidéo.
Une image d’aperçu est particulièrement utile avec une vidéo hébergée, car elle offre aux visiteurs un aperçu soigné avant le début de la lecture. Elle peut aussi créer une première impression plus forte que le recours à une image d’ouverture aléatoire.
Les paramètres de format d’image vous aident à décider si la vidéo doit conserver ses proportions naturelles ou s’adapter à une forme de mise en page plus contrôlée. Utilisez un format fixe lorsque vous souhaitez un espacement cohérent sur toute la page, et utilisez le format par défaut lorsque le cadrage d’origine est le plus important. Sur mobile, vous pouvez reprendre le format de bureau ou utiliser son propre réglage si la vidéo doit être recadrée différemment sur les petits écrans.
La largeur maximale de la vidéo est utile lorsque la section doit paraître plus éditoriale et moins étendue d’un bord à l’autre. Une vidéo en pleine largeur crée davantage d’impact, tandis qu’un cadre plus étroit peut paraître plus raffiné lorsqu’il est associé à des légendes ou à du contenu d’en-tête.
La lecture automatique lance la vidéo lorsqu’elle entre dans la zone visible et la met en pause après le passage des visiteurs. La lecture en boucle fonctionne mieux pour les clips courts et répétables, tandis que les commandes du lecteur sont plus utiles pour les vidéos plus longues ou plus informatives.
Si vous activez la lecture automatique, gardez la vidéo en sourdine et assurez-vous que la section reste compréhensible sans son.
Paramètres de légende
Section intitulée « Paramètres de légende »Utilisez la zone de légende pour placer une courte note au-dessus ou au-dessous de la vidéo. C’est un bon choix pour les crédits, le contexte produit, une brève conclusion ou un petit détail d’appui qui doit rester proche du média.
Veillez à garder les légendes concises afin que la section conserve une priorité visuelle à la vidéo. Les paramètres d’alignement, de position et de taille aident la légende à s’intégrer au reste de la mise en page plutôt qu’à entrer en concurrence avec la vidéo.
Paramètres de superposition
Section intitulée « Paramètres de superposition »Les paramètres de superposition ajoutent une couleur ou un dégradé par-dessus la vidéo. Ils sont utiles lorsque vous souhaitez une ambiance plus marquée, un meilleur contraste ou un traitement visuel plus cohérent d’un contenu à l’autre.
Utilisez l’opacité avec précaution. Une superposition légère peut améliorer la lisibilité et la finition, tandis qu’une superposition forte peut masquer des détails et donner à la vidéo un aspect plat.
Le style de superposition contrôle le moment où la superposition apparaît. L’afficher uniquement lorsque la vidéo est en pause laisse la lecture plus ouverte, tandis que l’afficher en permanence donne à la section un aspect plus stylisé.
Paramètres d’alignement
Section intitulée « Paramètres d’alignement »Ces paramètres contrôlent l’alignement du contenu de la section sur ordinateur et sur mobile. Ils sont particulièrement importants lorsque vous utilisez un titre, une légende ou un bouton avec la vidéo.
Un alignement identique sur toutes les tailles d’écran crée généralement la présentation la plus nette. Si votre mise en page mobile paraît trop serrée, ajuster l’alignement mobile séparément peut rendre la section plus facile à parcourir.
Paramètres de couleur
Section intitulée « Paramètres de couleur »Ces contrôles de couleur remplacent les couleurs par défaut du texte, des icônes et des bordures de cette section. Utilisez-les lorsque la vidéo, la superposition ou l’arrière-plan rendent vos couleurs habituelles trop peu contrastées.
Appliquez les remplacements avec parcimonie afin que la section reste cohérente avec le reste du site. Dans la plupart des cas, l’objectif le plus important est de conserver un texte lisible sur le média.
Paramètres standard de section
Section intitulée « Paramètres standard de section »Paramètres d’en-tête
Section intitulée « Paramètres d’en-tête »Utilisez les Paramètres d’en-tête partagés pour ajouter un contenu d’introduction au-dessus de la vidéo. Un titre, un court texte d’appui et un bouton facultatif peuvent aider à expliquer l’intérêt de la vidéo et guider les visiteurs vers l’étape suivante.
Veillez à ce que le contenu de l’en-tête reste bref afin qu’il soutienne la vidéo sans l’écraser. Si vous ajoutez un bouton, utilisez une action claire.
Paramètres d’espacement
Section intitulée « Paramètres d’espacement »Utilisez les Paramètres d’espacement partagés pour contrôler l’espace au-dessus et au-dessous de la section. Davantage d’espacement aide la vidéo à paraître comme un élément distinct, tandis qu’un espacement plus serré la relie davantage au contenu voisin.
Vérifiez l’espacement sur mobile comme sur ordinateur. Une section vidéo équilibrée sur un grand écran peut paraître trop imposante sur des appareils plus petits.
Paramètres d’arrière-plan de section
Section intitulée « Paramètres d’arrière-plan de section »Utilisez les Paramètres d’arrière-plan de section partagés pour ajouter une couleur, un dégradé, une image ou une vidéo d’arrière-plan derrière la section. C’est particulièrement utile lorsque vous souhaitez que la zone environnante paraisse plus immersive ou plus cohérente avec la marque.
Faites attention lorsque vous combinez un arrière-plan fort avec une superposition vidéo et des couleurs de texte personnalisées. Trop d’effets superposés peuvent réduire la clarté et donner à la section un aspect lourd.
Paramètres de séparateur
Section intitulée « Paramètres de séparateur »Utilisez les Paramètres de séparateur partagés pour placer une ligne au-dessus ou au-dessous de la section. Les séparateurs peuvent aider à définir la vidéo comme un bloc de contenu à part entière sans nécessiter de grands changements d’espacement.
Un séparateur discret fonctionne bien dans les pages longues, au style éditorial. Si la section présente déjà un fort contraste visuel, l’absence de séparateur paraît souvent plus épurée.
Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Utilisez les Paramètres de visibilité partagés pour afficher ou masquer cette section selon la taille de l’appareil. C’est utile lorsque le même traitement vidéo ne fonctionne pas aussi bien sur ordinateur et sur mobile.
Si vous masquez la section à un point de rupture, assurez-vous que la page y communique toujours le même message de manière claire.
Paramètres de largeur
Section intitulée « Paramètres de largeur »Utilisez les Paramètres de largeur partagés pour contrôler la largeur globale de la section et la largeur du contenu à l’intérieur. Cela vous aide à décider si la vidéo doit paraître très cadrée, confortablement contenue ou plus ample.
La largeur du contenu est généralement le premier réglage à ajuster. Comme le cadrage d’aperçu peut influencer l’apparence des changements de largeur, il vaut la peine de vérifier le résultat sur la page en direct avant de le finaliser.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Choisissez la bonne source. Utilisez une vidéo hébergée lorsque vous souhaitez garder le contrôle direct du fichier, et utilisez une URL vidéo lorsque l’hébergement externe correspond mieux à votre flux de travail.
- Adaptez la mise en page au contenu. Choisissez un format d’image et une largeur qui soutiennent le cadrage de la vidéo plutôt que de la forcer dans une présentation maladroite.
- Gardez des attentes claires concernant la lecture. Réservez la lecture automatique et la boucle aux clips courts qui restent compréhensibles sans son.
- Vérifiez séparément la version mobile. Contrôlez ensemble les réglages pour ordinateur et mobile, car l’alignement, la visibilité et les choix de média peuvent modifier le recadrage, l’espacement et la lisibilité de la section.
- Utilisez les remplacements avec intention. Des couleurs vides ou de style par défaut préservent généralement l’aspect environnant, tandis que des couleurs, des dégradés ou des choix de média explicites rendent la zone vidéo plus autonome.
- Ajoutez les blocs avec discernement. Si vous développez la section avec des blocs, vérifiez à nouveau l’ensemble de la composition, car le contenu piloté par les blocs peut remplacer ou enrichir un contenu de section plus simple.