Image with text overlay
Image with text overlay shows an image with text placed on top of it. On mobile, the text can move below the image instead. The text is built from blocks you add.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Image with text overlay.
The package uses this section on the Home, About, Sustainability and The Craft pages.
Settings
View the section guide .
General
| Setting | Options | Description |
|---|---|---|
| Content position on desktop | • Top left | On mobile, the position adjusts automatically. |
Heading content
| Setting | Options | Description |
|---|---|---|
| Content alignment | • Left | Aligns the text over the image to the left, center or right on screens 768 pixels wide and up. |
Image
| Setting | Options | Description |
|---|---|---|
| Image | 1392px x 500px recommended | |
| Image on mobile | 400px x 469px recommended | |
| Image height | • Adapt to image | Adapt to image uses the image's own proportions and Full screen fills the visible screen height below the header. Based on content sizes the banner to its text, and Small, Medium and Large set fixed heights. |
Mobile layout
| Setting | Options | Description |
|---|---|---|
| Show content below media on mobile | The text appears below the image on mobile. | |
| Content alignment on mobile | • Left | Aligns the text to the left, center or right on screens narrower than 768 pixels. |
Image height sets how tall the section is. Options range from adapting to the image, through full screen and based on content, to a small, medium or large fixed height.
Layout
| Setting | Options | Description |
|---|---|---|
| Content max width | Max width is automatically optimized for mobile. | |
| Horizontal content padding | Padding inline is automatically optimized for mobile. | |
| Vertical content padding | Padding block is automatically optimized for mobile. |
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. | |
| Overlay opacity | Darkens the image behind the text. 0 adds no overlay and 100 makes the overlay fully dark. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Sets how wide the section is. Page width keeps it inside the standard content width, Wide stretches it closer to the screen edges, and Full width spans the whole screen. |
| Top padding | Space above the section content, in pixels. | |
| Bottom padding | Space below the section content, in pixels. | |
| Show top border | Draws a thin line along the top edge of the section. |
No comments yet