The Heading block opens a section of the page, from level 1 to level 6. This page describes the style of each level, the forced visual level, the invisible heading, the clickable heading and the controls for the outline of your pages.
Add a heading
- In the editor, open the inserter and choose the level you want, from Heading 1 to Heading 6. Add a block details the ways to insert a block.
- Type the text. As long as the block is empty, it shows Heading….
- Press
Enterto open a paragraph below.Shift+Enterinserts a line break in the heading.
To change the level of a heading you have written, select it, then click one of the buttons H1 to H6 at the top of the inspector. The block picker, the first icon of the toolbar, does the same. The text and the formatting are kept.
The levels form the outline of the page. An H1 carries the subject of the page, H2s carry its main sections and H3s carry the subsections of an H2. Screen readers and search engines read this outline.
The style of each level
A heading carries the style of its level from the moment it is inserted, Heading 1 to Heading 6. These styles shipped with the product set the heading font of the site and a size from the size scale. Weight, line height, margins and color are set on the block or in your own styles.
| Style | Carried by a heading of level | Step on the size scale |
|---|---|---|
| Heading 1 | 1 | 5xl |
| Heading 2 | 2 | 4xl |
| Heading 3 | 3 | 3xl |
| Heading 4 | 4 | 2xl |
| Heading 5 | 5 | xl |
| Heading 6 | 6 | l |
The style follows the displayed level. An H2 changed to H3 leaves Heading 2 for Heading 3. Your other styles stay in place. A size set by hand on the block is kept.
To change the look of every heading of a level, edit its style from any heading of that level. Every heading that carries it follows on all pages. Save a block’s style explains how to update a style.
Settings tab
Heading Settings panel
| Setting | Effect | Default value |
|---|---|---|
| Render as non-heading element | Publishes ordinary text instead of a heading, with the look of the chosen level. The block leaves the outline of the page. | Off |
| Invisible | Removes the heading from the screen. It is still read by screen readers and counted in the outline of the page. | Off |
| Visual level override | Gives the heading the style of another level without changing its real level: Default, then Level 1 to Level 6. Not available when Render as non-heading element is turned on. | Default |
Your mockup may ask for a small subtitle where the outline calls for an H2. Keep level 2 and set Visual level override to Level 4. The visitor sees the size of Heading 4. Screen readers and search engines read a level 2.
Link panel
The Link panel connects the whole heading to a page, a file or an address. Its settings are those of all blocks that carry a link; Container details them.
Advanced panel
Each heading receives, when it is created, an identifier that never changes. It is used for links to the section, by the Table of contents block and by the breadcrumb of search results. The HTML anchor field of the Advanced panel shows it, grayed out: it cannot be edited. A link to the section stays valid even if you rewrite the heading.
Styles tab
The heading is styled in the Default, Hover and Active states. It receives the saved styles, including the six level styles.
| Panel | Guide |
|---|---|
| Colors | Color a block |
| Typography | Style text |
| Size & Spacing, Borders, Effects, Transitions | Set size, borders and effects |
Animations tab
The Animations tab makes the heading appear when it arrives on screen, on hover or on scroll. Animate a block describes the effects.
The heading of a content item in a card
In the card of a content list or of a references block, the heading of each content item is a Heading block whose text is a piece of data. This data is the {post_title} chip. In the editor, the heading shows the chip; on the site, each card shows the title of its content. Show the data of a content item explains the data.
- A new card in a list comes with this level 2 heading, linked by Link to the item. The heading keeps its tag and the link is placed inside it.
- This heading has no anchor: it changes from one card to the next. It does not appear in the table of contents.
- You can write around the chip. The chip can be placed in a heading outside a card: in the articles template, an H1
{post_title}shows the title of each article.
On a phone
The panels of the Styles tab are set screen by screen. For a smaller heading on a phone, choose the Mobile screen in the row of screens, then set its size in the Typography panel. The other screens keep theirs.
Accessibility
The editor’s Accessibility panel checks the outline of the page at every change. Each finding has a Show the block button that selects the heading in question.
| Message | Issue |
|---|---|
| The first heading of the page should be level 1. | The page starts with an H2 or lower. |
| A level 4 heading follows a level 2: no level should be skipped. (with the levels in question) | The outline skips a level. |
| The page has several level 1 headings; it should have exactly one. | Two H1s on the same page. |
Headings set to Render as non-heading element are not checked. Headings in cards are checked at their own level. Check the accessibility of your pages describes the panel.
Limits
- The anchor identifier of a heading cannot be chosen.
- A link placed on the block removes the heading from the outline. The Accessibility panel does not flag it.