Sections
Bandeau principal
L’ouverture de la page : une image plein cadre ou un diaporama de cinq diapositives au plus.
Sur cette page
Le bandeau principal (Hero dans un éditeur en anglais) ouvre une page avec une grande photographie, un titre et un appel à l’action. Avec plusieurs diapositives, il devient un diaporama.
- Nom dans l’éditeur
- Bandeau principal (EN : Hero)
- Où l’ajouter
- N’importe quel modèle, ainsi que l’en-tête et le pied de page
- Blocs acceptés
- Diapositive
- Nombre de blocs
- 5 au maximum
Réglages de la section
| Réglage | Valeurs | À quoi il sert |
|---|---|---|
| HauteurEN : Height |
| — |
| Voile sur l’imageEN : Image overlay | De 0 à 90 %, par pas de 5Par défaut : 55 % | Assombrit le bas de l’image pour garder le texte lisible sur n’importe quelle photographie. À 0 %, rien n’est assombri : vérifiez l’ouverture sur une image claire avant de la laisser ainsi. |
| Défilement automatiqueEN : Advance automatically | Case à cocherPar défaut : Désactivé | Fait défiler les diapositives automatiquement. Laissez désactivé sauf nécessité réelle : un client en train de lire la première diapositive la perd en cours de lecture, et le diaporama affiche un contrôle de pause dès que cette option est active. |
| Secondes par diapositiveEN : Seconds per slide | De 4 à 12 sPar défaut : 7 s | —Affiché lorsque « Défilement automatique » est activé. |
| Palette de couleursEN : Color scheme | Palette de couleursPar défaut : Palette 3 | — |
Bloc Diapositive
| Réglage | Valeurs | À quoi il sert |
|---|---|---|
| Image | Image | — |
| Sous-titreEN : Subheading | Texte | — |
| TitreEN : Heading | TextePar défaut : « A quieter kind of luxury » | — |
| TexteEN : Text | Texte enrichi | — |
| LienEN : Link | Lien | — |
| Libellé du lienEN : Link label | TextePar défaut : « Discover » | — |
| Libellé de repèreEN : Index label | Texte | Affiché sur le repère numéroté. Reprend le titre par défaut. |
- Le bouton n’apparaît que si le Lien et le Libellé du lien sont tous deux renseignés.
- Le Libellé de repère s’affiche dans la barre de navigation numérotée du diaporama ; vide, c’est le titre qui est repris.
Hauteur
| Hauteur | Taille |
|---|---|
| Petite | 64 % de la hauteur de l’écran, 34 rem au maximum |
| Moyenne | 82 % de la hauteur de l’écran, 44 rem au maximum |
| Grande | Toute la hauteur de l’écran, 56 rem au maximum |
Placé en première position avec la hauteur Grande, le bandeau occupe tout l’écran, barre d’annonce déduite. L’image remplit le cadre et elle est recadrée autour de son point focal : réglez-le dans ContenuFichiers ou depuis le sélecteur d’image pour que le sujet reste visible sur téléphone.
Voile sur l’image
Le texte est posé en bas à gauche de l’image. Voile sur l’image peint un dégradé qui monte du bas de l’image, derrière le texte, pour qu’il reste lisible sur n’importe quelle photographie.
Diaporama
Dès deux diapositives, une barre numérotée (01, 02…) apparaît sous le texte ; chaque numéro porte le libellé d’index de sa diapositive. Sur téléphone, seuls les numéros sont affichés. Les diapositives se succèdent en fondu.
Avec Défilement automatique :
- un trait se remplit sous le numéro en cours pour montrer la progression ;
- un bouton Pause / Lecture est toujours présent, et la pause de l’acheteur est mémorisée pendant sa visite ;
- le diaporama s’arrête tant que le pointeur ou le focus clavier est dans la section ;
- il ne démarre jamais si l’acheteur a demandé à son système de réduire les animations.
Sans JavaScript, seule la première diapositive est affichée.
En-tête transparent
Le bandeau principal est la seule section sur laquelle l’en-tête peut devenir transparent. Il doit être la première section de la page et contenir au moins une diapositive. Voir En-tête transparent.
Images
Utilisez des images d’au moins 2 400 px de large, en paysage pour l’ordinateur. En première position, l’image est chargée en priorité pour s’afficher le plus vite possible. Une diapositive sans image affiche une illustration de remplacement, y compris sur la boutique en ligne.
Maison 1.0.0