# Introduction ## Getting Started {% embed url="" %} ### 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 %} {% content-ref url="/pages/tI3yBgFR7yTWfHYNymy9" %} [Filter Rows (Premium)](/gettings-started/filter-rows-premium) {% 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 You can get the Divi Filter here: or get the free version [here](https://danielvoelk.de/en/divi-filter/#download). ## How do I upload it to my WordPress Site? Upload it as zip in your WordPress Dashboard. I made a little video explaining that: {% embed url="" %} With a key, you get all the Premium features. You can purchase a key [here](https://shop.danielvoelk.de/#divi-filter). To activate it, go to WordPress Dashboard → Settings → Divi Filter. Here you can add it. You don't need a key for the Divi 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 I created a video where I explain the process: {% embed url="" %} ## Buttons **Step 1:** Click on the grey gear 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. ![](https://tawk.link/603b46ec1c1c2a130d6338d9/kb/attachments/gfAFvPDAu9.png) **Step 2:** Go to Advanced → CSS ID & Classes → CSS Class. Here you add the **df-button** class. **Step 3:** Additionally add any category that you want to filter with that button like that: **`dfc-[your category]`** e.g. `dfc-cats`. {% hint style="info" %} Buttons have to be in a separate section, than your filterable elements. Or you add the **df-buttons** class to your button row (Premium features). {% endhint %} ## Section **Step 1:** Click on blue gear icon to access the Section Settings. ![](https://tawk.link/603b46ec1c1c2a130d6338d9/kb/attachments/bySj6sR2Ub.png) **Step 2:** Go to Advanced → CSS ID & Classes → CSS Class. Here you add the **df-area** class. ## Column **Step 1:** Click on green gear icon to access the Row Settings. ![](https://tawk.link/603b46ec1c1c2a130d6338d9/kb/attachments/GUEO-_ZyYx.png) **Step 2:** In the Row Settings click on the gear icon the access the Column Settings. I have a four column row, so I see four columns in the Row Settings. ![](https://tawk.link/603b46ec1c1c2a130d6338d9/kb/attachments/xGLQqmscxX.png) **Step 3:** 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. **Step 4:** Do that for all Columns you want to make filterable. # Filter Rows (Premium) ## Buttons **Step 1:** Click on the grey gear 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. ![](https://tawk.link/603b46ec1c1c2a130d6338d9/kb/attachments/w-xkO7BNsy.png) **Step 2:** Go to Advanced → CSS ID & Classes → CSS Class. Here you add the **df-button** class. **Step 3:** Additionally add any category that you want to filter with that button like that: **dfc-\[your category]** e.g. dfc-cats. {% hint style="info" %} Buttons have to be in a separate section, than your filterable elements. Or you add the df-buttons class to your button row (Premium features). {% endhint %} ## Section **Step 1:** Click on blue gear icon to access the Section Settings.
![](https://tawk.link/603b46ec1c1c2a130d6338d9/kb/attachments/eDZYRjF19Z.png) **Step 2:** Go to Advanced → CSS ID & Classes → CSS Class. Here you add the **df-area** and **df-rows** class. So you add: df-area df-rows ## Row **Step 1:** Click on green gear icon to access the Row Settings. ![](https://tawk.link/603b46ec1c1c2a130d6338d9/kb/attachments/wXLssA-2oT.png) **Step 2:** 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. **Step 3:** Do that for all rows you want to filter. {% hint style="info" %} You can get Divi Filter Premium by clicking [here](https://shop.danielvoelk.de/#divi-filter). {% endhint %} # Get the Premium features ### Why you should get Premium? With the Premium version, you get a bunch of features that bring your filter to a new level: * [Get Premium layouts](https://demos.danielvoelk.de/divi-filter), that you can easily import * [Filter animations](/styling/filter-animation-premium) * [Row filtering](/gettings-started/filter-rows-premium) * [Style the active button](/styling/style-active-button-premium) * [Filter specialty sections](/functional/filter-specialty-sections-premium) * [Multiple filters on one page](/functional/multiple-filters-on-one-page-premium) * and more ### If you don't have a key Then you can get one here to enjoy all the Premium features: [Get Divi Filter Premium](https://shop.danielvoelk.de/#divi-filter) ### If you have a key Please go to WordPress Dashboard → Settings → Divi Filter and add it there. If you don't see the Divi Filter option in Settings, please download the Divi Filter Plugin from your Account → Downloads or from my [website](https://danielvoelk.de/en/divi-filter). # Remove white space If after filtering, a space appears below your filter area, then it's probably padding or margin. If you filter for example columns, then you shouldn't add the padding or margin to your rows. Only to the columns, because this will automatically be removed.\ \ You can remove it also with that CSS: ### For column filtering: ``` .df-area .et_pb_row { padding: 0 !important; margin: 0 !important; } ``` ### For row filtering ``` .df-area .et_pb_column { padding: 0 !important; margin: 0 !important; } ``` # Filter Animation (Premium) Just define a CSS keyframe animation for the **df-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 ``` .df-animation { animation: OpacityAnimation; animation-duration: 2s; } @keyframes OpacityAnimation { 0% {opacity: 0;} 100% {opacity: 1;} } ``` ### **Makes elements first grey and then gives them color** ``` .df-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 ``` .df-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/). ``` .df-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 Divi Filter Premium by clicking [here](https://shop.danielvoelk.de/#divi-filter). {% endhint %} ## Where to add custom CSS? This you can find on the following page: {% content-ref url="/pages/B9JJMa4W2rpTLvGz2azR" %} [Where to add custom CSS?](/styling/where-to-add-custom-css) {% endcontent-ref %} # Style Active Button (Premium) To style the active button, you can use the **`df-activebutton`** class, that gets automatically added to the active button. For example: This code makes the active button darker ``` .df-activebutton { filter: brightness(50%); } ``` ## Have the "Show all" button styled after page load To have the all button already styled after page load, just add the df-activebutton class to the button. ## This is a Premium feature Make sure to read how to get the Premium features in the following article: {% content-ref url="/pages/fhWV5MTnXoFhDXA5lOwU" %} [Get the Premium features](/gettings-started/get-the-premium-features) {% endcontent-ref %} ## Where to add custom CSS? This you can find on the following article page: {% content-ref url="/pages/B9JJMa4W2rpTLvGz2azR" %} [Where to add custom CSS?](/styling/where-to-add-custom-css) {% endcontent-ref %} # Where to add custom CSS? Every Divi page has a custom CSS section in the settings. 1. Open a page with the Divi Builder 2. Go to Advanced settings as shown in the image below 3. Add CSS ![](/files/rrukvoll3Mx6NBvF4FQ5) ## CSS not working? Try adding !important behind it. ``` .df-activebutton { filter: brightness(50%) !important; } ``` # Import Layouts Please import all layouts as page layouts: 1. Create a new page with Divi 2. Enable the Visual Builder 3. Click on "Portability" (the two arrow icon) 4. Go to the "Import" tab 5. Drag or select JSON file ([first unzip the .zip file](https://support.microsoft.com/en-us/windows/zip-and-unzip-files-f6dde0a7-0fec-8294-e1d3-703ed85e7ebc#:~:text=Open%20File%20Explorer%20and%20find,folder%20to%20a%20new%20location.)) 6. Check "Import Presets" 7. Click "Import Divi Builder Layout" ## Video Instruction {% embed url="" %} ## Error while importing? If it doesn't fully import, please make sure that you disabled all security plugins like Wordfence etc. If you don't use Wordfence, or it still doesn't work, please activate the Divi safe mode. {% embed url="" %} # Show all elements If you want to create a button, that shows everything again, then you just create a button with only the `df-button` class without a category class, and it will automatically show all elements. # Filter blog posts or portfolio items You can filter blog posts in the Divi blog module easily with the Divi Filter. ## Buttons **Step 1:** Click on the grey gear 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. ![](https://tawk.link/603b46ec1c1c2a130d6338d9/kb/attachments/gfAFvPDAu9.png) **Step 2:** Go to Advanced → CSS ID & Classes → CSS Class. Here you add the **df-button** class. **Step 3:** Additionally add any category that you want to filter with that button like that: **dfc-\[blog-post-category]** The category is the category of the blog post. For example: The category "Lifestyle" would be **dfc-lifestyle**. Everything in lower cases. ![Screenshot from WordPress Dashboard in Posts](/files/qa8wHmH8G2NwZAKNr7Bf) {% hint style="info" %} Buttons have to be in a separate section, than your filterable elements. Or you add the **df-buttons** class to your button row (Premium features). {% endhint %} ## Section **Step 1:** Click on blue gear icon to access the Section Settings. ![](https://tawk.link/603b46ec1c1c2a130d6338d9/kb/attachments/bySj6sR2Ub.png) **Step 2:** Go to Advanced → CSS ID & Classes → CSS Class. Here you add the **df-area df-post** class. ## Portfolio items (Premium) If you want to filter portfolio items, you just have to change the blog module from posts to portfolio items. Filtering portfolio items requires a Premium license. {% hint style="info" %} You can get Divi Filter Premium by clicking [here](https://shop.danielvoelk.de/#divi-filter). {% endhint %} ## Pagination Unfortunately, pagination is not yet supported, so please set the Post Count to the max. You can also set it to 999. ## Video tutorial {% embed url="" %} ## Demo Here you can find a demo: # Multiple filters on one page (Premium) Add `dfn-[number]` to your `df-area` and to the rows containing your filter buttons. By doing this, you match the filter buttons and the filter areas together. ### Example * section * rows (dfn-1) * buttons * df-area (dfn-1) * filterable elements * section * rows (dfn-2) * buttons * df-area (dfn-2) * filterable elements Now when you click on the first button it filters the element of the first section. {% hint style="info" %} You can get Divi Filter Premium by clicking [here](https://shop.danielvoelk.de/#divi-filter). {% endhint %} # Unfiltered element (Premium) If you want a row or column in a `df-area` section to be ignored from filtering, then add the `df-buttons` class to it. If you then filter, this column/row will stay in place and everything else is filtered. # Reset filter button (Premium) ## Coming Soon... Create a button with the `df-reset` class. As soon as you press that button, the filtering will be removed. # Filter already applied (Premium) ### By Starting Class If you want to have your elements already filtered, after the page load you add a **`dfc-[your category]`** class to the `df-area` **section**.There must be a button with the same `dfc- class`.So if you want to start the filtering with `dfc-cats`. You have to have a button with a `dfc-cats` class. ### By URL You can also determine what filter is applied with the URL. For example: You have to just add `?filter=CATEGORY` and the category without `dfc-` {% hint style="info" %} You can get Divi Filter Premium by clicking [here](https://shop.danielvoelk.de/#divi-filter). {% endhint %} ### Error? {% content-ref url="/pages/e7KMTqVXix9PK56K3zFg" %} [Bugs? Use the Starting Delay](/functional/bugs-use-the-starting-delay) {% endcontent-ref %} Keywords to easy find it: pre filter, starting, page load # Bugs? Use the Starting Delay If you are using 3rd party modules, then sometimes you need to add a small delay. Just add the **df-startingdelay** class to your **df-area** section and it should work. # Fixed class When the filtering is activated in Divi 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 **`dfs-[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. # Filter Specialty Sections (Premium) You can filter columns and rows of specialty sections easily with the Divi Filter. ## Buttons **Step 1:** Click on the grey gear 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. ![](https://tawk.link/603b46ec1c1c2a130d6338d9/kb/attachments/gfAFvPDAu9.png) **Step 2:** Go to Advanced → CSS ID & Classes → CSS Class. Here you add the **df-button** class. **Step 3:** Additionally add any category that you want to filter with that button like that: **`dfc-[your category]`** e.g. `dfc-cats`. For example: The category "Lifestyle" would be **dfc-lifestyle**. Everything in lower cases. ## Section **Step 1:** Click on blue gear icon to access the Section Settings. ![](https://tawk.link/603b46ec1c1c2a130d6338d9/kb/attachments/bySj6sR2Ub.png) **Step 2:** Go to Advanced → CSS ID & Classes → CSS Class. Here you add the 2 classes **df-area df-rows**. ## Row **Step 1:** Click on green gear icon to access the Row Settings. ![](https://tawk.link/603b46ec1c1c2a130d6338d9/kb/attachments/wXLssA-2oT.png) **Step 2:** 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. **Step 3:** Do that for all rows you want to filter. {% hint style="info" %} You can get Divi Filter Premium by clicking [here](https://shop.danielvoelk.de/#divi-filter). {% endhint %} ## Demo Here you can find a demo: # 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. ### Example We have a button with the classes: df-button dfc-cats dfc-blue #### Without Picky Filtering Without Picky Filtering, it would show all elements, that have either the cats OR the blue class. That means, also blue dogs would show. #### With Picky Filtering With Picky Filtering it shows only blue cats. Only elements that have the cats AND the blue class. After adding the **`df-picky`** class to your `df-area` section, only elements that have both classes will show after filtering. {% hint style="info" %} You can get Divi Filter Premium by clicking [here](https://shop.danielvoelk.de/#divi-filter). {% 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. ### Example That means you can have multiple buttons: * df-button dfc-cats * df-button dfc-dogs * df-button dfc-lions If you now click on the cats button, only the cats show. If you afterwards click on the dogs button, you see cats and dogs. Both buttons are active. To remove the cats, click on the cats button again. To use the multi select filtering feature, add the **`df-multi`** class to your `df-area` section. {% hint style="info" %} You can get Divi Filter Premium by clicking [here](https://shop.danielvoelk.de/#divi-filter). {% endhint %}