Réussi
Diaporama
Créez un diaporama flexible à contenu mixte avec des mises en page responsives, des contrôles et la lecture automatique.
- Documentation Company XYZ sur les paramètres des commandes du diaporama
- Documentation Company XYZ sur le bloc Banner
- Documentation Company XYZ sur le bloc Blog post
- Documentation Company XYZ sur le bloc Image
- Documentation Company XYZ sur le bloc Product
- Documentation Company XYZ sur le bloc Rich text
- Documentation Company XYZ sur le bloc Testimonial
- Documentation Company XYZ sur le bloc Video
- Documentation Company XYZ sur les paramètres des en-têtes
- Documentation Company XYZ sur les paramètres d’espacement de section
- Documentation Company XYZ sur les paramètres d’arrière-plan de section
- Documentation Company XYZ sur les paramètres de séparateurs
- Documentation Company XYZ sur les paramètres de visibilité
- Documentation Company XYZ sur les paramètres de largeur de mise en page
- Documentation Shopify sur les sections et les blocs
- Documentation Shopify sur la présentation des fonctionnalités de l’éditeur de thème
Utilisez le diaporama pour créer une zone de contenu cliquable ou à faire défiler par balayage avec des types de blocs mixtes, allant de simples promotions centrées sur l’image à du contenu mis en avant sur plusieurs cartes. C’est un bon choix lorsque vous souhaitez de la variété visuelle tout en contrôlant le nombre d’éléments affichés à chaque taille d’écran et la manière dont les visiteurs parcourent les diapositives. Pour un aperçu plus large du fonctionnement des sections et des blocs dans l’éditeur de thème, consultez la documentation Shopify sur les sections et les blocs
Paramètres de base
Section intitulée « Paramètres de base »Ces paramètres définissent la mise en page de base avant d’affiner le comportement du diaporama. Ils contrôlent le nombre de blocs visibles à la fois et l’alignement de contenu sur chaque ligne.
Mise en page et comportement responsif
Section intitulée « Mise en page et comportement responsif »Définissez des nombres de colonnes distincts pour l’ordinateur, la tablette et le mobile afin de contrôler la densité du diaporama selon la taille de l’écran. Si la valeur tablette est définie sur 0, les écrans tablette utilisent le nombre de colonnes de l’ordinateur, ce qui est utile lorsque vous souhaitez gérer moins de points de rupture.
Utilisez Empiler sur mobile lorsque chaque diapositive a besoin de plus d’espace de lecture ou lorsque des types de blocs mixtes semblent trop serrés côte à côte sur des écrans plus petits. Cela crée une expérience plus simple sur une seule colonne.
Utilisez Étendre le contenu verticalement pour faire correspondre la hauteur des blocs à celle du bloc le plus haut de chaque ligne. C’est particulièrement utile lorsque vous combinez des blocs riches en texte avec des blocs basés sur des images, car cela rend l’ensemble de la ligne plus net.
Paramètres du diaporama
Section intitulée « Paramètres du diaporama »Utilisez ces contrôles pour définir la manière dont les visiteurs interagissent avec la section. La référence des contrôles du diaporama est disponible dans les paramètres des contrôles du diaporama.
Animation et transitions
Section intitulée « Animation et transitions »Choisissez le style d’animation en fonction du type de présentation souhaité. L’animation par défaut convient mieux à la navigation entre plusieurs diapositives visibles, tandis que Fondu convient à une narration plus ciblée, de type héros.
Fondu impose une mise en page à une seule diapositive et désactive le comportement de type aperçu ainsi que l’affichage de la pagination.
La vitesse d’animation change la rapidité avec laquelle les diapositives se succèdent. Un mouvement plus rapide peut sembler plus dynamique pour des promotions, tandis que des transitions plus lentes conviennent généralement mieux à un contenu éditorial ou visuel haut de gamme.
Lecture automatique et boucle
Section intitulée « Lecture automatique et boucle »La lecture automatique peut rendre la section plus dynamique, mais elle fonctionne mieux lorsque chaque diapositive est rapide à comprendre. Si les diapositives contiennent du texte plus long, des détails produit ou de la vidéo, un délai de lecture automatique plus long offre généralement une meilleure expérience.
Pause au survol s’applique uniquement sur ordinateur et permet aux visiteurs de lire ou d’interagir sans que le diaporama passe à autre chose. Répéter les diapositives est utile lorsque la section doit donner une impression de continuité plutôt que de se terminer clairement.
Navigation et pagination
Section intitulée « Navigation et pagination »Utilisez Afficher la navigation lorsque les visiteurs doivent disposer d’un contrôle manuel évident. Cela est particulièrement important pour les diaporamas à contenu mixte ou toute mise en page où plusieurs cartes sont visibles à la fois.
Position de la navigation vous permet de placer les contrôles au-dessus ou en dessous du contenu, selon le degré de visibilité souhaité. Un placement sous le contenu paraît souvent plus net pour les mises en page centrées sur l’image, tandis qu’un placement au-dessus du contenu peut bien fonctionner lorsque la section comprend aussi un titre.
La pagination est surtout utile lorsque le diaporama raconte une séquence ou affiche une seule diapositive principale à la fois. Les styles fraction et barre de progression sont souvent plus faciles à interpréter que la pagination dynamique pour un contenu dense.
Comportement d’aperçu des diapositives
Section intitulée « Comportement d’aperçu des diapositives »Afficher un aperçu des diapositives suivantes révèle une partie de la carte suivante pour indiquer qu’il y a davantage de contenu. Cela fonctionne mieux dans les mises en page à plusieurs cartes où vous souhaitez encourager la navigation.
Si la mise en page paraît déjà serrée, désactiver les aperçus peut rendre la section plus calme et plus facile à parcourir. Ce paramètre ne s’applique pas lorsque l’animation Fondu est utilisée.
Paramètres de couleur
Section intitulée « Paramètres de couleur »Ces remplacements de couleur affectent la zone d’en-tête de la section plutôt que les blocs de diapositive individuels. Utilisez-les lorsque le contenu d’introduction doit se distinguer de vos paramètres de couleur globaux ou d’un traitement d’arrière-plan marqué.
Ajustez ensemble les couleurs de l’icône, du titre et du sous-titre afin que l’introduction reste lisible. Si vos diapositives utilisent déjà des couleurs fortes ou des visuels marqués, garder des couleurs d’en-tête de section plus sobres crée généralement un meilleur équilibre.
Types de blocs pris en charge
Section intitulée « Types de blocs pris en charge »- Bannière
- Article de blog
- Image
- Produit
- Texte enrichi
- Témoignage
- Vidéo
Bannière
Section intitulée « Bannière »Les blocs Bannière sont l’option la plus flexible dans cette section et conviennent parfaitement aux promotions, aux diapositives de type héros et à la narration centrée sur l’image. Consultez la référence du bloc Bannière pour les paramètres spécifiques au bloc.
Utilisez l’arrière-plan du bloc pour la diapositive elle-même, puis superposez du texte, des boutons et éventuellement un média au premier plan. Les blocs Bannière peuvent également dépasser le ratio d’aspect sélectionné si le contenu a besoin de plus d’espace.
Article de blog
Section intitulée « Article de blog »Les blocs Article de blog affichent des cartes d’articles dans le diaporama. Consultez la référence du bloc Article de blog pour plus de détails.
Ils fonctionnent bien pour du contenu éditorial mis en avant ou des temps forts d’articles. Si vous avez besoin de plus de contrôle visuel qu’une carte d’article standard n’en offre, utilisez plutôt un bloc Bannière.
Les blocs Image sont un moyen simple d’ajouter des diapositives visuelles avec des légendes, des superpositions, des liens et un contrôle de l’alignement en option. Consultez la référence du bloc Image pour plus de détails.
Ils sont utiles pour les lookbooks, les visuels de campagne, les diapositives de logos ou les promotions légères. Ajoutez des légendes uniquement lorsqu’elles apportent un contexte clair.
Les blocs Produit ajoutent des cartes produit achetables au diaporama. Consultez la référence du bloc Produit pour plus de détails.
Utilisez-les pour des articles mis en avant, des rangées sélectionnées ou des suggestions associées. Si vous affichez davantage de détails produit ou des contrôles de variantes, réduisez le nombre de colonnes visibles afin que chaque carte reste facile à parcourir.
Texte enrichi
Section intitulée « Texte enrichi »Les blocs Texte enrichi vous permettent d’ajouter des diapositives orientées message avec des titres, du texte principal, des icônes, des boutons et des arrière-plans de bloc en option. Consultez la référence du bloc Texte enrichi pour plus de détails.
Ils sont utiles pour les annonces, les propositions de valeur ou les transitions éditoriales entre des diapositives plus visuelles. Comme ils peuvent inclure leur propre média d’arrière-plan, ils peuvent presque avoir l’aspect d’une bannière tout en restant centrés sur le texte.
Témoignage
Section intitulée « Témoignage »Les blocs Témoignage mettent en valeur les citations clients et peuvent éventuellement lier la citation à un produit associé. Consultez la référence du bloc Témoignage pour plus de détails.
Conservez un texte de témoignage assez court pour obtenir les meilleurs résultats dans une mise en page en mouvement. Si vous ajoutez des images ou de la vidéo, assurez-vous que la citation reste perçue comme le message principal.
Les blocs Vidéo vous permettent d’insérer une vidéo hébergée ou intégrée directement dans le diaporama. Consultez la référence du bloc Vidéo pour plus de détails.
Utilisez la vidéo avec parcimonie dans les carrousels à lecture automatique. Les images d’affiche, les légendes et les superpositions peuvent aider la diapositive à paraître plus aboutie avant le démarrage de la lecture.
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 présenter le diaporama avec une légende, un titre, un texte d’accompagnement, une icône et un bouton facultatif. Les indications complètes sur l’en-tête sont disponibles dans la référence des paramètres d’en-tête.
Un en-tête de section est particulièrement utile lorsque le diaporama apparaît plus bas sur une page ou mélange plusieurs types de contenu. Gardez-le concis afin qu’il encadre le contenu sans rivaliser avec les diapositives.
Paramètres d’espacement
Section intitulée « Paramètres d’espacement »Utilisez les contrôles d’espacement partagés pour ajuster l’espace au-dessus et au-dessous du contenu de la section. La référence complète de l’espacement est disponible dans la référence de l’espacement de section.
Augmentez l’espacement lorsque le diaporama doit avoir l’apparence d’un élément autonome. Réduisez-le lorsque la section doit s’intégrer plus étroitement dans une mise en page plus dense.
Paramètres d’arrière-plan de section
Section intitulée « Paramètres d’arrière-plan de section »Utilisez les contrôles d’arrière-plan de section partagés pour ajouter une couleur, des dégradés, des images, des superpositions ou une vidéo derrière l’ensemble de la section. La référence complète de l’arrière-plan est disponible dans la référence des arrière-plans de section.
Ces paramètres affectent l’enveloppe de la section, et non les diapositives individuelles. Des arrière-plans marqués peuvent ajouter de la profondeur, mais ils rendent aussi le contraste et l’espacement plus importants.
Si les diapositives individuelles utilisent déjà des visuels marqués, des superpositions ou des traitements colorés, utilisez un arrière-plan de section plus sobre pour éviter la concurrence visuelle.
Paramètres de séparateur
Section intitulée « Paramètres de séparateur »Utilisez les contrôles de séparateur partagés pour ajouter une ligne de séparation en haut ou en bas. Les options de séparateur sont documentées dans la référence des séparateurs.
Les séparateurs peuvent aider à définir le diaporama lorsque les sections environnantes utilisent des arrière-plans similaires. Utilisez-les avec parcimonie pour que la page ne paraisse pas trop encadrée.
Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Utilisez les contrôles de visibilité partagés pour déterminer si la section apparaît sur ordinateur, mobile ou les deux. Le comportement de visibilité est documenté dans la référence des paramètres de visibilité.
Cela est utile lorsque vous souhaitez une présentation mobile différente ailleurs sur la page ou lorsqu’une mise en page complexe à plusieurs diapositives ne fonctionne bien que sur les grands écrans.
Paramètres de largeur
Section intitulée « Paramètres de largeur »Utilisez les contrôles de largeur partagés pour gérer à la fois la largeur du contenu et celle de l’enveloppe de section. Les options de largeur sont documentées dans la référence des largeurs de mise en page.
La largeur du contenu contrôle jusqu’où le contenu du diaporama peut s’étendre, tandis que la largeur de section compte surtout lorsque des arrière-plans sont utilisés. Comme l’éditeur peut limiter la manière dont les changements de largeur apparaissent, il vaut la peine de vérifier l’affichage de la page en direct avant de finaliser les choix de mise en page. Pour un contexte lié à l’éditeur de thème, consultez la documentation Shopify sur l’aperçu des fonctionnalités de l’éditeur de thème
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Faites correspondre les colonnes au contenu. Utilisez moins de colonnes lorsque les diapositives incluent du texte, des boutons, des évaluations ou de la vidéo afin que chaque élément reste lisible et facile à manipuler.
- Choisissez l’animation avec intention. Utilisez l’animation par défaut pour parcourir plusieurs cartes et utilisez Fondu uniquement lorsque vous voulez une seule diapositive mise en avant à la fois.
- Gardez une lecture automatique souple. Des délais de lecture automatique plus longs conviennent mieux aux diaporamas à contenu mixte, surtout lorsque les diapositives incluent des produits, des témoignages ou de la vidéo.
- Évitez les arrière-plans concurrents. Si les blocs utilisent déjà des visuels marqués ou des superpositions, simplifiez l’arrière-plan de section pour un meilleur contraste et plus de clarté.
- Vérifiez la mise en page en direct. Passez en revue l’empilement mobile, le comportement des colonnes sur tablette, l’emplacement de la navigation et les changements de largeur sur le frontend réel avant de publier.
- Examinez les modifications liées aux blocs. Ajouter ou supprimer des blocs peut changer la perception de l’ensemble de la section ; revérifiez donc l’espacement, l’équilibre et l’utilité de la navigation après avoir modifié la liste des blocs.