Teaser

A full-width band with a short heading and a single call-to-action, centred over a colour or gradient background. A product image sits below the text and is deliberately cropped by the bottom edge of the section, so the product looks like it’s rising into the next part of the page.

It’s built to sit directly above another section — on the About page it runs straight into Featured Products. Both sections take the same Background setting, so the two blend into one continuous wash of colour.

Settings

Setting	What it does
Section ID	Optional anchor, so you can link to this section with #your-id.
Image	The product shot below the text. Use a transparent PNG for the cleanest result. Leave empty to show text and button only.
Image width	How wide the image is on desktop. 10–60 rem, default 27 rem.
Mobile image width	How wide the image is on mobile, as a percentage of the screen. 30–100%, default 75%.
Image bleed	How much of the bottom of the image the section edge crops off. 0–60%, default 33%. Set to 0% to show the whole image.
Text theme	Light background (default) for dark green text, Dark background to flip the text and button to light.
Background	A solid colour or gradient behind the section. Empty by default, which leaves it transparent.
Top / bottom padding	Space above and below the section, set separately for mobile, tablet and desktop.

The heading and the button are blocks, so their text, heading level, size and link are edited on the block itself rather than in the section settings.

Blocks

The section has two fixed blocks that are always present and can’t be reordered or removed:

• Title — the heading. Centred by default.
• Buttons — holds one or more Button blocks. Centred by default. The design uses a single outlined button.

Chaining the background into the next section

The Background setting accepts a gradient with as many colour stops as you need. To make this section flow into the one below it without a visible seam, match this section’s last colour stop to the next section’s first.

Featured Products has the same Background setting, which is the pairing used on the About page.

Each section owns its own gradient

There’s no need to measure heights or work out where one section ends. Give each section a self-contained gradient and match the colours where they meet.

Bottom padding is 0 by default

The image is meant to touch the bottom edge so it gets cropped. Adding bottom padding pushes the image up and away from the edge, which loses the effect. If you want the whole product visible instead, set Image bleed to 0% rather than adding padding.

Tips

• Keep the heading to one short line or two. It’s set at the largest heading size, so a long heading wraps to three or four lines and crowds the button.
• One button, not two. The layout is built around a single call-to-action.
• Use a transparent PNG for the image. A photo with a solid white background will show a visible rectangle against the gradient.
• Check the crop on mobile. Mobile shows the image larger relative to the screen, so the bleed cuts a different part of the product. Adjust Mobile image width if too much or too little is showing.