Sections
Hero
The opening of the page: a full-frame image or a slideshow of up to five slides.
The hero opens a page with a large photograph, a heading and a call to action. With several slides, it becomes a slideshow.
- Name in the editor
- Hero (FR: Bandeau principal)
- Where to add it
- Any template, plus the header and footer
- Accepted blocks
- Slide
- Number of blocks
- 5 at most
Section settings
| Setting | Values | What it does |
|---|---|---|
| HeightFR: Hauteur |
| — |
| Image overlayFR: Voile sur l’image | From 0 to 90%, in steps of 5Default: 55% | Darkens the foot of the image so the text stays readable over any photograph. At 0% nothing is darkened: check the opening on a pale image before leaving it there. |
| Advance automaticallyFR: Défilement automatique | CheckboxDefault: Off | Advances the slides on their own. Leave it off unless the opening really needs to move: a shopper reading the first slide loses it mid-sentence, and the slideshow carries a Pause control whenever this is on. |
| Seconds per slideFR: Secondes par diapositive | From 4 to 12sDefault: 7s | —Shown when “Advance automatically” is on. |
| Color schemeFR: Palette de couleurs | Color schemeDefault: Scheme 3 | — |
Slide block
| Setting | Values | What it does |
|---|---|---|
| Image | Image | — |
| SubheadingFR: Sous-titre | Text | — |
| HeadingFR: Titre | TextDefault: “A quieter kind of luxury” | — |
| TextFR: Texte | Rich text | — |
| LinkFR: Lien | Link | — |
| Link labelFR: Libellé du lien | TextDefault: “Discover” | — |
| Index labelFR: Libellé de repère | Text | Shown on the numbered rail. Falls back to the heading. |
- The button only appears if both Link and Link label are filled in.
- The Index label appears in the slideshow's numbered navigation bar; if it's empty, the heading is used instead.
Height
| Height | Size |
|---|---|
| Small | 64% of the screen height, 34rem at most |
| Medium | 82% of the screen height, 44rem at most |
| Large | The full screen height, 56rem at most |
When it's in first position with the Large height, the hero fills the whole screen, minus the announcement bar. The image fills the frame and is cropped around its focal point: set it in ContentFiles or from the image picker so the subject stays visible on phones.
Image overlay
The text sits at the bottom left of the image. Image overlay paints a gradient that rises from the bottom of the image, behind the text, so it stays readable over any photograph.
Slideshow
With two or more slides, a numbered bar (01, 02...) appears under the text; each number carries its slide's index label. On phones, only the numbers are shown. Slides fade from one to the next.
With Advance automatically:
- a line fills in under the current number to show progress;
- a Pause / Play button is always present, and the shopper's pause is remembered for the rest of their visit;
- the slideshow stops while the pointer or keyboard focus is inside the section;
- it never starts if the shopper has asked their system to reduce motion.
Without JavaScript, only the first slide is shown.
Transparent header
The hero is the only section the header can become transparent over. It must be the first section of the page and contain at least one slide. See Transparent header.
Images
Use images at least 2,400px wide, in landscape for desktop. In first position, the image is loaded with priority so it shows as fast as possible. A slide without an image shows a placeholder illustration, including on your online store.
Maison 1.0.0