Meet the Table of Contents Widget

Elementor's Table of Contents widget brings you an important tool to help improve your site’s user experience, accessibility, and SEO.

Readability Boost? Check. Accessibility Boost? Check. SEO Boost? Check. TOC Does It All!

Content marketers, SEO professionals, bloggers, this is the moment you’ve been waiting for!

If you’re someone who creates content, you’ve probably wondered about the best way to add a table of contents widget to your blog posts and pages in Elementor.

Think no more… Meet the Table of Contents (TOC) widget!

The TOC widget is the most customizable, feature-rich widget of its kind. It considerably simplifies the process of making your content accessible, allowing readers to scan it and get a sense of the structure of what they are reading.

You can set it up for individual pages and posts, or spread it across your entire site with a single click, by using Theme Builder to incorporate it.

Try Out the Actual Widget:

Table of Contents

Overview

What Is a Table of Contents?
A Table of Contents is a tool that dynamically generates a list of links that connects your reader to the different sections on your page. Using it improves your article’s readability, accessibility and SEO. It helps Google, as well as readers, better understand the structure of your site. This in turn, also aids in getting listed in rich snippets on top of Google’s search results.

Key Advantages

7 Things Only Elementor's TOC Can Do

Here are the 7 winning features of the Table of Contents widget.

1. Absolute Control Over Which Subtitles Get Listed

Are you an H2, or more of an H4 person?

Use the Include setting to pick the exact heading tags you want to appear in your TOC, or only use headings from a specific container in the page. You can also target and exclude certain HTML selectors from appearing in the table. This gives you complete control over which titles get listed in your table of contents, and which are left out.

2. Sticky Table of Contents That Gets Highlighted

A sticky table of contents is great for knowledge base sites, and for many other use cases.

This way, the list of titles always stays in view, no matter how much the visitor scrolls.

By setting a color or an underline for active (when a certain title is in view), we can highlight the area of the page the visitor is currently reviewing. Similarly, we can have the sub-item expand automatically when the visitor reaches that area.

In both cases, visitors get a clear indication of what area they are currently viewing, and can locate their progression throughout the page.

3. Unique List Styles

Not only can you switch between numbered and bulleted lists, but you can also select any icon to be used as the bullet indicator. 

You can choose to display the list items as a flat list or as a hierarchical list. This way, even when visitors read your longest Wiki-style pages, they can still have an overview of the entire document.

4. The Most Flexible Table of Contents Design

Table of Contents plugins usually offer a limited range of designs. Corresponding with the way we usually construct our tools, with this widget we offer the most flexible design customization possible. 

From word wrap to typography and spacing down to the box design. You can customize this widget to fit any type of website, whether it is a knowledge base or wiki-style site, magazine or an ecommerce site.

5. Minimized Setting for Tablet & Mobile Displays

To make sure the it never gets in the way, we added a set of controls for minimizing the TOC box.

Switch on the ‘Minimize Box’ option, and the Table of Contents box will show an icon to minimize it. Moreover, you can set it as minimized for mobile and tablet displays by default. This way it is still usable for the visitor, and doesn’t take up a lot of space.

6. The Power of Theme Builder & Table of Contents

Until now, there have been limited ways of adding a Table of Contents to a WordPress website: Using anchors, shortcodes, or activating it across your sites.

All of these solutions haven’t provided much flexibility where the table of contents applies.

This is where Elementor’s Theme Builder utility places a big role.

By adding the TOC widget to a Single Page template, you can decide on the exact visibility conditions that will be applied to it.

Want the Table of Contents to only appear on pages from your ‘tutorial’ category? Only for a certain tag? You got it!

By using the Theme Builder’s conditions, you gain a level of flexibility you just can’t get anywhere else.

7. SEO, Google Schema & Rich Snippets

We built this widget with Google in mind. Anyone who has ever dealt with long-form blog posts and tutorials understands the importance of rich snippets. Using this tool, you can instantly improve how your page structure is seen by Google. 

