Page layout and content
Pages are built as Section → Row → Column → Block—section backgrounds stay full bleed while row max-width caps content; use Attr layout mode (Contained, Fixed Width, Edge to edge) and height (% viewport) on the section, not Style width on every block.
Most pages follow one structure: Section → Row → Column(s) → Block(s). Understanding which layer controls width versus spacing keeps layouts centered on desktop and comfortable on mobile.
Sidebar basics: Page editor sidebar and toolbar. Block catalog: Editor blocks and layout reference.
The photo-frame model
Think of each section as a full-width photo frame. The row inside it is the mat board—a centered box with a maximum width. Your blocks live inside that box.
┌─ SECTION (100% width — background, vertical breathing room) ────┐
│ │
│ ┌─ ROW (max-width, centered — main content boundary) ─────┐ │
│ │ [ Portfolio grid / text / buttons / other blocks ] │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
Section background stays full bleed. Color, image, and overlay paint the entire section band edge to edge. Row → Max width only caps the content inside the mat board—it does not shrink the background.
Do not use large left/right padding on the section to “squeeze” content narrow on desktop. That fights the layout system and breaks predictably on smaller screens. Compress content width with Row → Max width under Attr instead.
What each layer controls
| Layer | Controls | Where to edit |
|---|---|---|
| Section | Layout mode, height, full-bleed background (image/overlay), vertical spacing | Select section → Attr; solid color in Style |
| Row | Max width, gap between columns, row padding, horizontal centering | Select row → Attr (row layout) |
| Column | Cell padding, min height, vertical alignment of blocks in the cell | Select column → Attr |
| Block | Block-specific settings (portfolio source, hero image, form recipient, etc.) | Select block → Attr |
Section padding does not resize children. It adds space around the row; it does not stretch rows or columns to fill the viewport. To make a band taller, use Attr → Height on the section, raise column min-height, add column padding, or insert a Spacer block.
Section Attr: layout mode and height
With the section selected, Edit → Attr exposes Section Layout:
| Control | Options | What it does |
|---|---|---|
| Layout Mode | Contained (default), Fixed Width, Edge to edge | How the section and its inner row relate to the viewport width. Edge to edge spans the full viewport; columns still stack on mobile. |
| Height | Auto, 50% Viewport, 80% Viewport, 100% viewport | How tall the section band is relative to the browser window (or content height when Auto). |
Section Background (same Attr panel): pick a background image, size/position, and overlay opacity. Solid fill color stays in the Style tab—Attr does not duplicate a second color picker.
Remember: image and overlay apply to the full-width section band. Narrow the headline or grid with Row → Max width, not by clipping the background.
Setting content width (the right lever)
| Goal | Recommended control | Avoid |
|---|---|---|
| Wide portfolio or feature grid (~1280px) | Row → Max width → 1280 / Full | Huge horizontal section padding |
| Narrow article or long-form text (~768px) | Row → Max width → 960 or smaller preset | Style tab width on the section |
| Comfortable edge margin on phones | Section spacing (32–64px typical) | Using padding to fake desktop max-width |
| Standalone block on the canvas (Portfolio embed, Contact form) | Style → Width (centers when set to a fixed value) | Expecting a row wrapper that is not there |
Rows are centered automatically when you set max width under Attr. That is the primary way to compress or widen page content.
Style tab vs Attr for layout
| Control | Prefer Attr when… | Style tab is for… |
|---|---|---|
| Row max width | Always (row layout traits) | Rare overrides only |
| Section layout mode / height | Always (section layout traits) | Do not fake with Style height alone |
| Row / section padding | Rows: Attr only; sections: Attr first | One-off tweaks on non-row elements |
| Block width on canvas | Block has no row (standalone embed) | Fixed width with auto-center (e.g. 800px) |
| Section / block solid color | — | Background color and theme presets |
| Section / CTA background image + overlay | Always under Attr | — |
| Typography and other colors | Block traits when available | Fine-grained visual overrides |
If Attr and Style both expose padding on the same row, use Attr only to avoid conflicting values on the live site.
Padding: linked and unlinked
In Style → Spacing, Padding and Margin support two modes:
- Linked (link icon on): one value applies to all four sides—like CSS shorthand (
padding: 32px). - Unlinked (link icon off): set top, right, bottom, and left independently.
Sliders run up to 160px. For larger or asymmetric values, switch to unlinked mode and type in the number fields (for example 200px or 48px 24px via per-side fields).
Selecting the right element
| Problem | Fix |
|---|---|
| Cannot click the row on canvas | Layers → expand Section → select Row |
| Content looks left-aligned with empty space on the right | Set Row → Max width under Attr, not only Style → Width on a child block |
| Band too tall or too short | Set section → Attr → Height, or adjust vertical spacing / column min-height—not section width |
| Background looks cut off at content width | Background is meant to stay full bleed; narrow content with Row → Max width instead |
| Portfolio embed not centered at custom width | Style → Width on the block (auto-centers); confirm Save Page and preview |
Common page patterns
Standard content page
- Add Section.
- Inside: Row (default max width is usually fine).
- Add 1 Column or 2 Columns.
- Drop blocks into columns.
Full-bleed section band, contained body
- Select the section → Attr → Layout Mode → Edge to edge (optional) and set Height if you want a tall band.
- Add a background image or solid Style color on the section; keep the row max width for headlines and buttons.
- Next section: Contained with a normal row max width for body copy or grids.
Standalone embed (no row)
Some blocks (for example Portfolio embed, Contact form) can sit directly on the page without a row. Use Style → Width to constrain and center them; use Attr for block-specific options.
Next steps & validation
- Open a draft page → Layers → confirm Section → Row → Column hierarchy.
- Select the section → Attr → try Contained vs Edge to edge and a % viewport height → preview Desktop and Mobile.
- Select the row → Attr → change Max width → confirm the background still spans full width while content narrows.
- Add horizontal section padding only for edge breathing room—not to simulate max-width.
- On a standalone block, set Style → Width to
800px→ confirm it centers after Save Page.
Related: Page editor sidebar and toolbar · Editor blocks and layout reference · Supported media presentation blocks