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
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
Button
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.
Additional
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.
Index
This section will let you set Background Color, Title Color, Active Title Color, Spacing, Padding, Typography.
Simply go to the Style tab > Index.
Button
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.
