How to Add a Table of Contents with Elementor and a Plugin

A well-structured table of contents helps visitors understand a long page before they start reading. It can also make a service guide, tutorial, product review or blog post easier to scan on mobile, where Australian users may be browsing during a train trip through Melbourne or between meetings in Sydney.

Elementor gives you control over page layouts, headings and anchor links, while a dedicated WordPress plugin can automate the table of contents. The right setup depends on whether you use Elementor Free, Elementor Pro, a classic blog template or a custom single-post design.

A contents box is especially useful for websites with detailed buying guides, such as comparisons of Elementor themes, WooCommerce tools or plugins for local businesses. It lets readers jump directly to pricing, features, setup instructions or compatibility information instead of scrolling through every section.

The process is straightforward: create a clear heading hierarchy, install a compatible plugin, place the contents widget or shortcode in the layout, then check the result on desktop and mobile. A few accessibility and performance checks will make the feature feel polished rather than intrusive.

Prepare the page structure first

Before installing anything, review the headings on the page. Use one H1 for the main page title, then H2 headings for major sections and H3 headings for supporting points. Avoid choosing heading levels because of their font size; adjust typography in Elementor instead.

A page about setting up an online shop might use H2 headings such as “Choose a payment gateway”, “Configure shipping zones” and “Test the checkout”. Smaller topics, such as delivery estimates or tax settings, can sit under the relevant H3. This structure gives the plugin meaningful information to scan.

Clear headings also matter for local search. A Brisbane electrician, a Geelong café or a Perth tradesperson may publish separate sections for service areas, emergency availability and pricing. A table of contents can expose those useful sections quickly while helping search engines interpret the page.

Choose an Elementor-compatible plugin

Elementor Pro includes a Table of Contents widget that can scan selected heading levels and generate jump links. After adding the widget to a page or single-post template, you can choose which HTML headings to include, style the panel and decide whether it should remain sticky.

If you use Elementor Free, a WordPress table of contents plugin is usually the simplest route. Options such as Easy Table of Contents, LuckyWP Table of Contents and similar tools can create a contents list from headings, often through a widget or shortcode. Check recent compatibility notes before installing, particularly if your site uses a custom Elementor theme.

For broader theme research, browse the Elementor themes collection before committing to a layout. A theme that handles blog templates, responsive spacing and custom post types well will generally make the contents panel easier to position.

Install and configure the contents panel

In WordPress, open Plugins, select Add New and search for your preferred table of contents plugin. Install it from a reputable source, activate it and open its settings page. Most plugins allow you to select heading levels, set a minimum heading count and choose whether the panel appears automatically.

Automatic insertion works well for standard WordPress posts, but Elementor-built pages may need a manual placement method. In the Elementor editor, add a Shortcode widget, WordPress widget or the plugin’s dedicated widget, depending on the product. Paste the generated shortcode if required, then update the page.

Choose a useful title such as “On this page” or “Contents”. Set the plugin to include H2 and H3 headings, but exclude H1 so the page title is not repeated. If the page contains many small headings, including H4 can create a crowded list that is difficult to use on a phone.

Style it for Australian visitors

Match the panel to the site’s visual identity without making it compete with the main content. A light border, modest background colour and clear spacing are usually enough. Use a readable font size and ensure the links have a strong colour contrast, especially on screens used outdoors in bright Australian sunlight.

For long guides, a collapsible contents box can save space. A sticky panel may work on desktop, but test it carefully on smaller screens. A fixed box that covers text or the cookie notice can frustrate visitors in Adelaide, Canberra or regional areas where mobile browsing and variable connection speeds are common.

Review the wording of headings as well. Australian readers generally respond well to direct language such as “Set up local delivery” or “Add GST details”. If your business targets customers in New South Wales or Queensland, location-specific headings can make the page more relevant without stuffing suburbs into every paragraph.

A live website can also help you judge spacing and hierarchy; for example, inspect this design example alongside your own page and look at how content blocks are separated. The goal is not to copy the design, but to see whether navigation elements remain easy to find.

Test links, accessibility and performance

Preview the page in Elementor and click every contents link. Each item should move to the correct heading, with no duplicate entries or empty anchors. If a link lands beneath a sticky header, add scroll-margin-top through your theme settings or custom CSS so the heading remains visible.

Test the panel at common breakpoints, including a narrow phone screen. Check that it wraps neatly, that the expand and collapse controls are usable with a keyboard, and that the focus state is visible. A well-built plugin should use semantic navigation and suitable ARIA attributes, but confirm the output rather than assuming it.

Avoid loading several navigation plugins at once. A lightweight table of contents tool is preferable to a feature-heavy package that adds unnecessary scripts. After publishing, clear your cache and test the page in an incognito window. You can also compare layout ideas in a curated Elementor theme shortlist before redesigning the template.

A contents panel works best when it supports genuinely useful content. Keep the headings descriptive, limit the number of levels, and update the page whenever sections are renamed or removed. On a long product guide, it can improve navigation, reduce scrolling and help visitors reach the information that matters to them.

Open one long Elementor page in the editor now, convert its section titles into a consistent H2 and H3 hierarchy, then add a table of contents widget or plugin and test every jump link on your phone.