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