Atomic Element · Pro
Long guides, docs and policy pages get a linked contents list built from their own headings, so readers skip to the part they came for. Style it with the same Classes and Variables as the rest of your Elementor 4 site.
The short answer
The Table of Contents is an Elementor 4 Atomic Element from Animation Addons for Elementor that builds a linked contents list from a page's own headings. Each entry links to its heading, so readers jump to any section of a long guide, doc or policy. It is styled with Elementor 4 Classes and Variables and needs no Elementor Pro.
Many "Elementor V4 compatible" addons are classic v3 widgets that still run on V4. The Table of Contents is a native Atomic Element, built on Elementor's Atomic Editor architecture.
| Plan | Pro Animation Addons Pro |
|---|---|
| Element type | Native Elementor 4 Atomic Element; panel name "Table of Content" |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Source of entries | The headings on the page |
| Styling | Elementor 4 Style tab, Classes and Variables, per breakpoint |
| Extensions | Regular Animation, Parallax, Tilt, Scroll To, Custom CSS and the other shared extensions apply to the element; Sticky goes on the column that holds it |
| Requires | Animation Addons for Elementor (free) + Animation Addons Pro |
| Plugin version | Animation Addons 4.3 · Last updated October 2026 |
Demo variations
Every demo is built with the Table of Contents, part of Animation Addons Pro, plus native Elementor 4 elements. Extensions they add are named on each card.
A two-column article: a narrow left column with the contents list, the article on the right. The left column stays in view as the reader scrolls.
A bordered box under the introduction titled with a short H2 prompt, listing every section of a 4,000-word guide; the guide continues below in a single centred column.
A small "Contents" trigger fixed near the header opens a panel from the right holding the list of page sections; the page itself keeps its full-width layout.
A plain, high-contrast page with a numbered heading per policy and a contents list right under the page title, so patients find "Cancellations" without scrolling through everything.
A hero split in two: the course promise on the left, the contents list on the right as a "What's on this page" card, so buyers jump to curriculum or pricing.
A Grid layout with a wide left rail holding the contents list and a donation button, and report chapters on the right separated by large photo headers.
Features
Every option below is a real control in the Table of Contents panel or part of how the element renders. Nothing here needs custom code.
The list comes from the page's own headings. Write a clear H2 and H3 outline and the Table of Contents turns it into jump links, with nothing to maintain by hand.
Fonts, colours, spacing, borders and radius come from the Elementor 4 Style tab, with Classes and Variables. Give every contents box on the site one Class and change them all in one place.
Put the list at the top of a page, in a sidebar column held by the Sticky extension, or inside an Offcanvas panel. The element itself stays the same.
The Table of Contents accepts the Animation Addons extensions, including Scroll To, Regular Animation, Parallax and Custom CSS.
Built on the atomic base
Why it mattersThe contents list is one atomic element, and the headings it reads are ordinary elements on the page. Restructure the page and the list follows.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Get Animation Addons ProInstall Animation Addons for Elementor and Animation Addons Pro, then open a long page with the Atomic Editor on.
Check the page has a clear outline: H2 for sections, H3 for sub-sections.
Drag Table of Content to where the list should sit: under the introduction, or into a sidebar column.
For a sidebar, select the column and switch on Sticky (Pro extension).
Style the list in the Style tab and save the look as a Class.
Publish and click each entry on the live page to check it lands on its heading.
Honest comparison
What each option has, side by side. We list where the other choice is the better fit, too.
| Feature | Elementor Pro Table of Contents (classic widget) | Animation Addons Table of Contents |
|---|---|---|
| Requires Elementor Pro | Yes | No (needs Animation Addons Pro) |
| Native Elementor 4 atomic element | No, classic widget | Yes |
| Builds the list from page headings | Yes, H1 to H6 | Yes |
| Styled with Classes and Variables | No | Yes |
Compared with Elementor 4.3.3 (September 2026).
Elementor Pro's Table of Contents is the more configurable widget today, with include and exclude rules, numbers or bullets, hierarchy, collapsing and a per-device minimize box. Choose the Animation Addons Table of Contents when you build in the Atomic Editor without Elementor Pro and want the list styled with your design system.
Who it's for
The people who get the most out of it, and what they use it for.
Adding "On this page" navigation.
Making long guides easier to scan.
Publishing long policies and reports.
Improving on-page navigation on clients' long landing pages.
FAQ
In Elementor 4, drag the Table of Contents element from Animation Addons for Elementor onto a long page. The Table of Contents builds jump links from the page's own headings, so give the page a clear H2 and H3 outline first. Style the list in the Style tab and publish. It needs Animation Addons Pro, not Elementor Pro.
A table of contents mainly helps readers find their section, which keeps them on long pages. The jump links also make a page's structure explicit, and Google sometimes shows section links in results for well-structured pages. The Animation Addons Table of Contents reads your real headings, so the headings themselves stay in the page HTML as normal.
Place the Animation Addons Table of Contents in a sidebar column, select that column and switch on the Sticky extension from Animation Addons Pro. The column, and the contents list in it, stays in view while the reader scrolls. This layout suits documentation, long guides and reports with many sections.
Yes. The Animation Addons Table of Contents takes per-breakpoint styles from the Style tab, so you can shrink type and spacing on phones. A long sidebar list rarely fits a small screen, so on mobile place the Table of Contents under the introduction or inside an Offcanvas panel instead of a sticky column.
A table of contents is a set of links, which keyboard and screen-reader users can use like any other navigation. Its quality depends on your headings: keep one H1, use H2 and H3 in order, and write headings that make sense out of context, because those are the entries the Animation Addons Table of Contents shows.
No. The Animation Addons Table of Contents needs Animation Addons for Elementor and Animation Addons Pro, but not Elementor Pro, and runs on Elementor Free with the Atomic Editor on. With only the free plugin, Table of Content appears in the panel as a locked card with an upgrade link.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Table of Contents on the same page or template.
free headings on any tag, H1 to H6, for a clean outline the list can read.
hold the contents list in a slide-in panel on long pages.
the free way to fold long FAQ or policy sections under the headings.
the free element that renders post content in single templates.
A contents list built from your headings, native to Elementor 4. Need something free? Write the jump links yourself with Icon List items that point to section anchors.
