# Introduction

## Getting Started

### Guides: Jump right in

Follow our handy guides to get started on the basics as quickly as possible:

{% content-ref url="/pages/SjLSeuP86qHPcyCnhvNK" %}
[Download + Installation](/gettings-started/download-+-installation)
{% endcontent-ref %}

{% content-ref url="/pages/h9punFRNlv3pGdqO9FWc" %}
[Filter Columns](/gettings-started/filter-columns)
{% endcontent-ref %}

### Fundamentals: Dive a little deeper

{% content-ref url="/pages/njkEOiEwCLaaorm6aXi8" %}
[Filter already applied (Premium)](/functional/filter-already-applied-premium)
{% endcontent-ref %}

{% content-ref url="/pages/MuygL8mYNziJVaL9pZV5" %}
[Show all elements](/functional/show-all-elements)
{% endcontent-ref %}

{% content-ref url="/pages/4FvaMBVLGCP6Piwh23ip" %}
[Multiple filters on one page (Premium)](/functional/multiple-filters-on-one-page-premium)
{% endcontent-ref %}

{% content-ref url="/pages/Etfo5FvEo3GisbVkywIm" %}
[Fixed class](/functional/fixed-class)
{% endcontent-ref %}


# Download + Installation

{% embed url="<https://youtu.be/u8As9c0uIdg>" %}

You can get the Elementor Filter here: <https://shop.danielvoelk.de/product/elementor-filter-lifetime/> or get the free version [here](https://danielvoelk.de/en/elementor-filter/).

{% embed url="<https://shop.danielvoelk.de/product/elementor-filter-lifetime/>" %}

## How do I upload it to my WordPress Site?

Upload it as zip in your WordPress Dashboard.

