SlowlyHeading
A heading for a section or subsection, h1 through h6.
A heading titles a section or subsection. Choose its level, h1 through h6, to give it the right place in the page's outline and in how search bots and screen readers read the page.
Adding one
- Select the section or container to hold it.
- Open the inserter and search "heading".
- Pick the Heading block, then type its text.
Settings
In the heading's own panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Level | Sets the HTML tag, h1 through h6 | Pick the level that fits the document outline, not the size you want on screen, size it separately in the design panel |
| Content source | Pulls text from a dynamic source (post title, custom field, taxonomy term, and more) instead of the typed value | Templates, query loops, or any heading that should reflect data from the current post or product |
Level is structure, not size. A page should have one h1. Subsections use h2, sub-subsections h3, and so on down to h6. Set the level for meaning, then size and style it however the design calls for in the design panel.
The content source connects to your global typography the same as any heading, so dynamic headings stay consistent across the site without extra work.
Styling
The heading uses the shared design panel, size, weight, colour, spacing, and everything else per breakpoint. Its hover and focus states are available when the heading is wrapped in a link.
Accessibility
Use one h1 per page, and keep the level order logical, no jumping from h2 to h4. Screen readers and assistive tools present headings as a navigation list, so a visitor who cannot scan visually relies on the outline to orient themselves. A broken or skipped hierarchy makes that list useless.
If the heading labels a section that is otherwise unlabelled (a card grid, a form, a sidebar widget), it may serve as the accessible name for that region via aria-labelledby. The heading itself needs no extra attribute for that; the containing landmark just needs to reference it.