Blocks » Heading Block

Table of Contents

1. Block Toolbar
2. Block Settings
3. Heading Settings
   1. Typography
   2. Color Settings
4. Advanced

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.

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
• Text alignment
• Bold
• Italics
• Hyperlink
• Strikethrough
• More Options

The heading toolbar offers H2, H3, H4, bold, italic, hyperlink, and more 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 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 block settings can be found in the sidebar.

↑ Table of Contents ↑

Heading Settings

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

Typography

Adjust the text appearance of your Heading block with the following settings. If you don’t see the setting, click the plus icon to activate the option.

• Font size
• Appearance
• Line height
• Letter case
• Letter spacing

Font size allows you to switch between pt and px using the slider just above the font selections.

Appearance gives you the option to change the style of the text from thin to extra bold.

Line Height sets the spacing above/below the text. If you select zero, be sure to check your site on mobile.

Letter case provides you the ability to set the text to all caps, the first letter capitalized, or all lower case.

Letter spacing sets the space between each character of the text.

Color Settings

Here you can set your heading:

• Text color
• Background color

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.

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.