With a key, you get all the Premium features. You can purchase a key [here](https://shop.danielvoelk.de/product/elementor-filter-lifetime/).

To activate it, go to WordPress Dashboard → Settings → Elementor Filter. Here you can add it.

You don't need a key for the Elementor Filtering to work, but it's recommended because then you receive all the Premium features like:

* Filtering Rows
* Filter Animations
* Style Active Button
* Start already Filtered
* and more ...


# Filter Columns

## Video

{% embed url="<https://youtu.be/u8As9c0uIdg>" %}

## Buttons

**Step 1:**

Click on the pencil icon to access the Button Settings (on the button, that you want to filter with). You can also use images, or any other element to trigger the filtering. It doesn’t have to be a button module.

![](/files/XQcrBMYuRSM9H79jnyVv)

**Step 2:**

Go to Advanced → CSS Class. Here you add the `ef-button` class.

\
**Step 3:**

Additionally, add any category that you want to filter with that button like that: **efc-\[your category]** e.g. `efc-cats`.

\
Buttons have to be in a separate section, than your filterable elements. Or you add the **ef-buttons** class to your button row (Premium features).

## Section

**Step 1:**

Click on blue icon to access the Section Settings.

![](/files/onlGdjLvMLGbIPGN5sFb)

**Step 2:**

Go to Advanced → CSS Class. Here you add the `ef-area` class.

## Column

**Step 1:**

Click on edit column icon to access the column settings.

![](/files/44QnPM8MF83dzLoCtKjx)

**Step 2:**

Go to Advanced → CSS Class.

Here you add all the efc-\[your category] class you want e.g. your efc-cats class.

**Step 3:**

Do that for all Columns you want to make filterable.


# Filter Elements

## Buttons

**Step 1:**

Click on the pencil icon to access the Button Settings (on the button, that you want to filter with). You can also use images, or any other element to trigger the filtering. It doesn’t have to be a button module.

![](/files/XQcrBMYuRSM9H79jnyVv)

**Step 2:**

Go to Advanced → CSS Class. Here you add the `ef-button` class.

\
**Step 3:**

Additionally, add any category that you want to filter with that button like that: **efc-\[your category]** e.g. `efc-cats`.

\
Buttons have to be in a separate section, than your filterable elements. Or you add the **ef-buttons** class to your button row (Premium features).

## Section

**Step 1:**

Click on blue icon to access the Section Settings.

![](/files/onlGdjLvMLGbIPGN5sFb)

**Step 2:**

Go to Advanced → CSS Class. Here you add the **ef-area** and the **ef-elements** class.

## Elements

**Step 1:**

Click on the edit element icon to access the element settings.

![](/files/pwalXqgqEqrwV8KHEMHl)

**Step 2:**

Go to Advanced → CSS Class.

Here you add all the **efc-\[your category]** class you want, e.g. your efc-cats class.

**Step 3:**

Do that for all elements you want to make filterable.


# Filter Inner Columns (Premium)

## Buttons

**Step 1:**

Click on the pencil icon to access the Button Settings (on the button, that you want to filter with). You can also use images, or any other element to trigger the filtering. It doesn’t have to be a button module.

![](/files/XQcrBMYuRSM9H79jnyVv)

**Step 2:**

Go to Advanced → CSS Class. Here you add the `ef-button` class.

\
**Step 3:**

Additionally, add any category that you want to filter with that button like that: **efc-\[your category]** e.g. `efc-cats`.

\
Buttons have to be in a separate section, than your filterable elements. Or you add the **ef-buttons** class to your button row (Premium features).

## Section

**Step 1:**

Click on blue icon to access the Section Settings.

![](/files/onlGdjLvMLGbIPGN5sFb)

**Step 2:**

Go to Advanced → CSS Class. Here you add the **ef-area** and the **ef-inner-column** class.

## Inner Columns

**Step 1:**

Click on the edit inner column icon to access the settings.

**Step 2:**

Go to Advanced → CSS Class.

Here you add all the **efc-\[your category]** class you want, e.g. your efc-cats class.

**Step 3:**

Do that for all inner columns you want to make filterable.

You can get Divi Filter Premium by clicking [here](https://shop.danielvoelk.de/#divi-filter).

{% hint style="info" %}
You can get Elementor Filter Premium by clicking [here](https://shop.danielvoelk.de/#elementor-filter).
{% endhint %}


# Filter Inner Sections (Premium)

## Buttons

**Step 1:**

Click on the pencil icon to access the Button Settings (on the button, that you want to filter with). You can also use images, or any other element to trigger the filtering. It doesn’t have to be a button module.

![](/files/XQcrBMYuRSM9H79jnyVv)

**Step 2:**

Go to Advanced → CSS Class. Here you add the `ef-button` class.

\
**Step 3:**

Additionally, add any category that you want to filter with that button like that: **efc-\[your category]** e.g. `efc-cats`.

\
Buttons have to be in a separate section, than your filterable elements. Or you add the **ef-buttons** class to your button row (Premium features).

## Section

**Step 1:**

Click on blue icon to access the Section Settings.

![](/files/onlGdjLvMLGbIPGN5sFb)

**Step 2:**

Go to Advanced → CSS Class. Here you add the **ef-area** and the **ef-inner-section** class.

## Inner Sections

**Step 1:**

Click on the edit inner sections icon to access the settings.

**Step 2:**

Go to Advanced → CSS Class.

Here you add all the **efc-\[your category]** class you want, e.g. your efc-cats class.

**Step 3:**

Do that for all inner sections you want to make filterable.

{% hint style="info" %}
You can get Elementor Filter Premium by clicking [here](https://shop.danielvoelk.de/#elementor-filter).
{% endhint %}


# Filter Containers (Premium)

## Buttons

**Step 1:**

Click on the pencil icon to access the Button Settings (on the button, that you want to filter with). You can also use images, or any other element to trigger the filtering. It doesn’t have to be a button module.

![](/files/XQcrBMYuRSM9H79jnyVv)

**Step 2:**

Go to Advanced → CSS Class. Here you add the `ef-button` class.

\
**Step 3:**

Additionally, add any category that you want to filter with that button like that: **efc-\[your category]** e.g. `efc-cats`.

\
Buttons have to be in a separate section, then your filterable elements. Or you add the **ef-buttons** class to your button row (Premium features).

## Section

**Step 1:**

Click on blue icon to access the Section Settings.

![](/files/onlGdjLvMLGbIPGN5sFb)

**Step 2:**

Go to Advanced → CSS Class. Here you add the `ef-area` class.

## Containers

**Step 1:**

Click on edit container icon to access the container settings.

**Step 2:**

Go to Advanced → CSS Class.

Here you add all the efc-\[your category] class you want e.g. your efc-cats class.

**Step 3:**

Do that for all containers you want to make filterable.

{% hint style="info" %}
You can get Elementor Filter Premium by clicking [here](https://shop.danielvoelk.de/#elementor-filter).
{% endhint %}


# Get the Premium features

### If you have a key

Please go to WordPress Dashboard → Settings → Elementor Filter and add it there.

If you don't see the Elementor Filter option in Settings, please download the Elementor Filter Plugin from your Account → Downloads or from my [website](https://danielvoelk.de/en/elementor-filter).&#x20;

### If you don't have a key

Then you can get one here to enjoy all the Premium features: [Get Elementor Filter Premium](https://shop.danielvoelk.de/product/elementor-filter-lifetime/)


# Filter Animation (Premium)

Just define a CSS keyframe animation for the **ef-animation** class. You can animate any CSS property.

You can watch [this tutorial](https://youtu.be/Ytz7p4Kedws?t=222) to find out, how to add CSS to divi.

## Examples

### Changes opacity from 0 to 1

```
.ef-animation {
     animation: OpacityAnimation; 
     animation-duration: 2s;
}
@keyframes OpacityAnimation {
     0% {opacity: 0;}
     100% {opacity: 1;}
}
```

### **Makes elements first grey and then gives them color**

```
.ef-animation {
     animation: GreyscaleAnimation; 
     animation-duration: 2s;
}
@keyframes GreyscaleAnimation {
     0% {
          -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
     }
     100% {
          -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
     }
}

```

### Combine Animations

You can also combine them, or add as many CSS as you want. E.g. scales the elements from 0 to 100% and also increases the opacity

```
.ef-animation {
    animation: ScaleOpacityAnimation; 
    animation-duration: 2s;
}

@keyframes ScaleOpacityAnimation {
    0% {transform: scale(0);opacity: 0;}
    100% {transform: scale(1);opacity: 1;}
}
```

### Appear animation

This is the nice appear animation that my friend Richard used, when he designed the [team filter](https://demos.danielvoelk.de/team-section/).

```
.ef-animation { 
    animation: animation-example; 
    animation-duration: 2s; 
    animation-delay: 0s!important;
}
@keyframes animation-example {
    0% {opacity: 0; transform: translatey(50px);}
    100% {opacity: 1; transform: translatey(0);}
}
```

For more information on keyframe animations, visit [w3schools](https://www.w3schools.com/css/css3_animations.asp).

{% hint style="info" %}
You can get Elementor Filter Premium by clicking [here](https://shop.danielvoelk.de/product/elementor-filter-lifetime/).
{% endhint %}


# Style Active Button (Premium)

To style the active button, you can use the **`ef-activebutton`** class, that gets automatically added to the active button.

### Examples

Make button darker

```
.ef-activebutton {
    filter: brightness(50%);
}
```

Change color

```
.ef-activebutton .elementor-button {
    color: red !important;
}
```


# Unfiltered element (Premium)

Unfiltered element (Premium)If you want a row or column in a `ef-area` section to be ignored from filtering, then add the `ef-buttons` class to it.If you then filter, this column/row will stay in place and everything else is filtered.


# Filter already applied (Premium)

## By Starting Class

If you want to have your elements already filtered, after the page load you add a **`efc-[your category]`** class to the `ef-area` **section**.

There must be a button with the same `efc-` class.

So if you want to start the filtering with `efc-cats`. You have to have a button with a `efc-cats` class.

## By URL

You can also determine what filter is applied with the URL. For example:

<https://demos.danielvoelk.de/ice-cream/?filter=stick>

<https://demos.danielvoelk.de/ice-cream/?filter=cone>

You have to just add `?filter=CATEGORY` and the category without `efc-`

{% hint style="info" %}
You can get Elementor Filter Premium by clicking [here](https://shop.danielvoelk.de/product/elementor-filter-lifetime/).
{% endhint %}


# Show all elements

If you want to create a button, that shows everything again, then you just create a button with only the `ef-button` class without a category class, and it will automatically show all elements.


# Multiple filters on one page (Premium)

Add `efn-[number]` to your `ef-area` and to the rows containing your filter buttons.

By doing this, you match the filter buttons and the filter areas together.

{% hint style="info" %}
You can get Elementor Filter Premium by clicking [here](https://shop.danielvoelk.de/product/elementor-filter-lifetime/).
{% endhint %}


# Fixed class

When the filtering is activated in Elementor Filter all classes applied to your rows or columns are removed and moved with the element.

If you would like certain classes to stay, then you can use the prefix **`efs-[classname]`**.

This is useful, for example, if you are building asymmetrical grid layouts, and you need to preserve the look of your grid when you filter.


# Picky Filtering (Premium)

When you normally filter e.g. two classes, the result will be all elements that contain one or both of these classes.

After adding the **`ef-picky`** class to your `ef-area` section, only elements that have both classes will show after filtering.

{% hint style="info" %}
You can get Elementor Filter Premium by clicking [here](https://shop.danielvoelk.de/product/elementor-filter-lifetime/).
{% endhint %}


# Multi select filtering (Premium)

Multi select filtering is when you have multiple filter buttons active at the same time.

In the free version, you only have one filter button active at a time. But with the premium version, it’s possible to have multiple buttons active. The filter categories of the buttons are then added together.

To use the multi select filtering feature, add the `ef-multi` class to your `ef-area` section.

{% hint style="info" %}
You can get Elementor Filter Premium by clicking [here](https://shop.danielvoelk.de/product/elementor-filter-lifetime/).
{% endhint %}


# Import Templates

Here you find how to import the templates:

<https://elementor.com/help/template-library/>