fbpx

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

Button

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.

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

indexing

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

Simply go to the Style tab > Index.

Button

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

SIGNUP NEWSLETTER

Don’t worry we hate spam and we promise you will get only quality news and offer from us.

Enjoy Black Friday Exciting Deals Right Now. Check Here
© Copyright 2021 All Rights Reserved by BdThemes

Enjoy Black Friday Exciting Deals Right Now. Grab The Deals Before The Time Ends!

Day
Hour
Min
Sec