How do you turn lengthy blogs into interactive ones? That’s a tricky question. There are very few ways you can persuade readers to go through your entire writing. But, who said it is important? The success of a blog depends more on how quickly readers get the information they seek rather than how many of them read the entire blog.
Table Of Contents For WordPress
Briefly, here is what we are going to do, we are going to create a Table of Content in WordPress using Elementor. And we are going to place it at the very beginning of the Blog, so that readers can pick the section that they want to read quickly. And on our part, we are going to make the table auto-scroll enabled. This means, even if the Table of Content sits at the top of the blog containing the different sections of the blog, as soon as readers click on a header, the page will start scrolling to that section.
We are going to need a couple of things for this, Elementor and a well-written blog divided into meaningful headers.
If you are an avid Elementor user, you might be giving me raised eyebrows. Why? Maybe because you know there is no native element that lets you create Table of Contents.
And there is no Addon for Elementor, as far as I know, that has any dedicated element that lets you build Table of Content in WordPress as well. So, who am I trying to fool here? Well, no one! It is possible to create one using elements that, strictly speaking, are meant for other types of content. And, this opens up opportunities for sheer creativity.
There is no point in writing a blog on how to create a simple Table of Content. But who said we are going to create a simple Table of Content, we are going to make one that supports Auto-scroll.
So, here is the deal, we are going to create the Table of content using the Native Text Editor in Elementor, then we are going to make it auto-scroll enabled with Menu Anchor Widget.
Internal Smooth Scrolling Navigation
The Native Menu Anchor widget lets you add a Smooth Scrolling Navigation to your site.
Now, when is it required to insert an Automated Table of Content? First, you might need it while writing a Long Blog. Lengthy blogs are good, writers can arrange all relevant information that a reader might seek in one place. But on the flip side, scrolling through the lengthy write-up can get annoying at times. Including an Auto-Scroll enabled Table of Content will allow your readers to jump straight to the part that they want to read.
Second, you might also want to include Auto-Scrolling to your Landing Page. Furthermore, the Menu anchor is a must for One Page Websites. But that can be the topic of other possible blogs I write in the future. For this blog, I am going to only give you the step-by-step guide on how to Create a Table of Contents that supports Auto-Scroll.
Before getting into the steps, let’s talk about another aspect of using this element. The element requires another element to be used with it. We are going to use the Menu anchor with the native Buttons elements.
So, here is what we are going to do, we are going to learn how to use the Menu Anchor accompanied by the Button to create an Automated Table of Content for a long blog. Let’s get started.
Step-By-Step: Create an Automated Table Of Content
Creating the Layout
The first part of it involves creating the layout. We are going to use the Text Editor, Heading and Buttons for this. But there is a trick, you will need to use separate Buttons and Headings for every Heading you have. Let’s go step by step.
- First, write down the distinct parts of your blog. For example, you might have a beginning and an ending separated by a body. Try to use clear Headings for these distinct parts throughout the blog. And here is the trick, use separate Headings for the different section on the blog.
- Move up to the beginning of the blog and insert Buttons element into the Elementor interface and write down the Headings. Now, here is the trick, you will need to use separate Buttons for every Heading you have. Why, because Menu Anchor widget will not respond to multiple elements. One Menu Anchor responds to only one element.
So in the above screenshot, you can see we have prepared a simple layout. The write-up starts with an introduction, followed by the Buttons containing the headings inside it.
Just to give you a brief f what we are going to do in the next step, we are going to drop the Menu Anchor over the Heading elements and link them back to the buttons.
Insert the Menu Anchor
Once you are done, its time to Automate the layout.
- Drag the Menu Anchor widget to the top of the area you want the link to scroll to
Note: The widget takes up no actual space and is invisible to the visitor.
- Give the anchor a name. (ie: contact-us). Remember the name as we have to use it in our next step.
- Edit the menu or widget element that will be linking to your anchor
- Type ‘#’ + the anchor name (ie: #contact-us) in the URL link field of the menu item or widget element.
Wrapping Up!
Learning the Menu Anchor might be a bit tricky at first. But don’t get frustrated, keep trying. Eventually, you will get a hang of it, and who can tell, you might even come up with your own ideas of using the Menu Anchor in other creative ways. Do share with us, if you do.
