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.
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.
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 labelled.
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 Advance 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.
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.