Kajabi How To: Make a Table of Contents in a Blog Post
May 05, 2023I love how bloggers are so innovative. If they see an issue for themselves or their readers, they get creative and come up with a solution! 💛
For instance, as we've found the need to provide longer and longer blog posts to do well with Google and SEO (main point being: to serve readers searching for the BEST information), we then found a way to better organize those longer posts (like this one) in a more user-friendly format.
And that's when adding a Table of Contents to a blog post became a thing.
So we're going to talk about how to do this on your Kajabi blog, where there's no 🪄 magic-presto! plugin. I love to find workarounds and solutions like this for Kajabi bloggers, woo hoo!
I may receive commissions for purchases made through links on my site. Please see my full disclosure for further information.
What Is a Table of Contents in a Blog Post
Y'know how usually a blog post format is something like this?
- Introductory paragraph
- Supporting paragraphs separated by headings
- Conclusion
Well, for posts that are long and/or complex, bloggers will sometimes include a Table of Contents at the top, usually right before or after the Introduction.
There are a host of reasons for doing so, actually, and I'll be writing about those in another post.
Why Putting a TOC in a Kajabi Blog Post is Different
If you've been blogging inside Kajabi, you know that it's not the same as blogging in WordPress, in many ways. For instance, to add a Table of Contents to a WordPress post, you can simply use a plugin.
But Kajabi bloggers don't have plugins at our disposal. So you may think you just don't have the option of including a Table of Contents in your posts.
Well, I have good news once again because I've figured out 2 workarounds that will allow you to!
Two Options for a Table of Contents on a Kajabi Blog
Let me start by saying, "I'm not a coder." So I found 2 workarounds for this issue and although one of them involves code, I'm no expert at it. I just played around with something until it seemed to work, lol.
The two options I found are:
- Using HTML code
- Using a 3rd-party software called Elfsight
Option #1 will look like a regular TOC you're used to seeing, although it won't have any styling like being in a box or anything.
Option #2 will NOT look like a regular TOC. We're actually going to modify an FAQ accordion to make a pseudo table of contents that accomplishes the same thing as a real one :)
I've used each of them below so not only do you get the instructions, you can also see an example of how they could look!
A Third Option for Your Kajabi Blog to Utilize Table of Contents in Posts
Because I'm not a coder, I could say that a valid third option would be to hire someone to code this for you. Perhaps they could even make a less manual process or make it easy to do on all posts vs. my two methods that you can only do one blog post at a time.
Okay, without further ado, let's get to it!
First, we're going to create a Table of Contents by putting some coding and dummy text into the Source Code of your blog post.
This option might be better for you if:
- You don't want to use a 3rd-party app; you want to keep it Kajabi 💯
- You really want the actual look of a Table of Contents
- You're comfortable with doing coding and getting a bit fussy
How to Create a TOC Using Code
- Under Blog, Edit Post, Post Details, Content, click the Source Code button (it looks like <>)
- Copy the coding/text below. It has generic text that you're going to personalize once you get it set up.
- Paste it into the appropriate spot in your post, in the Source Code; hit Save
- Turn off the Source Code and go back to the regular text editor, where you'll see how it's going to look. You could also right-click Preview at the top of your blog post draft and, in a new tab, get an idea how this will look in your post.
- Open the Source Code again. Revise the text as needed BUT when using phrases remember not to have spaces; use dashes or underscores instead. For instance, I changed "Heading 1" to "Table-of-Contents".
- Don't delete any of the code willy-nilly ... or dilly-dally ... or hasty pasty whatever, ha! It will be a pain to fix it if, like me, you're not familiar with and hate working with code.
- Save, save, and save again - Save your work as you go, often.
- Keep refreshing your Preview post tab as you edit so you can get it looking how you want it out there in the real world :)
- When you're done or close to it, go test out those jump links, finalize your post, and VOILA! A functioning Table of Contents in your fabulous blog post in Kajabi!
CODING/TEXT: HERE'S WHAT YOU COPY + PASTE INTO THE SOURCE CODE (< >) OF YOUR BLOG POST
<h1>Heading 1</h1>
<ul>
<li><a href="#subheading1">Jump to Subheading 1</a></li>
<li><a href="#subheading2">Jump to Subheading 2</a></li>
<li><a href="#subheading3">Jump to Subheading 3</a></li>
</ul>
<h2 id="subheading1">Subheading 1</h2>
<p>paragraph 1</p>
<h2 id="subheading2">Subheading 2</h2>
<p>paragraph 2</p>
<h2 id="subheading3">Subheading 3</h2>
<p>paragraph 3</p>
EXAMPLE: HERE'S WHAT IT WILL LOOK LIKE FOR YOU TO EDIT AND PERSONALIZE
Heading 1
Subheading 1
paragraph 1
Subheading 2
paragraph 2
Subheading 3
paragraph 3
Now it's time to try a 3rd-party solution: Elfsight + an FAQ accordion widget!
This option might be better for you if:
- You loathe dealing with code whatsoever
- You like the look of a non-standard but easy-to-use accordion section to house your TOC
- You already have Elfsight or don't mind getting it (there is a small cost but I use several of their other widgets as well, so it's worth it to me)
How to Create a TOC Using Elfsight
If you don't have an account, you can open one at Elfsight.com.
1. Once you're logged in, click Applications on the top left, click Add Application, search for "FAQ", hover over the FAQ box, and click Create Widget.
2. On the top left again, change "Untitled Widget" to something like "FAQ for Blog TOC" or just anything you want that will make it easy to remember what the widget is.
3. Under "Select a Template to Start With", click on each choice to find which template you want to use. For the example in this post, I chose Search in FAQ. I really like the idea of the "TOC" being searchable! Here's a screenshot of how the Search in FAQ works:
This shows how if a reader searched in your TOC for "podcast", it would pull up and highlight anywhere the word "podcast" appeared in the TOC. Pretty cool!
4. Click "Continue with This Template".
5. Now it's time to personalize the widget to make it your own! Click on each of the lefthand buttons:
- Content
- Layout
- Appearance
- Settings
6. Play around a bit and see what all your options are. You can't hurt anything! If you set something and you end up not liking it, you can always come back and change it.
7. Toggle between the Mobile and Desktop view on the top right.
8. If you need help, click the question mark icon on the bottom left.
9. When you think you're done and want to see how it looks, click Apply (saves the widget; you can come back to it later) or Save (takes you to My Widgets).
10. From the My Widgets page, click Add to Website, Get Code, hover over the code and Click to Copy. (To get that box to close, click "I have installed the code").
11. Go to the Kajabi blog post where you want to embed this widget, open the source code (< >), and past the embed code where you want it. SAVE ... phew!
You did it! You created a sweet Table of Contents using an Elfsight FAQ widget. You were born to be special and make your own path! 😂
Open your blog post Preview and see how it looks. Need to make any tweaks? Go back to Elfsight and once on your My Widgets page, click Edit, and make your changes.
Then click Apply, save your blog post again just to be sure, and refresh your Preview. You should see that the edits are live!
All that's left to do is to perfect as needed and you are DUNZO!!
... Remember, if you go this route, any time you want to edit this "FAQ-style" table of contents, you'll need to do so over in your Elfsight widget, and THEN copy/paste the widget code back into the Source Code of the post.
If you ever want to delete this Elfsight "TOC", just delete the Elfsight embed code in the Source Code of your blog post. The widget you made will still "live" over in Elfsight to use again in the future, but it won't show in your post anymore once you delete the embed code in Kajabi.
EXAMPLE: HERE'S WHAT IT COULD LOOK LIKE DEPENDING ON HOW YOU SET UP YOUR WIDGET
** Keep in mind, I purposely styled mine to include the search bar, to use the pale seafoam color, to use this font, etc. You can make yours look totally different so it matches your branding, your designer's eye, etc.
[These are screenshots, not live embeds]
The whole Table of Contents (blank)
With two sections expanded
EXAMPLE: HERE'S ONE FILLED IN SO YOU CAN SEE HOW THEY LOOK
[These are screenshots, not live embeds]
The whole Table of Contents (filled in)
With two sections expanded
As you can see, this is definitely an unconventional way to do a Table of Contents in a blog post!
But I like for a few reasons:
- It's very clear and organized, easy to view and glean the information I want to convey
- When you click to expand each section, they stay open (unlike some FAQ's where one selection collapses as soon as you open another one, yuck)
- While you can add as much text as you want to each section, as it first presents on the page, it's very compact. It's like a hidden treasure! 🏴☠️
If your purpose for using a TOC is to clearly organize your information, make it aesthetically pleasing, and provide a good user experience for your reader, I think you'll agree that this FAQ slash TOC totally fits the bill! (pssst! Mr. Google will like it, too, wink).
Conclusion
Okay, phew! That was a long post! I hope you find the value in using these 2 workarounds so you can still have a Table of Contents in your blog posts even though Kajabi doesn't provide an inherent way to do so.
While they both take a bit more effort, I think the benefits they bring to your blog are completely worth it. Please reach out if you have any questions! [email protected]
PS: Thank you for being part of the "Kajabi Curated" membership where you get to see extra-special posts like this!!
