Fraud Blocker
  • Home
  • Products
  • Support
  • Blog
  • Contact

Table Of Contents

Table of Content Widget

How to Use Table of Content Widget

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

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 is the Tables of Content.

To Insert Widget

Inserting the widget 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 in designing the Elementor table of content.

Table of Content

Table of Content Widget layout

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 help you set the Offset horizontally and vertically.

Width – for setting the width of the TOC


Table of Content Widget buttons

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

Just go to the Content tab > Button.


There are some things to handle the table widget.

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 the Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design the Table of Content Widget

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.


Table of Content Widget button style

Go to Style> Button

You can customize the buttons for the Table of Content Widget as much as you like. There are color options, box-shadow, borders, padding, etc. available for the table widget. You can make the button navigation easier and let people stroll comfortably on your site using the Elementor table of content widget.

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

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins.

This website is powered by Element Pack Pro and Rooten Theme.

New Year Sales Are Giving up to ~70% Price Off!! on our products | Coupon: HNY2023

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.