Back to Support Content and Media Blocks Heading Block

Heading Block

Use headings to introduce new sections and subsections, break up the text, organize content, and populate the table of contents. Headings help organize and structure your content and make it readable to visitors and search engines.

Add the Heading Block

To add the Heading block, click the + Block Inserter icon and search for “heading”. Click it to add the block to the post or page.

Adding a Heading block.
Adding a Heading block

💡

Using your keyboard, you can also type /heading on a new line and press enter to quickly add a new Heading block.

Adding a Heading block with slash inserter.
Adding a Heading block with slash inserter

To add a specific heading level, you can also type /h1 /h2 /h3 /h4 /h5 /h6 and press enter to insert the different levels of headings.

For more information, visit our detailed instructions on adding blocks.

Shortcut for Adding a Heading Block

Heading Levels

Headings follow a six-level hierarchy to rank them by importance and give order to your content. The most important heading level is level 1 (H1), and the least important is level 6 (H6).

H1 headings should be reserved for the page title to ensure Search Engine Optimization. WordPress automatically assigns H1 to the title of your pages and posts. Therefore, your first heading on the page will be H2. H3 headings are subheadings. H4 headings are sub-subheadings, and so on.

You can choose your heading level in the toolbar. If you want to adjust the size and appearance of the heading text, use the block settings.

Block Toolbar

When you click on the block, a toolbar of options will appear above it:

Heading block toolbar.
The Heading block toolbar.

The Heading block has the following options in its toolbar:

More Text Formatting Options

The additional options for text formatting in the Heading block are:

You can use the above options to apply formatting to your text or a set of characters in a Heading block. To do so:

  1. Highlight the words or characters you’d like to apply the formatting to.
  2. Select the desired option from the toolbar to apply.
Heading block more options menu

Highlight

Use the Highlight option to change the color of a few specific words or characters, or set a colored background behind specific words or characters in a Heading block.

  1. Select the text you’d like to format.
  2. Click the downward arrow in the block toolbar.
  3. Click Highlight.
  4. A small window with color options for Text and Background will pop up. This shows a set of predefined color options to choose from, as well as a color picker where you can choose the specific color you want.
Animated gif of using the highlight option to change text colour and apply background color in Heading block.
Use the Highlight option to change the text color and apply a background color to a heading

Inline Image

The Inline image adds an image to your heading. To add an inline image to your Heading block:

  1. Click the downward arrow in the block toolbar
  2. Choose Inline image
  3. Select the image you wish to use from the Media Library window.
  4. Click the Insert button to add the inline image.
Add an inline image to a Heading block
Add an inline image to a Heading block

To change the size of an inline image:

  1. Click on the image.
  2. Type or select a number for the image width.
  3. Click the curved arrow button to apply the changes.
Change the size of an inline image.
Change the size of an inline image.

Keyboard Input

Use the keyboard input option to add the <kbd> HTML tag to selected text.

The <kbd> tag is used to define keyboard input. It is typically used when writing a keyboard command. The content inside the <kbd> tag is displayed in the browser’s default monospace font. As an example, the CTRL + C text is a keyboard input:

To copy the content, highlight it, and press CTRL + C on your keyboard.

Block Settings

When you select a block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click the Settings icon in the top-right corner to bring up the settings. This icon looks like a square with two uneven columns:

The settings icon in the Editor with a tooltip "Settings" below it.
Click the Settings icon to open the block settings

The Heading block includes the following settings to adjust the appearance of all the text in that block:

Was this guide helpful for you?

Not quite what you're looking for? Get Help!

Copied to clipboard!