How to create a table of contents with Elementor and a plugin

Elementor makes it straightforward to design a page around a contents panel, but the navigation itself usually comes from a WordPress plugin. The reliable method is to pair a table of contents extension with properly structured Heading widgets, then place the generated list in a Shortcode widget. Learn more about Brillx Registraciya.in.net.

Start with a single long article or tutorial. Give each main section a clear heading, check how the plugin labels its links, and test the result on a phone. This guide covers a practical setup without requiring Elementor Pro.

Choose the right table of contents plugin

Elementor does not include a native automatic contents widget, so choose a WordPress table of contents plugin that offers heading detection, anchor links and a shortcode. Popularity alone is not enough: look for recent updates, clear settings and support for the heading levels you need.

Several plugins can insert a list automatically, while others expect you to place their shortcode on each post. Automatic insertion is convenient for a large library; manual placement gives you exact control over where the list appears in an Elementor template. Confirm this behaviour before editing your live site.

Check compatibility and privacy before installing

Install the plugin only after checking that your theme and current Elementor version support its output. Elementor’s Shortcode widget displays most plugin output, but CSS conflicts with the theme can still require a small style adjustment. The walkthrough on Elementor 3 basics is useful for checking page-builder controls and responsive settings before you start.

Australian sites should also check data handling before adding extras. The Privacy Act 1988 and the Australian Privacy Principles matter when a plugin collects analytics or stores personal information. Review the plugin’s documentation, Best Elementor Themes’ privacy policy and any tracking options before enabling them. Basic anchor generation normally does not require visitor details, although an extension may add optional analytics.

Install and configure the plugin

In WordPress, open Plugins, choose Add New, search for your chosen extension, install it and activate it. The plugin’s settings page will usually contain heading-depth controls, label options and a choice between automatic and manual insertion. Take a site backup first, and use a staging copy if your pages are already ranking.

Copy the exact shortcode shown by the plugin; names and tag formatting differ between products. A tag such as [toc] may work for one extension and nothing for another. If the vendor asks for an account or licence, use the publisher’s verified domain; be cautious with any registration service not named in the plugin documentation.

Next, choose which heading levels the plugin should collect. Most content works well with H2 and H3, while H4 can make a compact list difficult to scan. Exclude the site title, navigation and footer headings if the plugin provides controls for that purpose.

Set up headings and generated links

Automatic lists are only as good as the document structure. Before generating links, organise the article’s content using these conventions:

• Keep one H1 for the page title.
• Use H2 for major sections and H3 for subsections.
• Use Heading widgets instead of bold text for titles.
• Avoid skipping levels, such as moving from H2 to H4.

Configure the generated links next. Their labels should match the visible headings, and they should remain usable without hovering:

• Enable smooth scrolling if the plugin supports it.
• Give each heading a unique, descriptive label.
• Keep link colour and contrast readable.

Preview the post after changing a heading. Some plugins cache their lists, so a new section may not appear until the post is refreshed or the cache is cleared.

Place the list inside your Elementor layout

Inside the Elementor editor, add a container and drop the plugin’s Shortcode widget into it. Place a Heading widget above it labelled “On this page”, then paste the copied shortcode below. A two-column layout works well on desktop: the contents can sit beside the first section while the article continues in the wider column.

For phones, switch the container to a stacked arrangement using Elementor’s responsive controls. This matters for Australian readers checking guides during a commute or using mobile data on regional services around Wagga Wagga or outside Perth. The contents should not squeeze the article into an unreadable strip. Keep the widget close to the opening paragraphs rather than anchoring it to the viewport.

If the plugin also inserts the list automatically, disable that feature or remove the duplicate shortcode. Two copies can create confusing navigation and push the article down, especially when a plugin styles both the widget and the theme’s post content.

Style the links for Australian readers

A compact label such as “Contents” or “On this page” is easier to scan than “Table of Contents” on a small screen. Use Australian English in visible text—colour, centre and licence—and check that your theme has not inserted American spellings. An accessible link needs visible keyboard focus, not just a colour change.

For paid extensions, check the live exchange rate, international card fees and whether the Australian checkout adds 10% GST. Buyers in Sydney, Melbourne or Adelaide may receive a quote in Australian dollars, but marketplace purchases often use US dollars. Keep the receipt and licence details for your records, and confirm that a business purchase includes the appropriate GST documentation.

Test, publish, and keep the list current

Test the full journey rather than the appearance alone. Follow every link, use the browser’s back button, refresh the page and check the anchor after the URL updates. Then repeat the test with a keyboard and a narrow mobile viewport. If you need help matching a plugin to a theme, include your WordPress and Elementor versions when using the contact page.

After publishing, revisit the page whenever a heading changes, because inserted and moved sections can break anchors. For community examples of navigation conventions, Sasir resources can offer a second perspective, but use official plugin documentation for setup instructions.

Open a draft, add three correctly nested headings, insert the shortcode, and verify each link lands on the right section before you replace your placeholder post.