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.

A first-ever all-in-one web solution with essential widget, extensions, and features for Elementor WordPress.

Your complete web development partner.


Copyright © 2022 BdThemes.
All Rights Reserved. Site built with Element Pack & Rooten Theme.

AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy Element Pack Pro?

Don’t miss 230+ essential Elementor widgets and 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.