Features

A grid of feature cards, each one an image or icon above a short heading and a line or two of text. It’s the “Why choose us” / “How it works” band — a set of parallel points that should be read as a group rather than in order.

Above the grid sits a section heading. Below it there’s room for a call-to-action button and a callout bar, both of which are optional and hidden until you fill them in.

The section can also carry a background image — one for desktop, a separate one for mobile — sitting behind the whole grid.

Settings

Background Images

Setting	What it does
Desktop Background Image	Artwork behind the grid on tablet and desktop (768px and up).
Desktop Image Layout	Cover (default) fills the section and crops whatever doesn’t fit. Contain keeps the whole image visible and may leave empty space around it.
Mobile Background Image	Artwork behind the grid on phones (below 768px).
Mobile Image Layout	The same Cover / Contain choice for the mobile image. Default Cover.

Both images show unless you set both

The two images only swap at the breakpoint when both are filled in. Set only the desktop image and it shows at every width, phones included — which usually means the wrong part of it is on screen. Either set both, or accept that one image has to work everywhere.

Layout

Setting	What it does
Enable two columns on small screens	On by default. Shows two features side by side from 390px up. Turn it off to keep phones at one feature per row.
Columns (Desktop)	How many columns the grid uses on large screens. 3–10, default 3, though both presets ship with 4.

The column count only applies to very wide screens

Columns (Desktop) takes effect at 1280px and up. Between tablet and that point the grid is always two columns, regardless of what you set here. Setting it to 6 doesn’t produce a six-across row on a laptop.

Section Padding

Setting	What it does
Top / Bottom Padding (mobile)	Space above and below the section on phones. 0–10rem in 0.5 steps, default 3rem.
Top / Bottom Padding (tablet)	The same for tablet. 0–10rem, default 3rem.
Top / Bottom Padding (desktop)	The same for desktop. 0–14rem, default 7rem.

Other

Setting	What it does
Section ID	Optional anchor, so a link elsewhere on the page can jump here. Must be unique on the page and written in handle format.

The empty “Color Scheme” heading

There’s a Color Scheme heading in the sidebar with nothing underneath it. The setting it used to label was removed; the heading is leftover and can be ignored. The section is transparent and inherits its text colour from the page.

Blocks

The section is built from a fixed frame plus a repeatable grid.

Always present (they can’t be removed or reordered):

• Title — the heading above the grid. Edit its text, heading level, size and alignment on the block itself.
• Buttons — a call-to-action beneath the grid. Empty by default, so nothing shows until you add a Button to it.
• Callout Bar — a full-width strip beneath everything, for a prompt like “Not sure where to start? Take our quiz.” It has its own Disabled checkbox, which the standard preset ships ticked.

Repeatable: Feature blocks — one per card. Each Feature holds its own image, title, description and buttons. Add, reorder and remove them freely; the grid reflows on its own.

A Feature block has a single setting of its own, Max width, which caps how wide its image renders in pixels. Left empty, images scale to a shared default that keeps every card in the row matched.

Presets

Two starting points show in the section picker:

• Features — heading, three feature cards, callout bar disabled.
• Collections with Quiz — heading, four cards each with a “Shop Collection” button, and the callout bar in place. Filed under Collections in the picker.

Both set Columns (Desktop) to 4.

Tips

• Give every Feature the same amount of text. The cards sit in a grid row, so one card with a three-line description while its neighbours have one line leaves visible gaps. Aim for the same sentence count in each.
• Match the number of features to the column count. Four features in a four-column grid gives one clean row. Five leaves a single stranded card underneath.
• Use transparent PNGs or SVGs for the icons. Images are set on a square and scaled to fit, so a photo with a white background shows as a white box.
• Set the images to the same visual weight. They’re all scaled to the same box, so an icon drawn with a lot of surrounding whitespace looks smaller than the others. Fix that by cropping the file rather than by reaching for Max width on one card.
• Check two-column mobile with your longest heading. Two cards across a phone is tight; a long feature title can wrap to three lines and push the cards out of alignment. Turn Enable two columns on small screens off if it looks cramped.
• The button and the callout bar do similar jobs. Use one or the other, not both — two calls to action stacked underneath the same grid compete with each other.