How to Configure & Style EA Table of Contents #

Table of Contents is an excellent way to provide fantastic user-experience for your website visitors and make your posts easily accessible to everyone. On top of that, it massively boosts the SEO score of your website and helps you to rank higher in Google Search. With the help of EA Table of Contents, you can now add TOC inside any of your posts/pages right from the Elementor. Most impressively, you have the flexibility to control its settings all from one place and display Table of Contents on your entire website.

How to Activate EA Table of Contents #

Let’s ‘Edit any of your posts/pages with Elementor’ to configure EA Table of Contents. Then, go to the ‘Page Settings’ which you will find at the bottom of ‘Elementor Panel’. Then, activate ‘EA Table of Contents’ and you will be all set to go.

How to Configure EA Table of Contents #

Once you have activated EA Table of Contents, a TOC will be automatically generated in the live preview. You can scroll through the entire page to check how it works.

You can change the title of Table of Contents along with its position from Left to Right. Besides, you have the freedom to change ‘List Icon’ out of these two: Bullet and Numbers. Moreover, you have complete control over which ‘Heading Tag’ you want to show inside your Table of Contents.

If you want, you can even play around with the toggle to keep sub-heading expanded for Table of Contents. If the headings you are using are too large, you even have the freedom to ‘Stop Word Wrap’ as well. Furthermore, you can play around with the ‘Transition speed’  and ‘TOC Auto Collapse’ options too. If you want, you can even display box-shadow and play around with the ‘Sticky Scroll Effect’ and ‘Z-index’.

Note: For Table of Contents to appear on your page, make sure that you have set proper headings on your page.

You also have the option to hide your Table of Contents on mobile devices if you want to and have the freedom to include or exclude certain different heading tags like H1, H2, H3 and so on.

How to Style EA Table of Contents #

Switch to the ‘Style’ tab of the page settings to personalize EA Table of Contents any way you want.

EA TOC #

From the ‘EA TOC’ section, you can change the position of the EA Table of Contents. Besides, you can change the ‘List Icon’, adjust ‘Bullet Size’ and play around with the ‘Border Type’ and ‘Border Radius’.

EA TOC Header #

From ‘EA TOC Header’ section, you can change the background and text color along with the typography of the Headings of your table of contents. Besides, you can change the ‘Icon’ for your TOC when it’s collapsed as well. If you want, you can even change color for the ‘Close Button’ too. Moreover, you have the freedom to modify ‘Text Orientation’ of your table of contents.

EA TOC Body #

From ‘EA TOC Body’ section, you can control how you want the Table of Contents to appear on your page/post. You can change the ‘Backgroud Color’ and play around with the ‘Padding’. Besides, you can use the dropdown to change the ‘Indicator Style’ and change the ‘Typography’.

Moreover, you can change the text color for your content when they are in a normal, hover and active view. You can even control the top level space and sub item space of your Table of Contents. Besides, you can add styling to the ‘Separator’ as well.

How to Configure the Global Settings #

If you want to display Table of Contents in all your pages or posts, you can activate the ‘Enable Table of Contents Globally’ option from the settings. By default, it is set to ‘All Posts & Pages’. Any changes you make under Global Settings, it will take full effect on all the posts or pages as well.

How To Override The Global Settings For A Particular Page Or Post #

Even if you have Global Settings activated, you can override the Global Settings for that particular page by enabling ‘Table of Contents’ for its ‘Page Settings’. As a result, it will have its own configuration and styles which you can easily go ahead and change.

To change the Global Settings itself, you can simply click on the ‘Clicking here’ option which will redirect you to its page settings.

Final Outcome #

By following these basic steps and a bit more modifying, you can easily control where you want the EA Table of Contents to appear and style it as per your preference.

By using EA Table of Contents, this is how you can boost the user experience of your WordPress website and keep your readers engaged to your content.

Getting stuck? Feel free to contact our Support for further assistance.