How to filter anything in Divi?

This is a quick instruction on how you can filter anything you want in Divi.

1. Download the plugin

The first step is to download the 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 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 an button e.g. with dfc-CATEGORY1 then only columns, with this class will be shown. All other will be hidden.

More Posts…

Themeforest Alternative

Themeforest Alternative

What is Themeforest? ThemeForest is part of the Envato Market and is a marketplace for UI designs, Web Themes and...

GPL Icons

GPL Icons

This is a collection of GPL compatible icon packs. Licenses that are GPL compatible include: General Public...