Heading block

Go back to the list of Blocks

Headings help to introduce new sections and organize the content on the page. They make your website more readable by humans and search engines.

Use headings in order to make your page accessible. View the Outline tab in the Document Overview to see your page headings.

Add a Heading block

To add a heading, click on the Block Inserter (+). Alternatively, you can type /heading in a new paragraph block and press enter.

You can also add a Heading block with H1 heading level by typing /h1 in a new paragraph block followed by enter. Subsequent heading blocks can be added by typing /h2, /h3, /h4, /h5, /h6 followed by enter.

You can also add a Heading block by using a # shortcut at the start of a new line, then pressing space. For example:

• Type ## followed by a space to add an H2 heading.
• Type ### followed by a space to add an H3 heading.
• Add more # symbols for lower heading levels, up to H6.

In most cases, the page title is used as the <h1> tag, with subsequent Heading blocks added as H2, H3, and so on. This may vary depending on the theme or page template you’re using.

Detailed instructions on adding blocks

Changing Heading block levels

To change the heading level for a Heading block already on your post or page, click on the Transform button on the block toolbar and choose the new heading level.

You can also change heading levels by using the buttons in the Block settings panel. Your current heading level will appear selected and you can select a different one to change it.

Block toolbar

Each block has its own block-specific controls that allow you to customize the block right in the editor.  If you hover over the buttons, tooltips will show what each button does.

Transform to

When you click on the Transform button you can convert the Heading block into Patterns with headings if they exist. The Heading block transform options are: Heading levels 1-6, Paragraph, List, Quote, Group, Details, Columns, and Pullquote. Available styles may include Default, Display, Subtitle, and Annotation.

Block moving tools

The block-moving tools allow you to move the block in the editor. Use the six dots icon to drag and drop the block and place it anywhere on the page. Alternatively, click on the up and down arrows to move the block up or down.

Get more information about moving a block within the editor

Align

Using the align drop-down from the toolbar, you can make the Heading block wide width or full width. The wide-width and the full-width align options are only available if your theme supports them.

Text alignment

Using the align text drop-down from the toolbar, you are able to align the heading text to the left, make it center-aligned or orient it to the right.

Bold and italics

The Bold and Italics formatting options are used to customize the text in the Heading block. You can also use keyboard shortcuts to enable these text formatting:

• Ctrl + B or Command + B to bold the text.
• Ctrl + I or Command + I to italicize the text.

Link

Use the link icon to insert a hyperlink to the highlighted heading text.

Read about more link editing options

More rich text options

The drop-down menu to the left of the More options menu contains a range of additional rich text editing options such as highlighting, inline code, strikethrough, and more.

Read about more rich text editing options

More options

These controls give you the option to copy, duplicate, and edit your block as HTML.

Read about these and other settings

Block settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, click on the Settings button next to the Save/Publish button.

Change heading level

Select the buttons for H1, H2, H3, H4, H5 or H6 to easily change the heading level for an existing block. 

Styles

Select buttons to quickly apply a style to your Heading block. Options may differ depending on your theme.

Color

The Heading block provides Color settings options to change the text and background colors.

See this guide for more information about changing colors

Typography

Typography settings allow you to adjust the Font size, Appearance, Line height, Letter spacing, Decoration, Orientation, Letter Case and Fit text.

Get more details about changing typography settings

Dimensions

The Heading block provides dimension settings options to change padding and margin size.

Learn more about dimension controls.

Border

The Heading block provides border settings options to add border color, width, and radius.

Learn more about border settings.

Advanced

The Heading block provides the following Advanced settings options: HTML Anchor, Additional CSS Class(es), Additional CSS, and Styles.

Learn more about advanced settings