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.
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.
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.
Table Of Content
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.
With this option, you can set your content in unordered List and ordered List.
With this option, you can set as multiple tags as you want for the content of your site.
By enabling this option, you will collapse your child content.
You can enable switcher and set the heading of your content with this option.
You can set the description of your content with this option.
With this option, you can set the icon before the content, And then you can design the right one.
1.3: Extra Options
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.
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.
You can see the content when the switcher at the open icon.
You can’t see the content when the switcher at the close icon.
This option allows you to smoothly scroll the content and add duration and offset.
This option allows you to fix the position of the content. when you scroll Set content doesn’t scroll. You can set Fixed Offset.
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.
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.
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.
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.
Set Typography and Color for the Following HashTag here.
Set Padding, Background, Border, Border Radius, and Box shadow for the Box here.