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. This helps fund our site. Note: I know this isn’t really filtering but hey, it works and it looks like it’s filtering. One question. In three steps, you can have this great looking filterable gallery. Mine is still stacking on the 2nd and 3rd tabs. Posted by Rob Hobson | Jun 5, 2017 | CSS, Plugins, UI | 32 |. Cheers, Kai. }. We use cookies to ensure that we give you the best experience on our website. Hi Rob, you should also notice that there are still lines running between the boxes at the bottom. The following CSS is mostly for the styling of the buttons, i.e. How do I center the tabs when switching to tablet / mobile view? Hopefully you'll click on them and help keep this site online and fresh! Got a solution from Divi support. For those of you who still need this: Please add this css code into Divi > Theme Options > General > Custom CSS field. Continue Reading…, Within Divi, there are many different ways to share testimonials, using the Divi Testimonial Module for instance. :). Oh! I adapted it here https://auto.alu-typenschilder.de. Place the following CSS into the Main Element section, it removes the border of the Tabs. Add this to the Active Tab section. Thanks for this post. Hi Colin, I’ve figured out the problem. Thank you so much for this! We’ve made it easy to select the content you want and display it in a beautiful, filterable grid. As Divi doesn’t do this out of the box, I had to look for options, one of them being, Typing Text Effect Using Divi Code Modules, What are Divi Layouts and How to Use Them. Husband, Father, Programmer, WordPress Wizard, Divi Fanatic, Musician, Photographer, Baker, Cook, Christian, and so much more... That’s a clever idea, I like it! The Divi Builder gallery module comes in both grid and slider format and supports large galleries with pagination. And then there are those cookies! Required fields are marked *. Use Cases of Free Divi Bike Repair Layout Pack, Use Cases of Free Divi Pizzeria Layout Pack, Use Cases of Free Divi Astrologist Layout Pack, Use Cases of Free Divi Realtor Layout Pack, Use Cases of Free Divi Acupuncture Layout Pack, 1. I’m having one issue. 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. Add this to the Tabs Controls section. 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. Anyone else having a problem where the galleries in the additional tabs does not load? Hi Rob, thanks for this great tutorial. Hey there! And there you have it, a “filterable” gallery! Thanks!! At this point, I created two galleries, one for the coffee images and one for the tea. I’d reckon that three would be the max unless your button text is very short. You could really use this to “filter” anything that you can put into the Tabs module. Let me know if you still need help. Thanks for the tutorial! Your email address will not be published. This is a post by Rob Hobson written for divi notes blog.He discuss about Using The Divi Tabs Module To Create A Filterable Image Gallery.Here’s an excerpt of the article, In a recent project I was asked to create a filterable image gallery. Actually I’ve found that if i use the ‘justified gallery’ it works fine and I’m happy to stick with this gallery. 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. Before you can add a gallery module to your page, you will first need to jump into the Divi Builder. Just had to thank you so much for this article – I have been searching all day for a free filterable gallery plugin with no good results, and here you have it perfect! Designed by Elegant Themes | Powered by WordPress, In a recent project I was asked to create a filterable image gallery. 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.