Table of Contents image

From Head to Toe – Headings, TOC, and More

You can get quite fancy (or not) with your headings, table of contents (TOC), and spacing within a post (or page). In this post, I’ll examine the options from WP, Ultimate Addons, and PublishPress as appropriate.

Let’s Start with Headings

By default, when you insert a Heading Block (or change a regular Paragraph Block into a Heading Block, as I usually do because it’s so easy), it becomes what’s known in HTML as an H2 heading.

Headings range (generally) in size (and sometimes style) from H1 through H6. The title of your post is an H1 and is probably the largest heading in your post. At least, it really should be. And it should be the only H1 in the entire post. That’s why WP creates a Heading Block as an H2.

You can make it an H3, H4, H5, or H6, though. While headings generally get smaller as you progress from H2 through H6, this is dependent upon the design of your theme. And while you may like a smaller heading than what the H2 provides, you shouldn’t really choose a smaller heading just because the font is smaller. Headings are intended to be hierarchical things, not stylistic things. If you really, really want the font of an H2 to be smaller, you should see if you can adjust the size of an H2 (you probably can) rather than use an H3 in its place.

An H3 should be used an a subheading under an H2. Likewise, you should only use an H4 if you’ve recently added an H3 (under an H2) and have good reason (not just font size) for doing so. Think of all of this as an outline for your post. If you don’t have a sub-sub-idea under your sub-idea, then don’t use that H4 there.

Styling a Heading

Styling a Heading

See what I did here? “Styling a Heading” is a sub-heading that logically fits under the main (H2) heading of “Let’s Start with Headings”, so I made it an H3.

You can change the alignment of a heading, but it’s rarely wise to do so. People expect to see headings at the far left, so leave them there.

As you can see above, you can change the text and background colors of a Heading Block. Doing so with a basic heading does indent the text somewhat. You can’t see this in the editor – only in the published (or previewed) post. Just something to be aware of, especially after my comment about keeping headings at the far left.

Examining the Advanced Heading

Adv. Heading defaults are centered and H2, plus you get to add this description.

Personally, I don’t see the point of a heading having a place for a description. The heading itself describes what is to follow. Why would that need further description?

The options at the right (in the editor) call the description, the subheading. Confusing. You can see that you can change the color of each.

Note also the short dividing line between the heading and description. Could be kind of annoying. Fortunately, you can eliminate it…or change it to a double, dashed, or dotted line.

You can also change the vertical spacing of the elements – the space below the main heading and below the dividing line. These are both set to 15 pixels by default. I discovered that hitting the Reset button changes the amount to zero, not 15, though. I wish you could change the space below the description / subheading.

Fortunately, there’s a block for that.

Spacer Blocks

Spacer Blocks put extra space between other blocks.

After I wrote the paragraphs above about the Advanced Heading Block, I went back and added a Spacer Block between that block (below the description) and the following Paragraph Block.

By default, a spacer is 100 pixels high. I changed that one to 30 pixels. Now, that gap looks more like the spacing between regular paragraphs.

Separator Blocks

Sometimes you need a line to separate things. Not here, but still….



In HTML, this is called a horizontal rule (hr). The orange one above is supposed to be a dotted line, but it wasn’t working at all until I added a second separator. And now I’m seeing just 3 dots that aren’t in a line. Strange.

I changed the red line from the default short, centered line to a wide line.

Table of Contents

Finally, let’s look at Table of Contents Blocks. Yes, I know it seems wrong to talk about them at the end, but you’ll just have to live with it.

You saw three such tables above. There’s one from PublishPress, one from Ultimate Addons, and one from a dedicated TOC plugin called Easy Table of Contents. Even though I use that last one on all my posts, I’m not going to discuss it here, except to say that it’s virtually the same as another plugin called Table of Contents Plus and that it has a look I prefer. Though, now that I see what the Ultimate Addons TOC can do, I may change my mind.

Ultimate Addons TOC

The first TOC in the green box is from Ultimate Addons. It has a ton of options in the right hand column of the editor. There’s almost too much to list here. You can select which headings to include (H1 – H6), set scrolling options including whether or not to add a “Scroll to top” link, change alignment, spacing, and color of headings, make the table collapsible and choose the icon (from 72 options) for doing so, alter the bullets, change the hover color, set the background width and padding, alter the border style, and more.

I think you can see that I changed just a handful of those options. What you see there now is not what I would recommend you actually use. I simply wanted to show some of the choices in action.

PublishPress TOC

The PublishPress TOC is the simplest of the three. There’s almost nothing you can change, and there’s not even a background as such.

All you can do is opt to load it minimized (collapsed) and change the anchor color – which is probably something you shouldn’t do.

Summary
From Head to Toe - Headings, TOC, and More
Article Name
From Head to Toe - Headings, TOC, and More
Description
How to change headings and use spacer, separator, and table of contents blocks.
Author
Publisher Name
The WP Inn
Publisher Logo

Leave a Comment

Your email address will not be published. Required fields are marked *

Discover DWA... Where Writing Meets Entrepreneurship!

Get FREE Access Now
close-link