Heading block in WordPress

In WordPress, the Heading block helps to organize and structure content for visitors and search engines.

The block also defines the importance of different parts and shows how they are connected.

Add Heading text

To add the Heading block:

1. Click on the + Block Inserter icon in the Editor top bar.
2. Search for “heading”.
3. Click it to add the block to content area.

Change font size in Heading block

To change font size in heading elements:

1. Click on the Heading block to select it.
2. Navigate to the Block tab in the settings sidebar.
3. Under Typography, select desirable font size.

Add link to Heading block

To add a link to a Heading block in WordPress:

1. Select the Heading block.
2. Click on the Link icon in the Block Toolbar.
3. Add the URL of the webpage you want to link to.

The Block editor also provides options for setting the link to open in a new tab, and specifying the link as “nofollow” or “sponsored”.

Change text case in Heading block

The Heading block in WordPress can change text case to uppercase, lowercase, or title case, located under Typography in block settings and theme-dependent.

Customize case

To format only part of a title to be lowercase or uppercase in a WordPress Heading block, a combination of custom HTML and CSS may be required.

For example, if you want to format “K9 Services and Programs” to appear as “k9 SERVICES AND PROGRAMS”, you can use HTML to wrap “K9” in a span element.

Then apply CSS to that span element to set the text to lowercase, while leaving the rest of the text in uppercase.

First, create a title with custom HTML:

1. Add Heading block with the text “K9 Services and Programs”.
2. Edit the block as HTML by clicking on the More options menu (three dots) in the block toolbar.
3. Wrap a part of text, you want to lowercase, within a span tag with a custom CSS class.
4. Click Edit visually to exit HTML mode.
5. If needed, make the title uppercase using the Typography options in block sidebar settings.
6. Publish the page changes.

Note, there are cases when a WordPress theme comes with uppercase headings by default.

Second, add custom CSS to change styles of selected part of the Heading text:

:is(h1,h2,h3,h4,h5,h6) > .title-special {
  text-transform: lowercase;
}

Note, we use title-special as a custom CSS class for a span tag, used to wrap a part of text with lowercase style.