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.

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.

The Block editor by default considers the page title as the <h1> tag, so subsequent Heading blocks are added as H2, H3, and so on.

You can also choose your heading level according to your style from the Block Toolbar.

Another shortcut method to add a heading is to type ##space to add H2 heading, ###space to add H3 heading, etc.

Detailed instructions on adding blocks

Block toolbar

Each block has its own block-specific controls that allow you to customize the block right in the editor. The Heading block offers the following options in its toolbar:

• Transform to
• Drag icon
• Move handles
• Change alignment
• Change heading level
• Change text alignment
• Bold
• Italic
• Link
• More rich text controls
• More options

Transform to

When you click on the Transform button you can convert the Heading block into a Paragraph, List, Quote, Columns, Pullquote, or Group block.

Drag icon

To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag to the new location. The blue separator line indicates where the block will be placed. Release the left mouse button when you find the new location to place the block.

Move handles

The up and down arrow icons can be used to move a block up and down on the page.

Get more information about moving a block within the editor.

Change alignment

Using the alignment 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.

Change heading level

You can change the heading levels from H1 through H6 from the block toolbar.

Change text alignment

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

Bold

Use the Bold option or Ctrl+B / Cmd+B on your keyboard to bold it, which is usually heavier than the surrounding text.

Italic

Use the Italic option or Ctrl+I / Cmd+I on your keyboard to italicize it, which usually appears slanted to the right.

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 the cog icon next to the Publish or Update button.

Color

You can customize the text color, and background color, for the Heading block. The color options available will vary based on the theme.

See this guide for more information about changing colors.

Typography

Typography settings allow you to adjust the Font size, Appearance, Letter case, Line height, and Letter spacing. 

Get more details about changing typography settings.

Dimensions

Dimension controls are used to control how groups of blocks are placed alongside one another, by changing the values for padding, margin, and other dimensions

Learn more about dimension controls.

Advanced

In the advanced panel of the block options, you’ll see options for HTML Anchor and Additional CSS Class.

“HTML anchor” allows you to make a unique web address for a particular Heading block. Then, you’ll be able to link directly to the Heading block of your page.

The “Additional CSS class(es)” lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.