This is a quick instruction on how you can filter anything you want in Divi.
It shows you how you can create a:
- Filterable portfolio with own modules
- Filterable video gallery
- Filterable gallery
- How you can filter every Divi module.
Video Tutorial
1. Download the plugin
The first step is to download the free Divi Filter plugin here: Download
2. Upload and activate the plugin
In your WordPress dashboard, you click on Plugins → Add New → Upload Plugin and choose the divifilter.zip file. Afterwards you go to Installed Plugins and activate it.
3. Create or open a page with the Divi Builder
If you already have a page, with a layout that you want to filter you can open that. Otherwise, create a new page and open it with the Divi Builder.
Create a section for the filter buttons.
Open the button settings and add the df-button class to each button module. You also add dfc-CATEGORY for each category you want to filter.
If you don’t add any dfc-CATEGORY class, then all elements will be shown.
6. Create another section and add class
Create a new section for the filterable elements and add the df-area class to it.
7. Create modules you want to filter
Create rows and add your modules you want to filter into the columns.
Only the columns will be filtered, so make sure to add one filter element into one column.
8. Add classes to columns
Open the row settings and then click on the gear icon to access the column settings.
Here you add the dfc-CATEGORY class, that you want the element in that column to show up for.
Now everything is set up. If you now click a button e.g. with dfc-CATEGORY1 then only columns, with this class will be shown. All others will be hidden.
Cool Daniel, very simple.
I’m making my filterable gallery images and I came cross navigation between images with lightbox opened. How can I navigate from one image or category into another?
Hi Alexandre, thanks for your feedback. Unfortunately, this is not possible with single image modules. It would be possible if you filter gallery modules though. Then you can switch between images. 🙂
Thanks Daniel. Another question: how can I change active mode style of df-button?
For that, you just define a styling for the df-activebutton.
Here is the full documentation: https://docs.danielvoelk.de/styling/style-active-button-premium
You need the Premium license for that functionality to work.
Hello Daniel, Is it possible to arrange all the elements horizontally – next to each other? Buttons next to filter results? The solution you propose is quite interesting, but even with the premium version I cannot arrange the selection buttons next to the results. And I need it very much. On the left, a selection – on the right, the result. Not like now, choice at the top, the result at the bottom. Could you give me a hint?
Yes, you can use the specialty section for that and filter it with the Divi Filter. 🙂
I made a quick demo: https://demos.danielvoelk.de/specialty/
Thank you! I’m starting tests!
Everything works just like you wrote Daniel. Thank you. I would be grateful if you could tell me how to make an orange module for the buttons and the 4 columns on the right for the results in special circuits?
Just use that one and add a row with 4 columns. Is that what you mean?