Layout controls
Every block shares the same set of sizing, spacing, and per-device controls — learn them once, use them everywhere.
Select any block in the page builder and the properties panel shows a Layout section. It’s the same set of controls no matter which block type you’ve selected.
Align & width
Alignis left, center, or right — where the block’s box sits on the page. Widthis a preset cap on how wide that box gets: Small (300px), Medium (450px), Large (600px), or Full (no cap — stretches to the page’s own width). Medium is the default for a new block.
Minimum height, under Advanced options, is a floor, not a clip — a value here guarantees the block’s box never renders shorter than that, but taller content (a long RSVP form, a big schedule) is never cut off to fit it.
Text color override
A block’s own text already sets an explicit color drawn from the current theme, so a plain CSS color:in Custom CSS (below) can’t override it — that theme color is more specific and always wins. The Text color control under Advanced options works differently: it redefines the underlying CSS custom property those theme colors actually read from for this block and everything nested inside it, so it overrides every descendant’s text color without needing a separate setting per block type. Clear it to go back to following the theme.
Custom CSS
Also under Advanced options: a free-text box for raw property: value; declarations, applied straight to this one block’s own wrapper as inline styles — not as a stylesheet. There are no selectors and nothing here can reach any other element on the page. The full safety story (and why that matters) lives on Custom code & sandboxing.
Row share & grid span
Row share (labeled “Row share” in the panel) and grid spanonly appear, and only mean anything, when this block is a direct child of a Container block set to Row or Grid layout. Row share is a relative ratio among siblings — leaving it blank splits the row evenly, a number like 2 next to two default siblings gives this one half the row, and 0 opts out to size the block to its own content instead. Grid span is how many of the container’s grid columns this block occupies. For a top-level block, or one inside a plain column stack, neither field is shown, since neither would do anything.
Per-device overrides
Open “Per-device options” to hide, resize, or realign this one block differently per device, without touching how it looks anywhere else:
- Hide on desktop hides it only at desktop width (1024px and up), leaving mobile and tablet alone — useful for something meant only for smaller screens.
- Mobile (up to 767px wide) can hide the block, or override its width/align for that width alone. Anything left unset falls back to the desktop settings above.
- Tablet(768–1023px) works the same way, but anything left unset there falls back to mobile’s override first, then desktop — a tablet held upright is meant to default to looking like mobile with no extra setup, the same way one held sideways already defaults to looking like desktop.
At least one of the three has to stay visible — once two are hidden, the panel disables the third checkbox so a block can’t be hidden everywhere by accident.
Builder preview vs. the live guest page
@mediaCSS, because the server has no way to know a visitor’s actual viewport ahead of time. The builder canvas can’t use a real media query for this — it would evaluate against your actual browser window, not the canvas’s simulated device width — so the Desktop/Tablet/Mobile toggle in the canvas toolbar instead swaps the block layout directly based on which device you’ve selected. Both paths read the same settings and agree on the same breakpoints, so what you see in each preview mode matches what that device sees live; there’s just a different mechanism behind each one.