Réussi
Diaporama en surbrillance
Créez un diaporama de fonctionnalités guidé avec des médias flexibles, une navigation et des contrôles de mise en page adaptés au mobile.
- Documentation Shopify sur les sections et les blocs
- MDN Web Docs
- Documentation de Company XYZ sur le bloc diapositive
- Documentation de Company XYZ sur les paramètres d’en-tête
- Documentation de Company XYZ sur les paramètres d’espacement de section
- Documentation de Company XYZ sur les paramètres d’arrière-plan de section
- Documentation de Company XYZ sur les paramètres de séparateur
- Documentation de Company XYZ sur les paramètres de visibilité
- Documentation de Company XYZ sur les paramètres de largeur de mise en page
Utilisez cette section pour transformer une liste de fonctionnalités, de détails ou de arguments de vente en un diaporama guidé. Elle fonctionne mieux lorsque chaque diapositive se concentre sur une seule idée, soutenue par une courte en-tête, un texte concis et des médias facultatifs. Pour une vue d’ensemble plus large du fonctionnement des sections et des blocs dans l’éditeur, voir documentation Shopify sur les sections et les blocs
Paramètres standard de section
Section intitulée « Paramètres standard de section »Paramètres du diaporama
Section intitulée « Paramètres du diaporama »Ces paramètres contrôlent la manière dont le diaporama défile, la part de la diapositive suivante qui est visible et la façon dont les visiteurs naviguent entre les diapositives. Commencez ici avant d’ajuster le style, car le style d’animation modifie le comportement de toute la section.
Le style d’animation par défaut prend en charge une mise en page plus proche d’un carrousel, y compris des aperçus partiels des diapositives à venir. Fade transforme la section en une présentation à une seule diapositive, ce qui est préférable lorsque vous souhaitez que les visiteurs se concentrent sur un message à la fois.
Fade impose une mise en page à une seule diapositive et supprime les aperçus des diapositives suivantes. La pagination n’est pas non plus affichée lorsque fade est actif.
La vitesse d’animation influence le caractère soigné ou dynamique de la section. Des transitions plus rapides conviennent à des diapositives courtes et visuelles, tandis que des transitions plus lentes sont généralement plus faciles à suivre lorsque les diapositives contiennent davantage de texte.
Le ratio d’aspect contrôle la forme de la zone multimédia de la diapositive. Utilisez un ratio fixe pour une mise en page plus nette et plus cohérente d’une diapositive à l’autre, ou laissez-le sur Default si vos médias doivent conserver leurs proportions naturelles. Le ratio mobile séparé est utile lorsque le recadrage sur ordinateur semble trop large ou trop serré sur les petits écrans.
La lecture automatique peut être utile lorsque les diapositives racontent une histoire rapide et simple. Si les diapositives contiennent un texte plus long, ralentissez la lecture automatique ou désactivez-la afin que les visiteurs puissent lire sans se sentir pressés. La pause au survol ne s’applique que sur ordinateur, donc les utilisateurs mobiles continueront à dépendre du délai et des commandes manuelles.
La navigation et la pagination influencent la clarté avec laquelle le diaporama communique la séquence. La navigation suffit souvent lorsque les en-têtes ou les icônes des diapositives sont distincts, tandis que la pagination est plus utile lorsque l’ordre des diapositives compte.
Les paramètres de position des contrôles vous aident à équilibrer l’interface sur les différents appareils. Sur ordinateur, un placement à gauche ou à droite modifie le poids visuel de la mise en page ; sur mobile, un placement en haut ou en bas influence surtout la lecture et le confort tactile.
Paramètres de couleur
Section intitulée « Paramètres de couleur »Ces paramètres remplacent les couleurs de l’en-tête de section utilisées pour l’icône, l’en-tête et le texte d’accompagnement au-dessus du diaporama. Ils sont particulièrement utiles lorsque la section se trouve sur un arrière-plan personnalisé ou a besoin d’un contraste plus fort que celui fourni par les styles de page environnants.
Utilisez les remplacements de couleur avec parcimonie. Une combinaison simple à fort contraste est généralement plus facile à lire qu’un texte très stylisé, surtout lorsque les diapositives elles-mêmes incluent des images ou une vidéo.
Types de blocs pris en charge
Section intitulée « Types de blocs pris en charge »- Diapositive
Diapositive
Section intitulée « Diapositive »Chaque bloc Diapositive ajoute une diapositive à la séquence et contribue à la navigation basée sur du texte ou des icônes. En savoir plus sur le bloc Diapositive.
Utilisez chaque diapositive pour un seul point clair. Les en-têtes courts fonctionnent le mieux, car ils permettent de parcourir facilement l’interface de navigation.
- Utilisez l’en-tête comme idée principale.
- Utilisez le champ de contenu pour ajouter une brève explication, pas un second titre.
- N’ajoutez une icône que lorsqu’elle aide les visiteurs à distinguer plus rapidement les diapositives.
Paramètres d’image
Section intitulée « Paramètres d’image »Une diapositive peut être composée uniquement de texte, être basée sur une image ou sur une vidéo. Si une image et une vidéo sont toutes deux ajoutées, la vidéo est prioritaire et se lance lorsque cette diapositive devient active.
Les paramètres de superposition inactive aident à réduire la distraction causée par les diapositives voisines lorsque les aperçus sont visibles. Augmentez la superposition si les diapositives adjacentes entrent trop en concurrence avec la diapositive active, et réduisez-la si la section commence à paraître trop sombre.
Visibilité du bloc
Section intitulée « Visibilité du bloc »Vous pouvez masquer des diapositives individuelles sur ordinateur ou sur mobile. C’est utile lorsqu’une diapositive est trop détaillée pour les petits écrans ou lorsque vous souhaitez une séquence mobile plus courte sans supprimer entièrement la diapositive.
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 »Paramètres d’en-tête vous permettent de présenter le diaporama avec une légende, un en-tête, un texte d’accompagnement et un bouton facultatif. C’est un bon endroit pour expliquer ce que couvre le diaporama et donner aux visiteurs une prochaine étape claire.
Le bouton fonctionne mieux comme une seule action de suivi, par exemple pour consulter un produit ou une page associée. La position du bouton sur mobile et le comportement pleine largeur sont utiles lorsque vous souhaitez que l’action reste facile à toucher.
Paramètres d’espacement
Section intitulée « Paramètres d’espacement »Paramètres d’espacement contrôlent l’espace au-dessus et au-dessous de la section. Utilisez-les pour séparer le diaporama du contenu voisin, surtout lorsque la page contient d’autres sections riches en médias.
Un espacement plus serré peut donner à la section une impression de continuité avec la mise en page environnante. Un espacement plus large donne davantage d’importance et d’air au diaporama.
Paramètres d’arrière-plan de section
Section intitulée « Paramètres d’arrière-plan de section »Paramètres d’arrière-plan de section vous permettent d’ajouter une couleur, un dégradé, une image ou une vidéo derrière l’ensemble de la section. Ces choix peuvent rendre le diaporama plus immersif, mais ils influencent également la lisibilité et la profondeur perçue de la mise en page.
Les superpositions sont particulièrement utiles lorsque l’en-tête se trouve au-dessus d’un média d’arrière-plan. Si vous utilisez à la fois un média d’arrière-plan et un média dans les diapositives, gardez visuellement plus discret l’un des deux niveaux afin que la section ne paraisse pas surchargée.
Paramètres de séparateur
Section intitulée « Paramètres de séparateur »Paramètres de séparateur ajoutent une ligne en haut ou en bas de la section. Cela peut aider à définir le diaporama lorsqu’il se trouve entre des sections ayant des arrière-plans similaires.
Les séparateurs discrets fonctionnent généralement le mieux. Utilisez-les comme structure, pas comme décoration.
Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Paramètres de visibilité contrôlent si l’ensemble de la section apparaît sur ordinateur, sur mobile ou sur les deux. C’est utile lorsque vous souhaitez un flux de page différent sur les petits écrans.
Si vous masquez la section sur un appareil, assurez-vous que le même message clé apparaît ailleurs afin que les détails importants ne soient pas perdus.
Paramètres de largeur
Section intitulée « Paramètres de largeur »Paramètres de largeur contrôlent la largeur globale de la section et la largeur maximale du contenu qu’elle contient. Dans ce diaporama, la largeur modifie l’impression d’espace donnée par les médias et la facilité avec laquelle la navigation peut être parcourue.
Les largeurs plus étroites conviennent généralement mieux aux diapositives axées sur le texte, tandis que les mises en page plus larges donnent plus d’impact aux images et aux vidéos. Vérifiez les modifications sur la page en direct lorsque cela est possible, car le cadrage de l’éditeur peut donner à la largeur une sensation différente du résultat final.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Gardez des diapositives ciblées. Donnez à chaque diapositive une idée principale afin que l’en-tête, l’icône, le texte et les médias soutiennent tous le même message.
- Choisissez l’animation de manière intentionnelle. Utilisez le style par défaut pour un rendu de carrousel plus visuel, et utilisez fade lorsque vous voulez que les visiteurs se concentrent sur une diapositive à la fois.
- Conservez des proportions de médias cohérentes. Des ratios d’aspect identiques d’une diapositive à l’autre créent généralement une mise en page plus nette et plus calme.
- Utilisez la lecture automatique avec retenue. Activez-la uniquement lorsque les diapositives sont rapides à comprendre et que les commandes manuelles restent évidentes.
- Vérifiez attentivement sur mobile. Examinez le recadrage, le placement des contrôles et le contraste du texte sur les petits écrans chaque fois que vous utilisez des couleurs personnalisées, des médias d’arrière-plan ou des ratios d’aspect spécifiques au mobile.
- Examinez les deux mises en page selon le viewport. Les contrôles sur ordinateur et sur mobile peuvent modifier l’alignement, la visibilité et la part de chaque diapositive affichée ; confirmez donc les deux versions avant de publier.
- Considérez les valeurs par défaut comme une solution de repli. Les couleurs vides ou transparentes préservent généralement le style environnant, tandis que des couleurs explicites, des dégradés ou des choix distincts de médias sur ordinateur et sur mobile rendent la zone du diaporama plus autonome.