Blocks

Blocks »Heading Block

Headings can help structure your page and make your content more readable by humans as well as search engines.

In order to add a heading, click on the Add Block button. Alternatively, you can type /heading in a new block and press enter.

Alternatively, you can use a slash command to insert a heading block with /heading.
Alternatively, you can use a slash command to insert a heading block.

You can also type /h1 /h2 /h3 /h4 /h5 and /h6 and press enter to insert the different levels of headings.

Detailed instructions on adding blocks can be found here.

The editor automates a search engine optimized layout by considering the page title is the <h1> tag, so subsequent Heading blocks begin at <h2> and so on, but you can choose your heading level according to your style in the toolbar or the block settings.

Block Toolbar

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

  • H2, H3 and H4 heading tags
  • Bold
  • Italics
  • Hyperlink
  • Strikethrough
  • More Options
Heading block toolbar options, accessible from the block.
The heading toolbar offers H2, H3, H4, bold, italic, hyperlink, and strikethrough options.

The Heading block suggests a hierarchy based on proper SEO practices. If you need more heading levels, you can specify them from the block’s HTML view.

The different Heading block headings in a row from H1 to H6
The Heading block suggests a hierarchy based on proper SEO practices.

↑ Table of Contents ↑

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 button.

The top right of the sidebar display, showing Document and Block settings with Block highlighted
The block settings can be found in the sidebar.

↑ Table of Contents ↑

Heading Settings

If you look to the block settings in the sidebar, you’ll find the text size and color settings.

The heading block options offer the size plus text color settings

↑ Table of Contents ↑

Advanced

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

You can add HTML Anchors and CSS classes from the sidebar.
You can add HTML Anchors and CSS classes from the sidebar.

The HTML Anchor is a useful tool for creating page jumps. If you toggle the block to its HTML view, you’ll see that the HTML Anchor input is added as a CSS ID to the heading tag. You can also see the CSS class in the block HTML.

The advanced tab also lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit. Learn more.

Not quite what you're looking for?

Get Help