Elementor Pro Portfolio Filter Bar Label

Elementor Pro – Portfolio Widget Filter Bar Label

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code icon raw code icon

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

4 thoughts on “Elementor Pro – Portfolio Widget Filter Bar Label”

  1. Avatar

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

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

    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. Avatar
      Sniffle Valve

      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 Comment

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

Scroll to Top