How to Use the Kadence Table of Contents Block? (Step-by-Step Tutorial)

Adding a table of content to your blog post can take its readability to the next level.

It makes your article skimmable and create jumpers in Google SERPs too.

And in this article, we are going to see how to use the Kadence table of contents block to add the table of content to your blog posts?

You get this block in both free and premium versions of Kadence blocks but in the premium version, you get more customization options.

Now let’s dive into this article.

Install Kadence Blocks Plugin

To add the Kadence table of content block you have to first install the Kadence blocks free version to your website.

To add Kadence blocks to your website first go to the plugins section in your WordPress dashboard, in the search tab type Kadence blocks and click enter.

  • Save

After that install and activate the Kadence blocks plugin to your website.

You get Kadence table of content block in both free and paid versions of Kadence blocks but in the Kadence Pro, you get several awesome premium blocks that would help you design your website to the next level!

After installing Kadence blocks to your website you can easily add the table of content block if you are using Gutenberg block editor on your website.

Add Kadence Table of content block

To add the Kadence table of content block to a post or page you first go into it and after that click on the “+ “ icon.

Next, write table of content in the search bar and click on the table of content block to add it to a post or page.

  • Save

Another quicker way to add the table of content is by writing “/tableofcontent” and clicking enter.

  • Save

I would highly recommend you to add the table of content just after the introduction of your blog post as it would help your readers to go to the section of the blog post they really want to read.

In the beginning, the table of content block would show “Start adding heading blocks to create a table of contents”.

  • Save

The linkable jumpers would be automatically added once you start adding heading blocks to your article.

And that is the reason why I like Kadence blocks so much.

Tweaking the settings of Kadence Table of content block

  • Save

Let’s now start tweaking the customization settings of the Table of content block to make it look awesome:

1. General settings

First, let’s see the general settings of the Kadence table of content block which you would get by clicking on this block.

First is the column settings, which you can use to divide the table of content into different columns.

  • Save

You can choose between the single column (A), double column (B), and triple column (C).

I personally use the single-column table of content because it looks great with my blog layout.

However, you can also choose the two-column table of content in a blog post consisting of a lot of headings and subheadings.

After choosing the number of columns next is the list style setting.

You can choose between the unordered list (1), ordered list (2), and a list without numbers or icons (3).

I use the unordered list (1) on my website.

2. Allowed Headers

The first setting on the sidebar is the allowed headers where you can choose which header you want to display on your table of content block.

  • Save

I would recommend you to add only the h2, h3, and h4 headings in the table of content as adding other headings can make it bulkier.

I use only the h2 and h3 headings for the table of content on my blog posts.

The reason for this selection is that the h1 heading is on the top and there is no point in adding it to the table of content block and I think adding h4, h5 and h6 heading makes it bulkier.

However, adding the h2, h3 and even h4 heading to your table of content can give you a huge SEO benefit.

3. Title settings

Next is the title settings which you can use to customize the title of your table of content.

  • Save

First is the enable title option which you can turn on to show the “Table of content” text on the top.

  • Save

Next, you have to choose which color you want to display it in. I use the #000000 (black color) for it.

  • Save

After that, I changed the font size to 22px.

  • Save

The next setting that I tweaked is the text transform setting where I have chosen uppercase to show the title in uppercase.

  • Save

After that, I tweaked the font-weight settings where I have chosen bold.

  • Save

Along with all these settings you get a lot of other settings which you can tweak such as padding, title border width, font family, line height, and more.

4. Collapsible settings

In the collapsible setting tab, you get few options to tweak. The first of them is the enable collapsible option which you can enable to make the table of content collapsible.

  • Save

Next is the start collapsed option, after turning it on your table of content would appear collapsed and your reader can click on the collapsible icon to open it.

  • Save

I personally use it as it saves the space of my post and makes it cleaner.

  • Save

The last option is the icon style option where you can choose which collapsible icon you want to add to your table of content.

  • Save

In the Kadence table of content block, you get a lot of collapsible icons to choose from which you don’t get in any other Gutenberg blocks plugin.

You get one more option in the collapsible settings which you can tweak yourself or left as it is.

  • Save

5. List settings

Next is the list settings which you can use to customize the list present in the table of content.

The first option in it is the list item gap which you can use to increase or decrease the gap between two list items.

  • Save

Next is the list items color, here you can choose two different colors first is the default list color and the second is the hover list color.

  • Save

