Back to blogHow-To-Create-a-Table-of-Contents-in-Bricks-Builder

How To Create a Table of Contents in Bricks Builder [Step-By-Step]

Intro: In this user-friendly guide, we will show you how to display a table of contents on your Bricks Builder website with Max Addons’ Table of Contents element. Max Addons offers more than 30 creative elements, including the Table of Contents element. These elements helps you add advanced functionality to your website without writing a single line of code.

If you tend to write longer blog posts, or have long pages of content, a Table of Contents (ToC) can improve user experience. The table of contents is a quick way for viewers to understand what content the article covers, combined with a convenient option that enables readers to jump directly to the part they are looking for, from one section to another.

In this tutorial, we will show you how to do the needful — Display a table of contents on every blog post of your WordPress website with the help of Max Addons Table of Contents element for Bricks Builder.

This guide will teach you how to:

  • Add a table of contents to your Single Post Template
  • Customize the appearance and behavior of your table of contents
  • Display table of contents across multiple blog posts automatically

So, let’s get started!

Why a Table of Contents Is Essential for Your Website

Before we dive into the process, let’s briefly understand why adding a table of contents to your website is a game-changer, especially for content-heavy pages.

  • Improves User Experience: Displaying a table of contents helps visitors get a clear overview of your page contents and can navigate directly to the parts they’re interested in.
  • Increases Time on Page: A well-structured table of contents encourages readers to explore more sections, improving dwell time and reducing bounce rates.
  • Boosts SEO: Search engines such as Google really like structural content. A table of contents help improve your search rankings by providing a clearer structure making it easier for the content to be crawled and understood.

Max Addons’ Table of Contents: Key Features

Max Addons offers more than 30 creative elements for Bricks Builder, including the Table of Contents element.

Let’s quickly go through the key features of Table of Contents element:

  1. Collapsible and Expandable Layout: Allow users toggle between viewing or collapsing the ToC.
  2. Customizable Header and Body: Adjust the design to match your website’s style.
  3. Flexible List Styles: Choose between numbers, bullets, or hierarchical lists.
  4. Automatic Heading Detection: Automatically detects and organizes your headings (H1, H2, H3, etc.).
  5. Exclude Specific Headings: Customize which headings are shown in the ToC for better control.

Add a Table of Contents in Bricks Builder Using Max Addons

Let’s now walk through how you can add a table of contents to your posts/pages using Bricks Builder and Max Addons.

1. Install and Activate Max Addons

Before getting started, ensure that Max Addons is installed and activated on your website. The Table of Contents element is part of the Max Addons Pro package, so be sure to complete your purchase to access it.

max addons pro pricing

If you want to try the free version before investing your money, you can download the Max Addons Lite from its wordpress.org profile.

2. Create or Edit a Single Post Template

Now, let’s add the table of contents to your Single Post Template in Bricks Builder. Doing this will ensure that the table of contents appears automatically on every blog post.

Navigate to your WordPress dashboard and click Bricks >> Templates.

add new template

If you haven’t created a Single Post Template yet, click Add New to create one. Otherwise, choose to edit your existing Single Post Template.

The Single Post Template is where you’ll design how your blog posts will look, so it’s the perfect place to add the Table of Contents.

Tip: You can also use the Table of Contents element on any page, not just blog posts. For example, if you have long-form sales or landing pages, adding a ToC at the top can help guide users through the page.

3. Customize the Single Post Template

Once inside the Bricks Builder Template Editor, you can either start from scratch or use a pre-built template from the Bricks community.

Here’s a basic setup for your Single Post Template:

  • Post Title: Add a Post Title element to show the post heading.
  • Post Content: Add a Post Content element to dynamically display the blog post’s body.
single post template

After setting up the essential elements, let’s now add the table of contents.

4. Add the Table of Contents Element

In the template editor, search “table of contents” in the element panel.

Once it appears in the search results, add it into your template. Make sure the element has the “MAX” tag in the top-left corner. This tells you it’s the table of contents from Max Addons.

add table of contents element

5. Customizing the Table of Contents Element

Once you add the Table of Contents element, customization options will appear in the sidebar on the left.

Let’s break down these options to help you personalize the look and functionality of your table of contents.

table of contents options

6. Customizing the Header

The first tab is HEADER, which lets you configure how the title and controls of the table of contents appear.

Here are the options you’ll find:

  • Title: Customize the heading that appears above the table of contents, e.g., “On This Page” or “Table of Contents”.
  • Collapsible ToC: Enable this option to allow users to collapse or expand the ToC. This is useful for long ToCs.
  • Icons: Select icons for the collapsed and expanded states.
  • Default State: Choose whether the Table of Contents should be expanded or collapsed by default.
  • Typography: Customize the header text’s font size, weight, and style.
  • Background Color: Choose background color for the header area.
  • Horizontal & Vertical Spacing: Adjust the padding and margins for better positioning.
  • Separator Thickness & Color: Add a separator line under the header and customize its color and thickness.
header customization

7. Customizing the Body

The next tab is BODY, which controls the appearance and behavior of the list of links inside the table of contents.

Here’s what you can customize:

  • List Style: Choose between numbers or bullets for the list items. You can also select a hierarchical list if your content is nested (H2, H3, etc.).
  • Include Headings: Specify which heading levels (H1, H2, H3, etc.) you want to include in the ToC.
  • Exclude Headings: If there are specific headings you don’t want to show, you can exclude them here.
  • Horizontal & Vertical Spacing: Adjust the spacing between items for a cleaner look.

8. Save and Preview

Once you’re satisfied with the customizations, click the Save button in the top-right corner of the editor.

Now, let’s set the Display Condition for your template. Start by clicking the settings icon in upper corner of the template. This will open the main Settings menu.

In the Settings panel, go to Template settings and select CONDITIONS.

Click the +ADD CONDITION button, then choose “Posts” from the list of options. This will apply the template to all blog posts across your website.

Now to check if the Table of Contents is working correctly, preview one of your blog posts. Here’s how the table of contents will appear in the live post:

table of contents in bricks builder

Next Read: Create an Image Gallery With ACF in Bricks Builder

By following the steps in this guide, you can easily implement a customizable, fully functional Table of Contents in just minutes – that too without writing a single line code!

If you enjoyed this tutorial, you may also like our guide on how to create an image gallery with ACF in Bricks Builder.

Max Addons offers over 20 unique elements to supercharge your website-building process. These elements can streamline your workflow, saving you valuable time and resources. Are you ready to elevate your website creation journey? Get Max Addons today!

If you found this helpful tutorial, please share your thoughts by commenting below!

Leave the first comment