Kadence Table of Contents 101: A Beginner-friendly Guide (Free Templates Included)

Want to make it easier for readers to find what they need inside your blog posts? Kadence Table of Contents is the way to do it.

Here’s the best part: you don’t need to pay a single cent to use it.

In this step-by-step tutorial, I’ll show you:

• The exact steps to create a Table of Contents block with Kadence.
• How to configure Table of Contents block settings.
• Three Table of Contents design examples from successful websites.

I’ll also give you access to free templates that you can use to take your table of contents to the next level.

Let’s upgrade your blog posts with a stylish Kadence Table of Contents!

Steps to create a WordPress Table of Contents with Kadence

Follow these steps to set up a Table of Contents with Kadence.

1. Install Kadence Blocks

First things first, you need to make sure you have the Gutenberg Blocks by Kadence Blocks plugin installed on your WordPress website.

Here’s how you can install the Kadence Blocks plugin:

Log in to your WordPress admin panel and go to Plugins > Add New.

Type Kadence Blocks in the search box.

The first search result, Gutenberg Blocks by Kadence Blocks – Page Builder Features, is the one you need to install.

Click Install Now in the plugin box. Once the plugin installs, choose Activate Plugin to complete the installation.

That’s it! You’ve successfully installed and activated Kadence Blocks on your website.

If you want to learn more about using Kadence Blocks, consider reading this detailed guide on using Kadence Blocks as a beginner. It explains every feature Kadence Blocks offers and teaches you the basics you should know to make the most out of it.

2. Add Kadence Table of Contents block

Now, let me show you how to add the Kadence Table of Contents block to your WordPress post.

There are two ways to do it.

The first way is to just click the + button, aka the Add Block button, then search for Table of Contents, and select the block.

The second option is easier.

Just type “/table” in your post. All blocks that start with “Table” will appear, including the Table of Contents block from Kadence Blocks.

After you add the Table of Contents block, you’ll see a message that says “Start adding Heading blocks to create a table of contents.”

Currently, there are no headings in the post. But as soon as you add headings, Kadence will detect them and add them to the Table of Contents. You don’t have to manually add them to the block!

Kadence even updates them automatically anytime you change the headings in your post. That way, your ToC block shows the latest headings in all your posts.

This is just one of the many reasons why Kadence Blocks is the ultimate WordPress theme.

3. Configure Kadence Table of Contents block settings

Now that we’ve added the Kadence Table of Contents block, let’s set it up. I’ll guide you through each setting step by step.

A. Block toolbar

Select the Table of Contents block to access the Block toolbar.

The first icon is the Table of Contents block itself. It has two settings: Columns and Group.

You don’t need to touch these settings at the moment.

The second icon with a six dots grid lets you manually drag the TOC block anywhere you’d like it to be.

The third icon with up and down arrows lets you move the TOC block one position up or down at a time. I prefer using this option instead of dragging the blocks with the grid icon because it’s more consistent.

The forth icon has four horizontal bars and shows you the column layout setting for the Table of Contents block. You can click on the icon and choose a different column layout for your ToC like one column (1), two columns (2), or three columns (3).

The default One Column option should work for most, but if you have a lot of headings in your post, you can choose two or three columns.

For example, here’s how a two-column Table of Contents block looks with a lot of headings.

The fifth icon has a bullet list icon and allows you to choose your Table of Contents list style. 

The first list style turns your ToC into a bulleted list, the second list style turns it to a numbered list, and the third list style removes numbers and bullets.

For the articles on Ecommerce Launcher, we use a bulleted list, because it’s more scannable than numbers.

You don’t need the rest of the setting options for the Table of Contents, but I’ll explain what they are in short just so that you know what you can do with them.

The sixth icon with the paintbrush in a box allows you to copy and paste block styles.

Let’s say you’ve created a stunning block design and want to use the same style for a ToC block in another post. You can click the paintbrush icon, copy the styling, and then paste it in the other block by clicking the same icon in its toolbar.

