# Heading

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

1. In the editor, open the inserter and choose the level you want, from **Heading 1** to **Heading 6**. [Add a block](https://lovelyrender.com/documentation/add-block/) details the ways to insert a block.
2. Type the text. As long as the block is empty, it shows **Heading…**.
3. Press `Enter` to open a paragraph below. `Shift+Enter` inserts 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, **H2**s carry its main sections and **H3**s 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](https://lovelyrender.com/documentation/save-block-style/) explains how to update a style.

**Note:** A base style removed by hand from the block’s list of styles does not come back by itself. It comes back at the next level change.

## 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** |

![The inspector of a level 2 heading: the H1 to H6 buttons, the Settings, Styles and Animations tabs, then the Heading Settings panel with Render as a non-heading element, Invisible and Forced visual level set to Default.](https://static.lovelyrender.com/uploads/2026/10/181-blocs-titre.png)

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.

**Tip:** A home page made of a strip of logos, testimonials and a form has no landmark for someone who moves from heading to heading. Place an **Invisible** heading above each section, for example “Testimonials”. The display does not change.

### 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](https://lovelyrender.com/documentation/container-block/) details them.

**Warning:** A heading that carries a link is published as a link: it keeps its look but leaves the outline of the page. To keep it a heading, select its text and add the link with the toolbar **Link** button, or `Ctrl+K`.

### 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](https://lovelyrender.com/documentation/table-of-contents-block/) 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](https://lovelyrender.com/documentation/color-block/) |
| **Typography** | [Style text](https://lovelyrender.com/documentation/format-text/) |
| **Size & Spacing**, **Borders**, **Effects**, **Transitions** | [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/) |

## Animations tab

The **Animations** tab makes the heading appear when it arrives on screen, on hover or on scroll. [Animate a block](https://lovelyrender.com/documentation/animate-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](https://lovelyrender.com/documentation/display-content-data/) 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 **H1**s 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](https://lovelyrender.com/documentation/check-accessibility/) 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.

## See also

- [Style text](https://lovelyrender.com/documentation/format-text/)
- [Text](https://lovelyrender.com/documentation/text-block/)
- [Save a block’s style](https://lovelyrender.com/documentation/save-block-style/)
- [Check the accessibility of your pages](https://lovelyrender.com/documentation/check-accessibility/)