Divi Filter

Elementor Filter Lifetime

The Elementor Filter plugin lets you filter every column or row in Elementor. Just by adding a few classes.

49 39

Create beautiful filters!

Catch the attention by adding a beautiful filter like this demo to your website.
Filter columns or rows with CSS grid, like in this example below.

Vanilla

Cone

Vanilla

Stick

Strawberry

Cone

Nut

Cone

Soft ice

Cone

Chocolate

Stick

Strawberry

Cone

Vanilla

Stick

Mixed

Cup

Strawberry

Cone

Mixed

Cup

Strawberry

Cup

Soft ice

Cone

Chocolate

Cone

How it Works

You can create a beautiful filter in 3 steps.
Click here for a more detailed instruction.

1.

Create Layout

Just create a layout with the Divi Builder and all the modules that it contains.

2.

Add Classes

Filter columns or rows by adding the classes as explained here.

3.

Start Filtering

That's all. You can now add optional styling and animations.

Keep your visitors engaged

Improve the user experience, by adding an interactive filter on your page.
Here you can find more examples to get inspired.

Alena Schiller

Search Engines

Mike Tiger

Representative

Nelly Burdon

PPC

Leo Schwarz

Eastern Europe

Kevin Klein

Western Europe

Maria Korte

Advisor

Oliver Korte

Americas

Denisa Ozel

PR Manager

Documentation

Here is a summary of all the CSS classes you have to add. You can find a more detailed documentation here.

Buttons

ef-button

efc-[filter-category] (for each class that you want to filter with that button)

Section

ef-area

Columns / Rows

efc-[filter-category] (add categories to each column/row)