The seventh and the final icon of three vertical dots has a bunch of options like copy, duplicate, and create pattern.

B. General

Now that we’ve gone over the Blocks toolbar, let’s check out the General settings for the Kadence Table of Contents block in the right sidebar.

It has two main settings:

• Allowed Headers
• Collapsible Settings

Allowed Headers

Allowed Headers lets you keep or remove headings from the Table of Contents using toggle switches.

I recommend turning off the h1 toggle since the H1 heading tag is usually used for the title of the blog post and doesn’t need to be included in the ToC.

I also suggest you turn off the h4, h5, and h6 toggles because they can make your ToC look crowded.

Using H5 and H6 titles in a blog post can over complicate the structure and make it harder for readers to follow your content. So try to structure your blog posts in a way that you won’t need H5 and H6 heading tags.

A simpler heading structure can also improve your SEO by clearly defining the hierarchy of your post content to search engine crawlers.

Collapsible Settings

Collapsible Settings allows you to expand or collapse the Table of Contents block.

You can click the Enable Collapsible Content to allow readers to collapse the ToC block.

If you choose the Start Collapsed option, the Table of Contents block will be collapsed by default. That means you won’t see the headings in your ToC unless they click on it and expand it.

That’s a good option if you want a cleaner look for your blog posts!

Then you can change the icon style using the dropdown. Kadence provides you with six icon styles. Choose whichever works best with your website design.

The last option in Collapsible Settings is Enable title to toggle as well as icon. With this enabled, readers can click both the title and the icon to expand or collapse the content. It adds more convenience for your readers.

I recommend enabling this setting because it makes the ToC collapsible behavior more intuitive.

C. Style

Next up, in the Style settings tab, you can change the styling of the text, list, and Table of Contents container.

Title Settings

First up in the Title Settings section, you have the Enable Title toggle which is switched on by default. If you click on the toggle to switch it off, it removes the “Table of Contents” title from the block.

Just so you know, you can also change the “Table of Contents” text to anything you want. For example, you can rename it to “Contents Overview” or “Index.” You don’t have to use the default ToC title 🙂

These small conveniences are some of the biggest reasons why Kadence Blocks is perfect for beginners and experts alike. Every feature and setting in each block is intentional and purposeful.

The rest of the Title Settings give you the following customization options:

• Title color: Modify the color of the title text to make it stand out.
• Font size: Choose from various font sizes or set a custom size by clicking the icon after 3XL.
• Line height: Adjust the vertical spacing between lines.
• Letter case: Transform the text to uppercase, lowercase, or sentence case.
• Font family: Select a different font family from your global fonts.
• Font weight: Control the boldness of the title font.
• Letter spacing: Change the space between letters in the title.
• Padding:  Add space around the “Table of Contents” title. You can also manually adjust the space by entering values using the settings icon.
• Border: Add a border around the title. You can also edit the color and the thickness of the border here.

List Settings

List Settings are pretty similar to Title Settings. It’s just that whatever edits you make in this section will affect the h2, h3, h4 (and so on) listed inside the ToC block.

The first setting over here is List Item Gap. This controls the space between each of the subtitle headings. You can adjust it by dragging the slider or entering a value manually.

Next up, we have List Items Color. As you can see there are two colors.

The first one is a normal text color for the headings. You can either set it manually or choose a color from your global color palette.

Then, the second color is the color you see when you hover over the headings. It’s a great way to improve the user experience by indicating that the text is clickable.

Next, you have the List Link Style. You can style the heading links using the following options:

• Underline: Keeps the heading links underlined.
• Underline on Hover: Underlines the heading links as you hover over them on desktop.
• No underline: Completely removes the underline from all your heading links.

I generally set List Link Style to Underline on Hover. That way, your list looks clean and your site visitors know that the list items can perform some action.

The next few options are the same as the Title Settings we saw above like font size, line height, and font family.

Set it up however you like to match your website branding.

Last but not the least, we have Margin which sets the space surrounding the list items. You can play around these settings or use the default values.

I usually stick with the default setting and only add a top margin occasionally for extra space between the “Table of Contents” title and the heading links.

Container Settings

The Container Settings lets you change the look of the Table of Contents block.

I love this feature and like to play around to make it stand out from the standard ToC block that everyone uses.

The first setting is the Background which changes the color of the entire container. I personally recommend changing the color of the box to make it pop out from the rest of the blog.

You can then add a border to the box by adding a color and set its thickness in the Border setting. Choose a lighter or a dark color to give the container a contrasting look.

Then, you have the Border Radius which lets you round the edges of the borders. I have softened the borders to make the container “less aggressive.”

Lastly, we have the Box Shadow. This is my favorite feature in Style!

Just click on the Box Shadow toggle and you’ll see a shadow around the box appear.

With this feature, you can:

• Change the color of the shadow.
• Increase the depth of the shadow in X axis and Y axis.
• Soften the shadow using the Blur option.
• Increase the Spread of the shadow.
• Use the Inset option to place the shadow inside the box instead of outside.

Here’s how my Table of Contents block looks after making a few tweaks.

I wish the Box Shadow feature included an option for the shadow to appear only on hover. That way, the shadow is visible only when a user’s cursor is over the ToC.

But that’s easy to fix with a little CSS.

D. Advanced

The Advanced settings tab lets you control things like padding, margin, scroll settings, and add CSS classes to the block. Let’s see how each of those work quickly. 

The first two settings are Padding and Margin which set the spacing inside and outside the Table of Contents container.

Padding refers to the space between the content and the border of the ToC container. That means padding is space inside the border of the container.

If you increase the padding, the space between the text and the container’s border will increase, making the container larger or squeezing the inner contents if you have fixed max width.

When you set up a padding for any of the directions, Kadence provides visual feedback by showing the padding in green color so that you get instant visual feedback on how thick the padding is.

Margin, on the other hand, is the space outside the border of the TOC container. It controls the distance between the ToC and other elements in your blog post.

If you increase the margin, it pushes other elements further away but doesn’t affect the size of the container.

Like padding, you should see a green color feedback when you hover over the Margin values.

The third setting is Max Width. You can leave it as default or set a custom width for the Table of Contents block. This basically sets how wide or narrow the TOC container can be.

Non static content

Non static content is quite technical and recently added in Kadence.

You should only enable this if you’re using dynamic content in your headings and want them to be shown in the TOC.

If you haven’t set up dynamic headings, leave this deactivated.

For those who want to know what dynamic content is and how to use it, here’s a detailed article from the Kadence team explaining it.

Scroll Settings

Scroll Settings determine how the Table of Contents behaves or appears as a reader scrolls through it.

First, we have the Enable Smooth Scroll to ID toggle.

Activating it changes the way Kadence scrolls down to a heading on the page. Instead of suddenly jumping to the heading, it smoothly scrolls down which is more pleasant for the overall user experience.

I recommend turning on this setting because it’s these little things that add up and improve the website user experience.

Next, we have the Scroll Offset, which shows up only when you switch on the  Enable Smooth Scroll to ID toggle. 

The Scroll Offset value is set at 40 by default if you have a sticky header.

Kadence smartly calculates the height of your sticky header and uses that as the offset.

This ensures that when someone clicks on a heading title in your Table of Contents, it doesn’t get covered by the sticky header when the page scrolls down.

If you don’t have a sticky header activated, the offset defaults to 0. In most cases, you can trust Kadence’s calculation and leave the Scroll Offset as is, unless you need a custom adjustment.

Then there’s the Enable Highlighting Heading when scrolling in active area toggle. This feature highlights the active heading title while a reader scrolls through your article.

Now, if you have a TOC at the top of the page, this setting won’t matter to the reader as much.

But, if you have a sticky TOC in the sidebar, it’s really handy. As readers scroll through a post, they can easily see which section they’re on because it lights up in the Table of Contents block!

