Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

Nelson Miller Profile Orange
In this tutorial I will show you how to display a grid of categories in Divi for Posts, WooCommerce Products, Events, Projects, or other CPT.

▶️ Please watch the video above to get all the exciting details! 👆

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.

making a grid of categories in Divi

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.

Divi Taxonomy Helper Plugin by Pee Aye Creative

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!

Divi Taxonomy Helper Module 35 Demo Examples

Display Categories The New Way!

Show a beautiful grid of categories with images, descriptions, and full design settings with our unique Divi Taxonomy Helper plugin!

Divi Taxonomy Helper Plugin by Pee Aye Creative

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

4 Comments

Comments By Others

  1. Casey Andrews

    How do I change the verbiage on the button? Right now it says “view taxonomy”. Ideally I would like it to dynamically say “shop [product category]” but even “shop now” would be better.

    Reply
  2. Martin

    Hello, when i will buy this plugin, can i show subcategories in category?
    I want to set default view in THeme builder. When i see category view, i want first show subcategory and after post … it is possible?
    Thx for answer

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart