Heading Block

The Heading Block lets you introduce new sections and organize content to help visitors (and search engines) understand your content structure …

WordPress Gutenberg Blocks – Heading

WordPress Gutenberg - Heading Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Heading Block Description

The Heading Block lets you introduce new sections and organize content to help visitors (and search engines) understand your content structure.

Headings are normally used to indicate the start of a new topic.

Add headings to WordPress using the Heading Block

(Add headings to WordPress using the Heading Block)

How To Use The Heading Block

To add a Heading Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Heading’ block (in Most Used or Common Blocks section), or
    • Add the ‘Heading’ block in the Content Area.
  • Type or paste in your heading.
  • Use the tools in the Heading Block Editor or Block Settings section to edit and format your heading.

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select a ‘Heading’ block …

'Add Block' Tool - Add Heading Block

(‘Add Block’ Tool – Add Heading Block)

Or, select a Heading Block in the Content Area

Add a Heading Block from the Content Area

(Add a Heading Block from the Content Area)

After adding a Heading Block, type or paste in your heading …

Type or paste in your heading

(Type or paste in your heading)

Info

Notes:

  • The Heading Block supports all HTML heading tags (H1 – H6).
  • The Heading Block also supports HTML Anchors (see below).

After adding headings:

  • Edit and configure block settings,
  • Save, publish, or update your post or page.

How To Edit A Heading Block

To edit a Heading Block:

    • Click inside the Heading Block to select it.
    • Use the Block Editor tools to:
      • Change the Heading Level
      • Format the text (bold, italics, strikethrough)
      • Add a hyperlink to the heading
    • Use the Block Settings to:
      • Change the Heading Level (H1 – H6).
      • Change the heading text alignment (left, centre, right).
      • Create an HTML Anchor (see below).

How To Edit A Heading Block

(How To Edit A Heading Block)

HTML Anchor

An HTML Anchor lets you add links in your content pointing to different sections of your page (e.g. like in a Table of Contents) …

HTML Anchor

(HTML Anchor)

To create an HTML Anchor Link:

      • Click inside the Heading Block of the section you want to visitors to go to when they click on a hyperlink,
      • Select and highlight your Heading text and click on the ‘Hyperlink’ tool in the Heading Block editor
      • Add a name (ID) for the Anchor link preceded by a ‘hash’ (#)
      • Click the ‘Apply’ button.

In the example below, we have created an HTML Anchor called #main

Add an HTML Anchor ID to a heading

(Add an HTML Anchor ID to a heading)

The next step is to connect the Anchor ID in your Heading Block to your page. To do this:

      • Click inside the Heading Block to display the Heading Block  Settings
      • Add the anchor ID (minus the ‘#’) to the HTML Anchor field in the Advanced Settings > HTML Anchor field.
      • Make sure both ID names match …

Add Anchor ID to Advanced Settings > HTML Anchor field

(Add Anchor ID to Advanced Settings > HTML Anchor field)

To send post/page readers to the anchor link section you have created:

      • Select and highlight the text you want to add an Anchor link to
      • Click on the Hyperlink tool in the Block Editor
      • Enter the Anchor ID (with the # symbol)
      • Click the ‘Apply’ button
      • Publish or update your page or post to save and update your settings

Add an Anchor link to your content

(Add an Anchor link to your content)

Now, when users click on the link containing your Anchor link, they will be taken to the section of the page you have marked with an HTML Anchor …

HTML Anchor Link

(HTML Anchor Link)

Info

You can also convert a Paragraph Block into a Heading Block if you know how to use WordPress keyboard shortcuts

Create a heading in a Paragraph Block

(Create a heading in a Paragraph Block)

Remember to update and publish your post or page to save your settings.

How To Remove A Heading Block

To delete or remove a heading block:

      • Click inside the Heading Block to select it.
      • Select the ‘More Options’ tool in the Block Editor.
      • Click on ‘Remove Block’.
      • The block will be removed from your post or page.

Remove a Heading Block

(Remove a Heading Block)

Additionally …

      • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
      • You can also convert Heading Blocks into Reusable Blocks.

Heading Block Tools, Options & Settings

The Heading Block includes tools, options, and settings for:

      • Heading Block Editor
      • Heading Block Settings

Heading Block Editor

Heading Block Editor

(Heading Block Editor)

The Heading Block Editor includes tools that let you perform the following operations:

      • Change Block Type (See ‘Heading Block – Additional Info’ section below.)
      • HTML Heading Tags
        • H2
        • H3
        • H4
      • Format Text
        • Bold
        • Italics
        • Strikethrough
      • Add Hyperlinks
        • Paste link URL
        • Type to search and link to existing content
        • Hit ‘Enter’ or click ‘Apply’ button to create link
        • Option to open link in new tab
      • More Options

Heading Block Editor

(Heading Block Editor)

Heading Block Settings

Heading Block Settings

(Heading Block Settings)

Heading Block settings include:

      • Block description area
      • Text Settings
        • Level
            • H1
            • H2
            • H3
            • H4
            • H5
            • H6
        • Text Alignment
          • Left
          • Center
          • Right
      • Advanced Settings
        • HTML Anchor
        • Additional CSS Class

Heading Block Settings

(Heading Block Settings)

Heading Block – Additional Info

The Heading Block can be converted into the following block types:

Change Block Type - Heading Block

(Change Block Type – Heading Block)

Info

Installing plugins or themes on your site may add new functionality, options, or settings to Heading Blocks.

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Heading Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"This is an awesome training series. I have a pretty good understanding of WordPress already, but this is helping me to move somewhere from intermediate to advanced user!" - Kim Lednum

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

Keyword Research ToolsKeyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as Heading Block.