How To Display A Grid Of Categories In Divi For Posts, WooCommerce Products, Events, Projects, Or Other CPT

Method 1. Manually Link To Category Pages

If you have a very small website with only a few categories that will never change, then it would work fine to set up links to the category pages manually. This method is simple and requires adding any module and manually linking to the corresponding category pages.

When To Use This Method

• Only a few categories
• Categories never need updated
• You don’t mind remembering to manually update the structure every time a category is changed or added

Set Up The Layout Structure

The layout depends a lot on your own preferences, so I’ll just demonstrate something pretty simple using some images, text and buttons. Start with a row and the number of columns of your choice. Then add an Image module, Text module, and Button module to each column. You could also do anything else you choose, like a Blur module or just an Image module, or even a Call-To-Action module.

Customize The Design

This tutorial is not really concerned with the design of the category grid, so I am going to skip this part. Just keep in mind the structure, like if you want a background color for each grid item, then maybe use the column background color. Also keep hover effects in mind, since these will be links and should show this with micro-interactions to the website visitor.

Add The Links

At this point you need to add the most important part, the links to the category pages. You have two choices here, either take the time to add the links to all three modules within the column, or to add the links to the entire column.

Method 2. The Divi Taxonomy Helper Plugin

If you have a larger website with a lot of categories that will change, and you want everything to be dynamic and easy, then this method is for you. This method uses the custom Taxonomies module in our Divi Taxonomy Helper plugin.

When To Use This Method

• A lot of categories
• Categories are updated or added
• You like easy and dynamic solutions

Install The Plugin

As mentioned, this second method required the Divi Taxonomy Helper plugin, so the first step is to get that installed and set up. If you are a member of our Divi Adventure Club, simply go to your account and download the plugin and install it on your site. Otherwise, you can purchase the plugin to proceed with the same steps. Please refer to our documentation for all the steps to install and set up the plugin, including adding the images to the categories.

Add The Taxonomies Module To Your Page

The next step is to add the Taxonomies module from the Divi Taxonomy Helper to your page layout. The plugin does several things, but one of those things is adding a module that is kind of like the Blog module, but instead of displaying posts, it displays categories.

Configure The Taxonomies Module Settings

All the settings are very familiar to other Divi modules, and we hope the labels and help text are helpful to explain what each setting does. Rather than repeat myself and walk through every setting, I recommend checking the written and video documentation guide as you adjust the settings in the module.

The most important part is linking to the correct category pages. The Taxonomies module automatically does this for you, but you still need to tell it which categories to display. You can do this by first selecting the post type, then selecting the taxonomy.

Customize The Design

In all the plugins we create, we try to think of every possible setting that you could ever need, and we did the same for Taxonomies module. Every part of the design is customizable. Rather than bore you with all the details, I’ll just add some screenshots of the 35 module designs from our demo page. By the way, these are available to download for FREE!