I have a Wix website for blogging. Yes, I do.
And you know what, I actually really like this platform. Prices are highly competitive, with only a couple of options to host your website on an annual basis.
It offers the possibility to create and design your website easily, without any coding knowledge, simply by dragging and dropping elements. Compared to premium WordPress themes, Wix theme-builder is, I must concede, less performant. But you can spend a month designing your pages without paying anything or hosting your website, and that was, to me, two very compelling arguments that led to me pick Wix over other existing platforms.
However, if there is something I am not so pleased about, it’s Wix blog post editor (and slow-loading pages that kill all efforts I put into SEO). It doesn’t come as the most practical tool.
As I was writing a long blog post earlier this week, I came with the idea to add a table of content that would display all of my headings and help the viewers navigate through that lengthy piece of information.
I was surprised when I noticed that Wix had spent zero amount of thought into building this feature. And they didn’t make it easy for bloggers to get around this omission.
For example, it’s way easier to create tables of contents for Medium articles, as shown in this article.
This is a little tutorial that should help you build and style your own Table of Content (TOC) in your next post. You don’t need any previous coding experience, but you’ll still need to write some code, just a little bit. Come on, it’s gonna be fine, I’ll hold your hands.
- Write your article and publish it
- Collect your heading “id”
- Edit your article to build a Table of Content
- Transform into HTML
- Style your Table of Content (optional)
1. Write your article and publish it (trust me)
Begin with writing a new article as you normally would. Add headings H1 and H2 wherever you want. Organize your headings as you wish.
Hit “PUBLISH”. I know, it feels counter-intuitive, but don’t worry.
That was an easy step, wasn’t it?
2. Collect your heading “id”
Remember when your cat crossed the desk via your keyboard, and you saw a weird, unintelligible text appear on your screen. “Oh, this is just the website code” you proudly thought, as if it could be something else.
Now we are going to come back to that mysterious window, willingly.
Go to your website and click on the post you’ve just published.
Scroll down until you find your first heading. Right-click on the heading and click “inspect”.
The code page appears:
A text is highlighted within a <span> tag.
In the paragraph above, you will find the heading with the tag h1 or h2, followed by id=“viewer-something.”
The text inside those quotation marks may vary. This is your first heading id: copy it.
You will need to collect the id of all your headings, but, for the moment, you can open your dashboard in a new page or tab.
3. Edit your article to build a Table of Content
Open the post to edit.
We will write the TOC now and transform it into code afterward.
Where you wish to create the TOC, copy the id of your first heading with a hashtag and quotation marks like so:
“#viewer-something”
In my case, it was "#viewer-86l31"
Now, add the following code around and replace “My first title” by, well, you’ll guess what:
<a href="#viewer-86l31" target="_parent" rel="noonpener">My first heading</a><br>
You’ve just written a link to your first heading. Let’s add the other ones.
Go back to the page where your published article is open.
Repeat operation number 2: Collect your second heading id and come back to the post editor. Once again, complete the following code:
<a href="#viewer-86l31" target="_parent" rel="noonpener">My first heading</a><br>
<a href="#viewer-892ch" target="_parent" rel="noonpener">My second heading</a><br>
<a href="#viewer-1osc9" target="_parent" rel="noonpener">My third heading</a><br>
Repeat number 2 and 3 for as many headings as you want in the Table of content.
4. Transform into HTML
It told you we would write the code and transform it later. It’s simply more practical.
Copy the code you’ve written.
Jump a line and click on +. Click on add code </>.
A box appears. Make sure “HTML code” is selected and not the URL option.
Paste the code, then click “update”:
This is it. Now you have a fully working Table of Content.
If you are satisfied, you can delete the code you’ve written as a draft and publish your article. But wait, your TOC could benefit from a little styling, don’t you think?
5. Style your Table of content (optional)
Before you delete the draft you used to build the code, you can add some styling elements.
I added 3 new tags : <head> ; <style> and <body>.
Inside <style> you can customize styling properties of given elements. Here we have chosen “a” because <a> is the tag we used to create links.
You can edit what’s inside “a{…}” to modify those properties.
In “color” you can add the HEX code of the color you’ll want the links to be. “Font-family” lets you choose the font you wish; “font-size”, the size, “font-weight” the weight, and “line-height”, the space in between the lines.
<head>
<style>
a {color: #af432e; font-family: Lora regular; font-size: 16px; font-weight: 600; line-height: 1.7}
</style>
</head>
<body>
<a href="#viewer-86l31" target="_parent" rel="noonpener">My first heading</a><br>
<a href="#viewer-892ch" target="_parent" rel="noonpener">My second heading</a><br>
<a href="#viewer-1osc9" target="_parent" rel="noonpener">My third heading</a><br>
</body>
You can copy/paste the code above and make necessary changes. If you encounter difficulties when copying and pasting the code, you can try writing it manually, but you should be fine.
Adjust the properties to your liking. If you don't want to use one or several of those styling options, just suppress them. For example, if I don’t want to add weight and modify the line-height I will edit like this :
<head>
<style>
a {color: #af432e; font-family: Lora regular; font-size: 16px;}
</style>
</head>
<body>
Finally, copy your code draft and past it in the box you opened at number 4.
I hope you’ll find this tutorial helpful. I really needed to create tables of contents to ease the navigation through long posts. It’s a shame Wix doesn’t contain this feature for the moment. I think it’s a must for bloggers. What do you think?
