How to Use Table of Content Widget

element pack

How to Use Table of Content Widget

Creating a table of content is a few steps process. First, add content(text, image, video, etc.) that you want to appear in the Table of Contents. Second, insert the Table of Content Widget.

The prior task of TOC(Table of Content):

1. To add content on the page
2. To create the TOC, insert the Table of Content Widget
3. Customize the TOC Widget if need to.
4. To add Heading Style in your document, the first major heading that you want to appear in the Table of Contents.

To Insert Widget

Inserting widget, it is just a matter of drag and dropping. As you see in the screenshot above.

Content Tab

Using the content tab, you’ll be able to make a layout of a particular part of a website like a table of content. And in this regard, some handy sections in the tab will assist you a lot.

Table of Content

This section includes a few controls namely

Layout – it includes some options (Offcanvas, Fixed, Dropdown, Regular.) to suit your needs.

Position – it will let you set the position(Left, Right, Top-Left, Top-Right, etc. ) of the Table of Content.

Index Tags – here, you can enlist any specific heading which you want to ignore.

Scroll Offset – to help you set the Offset of the TOC.

Horizontal and Vertical Offset – these two controls to help you set the Offset horizontally and vertically.

Width – for setting the width of the TOC


This section will let you add text and icon to the button and in addition icon position, spacing, most importantly the button position.

Just go to the Content tab > Button.


There some things to handle the table to content.

i. The Index Area: Here you could select any class/ Id selector to control the table of the content.

ii. If you want to add auto collapse to the Sub Index, then enable the Auto Collapse Sub Index.

iii. on the contrary, you can enable the Index Click History option.

iv. In the Index Header Text field, you may add Header Text for the Table of Content.

v. And Scroll Until will let you set how far you want to scroll.

Style Tab

Now, let’s work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.


This section will let you set Background Color, Title Color, Active Title Color, Spacing, Padding, Typography.

Simply go to the Style tab > Index.


Video Assist

To give style to the button, go to the Style tab > Button. In conclusion, it seems that you’ve read this article and found it very useful. If you want to know more about the widget, you can watch the video on Source Code Widget by Element Pack and also go to our demo page

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Up to 50% OFF

Missed The Black Friday offer this year? Get up for flat 50% discount right now.