On this page
Every section, whatever its type, shares the same layout settings: how much space it takes, its colours and background, whether it animates, and who gets to see it. They live in the Section options panel, and changes preview on the page as you make them.
Open the panel
In Edit mode, hover a section and click Section options (the gear in its top-right corner). The panel slides in on the right with three tabs:
- General - the shared settings described below.
- Content - the section's own text, images and layout choices; see Edit text and images on the page.
- Styling - per-section overrides of your site-wide styling.
Clicking another section's gear switches the panel to that section. Close it with the X or Esc.
Section ID
A short name such as about or work, used for anchor links so a menu item can jump straight to this section; see Link a menu item to a section of your homepage. Lowercase letters, numbers and dashes only, unique on the page.
Section heading
Switches on a title block at the top of the section; click it on the page to edit the text. The same switch is on the section's hover toolbar. Sections with a built-in title, such as heroes, do not offer one.
Spacing
Top Spacing and Bottom Spacing control the space above and below the section's content. Leave them blank for the default, or enter a value such as 80px, 4rem or just 120 (pixels). You can also drag: hover the top or bottom edge of a section in Edit mode and pull the dashed band; a badge shows the value as you go.
Minimum height
Switch on Minimum height to make the section fill at least a share of the screen, which is what gives a hero its full-screen feel. Height sets that share (50-100%), and Align content places the content at the Top, Center or Bottom of the extra space. The section still grows if its content needs more room.
Custom Colors
By default a section uses your site's palette. Switch on Custom Colors to override it for this section only: Background, Default (body text), Heading, Accent, Surface and Contrast. A light site with one dark section is a few clicks. Site-wide colours live in the Design editor; see Colors and color presets.
Note: Applying a color preset in the Design editor turns Custom Colors off on every section so the whole site follows the new palette. Your color values are kept - switch Custom Colors back on to restore them.
Advanced Background
Switch on Advanced Background and choose a Type:
| Type | What you get |
|---|---|
| Image | A photo from your media library. Set Size (Cover, Contain, Auto), Position on a 3x3 grid, and Parallax: Off, Fixed (the image stays put while the page scrolls; iPhones show it as a normal background) or Scroll (the image drifts at its own speed, with Intensity and Direction controls). Overlay color and Overlay opacity tint the image so text stays readable. |
| Abstract | Generated patterns such as lines, dots, waves and shapes. Pick a Style, its Colors, a base Background colour, Opacity and Density. Some styles can Animate. |
| Gradient | Linear, radial and conic gradients plus presets such as mesh, aurora and blobs. Pick a Style, the Colors (2 to 6 stops) and, for linear gradients, a Direction. Some styles can Animate. |
Animations
Sections that animate as they scroll into view have an Animations switch. Turn it off to keep this section static while the rest of the site animates. The switch is hidden when animations are disabled for the whole site; see Scroll animations.
Visibility
- Hide section takes the section off the live site without deleting it. In the editor it stays in place, dimmed, until you bring it back.
- Show on limits the section to Desktop (larger screens) or Mobile (phones and tablets), for example to show a different hero on phones. All devices is the default.
In Edit mode such sections are still drawn so you can reach them; switch to Desktop or Mobile at the top to see what visitors get.
The Styling tab
Corner radius, shadows, font sizes and content width are set site-wide under Global Styling in the Design editor. Switch on Enable custom styling to give this one section its own content width, heading and body font size and weight, button, card and form corners, and shadows.
Note: Section settings are saved immediately but reach your live site only after you click Update live site; see Why your changes do not show on the live site yet.