01. February 2024

How to filter anything in Divi for free?

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.

Upload and activate Divi Filter Plugin

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.

4. Create a section with buttons

Create a section for the filter buttons.

divi filter buttons

5. Add classes to button

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.

button classes divi filter

6. Create another section and add class

Create a new section for the filterable elements and add the df-area class to it.

section settings divi filter

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.

Disclosure: Some of my posts contain ‘affiliate links.’ This means if you click on the link and purchase the item, I will receive an affiliate commission at no extra cost to you.

Subscribe
Notify of
guest
52 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
fontic
fontic
1 year ago

Good morning Daniel. First thank you for your plugin is awesome. I have a question and I would like it if you could help me. I want my home page to look like this, with category buttons and below them. Do I have to build anyway with the theme builder or can I do it directly from the created page. I don’t know if I explained myself well enough. I repeat, thank you very much

Alexandre
Alexandre
1 year ago

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?

Alexandre
Alexandre
1 year ago
Reply to  Daniel

Thanks Daniel. Another question: how can I change active mode style of df-button?

Johny
Johny
1 year ago

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?

Johny
Johny
1 year ago
Reply to  Daniel

Thank you! I’m starting tests!

Johny
Johny
1 year ago
Reply to  Daniel

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?

columns.png
Sara
Sara
1 year ago

Hi Daniel,

Is it possible to have 8+ categories (filterbuttons) with a row with 3 columns (like the design in your youtube tutorial)?

Nikita
Nikita
1 year ago

Hi Daniel,

Is it possible to use the premium as a sorting method instead of filters, and have it as drop downs like the listing layout example?

Nikita
Nikita
1 year ago
Reply to  Daniel

Do you have any recommendation on how I can sort my filtered columns, I need price max – min and min – max. Any reccomendation on how to do this?

Monika
Monika
1 year ago

Thank you for your plugin,. It seems to be a very good solution for me however I have additional question. Is it possible to set up an activ button? I mean when you click on button “category 1” this button for example changed color?

Monika
Monika
1 year ago
Reply to  Daniel

Thank you for your answer. In premium version I see” multiple filter” What limit is in free version ? And limit is on the number of filter cathegory? And What does it mean option „different modes”?

Monika
Monika
1 year ago
Reply to  Daniel

ok, I understand. I have the last question. Is it possible to get pagination buttons when you have many columns to filter?

Monika
Monika
1 year ago

Is it possible in premium version to set up a text module which will appear only in specific category( without „all”)? For example, I have category „all animals” „cat” and „dogs” and I would like to have a text „lorem ipsum” when you click on the „cat button” however when i click „all” this txt shoul disappear .
P.S. Could you also answer the question above about pagination buttons ?

Monika
Monika
1 year ago
Reply to  Daniel

Thank you for your reply David:) However, when I make a class, and then assign that class to everything except the text. The text has default settings and it shows in “all” (df-button). I would like to get this text only in specyfic category (not when I click the “all”)

Monika
Monika
1 year ago
Reply to  Daniel

ok, thank you ! I will try

Monika
Monika
1 year ago

Sorry for my many question.. I would like to ask about one more thing. I read in documentation that I can set up URL like this https://demos.danielvoelk.de/ice-cream/?filter=stick However, is it possible to create custom URL? Or only in that one way?

marcial
marcial
1 year ago
Reply to  Daniel

Thanks for the incredibly fast response. Excuse my ignorance since i’m not a developer/programmer, to which elements should I add the classes? lets say i have a blog which i’m already filtering by categories, how could i filter it by date too?

marcial
marcial
1 year ago
Reply to  marcial

hello! any idea? thanks in advance

Pierre
Pierre
1 year ago

The df-activebutton doesn’t work : I install the Pro version on my website – but the “df-activebutton” dont appears when I click on one button (I can see this when I inspect the element – when I do the same check on your exemple with the Icecream I can see that class on the selected button). Is there something else to add to make it working ?

Sarah
Sarah
1 year ago

Hello! Thank you for the plugin, it is really helpful. I would like to know if it is possible to make a dropdown filter instead of buttons?

Sarah
Sarah
1 year ago
Reply to  Daniel

Thank you very much! I have to buy the Premium version and then the listing layout (https://demos.danielvoelk.de/listing-layout/)? Or is there a documentation about how to implement it ?

Declan
Declan
1 month ago
Reply to  Daniel

Hi, I’m trying to implement the same with a dropdown filter. I have my layout as I like it already so dont want to import your layout. I cant see any documentation about how to enable dropdowns?

Gerald
Gerald
1 year ago

Hi, is it possible to filter items, like many div’s, inside a custom code module?

Mary
Mary
10 months ago

Hello Daniel, thank you for this plugin! I like the simple and straightforward approach. I would like to know if it is possible to display no content instead of everything when you first access a page and have to click a button to reveal the filtered content (I’m using the free version).

Erika
Erika
9 months ago

Hi Daniel! I’m trying to add filtering to a specialty section with the buttons on the left and the filtered columns on the right, but the filters aren’t functioning. I have added CSS Classes to all buttons and added the df-area class to the column 2 CSS class in the specialty section. Is this a feature of the premium plugin, or do I need to add the filtering class elsewhere?

Thanks in advance!

Jose
Jose
9 months ago

Hello, is it possible to use this with custom post types? I’m using ACF and my CPT has its own categories not located within the regular “posts”. Is it possible to be able to filter by their custom taxonomies? I tried with the regular blog module, but I think it’s looking for categories from the regular posts. The current blog module doesn’t allow me to add categories when I’m using a CPT. Would I be able to use this in conjunction with a custom blog module? I’m not sure what to do. Thanks!

Last edited 9 months ago by Jose
Melody
Melody
2 months ago

I have multiple rows for different posts, how do you hide the other rows and just show the All one when you do a hard refresh on the page?

Si Lo
Si Lo
1 month ago

My posts show up in date-order when the page loads, but then when I filter them using Divi Filter, they show out of date order. Is there anyway to make them appear in date order? Thanks!

Pin It on Pinterest