SlowlySection
The top-level layout block for grouping related content into a band of the page.
A section is the outermost layout block, for grouping thematically related content into one band of the page. Most pages are a stack of sections: a hero, an about, a feature row, a closing call to action.
It is a flex or grid container like the others, arranging whatever you place inside. Its job is structural. A section sits at the top level of the page, which is why a new template usually starts with one.
Adding one
- Select the page root or the container to hold it.
- Open the inserter and search "section".
- Pick the Section block.
Settings
In the section's own panel. Layout, spacing, colour, and background live in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| HTML tag | The element the section renders as: section, div, header, footer, main, article, aside, nav | Use section for landmark content areas, header and footer for the page header and footer, main for the primary content region |
| Shape divider (top) | Decorative SVG shape placed at the top edge, with controls for type, colour, height, width, flip, and shadow | Blending one section into the next with a wave or slant instead of a hard edge |
| Shape divider (bottom) | Same controls for the bottom edge | Angling into a coloured footer or leading into the next band |
Styling
Everything about how a section looks, its width, padding, background, and layout, comes from the design panel. For a section that changes on scroll or on a sticky state, the states panel is where those overrides live.
Accessibility
Use the HTML tag setting to pick a meaningful landmark element. A page with a header, a main, and a footer gives screen-reader users skip-navigation anchors without any extra markup. A decorative section that groups content with no independent meaning can stay as a div.