Some of our users reported that using a Table of Contents within posts significantly improved their site’s ability to get rich snippets results on Google. If you still are unclear about the helpful aspects of rich snippets, be sure to check out the recent tutorial we published about it.

Bill Gates, 1996: Content is King. Elementor, 2019: Table of Content is Frickin' Emperor!

Boost Your Site Performance

One More Thing... Lazy Load!

While on the topic of SEO, I wanted to let you know we’ve added Lazy Load to our Pro Gallery widget.

In Pro v2.7, we introduced the Pro Gallery widget. For version Pro 2.8, we improved the Gallery’s load time and performance, as well as added two important functions: Lazy Load & random ordering of images.

With Lazy Load, Instead of loading the entire page, including all the images, the page only loads the required section and delays the loading of the images in the gallery. Only when the visitor scrolls to the image does the image load. This significantly improved the performance and load time of the page.

conclusion

Start Creating Content That Visitors Can Scan!

We’ve prepared a step-by-step video guide that follows the main features of the Table of Contents widget.

As content on the web gets longer and longer, it becomes more challenging to provide a fluent user experience and help visitors, as well as Google, get a better grasp of the content that you are creating.

Use the Table of Contents widget to improve your site’s overall UX and get the added bonus of boosting your on-page SEO score.

Want these useful features? Now’s the perfect time to get Elementor Pro!

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Liked This Article?

We have a lot more where that came from! Join 1,365,209 subscribers who stay ahead of the pack.

By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

