How to Create a Table of Content in Elementor | Simple & Easy | 2020
A step by step guide in how to create free, simple and easy Table of Content on Elementor’s Free Page Builder. And you don’t need the Pro version of Elementor to do it.
A table of content is very important when you are blogging as it helps in Ease of Navigation and it boost your SEO as well.
I hope this tutorial helps you! If you have any questions leave a comment below.
Like & Subscribe and Stay Connected on YouTube for more upcoming tutorials.
Feeling Lazy to Create the Table of Content!
How to Work on JSON File!
Step #1
- Download the above mentioned JSON Zip File on your Computer.
- Right Click on the Zip File then go to WINRAR and then Click on Extract Here (As shown in the Image Below).
Step #2
- Once you click on “Extract Here” you will see the Table of Content.json file downloaded in the same folder where is zip file is sitting (As shown in the image below).
Step #3
- Then go to your website, then the blog page where you want to import the Table of Content and then select Edit with Elementor (As shown in the image below).
Step #4
- Step 4 is to select and click on the “Add Template” in the new section (As shown in the image below).
Step #5
- Once you have clicked on “Add Template” – the next step is to import the JSON file that you have already downloaded. In order to do that as you can see Step 1 in the image below, you have to click on the “Above facing arrow” that says import template.
- And then you have to click on “Select File” button as mentioned in Step 2 of the image below.
Step #6
- Here, you have to select the JSON file which we extracted through the zip folder, either double click on it to open or select it once and click on the open button below.
Step #7
- Now as we see the that the file is already imported on Elementor Template and now we have to click on “Insert Button”to insert the file into our website.
Step #8
- Once you click on the Insert Button, you will see that the Table of Content is now uploaded on your blog page (website).
Step #9
- Step 1 as per Image: Click on the content box as shown in the Image once you do that it will select the editor section.
- Step 2 of Image: Change Content one by one with the content on your blog / website.
- For better understanding from this step onwards you can refer to the main video to learn how to add Anchor links to your table of content text.
Step #10
- As you can see I have changed the first item on the list, changed to “Siteground Web Hosting” then I have to Click on the Edit (Pen Icon) to change the Link content.
Step #11
- Once you have clicked on the edit link button as per the previous instruction, now you have to type a keyword for example as my blog and the main heading is related to Siteground. I have mentioned “#Siteground” here and once you have typed the content either hit Enter key on keyboard or else click on the blue arrow at the end of this dialog box.
- Please note: # (hashtag before the text) is very important.
Step #12
- This step is divided into 3 parts. As you can see in the image the Step 1 is to click on the Widgets Menu.
- Then, Step 2 is to type ANCHOR in the search Section. You will see the Anchor widget in the search box.
- Step 3 here is to Drag the Anchor Box and Drop it right above the Heading of your content (As seen in the image).
Step #13
- In this step you have to type the same keyword with a Hashtag key what you mentioned in couple of steps before. In my case I had mentioned “#Siteground” – So, I will mention #Siteground again over here so it creates the symmetry between the Anchor Text and the Editor Link Text of 1st option.
Step #14
- Once, I have done that as you can see in this small video here. That, once I click on the first option i.e. Siteground Web Hosting, it takes me to the First Heading of the Blog where I have placed the Anchor link.
- So, that’s how it works. Similarly, you can add the other Headings in the Table of Content format and connect them with their respective Hyperlinks.
I hope your Table of Content looks pretty awesome now. If you are stilling facing any kind of problem with it, please comment below and I’ll be more than happy to help you!
Thank you for learning with me and your Valuable time! You have a Great Day ahead! Happy Learning!