How to Build a Clickable Table of Contents for a Blog Post with the Divi Layout

How to Build a Clickable Table of Contents for a Blog Post with the Divi Layout

In this tutorial, we are going to design a clickable table of contents for a single blog post (in Gutenburg) that uses anchor links to bring users to designated headings throughout the post.

Adding a clickable table of contents to a blog post is a great way to improve user experience. In many cases, a blog post table of contents uses anchor links to help users navigate through the content. And, a table of contents (with anchor links) is really simple to build using basic HTML. However, adding custom design/CSS to customize it can be a challenge. This is where the Divi Layout Block comes in handy.

In this tutorial, we are going to design a clickable table of contents for a single blog post (in Gutenburg) that uses anchor links to bring users to designated headings throughout the post. To do this we will use the Divi Layout block to create the Table of Contents with all the powerful design tools of the Divi builder at our disposal.

divi clickable

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How to Create a Clickable Accordion Using Sticky Page Headings in Divi

We are going to show you how to combine Divi’s sticky position options with smooth scrolling anchor links to create an accordion-like way to index and navigate your page.

How to Create Custom HTML5 Video Controls for a Video in Divi

we are going to show you how to create custom HTML5 video controls for a video in Divi. To do this, we will create and style the video and custom control buttons using the Divi Builder.

How to Visually Showcase Blog Post Categories in Your Divi Header

In this tutorial, we’ll show you exactly how to Visually Showcase Blog Post Categories in Your Divi Header. When creating your global header, chances are high you’re going to include a blog menu item.

Get the Ultimate “Divi Utility Kit” from the Marketplace

In this tutorial, we will learn how to Get the Ultimate “Divi Utility Kit” from the Marketplace

How to Stack and Animate Text using Divi Scroll Effects

Using Divi’s scroll effects to stack and animate text on scroll is a unique design technique that can be used to bring life to your page headings.