Introducing the table of contents Elementor widget
Ohh did someone say a new widget?
Elementor claim the new Elementor Table of Contents widget is not just another SEO widget, and it’s going to be the most customizable table of contents widget available to date. Primarily if you use it in conjunction with Elementor’s Theme Builder, you can add it to all your site posts in one go, Which will hopefully improve your site’s SEO.
Table of Contents Features:
- Mapped heading tags, Eg H1, H2, H3 etc
- Container mapping selection
- Advanced styling customization
- Exclude/Show selected tags
- Collapsed / Expanded state
- Control whether it’s sticky or fixed
- Help accessibility in your blogs by linking directly to the headings
Benefits of having a Table of contents
A table of contents is an ordered list of links that jumps the reader directly to that section of the post. It helps to give the reader an overview of the contents and allows them to jump to a specific section.
- Creates a professional appearance to leave a good impression.
- Arrange your post, so you don’t leave out anything important.
- Set’s the tone and the structure of the blog post.
- Gives readers familiar points of reference for quickly locating important information.
- Can help boost your google rankings
Introducing the Settings
Here is a list of the most important features of the widget
- Title – The title of the table of contents.
- Include/ Exclude – Choose what tags are shown in the TOC.
- Marker View – Choose between numbers, bullets or choose a font awesome icon.
- Additional Options
- Minimise Box – Choose to enable the collapse arrow.
- Hierarchal View – Enables you to show sub-items in hierarchal order.
- Collapse Sub Items – Enables you to hide sub-items from view.
Box Styling Controls
- Background Colour – Select the background colour of the box.
- Border Colour – Select the border colour of the box.
- Border Width – Select the thickness of the border of the box.
- Border Radius – Select the radius of the box corners.
- Padding – Control the internal padding of the box.
- Min Height – Set the minimum height of the box.
- Box Shadow – Add an external shadow to the box.
Header Styling Controls
- Background Colour – Select the background colour of the Header box.
- Text Colour – Select the header colour of the title text.
- Typography – Control the typography settings of the header text.
- Icon Colour – Set the colour of the expand icon.
- Colour – Select the thickness of the box separator.
- Width – Select the colour of the separator.
List Styling Controls
- Typography – Control the typography settings of the list text.
- Indent – Set the indent for the sub-items for the list text.
- Normal – Hover – Active
- Text Colour – Set the text colour for normal, Hover and Active states.
- Underline – Add text underline to normal, Hover and Active states.
- Colour – Set the colour of the marker.
- Size – Set the size of the marker.
Table of Contents Elementor Widget Styling Example
Here is an example of a styled Table of contents widget, with applied styling to match the branding of our website.