Category Grid Module for Beaver Builder

The category grid module for Beaver Builder allows you to select a taxonomy or select group of categories to display in a grid-like format on your site.

I consider this module beta as its subject to feedback and I don't know how people are really going to use it yet. It also uses CSS Grid, which won't work for IE. Just jump in here knowing that.

Select a Category Taxonomy or Include Select Ones

Select A Category For Beaver Builder
Select a Category for Beaver Builder

Select a Taxonomy

Select A Taxonomy For Beaver Builder
Select a Taxonomy for Beaver Builder

Select Individual Categories

Select A Category Manually
Select a Category Manually

Use Dynamic Category Images

You can use Advanced Custom Fields (shown below), custom meta (such as WooCommerce or category meta), and a built-in gallery if you want to set images there.

Retrieve Dynamic Category Images
Retrieve Dynamic Category Images

Dynamic Images Using ACF

First, create a new field, and for this example, we're going to call it background. It's going to have a field type of image and return an array.

Acf Create Background Field
ACF Create Background Field

Before saving the field, change the location to Taxonomy -> All as shown in the picture below.

Acf Button Location
ACF Button Location

Finally, go to your category and upload a background image. Remember how we named our field background?

Acf Category Background Photo
ACF Category Background Photo

And finally set the field name in the Category Grid module.

Category Grid Options For Beaver Builder

Finally, a Demo

You can customize the border, hover state, colors, even add a button!

Shown below is a simple two-column grid with some changes to typography. I'm using built-in gallery images for the images.

  • General
  • Module Updates
  • News

Watch the Video Below for a Full Module Walkthrough

Twitter Bb Vapor
Subscribe to MediaRon's YouTube Channel