Layout controls
Set the direction, alignment, height, and gap of any block using the shared Layout tab.
Almost every block has a Layout tab (or a layout group nested inside it) with the same set of controls. Learn them once here, then look at each block's own page for the defaults and extra options it adds.
Each block lays its elements out as a stack. Direction sets whether that stack runs top-to-bottom or left-to-right; Alignment and Position place the elements across and along it.
Direction
Choose Vertical or Horizontal.
- Vertical — elements stack top to bottom. Alignment controls their left-to-right placement; Position controls their top-to-bottom placement.
- Horizontal — elements sit in a row. The two axes swap meaning: Alignment now controls placement along the row, and Position controls top-to-bottom placement within the row.
The starting direction depends on the block. Whole sections start Vertical; smaller element groups (such as the Buttons group) start Horizontal. Each block's page notes its own default.
Vertical on Mobile
When Direction is Horizontal, a Vertical on Mobile toggle appears. It is on by default: a horizontal row automatically collapses into a vertical stack on phones and tablets, so nothing gets squeezed on a narrow screen. Turn it off only when you want the row to stay side-by-side at every size.
Alignment
Pick Left, Center, Right, or — on some blocks — Space Between.
Space Between pushes the elements to the outer edges and puts all the spare space in the middle. It only appears where it makes sense for the current direction, so you will not see it on a vertical section.
Position
Pick Top, Center, Bottom, or Space Between. Position is the partner control to Alignment along the other axis. In a Vertical stack, Top, Center, and Bottom control where the whole group sits within the block's height. Space Between here spreads the elements out along the stack with the gaps between them.
Gap
A slider, in pixels, for the space between each element. It runs from 0 to 120px in steps of 4px. The section Layout tab's gap starts at 12px; per-element groups (such as the Buttons group) start at 16px. Increase it to open up a row of buttons or a stack of items; set it to 0 to butt elements together.
Mastheads add a separate Section Gap with Small, Medium, and Large presets — see the Masthead page.
Width
Width sets how far the block stretches across the page, from Full Width edge to edge down to a tight reading column. It lives with the other Settings-tab controls — see Spacing and padding for the full set of presets.
Not every block offers every option, and some differ: mastheads expose only Page, Narrow, and Full (the edge-to-edge option is labelled Full there, not Full Width). Each block's page lists what it exposes.
A full-width block reaches all the way to the top of the window and can tuck under the navigation bar. Leave room at the top — adjust the block's spacing — so its content is not hidden behind the header. See Spacing and padding.
Max Width
Some blocks add a Max Width control, separate from Width. It comes in two forms:
- A slider (200–2000px, defaulting to around 1200px) that caps how wide the content can grow on large screens, on grid and section blocks.
- A preset choice of Narrow, Normal, or None on text elements inside mastheads and similar blocks. It defaults to None, which means no cap — the text fills the available width.
Height
On mastheads, banners, and full sections you can set Height:
- Auto — as tall as its content.
- Small, Medium, Large — fixed, comfortable heights.
- Full — fills the height of the screen.
- Custom — reveals a Custom Height slider (200–1000px).
Defaults differ: a plain section starts at Auto, while a Masthead or Banner typically starts taller — Medium or Full depending on the block. Each block's page notes its own default.
Columns and cards per view
Grid and carousel blocks add controls for how many items show across a row:
- Columns (1–6, starting at 3) with Mobile Columns (1–4, starting at 1) on grid layouts such as a Collection.
- Cards Per View (starting at 3) and Mobile Cards Per View (starting at 1), with the same ranges, on a Carousel.
Per-element layout groups
Many blocks repeat the same Direction, Alignment, Position, and Gap controls inside collapsible groups for individual parts — labelled Buttons, Title, Body, Description, Footer, Tags, or Details. This lets you align a row of buttons differently from the heading above it.
The Buttons group is the most common. It starts Horizontal, Left, Center, with a 16px gap. Text-based groups such as Title and Description add their own Width (Fit or Fill), a Max Width preset (Narrow, Normal, None), and an Alignment of Auto, Left, Center, or Right — where Auto follows the section's alignment.