How to Add Table of Contents to WordPress Using Elementor

[@mohit31309]

I am using sticky table of content, but the problem is once the post is over still it goes below the post and overlaps with the comment section and other content. I want it to stop as soon as the blog post end.

[@mmmmchickencurry]

Make sure you're entering "ignore" WITHOUT the dot in the CSS Class of the SECTION you want to ignore. Then, under "EXCLUDE" for your Table of Contents widget, enter ".ignore" WITH the dot.

[@burnessa]

You don't know how much helpful it was

[@alexandrastavropoulou2510]

Thank you so much!!! :D

[@travelt7624]

Thanks for the widget! However, it looks odd when an item is longer then one line. The bullet/number should align with the first line instead of being centered.

[@ai4kWebdesignEcommerce]

When ypu click on the item (h2, h3...), thr page scroll to that item but on top of the page and is cover by the header. I don't want to use anchors.

[@davem4760]

I would have been nice to see how this TOC displays in tablet and mobile views. I have a feeling it would cover up most of the page content especially in mobile view.

[@jimkiser1429]

To be honest, when most of the Elementor Widgets come out, I think, that's cool. But this one REALLY has me excited. One question, will this TOC Widget work with any theme?

[@brandonwiramanaden8827]

This is needed for product category pages / WooCommerce. You guys gotta start thinking about us eCommerce guys :D

[@josipmatic4732]

Hi, I have problem with scrolling, menu bar is at top and then when scrolling down uppder part text in s not visible, I need some Top margin after scroliing

[@MarketingProgressul]

Did you find a solution to fix this?

[@johnacsyen]

how do you set the table of content to scroll the index to below the hero image and not top of the page?

[@Evolveosteopathy]

I’ve wanted to do this for ages, now I can! Thank you!

[@andonisr]

What about the bleeding into the footer though?? Your thoughts appreciated!

[@funnelprofits5351]

Anyone else that simply can't find this Element in the list even after updating Elementor Pro? Tried purging cache, restarting the editor etc. but just can't find this one. :/

[@kirstycarter8790]

It's there for me. Didn't need to update anything, purge, restart or anything else. It's great!

[@hsptruthtv502]

Multiple people in our office, all using Elementor Pro, can not locate the "Table of Contents" widget. Any help would be appreciated. Thanks.

[@jimkiser1429]

Sorry, forgot to ask this in my first post. Is there a limit on length and/or number of lines in the Table of Contents?

[@AnthonyGodinho]

Awesome 😎 Elementor keeps getting better. Great job on this tutorial 👍

[@mariano-cucinotta]

Hi, could I know if elementor has a Widget similar to this that instead of containing a table it contains an image with text? In practice that it always remains in the foreground position while the page scrolls? Thank you

[@sheldonnaicker2385]

TOC just made life so easy. One Question though, I have a lot of content on my pages with a lot of headings. However, I have a problem. I have my TOC on the side and if I don’t make it sticky, when scrolling the side bar becomes blank. So I make the TOC sticky and that’s where things get messy.. Because I have a lot of headings half of my TOC gets cut off when scrolling. I would really appreciate some assistance with this if possible. Hope my question makes sense. Kind Regards

[@mohsinworld]

Thanks for the tutorial, but I facing another issue after using the Table of Contents in the post. Now I getting this text automatically in the post excerpt! How can I disable this text to appear in the post loop?

[@ncviana2833]

Great work Elementor TEAM.

[@andonisr]

If it only worked for mobile too...! The only work around I found is designing a separate one for mobiles so that it shows on top!!

[@gerardperret8147]

Just a very good idea, very usefull function, let's see deeper how to make it nice, Thank you

[@parmsyoga]

How can I add this to a blog post and have it include only the headers in the blog post rather than all the headers on the page? Currently it's picking up the "Recent posts, Related posts, Leave a Comments"... pretty much all the headers on the page instead of just the ones in the blog post

[@gianlucaporto7016]

I have a problem with Table of Contents, because it gets all h2/h3/h4 (scriptures of sidebar and footer etc.) and not show only headers of contents. How can I fix it?

[@sineseomedia]

Set the "include" and "Exclude"

[@Vizievio]

What is the fond you are using for your headers?

[@jasonbeard]

Hi, I'd like to know why you kept going back to the Gentenburg Editor and not stayed within Elementor Edtitor?

