SlowlyContainer
A centring wrapper that keeps content at a comfortable width in the middle of the page.
A container keeps your content at a readable width and centred, instead of stretching edge to edge across a wide screen. Drop one inside a full-width section and the content stays in a tidy column down the middle.
It is the usual partner to a section. The section spans the screen and carries the background; the container holds the content at a sensible measure.
Adding one
- Select the section to hold it.
- Open the inserter and search "container".
- Pick the Container block.
Settings
In the container's own panel. Layout, spacing, and the rest live in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| HTML Tag | The element the container renders as in the page source, div by default, but can be set to section, article, main, aside, header, footer, or nav | The container has a semantic role, such as marking the main content area or a complementary sidebar |
Styling
Width, padding, display mode, and every other visual property come from the shared design panel. The container inherits the full layout suite: flexbox and grid controls, min and max widths, overflow, and positioning. If the container needs to respond differently on hover or focus, states covers that.
Accessibility
Changing the HTML tag to a landmark element (main, nav, aside, header, footer) gives screen-reader users a way to jump straight to that region. Each landmark should appear at most once per page with its default role, or carry a unique accessible name if more than one of the same type is present.