Using the Divi Tabs Module to create a Filterable Image Gallery

In a recent project I was asked to create a filterable image gallery. As Divi doesn’t do this out of the box, I had to look for options, one of them being Essential Grid but as I didn’t want to fork out for a plugin that would have been overkill, I decided to see if I could turn the Divi Tabs module into the same kind of thing and, with a little bit of tinkering, I managed to come right.

The Example

Here’s a quick example of what you can achieve with the Divi Tabs module, a little bit of CSS and a great little plugin.

The Process

In three steps, you can have this great looking filterable gallery.

1. The Image Gallery

The image gallery was created with the FooGallery plugin together with their FooBox extension for the lightbox functionality. At this point, I created two galleries, one for the coffee images and one for the tea. The image galleries are created in FooGallery which you’ll find in the WordPress sidebar menu on your dashboard after you’ve installed it.

2. Add The Galleries to the Divi Tabs Module

Go ahead and drop the shortcodes for your galleries into as many tabs as you have galleries for and name your tabs as you want the buttons to be labeled.

3. Add The CSS Under The Advanced Tab

Now that you’ve created the galleries and inserted them into the necessary tabs, head on over to the Advanced tab of the Tabs module (that’s a lot of tabs in once sentence) and add the following CSS as described below.

a. Main Element

Place the following CSS into the Main Element section, it removes the border of the Tabs.

b. Tabs Controls

Next up is the CSS which mostly handles the spacing/alignment of the buttons. Add this to the Tabs Controls section.

c. Tab

The following CSS is mostly for the styling of the buttons, i.e. the border, fonts, etc. Place it in the Tab section.

d. Active Tab

All we’re doing here is specifying the background color of the button that represents the active tab. Add this to the Active Tab section.

Wrapping It Up

Before I wrap this one up, I must give a big shout out to Tim Strifler of divilife.com, home to the brilliant Divi Overlays plugin, top-quality Child Themes, Plugins, and tutorials. Tim took the time to show me how to get the buttons to centre themselves independent of screen resolution.

And there you have it, a “filterable” gallery! You could really use this to “filter” anything that you can put into the Tabs module. Go ahead and have fun! It’s another easy way of adding a little something different to your Divi designs.

Note: I know this isn’t really filtering but hey, it works and it looks like it’s filtering. We’ll keep it our secret. Oh, and for the more adventurous out there, you could, of course, add all the CSS to your child theme’s style sheet but I’ll leave that up to you to figure out.

Update

If you have a thin horizontal line under the buttons, add the following CSS to the Custom CSS field under the Advanced tab of the Page Settings.