[@zivgeurts]

Hi J B, to show where you can set your post's heading tags for it dynamically to show up in the single post template's TOC

[@wolfamri]

Unfortunately you don't seem to answer questions on your youtube channel. But I'll still ask: is there a way to collapse the TOC by default?

[@peterlarsson971]

Hi, yes there is and it is a toggle btn on the widget you just switch.

[@wolfamri]

Thank you, Peter. I have tried all the toggle buttons, but it didn't seem to change anything. Which one would that be? Thanks again!

[@peterlarsson971]

@@wolfamri Hi again, a question. Do you want it to be minimized on mobile and tablet or also on desktop?

[@peterlarsson971]

@@wolfamri Hi again, a question. Do you want it to be minimized on mobile and tablet or also on desktop?

[@wolfamri]

@@peterlarsson971 thanks - I didn't specify that I'm my question. Desktop would be perfect, because my TOC is pretty long.

[@PoweredbyPurpose]

Amazing. I’ve seen lots of cool TOCs in some of my favorite blogs, had no idea how to do it - until now ;-). Thanks

[@danielacordeiro2005]

Hello, can you ask me a question please, how to open in a new page when clicking?

[@stephenzhao9773]

The TOC widget has a UI issue. It will add additonal line to border of the whole TOC section when it is collapsed which is out of my expectation. You made a mistake by setting border-bottom of header divison as the separator between TOC header and TOC body. The right choice is to set border-top of TOC body as the separator. Please fix the issue.

[@thangjamkishorchand]

Add this CSS #id .elementor-toc__header{ border-bottom:0; }

[@YaroslavDmitriev]

How to exclude Video Playlist Widget from Table Of Contents? I tried to add a selector «ignore» to the Custom CSS section in Video Playlist Widget, then added «.ignore» in Table of Contents > Exclude > Anchors by selector. Still Elementor treats Video Playlist as a list of headers...

[@GoTechUG]

Nicely done, Zvi

[@NukeMediaUK]

Wish there was an option to close it on clicking a link... also to start closed on 'all' screen sizes...

[@AliDymock]

I can't see or work out how the table stays always in view and the rest of the content scrolls around it. Can anyone explain? I want the table of contents to always be in view, not stay at the top of the page...

[@b.rashmita]

Is this feature available for free plugin? Or do I need to get elementor pro?

[@jaypanchani1734]

How to change anchor text of the heading. It shows www.xyz.com/postname/#elementor-toc-heading-anchor-0. how to change it to www.xyz.com/postname/heading-name

[@andonisr]

Did you find a solution to this?? I'd be interested to know too, for example instead of the full heading to show something like 'Introduction'...or 'Conclusion'..!

[@Optimized-air-hvac]

Also trying to figure this out.

[@KevinCarney42]

Within Elementor Pro is there any concept or ability to create a Table of Contents that spans multiple posts? To clarify, rather than write one long post, if I "serialized" the post into multiple shorter posts, can I create one Table of Contents for the post series?

[@sineseomedia]

Multiple shorter posts can list in a post list, why you need a Table of Contents?

[@Tolisc31]

I have a long table of contents sticky top. However, there is not scrolling. How can I have scrolling on the table of contesnts?

[@onlinevisuallyleadsthatcal627]

Not working on my side and I’ve done everything to make it work. Widget doesn’t even show.

[@aleksandars9254]

Can you have it minimized on PC as well? Also numbers on a table of content have problems like, first heading will have two numbers 1.1

[@damjanbosnjak]

Experiencing some troubles under Edit table of content>Style>Header>Text color when I change text color, there is no effect.

[@AshuPal]

How to make TOC itself scrollable if TOC content list grows more than the screen area (in mobile layout TOC is fixed even the bullet list is hidden below)? tried to put custom CSS "overflow-y: auto or scroll" but It's not working.

[@Thejubeabides24]

very helpful, keep them coming!

[@zabiniazi]

Is there a video that shows Mobile setup? With the current desktop setup, the mobile setup is not optimized.

[@nathanedwards1040]

I need help! My Table of Contents just continues to have the loading icon. And i can't get it to work. please help me.

[@easthalldesignmiami]

When it's fixed and reaches the end of the article it stays fixed so will float over everything, bottom content, footer etc??

[@thangjamkishorchand]

