Table of contents Elementor widget

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Dont have Elementor yet, get it here!

Table of Contents

Introducing the table of contents Elementor widget

Ohh did someone say a new widget?

There has been a GitHub feature request for a table of contents Elementor widget since the 23rd of July 2018, and today they have finally released the long-awaited 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

A screnshot of the table of contents elementor widget
This screengrab shows it in its default state with no applied styling inserted in a single post template.

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 postso 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

Content Tab

Here is a list of the most important features of the widget

  1. Title – The title of the table of contents.
  2. Include/ Exclude – Choose what tags are shown in the TOC.
  3. Marker View – Choose between numbers, bullets or choose a font awesome icon.
  4. Additional Options
    1. Minimise Box – Choose to enable the collapse arrow.
    2. Hierarchal View – Enables you to show sub-items in hierarchal order.
    3. Collapse Sub Items – Enables you to hide sub-items from view.

Style Tab

Box Styling Controls

  1. Background Colour – Select the background colour of the box.
  2. Border Colour – Select the border colour of the box.
  3. Border Width – Select the thickness of the border of the box.
  4. Border Radius – Select the radius of the box corners.
  5. Padding – Control the internal padding of the box.
  6. Min Height – Set the minimum height of the box.
  7. Box Shadow – Add an external shadow to the box.

Header Styling Controls

  1. Background Colour – Select the background colour of the Header box.
  2. Text Colour – Select the header colour of the title text.
  3. Typography – Control the typography settings of the header text.
  4. Icon Colour – Set the colour of the expand icon.
  5. Separator
    1. Colour – Select the thickness of the box separator.
    2. 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.
  • Marker
    • 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.

Watch the Video!

Was this article helpful?
YesNo
  • Last updated 3 months ago

These people love what I Do!

Do you need personalised Help?

Mick The WP Mentor

Mick The WP Mentor

Hi, I’m Mick, I’ve been building websites for almost 20 years, nowadays my primary focus is WordPress, as it’s highly flexible and contains fewer restrictions than page builders. I love helping others with WordPress!

Leave a Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Mick The WP Mentor

Learn how to create a new user for your WordPress developer, so you don’t have to give your web designer your personal username and password.

Read Article »
Mick The WP Mentor

It’s best to optimise images before uploading them onto your website, here is a great way to do it if you don’t use programs like photoshop.

Read Article »
Mick The WP Mentor

One of the common WordPress questions I get asked is “How do I log in to WordPress?” New users to WordPress have a hard time finding their login page URL. In this post, I will show you how to find your WordPress login URL.

Read Article »

Follow Us

I Recommend These

Sign up for my Newsletter

I promise not to spam you too much :)