Sections
Image with text
A photograph and text, side by side or layered.
The Image with text section pairs a photograph with a heading, text and a link. It's made for storytelling: the workshop, a craft, a material.
- Name in the editor
- Image with text (FR: Image avec texte)
- Where to add it
- Any template, plus the header and footer
Settings
| Setting | Values | What it does |
|---|---|---|
| LayoutFR: Disposition |
| Beside places the image in its own column. Behind extends it across the full width of the page, with the text over it. |
| Image | Image | — |
| Image positionFR: Position de l’image |
| —Shown when “Layout” is “Image beside text”. |
| Image shapeFR: Forme de l’image |
| —Shown when “Layout” is “Image beside text”. |
| HeightFR: Hauteur |
| —Shown when “Layout” is “Image behind text”. |
| Image overlayFR: Voile sur l’image | From 0 to 90%, in steps of 5Default: 60% | Veils the image in the colour scheme's background so the text stays readable. At 0% the image is untouched: check the contrast of the text over it before leaving it there.Shown when “Layout” is “Image behind text”. |
| Content positionFR: Position du contenu |
| —Shown when “Layout” is “Image behind text”. |
| AlignmentFR: Alignement | AlignmentDefault: Left | — |
| SubheadingFR: Sous-titre | Text | — |
| HeadingFR: Titre | TextDefault: “The house” | — |
| TextFR: Texte | Rich text | — |
| LinkFR: Lien | Link | — |
| Link labelFR: Libellé du lien | Text | — |
| Link styleFR: Style du lien |
| The button follows the theme-wide button style set under Style. |
| Color schemeFR: Palette de couleurs | Color schemeDefault: Scheme 1 | — |
Two layouts
Image beside text
The image and text take two equal columns from 990px up; Image position places the image on the left or the right. Below that, they stack full width, image first. Image shape (portrait, landscape or square) sets the frame; the image is cropped around its focal point. The image's alt text is read by screen readers.
Image behind text
The image fills the full width of the section and the text sits on top of it. Height uses the same three heights as the hero, Content position places the text on the left, center or right, and Image overlay evenly veils the image with the color scheme's background to keep the text readable. In this layout, the image is decorative (it isn't announced to screen readers).
Link or button
The link only appears if Link and Link label are filled in. Link style shows it as an underlined text link or a solid button.
Without an image
Without an image, a placeholder illustration is shown in the same frame, including on your online store.
Maison 1.0.0