Currently the Elementor Pro Portfolio Widget does not have a label option for the Filter Bar. This tutorial shows you how to create one. It also show how to add a hover effect for the filter bar items.
#my-port .elementor-portfolio__filters::before {
content: "CLICK A CATEGORY TO SELECT THOSE POSTS \2192";
background-color: #0080c0;
color: #ffffff;
padding-top: 17px;
padding-right: 10px;
padding-left: 10px;
margin-right: 10px;
}
#my-port .elementor-portfolio__filters {
display: flex;
justify-content: left;
}
#my-port .elementor-portfolio__filters li:hover {
color: #f2b230;
}
@media (max-width: 768px) {
#my-port .elementor-portfolio__filters::before {
content: "CLICK A CATEGORY TO SELECT THOSE POSTS \2193";
padding-bottom: 10px;
}
}
Hi Lyle,
Thanks for your valuable tutorial. Do you have an idea to customize the ALL button too? My website is in another language and thus I’d like to change that button to another language…
Hi Don,
You’re welcome! 🙂
As mentioned in my reply on the video, you can use the Loco Translate plugin for that 🙂
Cheers!
Lyle
Hello Lyle,
great tutorial, thanks. I have a question regarding the filterbar: Do you know if it is possible to select a category I wish to display first (and not “All” items)? Or do you might know how to archive this?
Thank you very much!
Nicole
Hi Nicole,
You’re welcome!
Unfortunately, this is not yet an option with the filter bar. This has been requested with Elementor but as yet, has not been implemented. Hopefully soon 🙂
Cheers!
Lyle
so grateful to have found your video. I am looking to add a filter icon in place of the text. Any update to the code you could suggest? I’m happy to pay for your time. Thanks
Hi Sharon,
Thanks for the comment. I will take a look to see if there is a way to do what you ask. If it is just an icon (graphic) it should be doable. I will post back on this tut if I find out a way.
Cheers!
Lyle