For my table of content, I have set the default color to #3C4BC5 (blue) and haven’t set any hover color.

The next option is the list link style which I have set to underline on hover which looks pretty good.

  • Save

After that, you can choose the font size of the list items which I have set to 18px.

  • Save

You can also tweak the line height, letter spacing, text-transform, and font-family option.

However, for my table of content, I have kept them to default.

  • Save

The next option is font-weight which I have set to bold. At last, there is the list container margin option where I have set the top margin to 20px.

  • Save

6. Container Settings

In the container settings, the first option that you get is container background which I have set to #FFFFFF color code.

  • Save

The next option is the container padding which adds a space between the table of content boundary and text present in it.

In my case, I have set it to 20. To change the individual container padding just click here and now you can add padding to whichever side you want.

  • Save

Next is the border color option which I have set to black (#000000).

  • Save

After that, you can also set the content border width and radius of the table of content block.

I have set content border width to 2px and border-radius to 1.

  • Save

The next option is the box-shadow option which you can turn on to add a shadow at the back of the table of content block.

You can choose the shadow color, X-axis, Y-axis, blur, spread, and more.

  • Save

I have started using it as it makes this block pop out and looks great too.

Along with all these settings, you can also tweak the max-width and container margin option as well.

  • Save

In my case, I have remained it as it is.

7. Scroll settings

Next is the scroll settings tab where you first get the enable smooth scroll to ID option.

  • Save

This setting helps in scrolling down the page to the relevant subheading when your reader clicks on its link in your TOC.

Next is the scroll offset option which you should leave as it is if you aren’t using any sticky header on your website.

  • Save

However, if you are using it then add the height of that header to this option so that the sub-heading won’t get covered by your sticky header.

  • Save
Source – Startblogging101

I would recommend leaving other options in this tab as it is.

  • Save

8. Non-static content

The non-static content settings tab don’t provide you a bunch of options inside it.

I don’t use these settings on my table of content block but you can tweak it yourself or leave it as it is.

  • Save

Final view of the Table of Content block

Now after doing all these settings I am pretty sure that your table of content block would be looking great.

Trust me you can customize it even more by tweaking the other options present in it.

Here is how the table of content that I have created in this blog post would look like.

Do you know that you can also add the table of content block to all your blog posts automatically?

Want to know how? If yes then continue reading this article.

How to add a table of content to all your blog posts? (By using Kadence Elements)

For adding a table of content block to each of your blog posts you have to use Kadence elements which you get in Kadence theme pro.

It would cost you $59 for 1 year with all its update included and trust me it can take the design of your blog to new heights.

I am personally using it on my blog and it has superb features which you won’t get in any other WordPress theme.

However, if you want both Kadence theme pro and Kadence blocks pro at a cheaper price then you should go with Kadence bundles.

To know more about the Kadence theme you can read the Kadence review by me.

To enable the element feature in the Kadence premium theme you first have to go to the Kadence section under the appearance tab and turn on this setting.

  • Save

After that go to the Elements section under the Appearance tab and click on add new button.

  • Save

Next, choose the content section option here.

  • Save

After that make the table of content block as I have told you previously in this article.

  • Save

Next click here to reveal all the element settings. First is the placement setting which would help you choose where you want to display the table of content block on your blog posts.

  • Save

I would recommend you to add it just after the introduction of your blog post which is before the first heading.

Next are the display settings here you can choose where on your site you want to display the table of content block.

  • Save

I would recommend you to add it to all the single posts on your website.

Next are the user settings, device settings, and expiry settings which you can tweak too.

  • Save

After doing all the settings just click on the publish tab and it would add the table of content on all your blog posts automatically.

Frequently Asked Questions

Yes, you can do that easily by using the Kadence hooked element feature in the Kadence premium theme.

Yes, the Kadence table of content block is available in the free version of Kadence blocks too.

Kadence block is a Gutenberg-based page builder which adds a lot of additional blocks to your Gutenberg editor to give it full-fledged page builder vibes.

Kadence blocks premium costs you $89 for 1 year to use on unlimited websites which is quite affordable as compared to the features it provides.

Over to you!

Kadence table of content block is one of the easiest and most featured packed ways to add the table of content to your blog posts.

Literally, you get almost all the customization options to customize the table of content on your website and make it look epic.

If you have any queries related to the Kadence table of content block or Kadence blocks then feel free to tell them in the comments down below.

I would love to help you all.

Please share this article on social media so it can help more people like you????