How to Create a Mobile Friendly Table of Contents in WordPress

In this tutorial, I’ll teach you step-by-step how to create a mobile-friendly table of contents in WordPress using the power of Kadence.

This WordPress table of contents works great on both mobile and desktop. You’ll learn how to create a fixed button in the lower-right corner of your page and, when clicked, it will launch a slide-out showing your table of contents to your readers.

TABLE OF CONTENTS
0:00 Intro
0:52 TOC Preview
1:48 Setup
3:18 Build Table of Contents
5:56 Build Conversion Slide-Out
11:47 Build TOC Button Trigger
15:33 Fixed Button Element Settings
17:35 TOC Demo
19:14 Close TOC on Click
22:11 Outro

**************************

You will need the Kadence Full Bundle to unlock Kadence Fixed Elements + Kadence Conversions which are both used for the Table of Contents solution:

💰 Kadence Discount Code: 10% OFF any bundle using code SB10OFF

✅ Kadence Full Bundle: Includes Kadence Theme Pro + Kadence Blocks Pro + Kadence Cloud + Kadence Conversions and much more: (10% OFF Use Code SB10OFF)

✅ Kadence Theme Pro: (10% OFF Use Code SB10OFF)

✅ Free Kadence Theme download:

OTHER LINKS:
🖥 Recommended Hosting:

☁️ Cloudways – Fastest hosting and easiest to pass Core Web Vitals – Use Vultr HF server:

📈 FREE 7 Days to WordPress Speed Mastery Email Course:

I’d love it if you joined my completely free Start Blogging 101 Community Facebook Group which is a group of rockstar individuals who are passionate about building fast, profitable WordPress sites without page builders. Come join and say hi!

👋 Start Blogging 101 Facebook Community:

👉 Start Blogging 101 Facebook Page:

**************************

First, I’ll teach you how to build your Table of Contents slide-out using the power of Kadence Conversions.

Then, I’ll run you through the steps to create a fixed button using Kadence Elements that will act as our trigger to launch our table of contents slide-out.

Lastly, I’ll show you a really cool trick that you can use so that the table of contents closes as soon as your user clicks one of the links on both mobile and desktop.

#kadence #tableofcontents #wordpress