111 Responses

    1. This is an update from the previous Elementor pro version and as far as i can see you can use it on any page or post you create. Very exciting updates on this version… WOW!!!

  1. This is awesome, thanks for the continued innovation of Elementor! This is going to be huge for SEO, as well as pages and/or posts that are very lengthy.

  2. Thank you so much. I was waiting for this a long time. I have a couple of lengthy (educational type of) blog posts and I definitely needed a Table of Content solution. I had a workaround, but having this as integral part of Elementor Pro and all those styling and display options! You’ve made my day!

  3. Haven’t tested it yet, but… yes! Excellent! TOCs are simply mandatory and now it is part of the package. 🙂
    Once you also fine-tune the pop-ups with a trigger for “once per session” and “once per day”, Elementor will make most other plugins simply unnecessary for me!
    Great addition.
    Thanks

  4. We know and love the TOC from print… what an obviously great idea to adopt it! And not just a basic implementation but well thought out and adaptable.

  5. I can’t seem to find an update to Elementor pro or the Elementor plugin form WordPress. How can I get access to this feature? It’s not in my list of elements currently… Awesome addition though!

  6. Very cool! This will be perfect for a website I’m getting ready to build! Client wants some product manuals online and this is EXACTLY what I need!

  7. This is awesome. I am currently creating a long blog post and figure i needed toc for it and thinking of finding and/or adding customization. With this updates, you made my work a bit easier and I no longer needed to look for other plugin to make it work. You nailed it. Keep adding new features.

  8. Guys, I appreciate this update. But this widget is just… bad. It needs several improvements before I could even use it on my site. First of all, there’s no option to keep the thing minimized. This is unacceptable if you have a large TOC. It takes up the entire page and then some. Second, I’m trying to use it on a post and it picks up every other title tag on the template – ads, sidebar stuff, below the post things like comment sections. It’s just… it’s just not good right now. I’m disappointed, as I really wanted to deactivate my third party TOC plugin. Third, you can’t even center the heading, or use Roman numerals, or control the width… It’s a great idea with poor execution. Maybe you guys can take another crack at it and release a widget we can actually use. Thank you very much.

    1. There is indeed an option to have the TOC minimized. You can also have it drop down.

      You can specify exactly which titled it takes.

      It seems to me you didn’t spend a lot of time working with this widget and seeing its settings. Please check out our tutorial.

      1. I also think it lacks one important feature (which could probably easily be added via custom CSS):

        – Have the TOC collapsed by default

        There is already an option for this for mobile and tablet view. I would need to have this option also for the desktop view. My TOC is too big to have it expanded by default.

        Does anybody know how to achieve this?

        1. I agree – I need a “default collapse on desktop” too. I tried a few things with CSS to no avail – I’ll have to give a few more swings until they add this feature

  9. How about you provide better support for responsive and fix your UI.

    Maybe also start to overhaul the UX. I am sick and tired of having to fiddle through time-consuming actions like try and figure out the effects I used (i use a fair few plugins) on widgets.

    I couldn’t give a shit about this new widget, it’s not a major feature and I doubt many people will use it.

    I love your builder, but its starting to frustrate me when i see a new relase and theres just token new features while the things us users ask for, never gets implemented.

    1. The foundation for flexible responsive media queries is now in place so that should be coming rsn. The UI needs work. Simple sites are okay but when a site gets more complex there needs to be better ways to re-discover and globally control… everything. Brizy is quite a good deal better when it comes to global control of fonts and color across the entire site. And for widgets, don’t get me started on the nav widget! It’s the most important part of any website that appears on every page load yet it still lacks important features that require hit-or-miss manual CSS. I’ve wasted so much time trying to add image size animations that I’ve gone back to the simplest lame sticky-only nav menus. Another low-level problem is FOUC. I can’t see how to completely eliminate it short of not using Elemntor at all.

    2. This is fantastic. However, I think it could be more SEOd.

      I use Easy Table of Contents as a standard plugin for all websites. The anchors it creates mirrors the actual heading.

      A typical Easy TOC anchor looks like this: #ssd-hosting (EG).

      The Elementor TOC widget looks like this: #elementor-toc__heading-anchor-0.

      That’s not really cool. I can’t switch away from Easy TOC with anchors that look like that.

      @Tony, I’ve beaten top companies (Blackview, Modius, to name two) in Google with some of my articles and I’m convinced tables of content had a lot to do with it.

      You don’t have to use it, but please share your niche with me so I can start capitalising where you’re not 😉

  10. Very cool feature, but it doesn’t work properly. I can’t get rid of the bullets. When I choose “non” at the icon selector the bullets disappear in Elementor, but on my website they still show up. When I select numbers instead of bullets on the website it starts to count with 1.1 instead of 1.

  11. Great feature!
    I can’t wait to start using it 😁

    By the way.. does the lazy load feature work only in the gallery widget or it works also in the image widget?

  12. This is awesome, but there’s still one reason I can’t switch to Elementor TOC.

    My current TOC plugin automatically inserts before the first H2 in my content (which is just after the introduction).

    As far as I can tell, there’s no way to do this without getting complicated with custom fields and single post templates, not to mention reworking all my existing articles.

      1. Hi Ben,

        I’m having the same issue as Mark here and struggling to create a single template to achieve this, as per your suggestion.

        Using Theme Builder, I’m trying to design all of my posts using the “Post Content” widget, nesting the Table of Contents widget within said Post Content – after the introduction, but before the first H2.

        I’ve used other plugins in the past that did this, though for site speed purposes, I’m trying to avoid having too many extra plugins. It would be preferable if Elementor could do this on its own. Can you advise on how to do this?

        Thank you!

        1. Hey Justin, please send an example of what you’re trying to achieve to our support so we can understand your question better.

  13. Hi,
    The TOC looks awesome. But looks like there is no option to center align the heading and list. This is a huge miss against an overall cool widget. Can you give me the CSS code so that I can center align both header and list.

    Thanks

  14. Another plugin that I can get rid of, this is something that we really need as writers, I can’t agree more, most TOC plugins that I’ve tested is, either using shortcode, only has very limited options, and offer only very limited flexibility.

    This is just, Brilliant….

  15. WOW! I just made the switch to Pro during the Thanksgiving sale and this makes me overjoyed that I took the leap of faith. I was concerned about Google downgrading sites based on speed and this should help tremendously. I’m not typically one to stay committed to one ecosystem but you are making it harder and harder to even look elsewhere. Good for you guys for staying competitive. The one thing negative I can say about most products I’ve used over the last five years is the inability to keep up. I don’t know if it’s poor planning, greed, poor financial management or what, but if you want people to stay, you need to give them what they need to be successful and respond to changes in a timely fashion. It sounds like Elementor understands this point.

  16. Is this an actual widget? I use Elementor PRO, I only see Table Of Contents when working on a page in elementor. Its an element for me. How do I get the widget form?

  17. A nice widget for sure…but we really need fundamental global CSS controls for Elementor which we are still waiting on…and waiting on…and waiting on. Requests have been made for well over a year and still no movement.

  18. Any way to add an offset to the top of the H tags when the table of contents item is clicked? Currently the only way to add space on top is increasing the line-height, but you can make that only so tall before the lines are too far apart.

  19. TOC seems to be buggy. Using an ASTRA PRO Template – The TITLE Color Selector doesn’t work. When you go to STYLE to select the color it changes the ICON color instead. The ICON color is selectable though.

  20. Above my Table of Contents I have a H1 header, and then I have 6x H1 headers below the TOC that I want to include. However, the TOC includes all 7 H1 headers. Is there a way to exclude the first H1?

  21. I love TOC widget it is working great but there is a problem RankMath is not detecting TOC.

    Is there any way to fixed this ? when i used LuckyWP Table of content widget RankMath detected it fine but not TOC widget

  22. Extremely bug ridden, when working with Astra Pro no matter how we set it up, when you click it takes you below the anchor spot like 100 pixels or to the next anchor or two ..always chopping off the anchor you want. And colors and titles are buggy, and SEO plugins don’t see or like the anchor tags, and yes, the anchor tag names SUCK.. fix that.. this is nice but not ready for production or prime time..

  23. Its fine. But there is a setback. When I add a TOC in a page, then I can not edit the page content with the default block editor. I have to rely on Elementor edit option to add or remove any new content in that page.

    Here comes the drawbacks as present visual edit option at elementor is not that user friendly then that of default block editor

  24. One of my most important problem with wordpress was Table of content , I used lots of plugins and none of them worked properly.. Now I create a beautiful and responsive toc thanks to elementor page builder !

      1. Great design work with your TOC, Lukas. Any idea how you would handle if you had more than six H2s on that page? How would you get around the bottom 7-X bullets being cut off?

    1. In case you have created a sidebar, and you wish to add the table of content in it, after adding the widget, you can address the anchors as done here: https://docs.elementor.com/article/615-table-of-content-pro
      After the content has been added to the page, you can set the H1 or H2 heading to be added as anchors, and set the sidebar to sticky.
      This guide shows how to set a sidebar form to be sticky: https://docs.elementor.com/article/386-sticky-scrolling-effect-pro

  25. AAAAAWESOME addition guys! Love it. One issue though – the TOC seems to pick up all headers on the page, not just from the post body/content.

    See here – it’s picking up the comments section (and would even more other widgets if I added h3, h4, h5).

    Doesn’t make sense to have it this way hm?

      1. hmm, just noticed the “Container” box, but had no idea what input it expects. Tried css id, but it’s not it.

        Then tried selecting a HTML tag to the post body section, using “article” html tag, and entered “article” into the ToC container box and it worked :).

        Hope this helps others too!

  26. This would be even better with a “collapsed by default” or “minimized on: desktop” feature! PLEASE

  27. Awesome widget, Ben!

    Two features requests here:

    1. Having a meaningful anchor ID makes sense. As of now, it’s like https://example.com/sample-page/#elementor_toc-header… something like https://example.com/sample-page/#subheading-text-goes-here makes so much sense. This is the only thing that’s preventing me from making use of Elementor Post Templates. As of now, I’m making use Fixed TOC plugin whose widget is not properly compatible with the Elementor post template. Please make this happen.

    2. Have an option to trigger the toc only when certain number of headings are present in the post.

    Thanks!

    1. Love the feature requests.

      Ability to edit the anchors would be a wonderful thing.

      I also have an issue I’m still trying to troubleshoot. The first two blog post titles (literally the first two posts of my blog, for some reason) show up in my TOC on every post. If anyone else is running into this issue and knows a fix, please let me know. Thanks!

Leave a Reply

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

Want to learn how to build better websites?

Join 1,365,209 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.