Elementor Pro Portfolio Filter Bar Label

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;
  }
}

Similar Posts

4 Comments

  1. 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…

    1. Hi Don,
      You’re welcome! 🙂
      As mentioned in my reply on the video, you can use the Loco Translate plugin for that 🙂
      Cheers!
      Lyle

  2. 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

    1. 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

Leave a Reply

Your email address will not be published. Required fields are marked *