Table Of Content

< All Topics
Widget Used
Table Of Content
Tutorial Videos
Official Video

This widget will be easily useful for those who create content for their Blog posts, Pages, and SEO. So we have done an easy-to-use and customizable widget, which will improve the readability and accessibility of your article and attracts visitors to your site.

Pro tip
Why not add this widget to your website/product? Because With this widget you can easily read long content and that will help content creators, bloggers.

How to use the Table Of Content Widget of The Plus Addons For Elementor

The Table Of Content widget comes with a simple layout before start you have to set some Tags in this widget. then You can add the Tag with help of drag and drop another heading widget. You can set a description and an icon and also hide content using the toggle icon. If you want to read the content without scrolling, you can easily go to the content with the link.

General Steps

Search for the Table Of Content element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Table Of Content widget. First, click on the Content tab.

1. Content

Table Of Content

1.1: Layout

Style

With this option, we provide four different styles for the content Which makes the content look more pleasant, And By Default Style will be none.

List Type

With this option, you can set your content in unordered List and ordered List.

Select Tags

With this option, you can set as multiple tags as you want for the content of your site.

Child Collapsed

By enabling this option, you will collapse your child content.

1.2: Content

Title

You can enable switcher and set the heading of your content with this option.

Description

You can set the description of your content with this option.

Credit : Gutenberg, WordPress

Icon

With this option, you can set the icon before the content, And then you can design the right one.

Credit : Gutenberg, WordPress

1.3: Extra Options

Toggle

With this option, you can set the icon after the content, And then you can design the right one. When you click on the Toggle icon, the following content will be hidden.

Default On

With this option, you can see the Open Icon by enabling and the Close Icon by disabling it, and by default, it will be enabled.

Open Icon

You can see the content when the switcher at the open icon.

Close Icon

You can’t see the content when the switcher at the close icon.

Smooth Scroll

This option allows you to smoothly scroll the content and add duration and offset.

Fixed

This option allows you to fix the position of the content. when you scroll Set content doesn’t scroll. You can set Fixed Offset.

HashTag

With this option, you can see a hashtag icon after the content when the hashtag switcher is enabled.

HashTag On Hover

With this option, you can see the hashtag icon after the content on the hover when the hashtag on the hover switcher is enabled.

Heading Active Offset

Set the Content Offset here.

Restricted Container Area

With this option, you can set a specific class name of the container area.

How To Exclude Any Title?

With this option, you can set a specific class name in the heading then exclude that heading from the table of content.

2. Style

The Style tab is used for customizing the look of all the Table Of Content widget components such as Heading, Content, Content Line, Level 1, Sub Level, HashTag, and Box.

Heading Style

Set Padding, Margin, Heading Typography, Heading Color, Description Typography, Description Color, Icon Size, Icon Color, Toggle Icon Size, Toggle Icon Color, Background, Border, Border Radius, and Box shadow for the Heading here.

Content Style

Set Left Space, Padding, Outer Margin, Height Switcher, Minimum Height, Maximum Height, ScrollBar Width, ScrollBar Thumb Color, and ScrollBar Track Color for the Content here.

Content Line Style

Set Line Width, Active Line Width, Line color, and Active Line Color for the Line Here.

Level 1 Typography

Set Typography, Color, and Active Color for the Following Level 1 Content here.

Sub Level Typography

Set Typography, Color, and Active Color for the Following Sub Level Content here.

HashTag Style

Set Typography and Color for the Following HashTag here.

Box Style

Set Padding, Background, Border, Border Radius, and Box shadow for the Box here.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?