A Table of Content (TOC) is an essential feature for blogs and long articles, providing users with a structured way to navigate your content. By using the Kadence Block plugin in WordPress, you can easily add a TOC to any blog post, customize its design, and even enable advanced features like collapsible sections.

The following Table Of Contents was also made with Kadence Block Plugin 🙂

In this guide, we’ll walk you through the steps to add a TOC, customize its appearance, and ensure your readers have the best experience.

You’ll also find an embedded video tutorial below, walking you through the entire process in real-time.

Be sure to check it out!

Why Use a Table of Content?

Adding a TOC to your blog post or website page helps users quickly jump to sections of interest, especially in long-form content. It improves navigation and user engagement, while also boosting your SEO.

A well-implemented TOC ensures that search engines can better index your content, making it easier for readers to find relevant sections in search results.

Installing the Kadence Block Plugin

Before we dive into creating a TOC, you need to install and activate the Kadence Block plugin. This plugin provides easy-to-use Gutenberg blocks, including the TOC block, to improve your website’s functionality.

  1. Log in to Your WordPress Dashboard: Navigate to the Plugins section and click on Add New.
  2. Search for Kadence Block: In the search bar, type “Kadence Block” and click Install Now once you find it.
  3. Activate the Plugin: After installation, click Activate to enable the plugin on your site.

Now that the plugin is activated, you can start using the TOC block in your blog posts.

Adding a Table of Content to Your Blog Post

Once Kadence Block is activated, follow these steps to add a TOC to any post:

  1. Go to Your Post Editor: Open the post or page where you want to insert the TOC.
  2. Insert the TOC Block: Click on the Plus (+) icon, then search for “Table of Content.” Select the TOC Block from the Kadence Block options.
  3. TOC Placement: The TOC should appear where you place it in the content. Typically, it’s added right after the introduction. The block will automatically generate headings based on the structure of your post, such as Heading 1, 2, and 3.

If your post contains multiple headings, the TOC will automatically pull them and create a hierarchical list, making navigation easier for your readers.

Customizing the Table of Content

The Kadence Block plugin provides various customization options to ensure your TOC looks professional and fits your website’s design.

Here’s how you can make it more stylish:

Exclude Headings

Sometimes, you may not want to display certain headings, such as the main article title (Heading 1).

To remove these:

  • Select the TOC block.
  • On the right sidebar, toggle off Heading 1 if you don’t want it to appear in the TOC.

Enable Collapsible TOC

If your article has many sections, a collapsible TOC can save space and improve readability.

Here’s how to make it collapsible:

  1. Enable Collapsible Content: Toggle on the Collapsible Content option. This allows readers to expand or collapse the TOC as needed.
  2. Start Collapsed: To save even more space, you can set the TOC to be collapsed by default. Enable the Start Collapsed option to activate this feature.

Styling the TOC

Now that your TOC is functional, it’s time to make it look good. You can adjust colors, font sizes, and borders to align with your website’s design:

  1. Background and Text Colors:
    • Navigate to the Style tab on the right-hand sidebar.
    • Choose a background color and text color that match your branding. For example, you can set the TOC title to your brand’s primary color and adjust the hover effects to enhance user interactivity.
  2. Icon Customization:
    • If you prefer a different icon for collapsing and expanding the TOC, you can choose from options like arrows or plus/minus signs.
    • Simply go to the General Settings and select your preferred icon.
  3. Border and Shadow:
    • Add a border around the TOC to make it stand out. You can also add a box shadow to give the TOC a more elevated look.
    • In the Container Settings, adjust the Border Radius to make the corners rounded and tweak the Box Shadow to add depth to the block.

Once you’ve made all your customizations, click Save and refresh your post to preview the changes.

Advanced TOC Features

For users looking for more functionality, the Kadence Block plugin provides additional advanced features:

  • Smooth Scrolling: Enable smooth scrolling in the Advanced Settings. This feature allows the page to smoothly scroll to the clicked section, improving the user experience.
  • Offset Adjustments: You can add an offset (e.g., 40px) to prevent the heading from hiding behind fixed elements like sticky headers.

Why a Table of Content Enhances User Experience

A well-implemented TOC allows users to easily navigate long blog posts and focus on sections of interest. It gives them a clear overview of the article’s structure, which is especially useful for readers who are short on time.

By enabling schema markup for the TOC, you also enhance your SEO efforts, as search engines can display your TOC in search results, improving your click-through rates.

Frequently Asked Questions

To install the Kadence Block plugin, go to your WordPress dashboard, navigate to the Plugins section, click Add New, and search for “Kadence Block.” Install and activate the plugin to start using it.

Yes, the Kadence Block plugin allows extensive customization. You can change the background color, font size, border styles, and even add hover effects to make the TOC match your website’s design.

Yes, you can make the TOC collapsible by enabling the Collapsible Content option. You can also set it to be collapsed by default to save space on your post.

Yes, the TOC created with the Kadence Block plugin is fully responsive and will adapt to different screen sizes, ensuring a smooth experience on mobile devices.

A TOC enhances SEO by helping search engines better understand the structure of your content. It can also help your content appear in featured snippets and “People Also Ask” sections on Google, increasing your site’s visibility and click-through rate.

Yes, once you’ve customized your TOC in one post, you can easily copy and paste the block into other posts. This saves time and ensures a consistent design across your website.

Conclusion

Adding a Table of Content to your blog posts is a simple yet powerful way to improve user experience and boost your site’s SEO. With the Kadence Block plugin, you can create, customize, and optimize a TOC with ease.

Whether you’re managing a small blog or a large content-heavy website, a TOC can help your readers navigate effortlessly through your articles, ensuring they find the information they need quickly.

For a step-by-step visual guide, don’t forget to check out the video embedded above!

Explore More Topics