Again, it’s a small feature, but it really improves the reading experience!

When you turn this feature on, you can also pick a color for the active heading title under List Items Active Color.

Block Defaults

Block Defaults lets you apply the settings of your Table of Contents block to every Table of Contents block you create in the future.

It’s an easy way to ensure consistent styling across all your ToC blocks without having to go through each one manually and configure everything from scratch.

These defaults only affect the styling, not the content. Also, they won’t change any existing blocks you’ve created. So keep that mind if you’re using Kadence Table of Contents blocks on your site.

Once you click on Save as default, you’ll see two links appear: 

• Modify attributes: This allows you to view and delete all block defaults from one place.
• Reset default: You can reset this specific TOC block’s default settings from here. It essentially “un-saves” the block settings.

Advanced

This is the last setting of the Kadence Table of Contents block!

The Block Name feature allows you to give a distinct name to a block, which makes it easier to locate in the “List View” of the “Document Overview.”

This is handy when you’re working with various types of blocks within your article and need to swiftly navigate between them. 

Lastly, you have Additional CSS class(es). You can add CSS to add more styles beyond the Kadence options. We’ll cover this below.

4. Publish and view your finished Kadence Table of Contents block

Once you’ve set up your Kadence Table of Contents block, you’re good to go! 

Just publish your post and take a look — you’ll see the Table of Contents.

Here’s how my ToC block looks like on a blog post.

And guess what? You can do a lot more with your Kadence of Table of Contents block.

Imagine having a Table of Contents in your blog post sidebar that stays visible while scrolling, aka becomes ‘sticky’. Sounds cool, right?

Here’s a link to a step-by-step tutorial that shows you how to do that and more! 🙂

Table of Contents design examples from successful brands

Need some inspiration to design your Table of Contents? 

Here are three Table of Contents examples to get your creative juices flowing.

1. Semrush

Semrush has a simple Table of Contents which is in the left side bar. It’s easy to read because of its simple design, and stays visible even as you scroll through the article. That’s a good way to improve the user experience if you post detailed guides on your blog.

You can recreate their ToC by setting your post pages to use a narrow layout with a sidebar, styling the Kadence ToC block, adding it as a widget to the sidebar, and making the sidebar sticky with Kadence Theme settings.

2. RankMath

RankMath has a clean and modern Table of Contents with a linear gradient in Purple and Blue colors.

Recreating RankMath’s ToC isn’t as simple because of the gradient in it. But you can recreate it by placing the Kadence Table of Contents block inside a section and setting the background to use a gradient of your choice.

The easiest way is to create a Section and drag the Table of Contents block inside it.

Then go Section > Styling > Background. Change Type from “Classic” to Gradient and select your colors.

3. Elementor

Elementor’s Table of Contents displays only H2s in a minimalist, bulleted list with underlining.

While you can recreate most of its looks using the default Kadence Table of Contents block settings, you’ll need some custom CSS for the following elements:

• White line between the Table of Contents title and the bullet list.
• Bold H2 headings.
• Space between the text and underline.

Final thoughts: Setting up a Table of Contents with Kadence in 2026

That’s it!

I’ve explained how to set up a Table of Contents using Kadence and provided 3 practical examples for inspiration.

Now, you may be wondering, how do I add the Table of Contents block to every blog post?! Well, there are multiple ways to do it.

The simplest (and cheapest) option is to simply copy and paste the block to each blog post.

You can also save your Table of Contents block in Advanced > Block Defaults and add it to every post. But that won’t apply to blocks you’ve used in the past. So keep that in mind!

Kadence Theme Pro users can use Element Hooks to insert a Table of Contents block in all posts automatically!

Don’t forget to grab our free Kadence Table of Contents templates for your website. They’re free, import instantly into your site, and save you the effort of designing one from scratch 🙂

If you have questions about this Kadence Table of Contents tutorial, get in touch with me. I’m here to help!