This is a quick instruction on how you can filter anything you want in Elementor.
It shows you how you can create a:
Filterable portfolio with own modules
Filterable video gallery
Filterable gallery
How you can filter every Elementor element.
1. Download the plugin
The first step is to download the Elementor 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 elementorfilter.zip file. Afterwards you go to Installed Plugins and activate it.
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 Elementor.
4. Create a section with buttons
Create a section for the filter buttons.
5. Add classes to button
Open the button settings and add the ef-button class to each button module. You also add efc-CATEGORY for each category you want to filter.
If you don’t add any efc-CATEGORY class, then all elements will be shown.
6. Create another section and add class
Create a new section for the filterable elements and add the ef-area class to it.
7. Create elements 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 efc-CATEGORY class, that you want the element in that column to show up for.
Now everything is set up. If you now click a button e.g. with efc-CATEGORY1 then only columns, with this class will be shown. All others will be hidden.
I hope you find this helpful. If you want to read my review for Elementor click here.
Disclosure: Some of my posts contain ‘affiliate links.’ This means if you click on the link and purchase the item, I will receive an affiliate commission at no extra cost to you.
Subscribe
24 Comments
Most Voted
NewestOldest
Inline Feedbacks
View all comments
Gon
2 years ago
Where add efc-CATEGORY for each category you want to filter in the button? If in the ID Class already appears ef-button
Hey, I used it and it worked fine but suddenly after updating all pages stayed white. So once I deactivated it, everything was back to good. Unfortuntely I have no URL with it at the moment. But might be some combination with a different plugin
Kay Nijhuis
2 years ago
Hi there, I’ve also send you an e-mail. I can’t get the plugin to work. It just doesn’t work. Not manually and also not via the template. See following URL’s where i tried multiple approaches. I’m using the paid version of the Elementor Filter Plugin.
I replied to your e-mail. The error is now fixed 🙂
Simone
2 years ago
Sorry but this is not working on Elementor, I followed your instructions, but the buttons don’t filter. You click on them, nothing happens. Please have a look: https://www.youinabruzzo.com/filtertest/
Can you please send me an e-mail to support(at)danielvoelk.de
Then I will take a look 🙂
Chris Lutke
2 years ago
Hey Daniel, love the tool. Just that I am trying to filter posts by year. The first column is filtered fine. The next ones seem to loose some CSS. Any chance you know why?
Willing to upgrade to Premium, but we’re a bit confused by the Documentation’s terminology of “inner columns” and “rows”.
Elementor gives settings in the following hierarchy: Section -> Column -> Inner Section -> Inner Column
We define this way without success:
Section [ef-area] -> Column [-] -> Inner Section [-] -> Inner Column [efc-CAT1] = results in no show
Section [ef-area ef-inner] -> Column [-] -> Inner Section [-] -> Inner Column [efc-CAT1] = results in no show
Tried various other interpretations without success. Filtering a simple column works.
Unfortunately post types are currently not supported.
Kristian
1 year ago
Hey the Inner Sections Filter doesn’t seem to work. On click on a button it hides everything and then stops working.
Do I get this right:
• seperate Section with buttons (with ef-button and efc-whatever)
• then the section (with ef-area and ef-inner-sections), inside of that is a column with multiple inner sections (that have efc-whatever in it).
Seems straight forward to me, but doesn’t seem to add up.
Yes, sounds correct. Can you send me a link to the website by e-mail? support(at)danielvoelk.de
Then I will take a look 🙂
Benoît
1 year ago
Hey there,
Thanks for developing plugins that help WordPress and Elementor users.
However, this does not work for me,I followed the steps you described and nothing happens :/
Could you help please ?
Thanks
Where add efc-CATEGORY for each category you want to filter in the button? If in the ID Class already appears ef-button
You add it behind the button class: df-button dfc-CATEGORY
Please use classes and not the IDs.
Unfortunately the plugin breaks the Elementor page as the complete page becomes white. Probably has to do with Elementor 3.8.1
My demo also runs with Elementor 3.8.1 and works perfectly: https://elementor.danielvoelk.de/listing-layout/
Can you please send me your URL?
Hey, I used it and it worked fine but suddenly after updating all pages stayed white. So once I deactivated it, everything was back to good. Unfortuntely I have no URL with it at the moment. But might be some combination with a different plugin
Hi there, I’ve also send you an e-mail. I can’t get the plugin to work. It just doesn’t work. Not manually and also not via the template. See following URL’s where i tried multiple approaches. I’m using the paid version of the Elementor Filter Plugin.
URL’s:
https://www.multiwagon.com/conceptenfilter-test/
https://www.multiwagon.com/concepten-concept/
Thanks in advance
I replied to your e-mail. The error is now fixed 🙂
Sorry but this is not working on Elementor, I followed your instructions, but the buttons don’t filter. You click on them, nothing happens. Please have a look: https://www.youinabruzzo.com/filtertest/
Can you please send me an e-mail to support(at)danielvoelk.de
Then I will take a look 🙂
Hey Daniel, love the tool. Just that I am trying to filter posts by year. The first column is filtered fine. The next ones seem to loose some CSS. Any chance you know why?
Can you please try the new version from here: https://danielvoelk.de/en/elementor-filter
This version fixed a few bugs
Willing to upgrade to Premium, but we’re a bit confused by the Documentation’s terminology of “inner columns” and “rows”.
Elementor gives settings in the following hierarchy: Section -> Column -> Inner Section -> Inner Column
We define this way without success:
Section [ef-area] -> Column [-] -> Inner Section [-] -> Inner Column [efc-CAT1] = results in no show
Section [ef-area ef-inner] -> Column [-] -> Inner Section [-] -> Inner Column [efc-CAT1] = results in no show
Tried various other interpretations without success. Filtering a simple column works.
Can you please send me an URL, so I can take a look? 🙂
its very useful plugin can we filter elementor posts widget displaying posts from multiple categories using this plugin?
Unfortunately post types are currently not supported.
Hey the Inner Sections Filter doesn’t seem to work. On click on a button it hides everything and then stops working.
Do I get this right:
• seperate Section with buttons (with ef-button and efc-whatever)
• then the section (with ef-area and ef-inner-sections), inside of that is a column with multiple inner sections (that have efc-whatever in it).
Seems straight forward to me, but doesn’t seem to add up.
Help would be greatly appreciated!
Yes, sounds correct. Can you send me a link to the website by e-mail? support(at)danielvoelk.de
Then I will take a look 🙂
Hey there,
Thanks for developing plugins that help WordPress and Elementor users.
However, this does not work for me,I followed the steps you described and nothing happens :/
Could you help please ?
Thanks
Have you downloaded the newest version from here?
Thanks. It worked perfect!
Does the plugin work with elementors flex box, containers instead of columns?
Yes, it works if you have the Premium version.
You can get it from here: https://shop.danielvoelk.de/product/elementor-filter-lifetime/
Hi your website says filter for containers is coming soon. When will it be ready and do i have to download premium for it to work? https://elemdocs.danielvoelk.de/gettings-started/filter-containers-premium
It’s already working with the Premium version: https://shop.danielvoelk.de/ 🙂