Custom Section
A blank, full-width band you fill with your own arrangement of blocks.
The Custom Section block is an empty top-level band that you build yourself. It accepts almost every block on the page, so you can combine a background, heading, media, buttons, a collection, and more inside one container. You then control how that container looks and where its contents sit.
Use a Custom Section when none of the ready-made blocks matches the band you have in mind. Examples include a hero with a background image and overlaid text, or a two-up split of an image beside a call to action. Use it too for any custom strip the theme's blocks do not already cover.
What you can put inside
Open the Blocks list inside the Custom Section to add, reorder, or remove its contents, the same way you build the rest of the page. It accepts nearly every block on the page, including:
- Heading, Text, and Rich Text
- Button, Button links, and Navigation
- Logo, Icon, Media, and Gallery
- Banner, Text & image, Calendar, and Featured
- Group, Carousel, and a Collection
- Opening Hours, Custom Attribute, Sponsors, and a Divider
The one thing you cannot drop inside is another section (neither a Custom Section nor a Reusable Section), so sections never nest inside one another.
Laying out the contents
The Custom Section's arrangement lives on its Layout tab.
Width controls how far the band stretches. Full Width runs edge to edge. Page (default) keeps it within the main page width. Narrow narrows it further. Custom reveals a slider for an exact width.
Height sets how tall the band is. Auto (default) fits the contents. Small, Medium, Large, and Full give fixed heights. Custom reveals a slider for an exact height.
Direction decides whether the contents stack or sit side by side:
- Vertical (default) stacks them top to bottom.
- Horizontal lays them out in a row, left to right.
When Direction is Horizontal, a Vertical on Mobile toggle appears and is on by default, so the row collapses back into a stack on phones.
Alignment aligns the contents along the direction you chose: Left (default), Center, Right, or Space Between. Position aligns them across the other axis: Top (default), Center, Bottom, or Space Between. Gap sets the space between items, from 0 to 120 px in steps of 4. The default is 12 px.
Shared controls
The Custom Section uses the standard block controls for background, borders, spacing, and color.
- Layout controls: set the band's width, height, direction, and alignment.
- Background and overlay: add a background image or color, an overlay, borders, and corner rounding.
- Spacing and padding: add padding (including horizontal spacing) and margin around the band.
- Colour scheme in blocks: set the color scheme for the contents.
- Analytics keys: tag the section for reporting.
Example
A full-bleed hero band with text over a background image:
Add a Custom Section
Add a Custom Section block where you want the band to appear.
Add the contents
Open the section's Blocks list and add a Heading and a Button.
Set the background
On the Appearance tab, add a background image and a dark overlay so the text stays readable (see Background and overlay).
Lay it out
On the Layout tab, set Width to Full Width. Set Height to Large. Set Alignment to Center and Position to Center. This centers the heading and button in the middle of the band.
Where to go next
Building a page
Add, reorder, and edit blocks, including the contents of a Custom Section.
Group
Cluster a few small blocks into a row or column inside a section.
Reusable Section
Build a section once and reuse it across many pages.
Background and overlay
Give a section a background image, overlay, borders, or rounded corners.