Group
Wrap several small blocks together and lay them out as a row or column.
The Group block is a container you drop other blocks into, then arrange as a row or a column. Use it to cluster a few related pieces — say a heading next to a button, or a line of icons — and control how they line up, how much space sits between them, and how the whole cluster sizes itself.
What goes inside a Group
A Group holds a curated set of smaller blocks:
- Heading and Text
- Button and Button Links
- Logo and Media
- Opening Hours, Navigation, and Social Links
- Gallery, Sponsors, a Divider, and Custom Attribute
You can also add an icon. You cannot place a full-width section or another Group inside a Group.
Open the Blocks list inside the Group to add, reorder, or remove its contents, the same way you build the rest of the page.
Arranging the contents
The Group's arrangement lives on its Layout tab.
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. Turn it off to keep items side by side on small screens.
Alignment controls how the contents line up along the direction you chose — Left, Center, or Right. The default is Left. Space Between (which pushes items apart to fill the width) appears only when Direction is Horizontal.
Position controls how the contents line up across the other axis — Top, Center, or Bottom. The default is Top. Space Between appears only when Direction is Vertical.
Gap sets the space between items, from 0 to 120 px in steps of 4. The default is 24 px.
Sizing the Group
Also on the Layout tab:
- Width — Fit sizes the Group to its contents, Fill (default) stretches it across the available space, and Custom reveals a slider to set an exact width.
- Height — Fit (default) sizes to the contents, Fill stretches to the available height, and Custom reveals a height slider.
Shared controls
The Group uses the standard block controls for background, borders, spacing, and colour. Padding and margin both start at 0 on every side, so the Group sits flush by default.
- Layout controls — set the Group's width and height.
- Background and overlay — add a background image or colour, an overlay, borders, and corner rounding.
- Spacing and padding — add padding (including horizontal spacing) and margin around the Group.
- Colour scheme in blocks — set the colour scheme for the contents.
- Analytics keys — tag the Group for reporting.
Example
A row of three icons, evenly spread across the width:
Add a Group
Add a Group block where you want the row to appear.
Add the contents
Open the Group's Blocks list and add the three icons (or buttons, logos, or whatever you want in the row).
Lay it out as a row
On the Layout tab, set Direction to Horizontal, set Alignment to Space Between so the items spread evenly, and set Gap to a smaller value like 16 px. Leave Vertical on Mobile on so the row stacks neatly on phones.