Enable Stay in column

[@andonisr]

@@thangjamkishorchand Where is that option though? It's only available when you enable the Sticky Option - am I wrong?

[@philipp.-]

Is there a way you can edit the clickable area that makes the table expand and contract? I think its very tiny and it is not nice for mobile use to have to click on the tiny chevron

[@sineseomedia]

I have the same problem now, I decided to turn off Minimize Box

[@beshaw9879]

Thx , but how to stop that fixed table only till certain section ?

[@DiscoverThailand]

How to make to change the active text to bold?

[@WeaselFSK]

My table of contets keeps duplicating bumbers.... Like 1. 1. then 2. 2. then like "3. 3." sub "1 3.1 then 2 3.2" ...... How to fix this??

[@Twichblade]

Is this available on the free version?

[@yannickhof]

Ours actually always shows the main title of the post and footer titles. How can I exclude this?

[@jesuscxmarx6662]

Ugh, this does not help me at all, unfortunately. Are there other tutorials for this feature? Thanks!

[@peterlarsson971]

Hi, what is the issue?

[@turkomarketing]

Does it work with ACF ?

[@bharadhanvm1999]

how can make it mimized on desktop also

[@mohammadnoorani6342]

NOW WE'RE TALKING

[@ccuny1]

Hello. I hope someone is still answering comments. Is it possible to have the Headings included in the TOC numbered in the same way as in the TOC? If I number hem manually, the numbering doubles up in the TOC. If I don't number them, they are numbered in the TOC but not in the Headings. What can I do please? Also, if I select word wrap to accommodate mobile devices showing full long headings, the number in the TOC does not show at the top og the heading but in the middle. For example, if I have a long heading that wraps onto 3 lines on mobiles, the heading number show up at the level of line 2, not line 1.

[@sineseomedia]

Add some custom CSS to make your needs come true

[@KawsarAliX]

There should option to turn off No headings were found show and hide. It's not working with JS either

[@karstenhede]

Brilliant! A true timesaver!!!! Cool very Cool! :)

[@neemplyometorg8561]

Can i Add Category wise table of Contant

[@connornakao7526]

Thank You*

[@bySterling]

Nice! And those Duotone icons are $ick! #Ihadnoidea 🙌🏻⚡️💪🏻💥💻🎶🖥👏🏻

[@GinaAnagnostopoulou]

Awesome!!!!! Thank you.

Glorious.

[@nogithok9622]

How can I add social buttons to the dropdown menu for mobile devices?

[@nogithok9622]

@The Social Introvert if you will find a solution, please tell me. I dont know what I can do. :-)

[@nogithok9622]

@The Social Introvert Any solution yet?

[@dinorossi6611]

How do I add Table of contents to every single blog post at once???????

[@zaclabdigital]

Design a templet for single post page which conains TOC.

[@dinorossi6611]

@@zaclabdigital Can you make a video on how it is done ?

[@eduxtube5897]

anyone know how to remove the comment tag that have h3 tag from the table, i use the CSS selector for other tag of my custom post template. and when enter other class in the exclude placeholder isnt work.

[@michealrefrigerator4936]

.comment-reply-title.you can try copy this into the Exclusion.

[@Richard-yo5kl]

How do I get it to ignore the contents of my sidebar widget?

[@JohnRozzo]

In case you didn't discover this yet: You need to add a specific class ID to the widget, then 'exclude' that CSS class in the TOC settings.

[@Richard-yo5kl]

@@JohnRozzo thanks, ill try it...

[@williamvo2402]

Vui lòng thêm tính năng Nút cố định trên điện thoại của bạn

[@Elementor]

Like this? kzbin.infoKkPu_b_5Yq8

[@michal-molka]

This is much much much more important than any "table of contents": github.com/elementor/elementor/issues/9647

[@tomtom7712]

Top !.

[@Jiwanchhetri]

what an annoying accent. You don't have to feel bad, it's just how I feel. But the tutorials are always great from elementor.

[@theinterwebsuser]

bad practice to use a fixed position & % positioning

[@AskAW]

Don't do like me, when you excluding the heading, make sure you add a period before the class. It doesn't work with the period.

[@peanut71968]

Give me a ton of ideas!

[@flexsteveify]

I'd describe the workflow to exclude anchors from the ToC as terrible, horrible, no good, and very bad. 🤮