Introducing Table of Contents Module for Beaver Builder

UABB brings one of the required feature for a Blog or any lengthy page. You might want a Table of Contents to be displayed at the start of the page content. This module will help you display page’s or post’s content in a beautiful way without manually need to create a list of the titles.

Liked the table with the contents outlined above? You will be able to create a similar one using the Table of Contents module.

Using this module you will be able to add a table of contents at your desired location on the page. To start using the module, just like you add any other module in Beaver Builder editor –

• Drag and drop the Table of Contents module
• Or search for the Table Of Contents module to drag and drop in the Beaver Builder editor

There are a few styling features, let’s first get started with the Key Features –

• Fully customizable Table Heading and Contents
• Collapsible Button to Hide Table’s Content
• Exclude Specific Headings
• Smooth Scroll

Let’s see the key features in details and drag and drop the module to get started –

Fully customizable Table Heading and Contents

Every section of the module is fully customizable. You can customize the Heading of the Table, Contents. Background, Border, Width, Alignment, Collapsible button, responsiveness, and color.

Collapsible Button to Hide Table’s Content

Sometimes you might find lengthy Contents in the table of contents covering the length of the page. Here the user might want to hide the titles of the Table and to view the first title’s content.

To achieve this we provide a down arrow button on the table called a Collapsible button. On clicking this button, it would hide the table’s contents and the user will be able to view the content below the Table of Contents.

Here you have options to display a button with text or Icon to hide the Contents of the Table.

Exclude Specific Headings

You could come across some cases, where you might need to exclude a specific heading of your post or page from the Table of Contents. Let’s say you are displaying related posts on the Post page using a Posts module.

Here we might need to exclude the headings from the Posts widget, you will simply need to add the following class to the Posts widget under Advanced > HTML Element > Class – uabb-toc-hide-heading

That’s it! Now the Posts module’ headings won’t be displayed in the Table of Contents module.

Also, checkout the following doc to know all the cases on How to Exclude Specific Headings from Table of Contents?

Smooth Scroll and Scroll to Top

Apart from changing the contents’ links color, you can click on the content title to take you directly to the respective title. And after enabling the Smooth Scroll option you will be scrolled to the respective title smoothly.

You can find this feature under the General tab, under the Scroll Effect section.

Also, you will find an option of Scroll To Top in the same section which helps to add a button on the bottom-right of the page.

Now, there’s no magic to add a well-designed index to your website’s pages! We’ve made it way easier and convenient with the Table of Contents module of the Ultimate Addons.

Simply update to the latest version 1.23.0 of UABB and add Table of Contents to all the lengthy posts and pages as required.