Filter for Divi

Àpèjúwe

DEMOS

You can find more demos here.

FEATURES

• Filter unlimited columns

• Add multiple filter categories to each column (if desired)

• Filter blog posts

• [PREMIUM] Filter unlimited rows

• [PREMIUM] Style active filter button

• [PREMIUM] Start filtered, right after page loads.

• [PREMIUM] Add animations to your filtering

• [PREMIUM] Have multiple filters on one page

• [PREMIUM] Multi select filtering (explained in Documentation)

• [PREMIUM] And more (see in (Documentation)

Get the premium version

SETUP

Buttons:

• Click on the grey gear icon to access the Button Settings (on the button, that you want to filter with).
• Go to Advanced -> CSS ID & Classes -> CSS Class. Here you add the df-button class.
• Additionally add any category that you want to filter with that button like that: dfc-[your category] e.g. dfc-cats.
• Important: Buttons have to be in a seperate section, than your filterable elements.

Section:

• Click on blue gear icon to access the Section Settings.
• Go to Advanced -> CSS ID & Classes -> CSS Class. Here you add the df-area class.

Columns:

• Click on green gear icon to access the Row Settings.
• In the Row Settings click on the gear icon the access the Column Settings.
• Go to Advanced -> CSS ID & Classes -> CSS Class.
• Here you add all the dfc-[your category] class you want e.g. your dfc-cats class.
• Do that for all Columns you want to make filterable.

A more detailed documentation

Official Product Page