Work with Sections - backgrounds and overlays, the Style presets, text color, max width, padding scales, height, and responsive visibility.
Loading the guide...
Help us make the guides more useful.
0 helpful · 0 not helpful
A Section is a full-width horizontal band of a page. Every page is a stack of Sections, and every Section contains Rows and Columns that hold the actual content. Sections are where you set the backdrop: background, color scheme, spacing, and width.
Set Image to render a photo behind the whole Section - the classic hero band. The published site automatically serves a smaller image variant to phones and the full-size image to larger screens, so you do not need to prepare mobile versions yourself.
Image Fit, Image Position, and Image Repeat control how the photo covers the band when you want something other than the default cover crop - a contained logo wall or a repeating texture, for example.
When text sits on a photo, use the Overlay group to keep it readable:
Leave both empty for no overlay at all.
The Style select applies one of the site's color schemes to the whole band:
| Style | Use for |
|---|---|
| Default | The normal page background |
| Muted | A subtle alternate band (great for zebra-striping sections) |
| Primary | A bold brand-colored band (CTAs, banners) |
| Secondary | The alternate strong scheme (often a dark band) |
Styles come from your site's brand colors in Site Settings, so they stay consistent across every page. With Style on Default you can also set a custom Background Color for a one-off band.
Location binding ties the Section to one of the site's Locations, so {{location.*}} merge tokens, Maps, and connected Reviews inside it use that Location: Off (render as authored), Automatic (this page's city), Primary (main location), All locations, or one specific Location. See Smart Locations.
When a Section sits on a photo or a custom dark background, set Text Color to Light or Dark to force readable text, buttons, and controls across everything inside.
Max Width caps the content width inside the Section: Default, X-Small, Small, Large, X-Large, Expand, or None. The band itself always spans the full screen; this controls how wide the content column is within it.
Vertical spacing uses two selects, Padding Top and Padding Bottom, each with a scale: Default, X-Small, Small, Medium, Large, X-Large, or None. Default is the standard section rhythm, and X-Small is deliberately tiny - a hair of breathing room rather than a full band of space.
Padding is mobile-first by design: each step on the scale automatically renders tighter on phones and at full size on larger screens. That is deliberate - long desktop paddings feel empty on a phone. Do not fight it with custom CSS; pick the step that looks right on desktop and the phone version takes care of itself.
Two groups give a Section a shaped edge instead of a straight line:
Choose the semantic tag the Section renders as: section, div, aside, article, header, footer, or main. Leave it on section unless you have a structural reason.
Optionally animate the Section as it scrolls into view: Fade In, Slide Up, Slide Down, Slide Left, Slide Right, or Zoom In, with an optional delay in milliseconds.
Show on controls which devices render this Section:
Hidden Sections stay visible and editable in the builder; the hiding applies on the rendered site. This is how you build device-specific bands, like a mobile call-to-action Section that desktop visitors never see. Only the header can stick to the top of the screen - see Header and Footer.
The standard Advanced bundle: Name (label it in the Outline - do this for every major Section), Status (disable without deleting), ID (anchor target for in-page links), Classes, Attributes, and scoped custom CSS. Prefer the native fields above before writing CSS - see Builder Basics.
Editing and publishing a Section updates the CMS, not the live site. Your changes go live on the next manual Deploy. See Preview, Publish, and Deploy.
| Control | Options |
|---|---|
| Style | Default / Muted / Primary / Secondary |
| Text Color | None / Light / Dark |
| Max Width | Default / X-Small / Small / Large / X-Large / Expand / Full width (edge to edge) / None |
| Padding Top and Bottom | Default / X-Small / Small / Medium / Large / X-Large / None (auto-tightens on phones) |
| Height | None / Small / Medium / Large / Viewport Height / Viewport (fill remaining) |
| Show on | All devices / Desktop only / Mobile only |