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.
Changelog
- Updated 2023-03-07
- Added missing ALT tag for text alignment image
- Updated 2023-08-09
- Replaced the link section with short summary linking to new dedicated page.
- Updated 2023-06-08
- Replaced “More rich text options” section with short summary linking to new dedicated page for rich text editing options.
- Updated 2022-06-22
- Updated content and screenshots for 6.0
- Added ALT tags for the images
- Updated 2022-02-04
- Added further update for WP 5.9
- Updated 2021-02-28
- Added images and updated for WP 5.7
- Updated 2020-08-27
- Added images for WP 5.5
- Updated 2020-06-18
- Added ‘Link back to blocks’ to the top of the page
- Added the ‘Changelog’
- Created 2019-03-07
Was this article helpful? How could it be improved?
Log in to submit feedback. If you need support with something that wasn't covered by this article, please post your question in the support forums.