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

2 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

Leave a Comment

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