Filterable Image Gallery

Filterable Gallery is one of the best widgets of Master Addons. If you are operating a portfolio site then you can showcase your works with lots of information using the Filterable Gallery. But for that, you need to learn how to add and customize Filterable Gallery to your WordPress site.

Keep reading this article and you’re going to learn everything in detail about Elementor Filterable Gallery.

Add Elementor Filterable Gallery

Go to your WordPress dashboard and create a new page/post. Switch to elementor editor and from the Master Addons element library, search for Filterable Gallery. Or you can write “Filterable Gallery” in the search box and it will appear.

Now drag the element and drop it to the “Add New Section” area. The Filterable Gallery has now been added. So, now, It’s time to organize it.

Elementor Filterable Gallery Element

Add Images inside your Gallery

First of all, select how many images you are going to add. By default, there are 3 gallery contents available. If you want to add more photos then click the “Add Item” button. Again if you want to remove items then click the “x” icon on each gallery content.

Now you have to click on the gallery contents and then click the + button to add an image. Now add an image or choose an image from the media library. Add an altered text and click Create a New Gallery. Now click the Insert Gallery button. The first image is added.

Add Images In your Filterable Gallery

Add Title, Filter, Subtitle, and Ribbon

Now first create the filter label. It means under which category the image stands. Now set a title and subtitle for the image.

The next thing is the Ribbon button. If you want to add any additional info then turn on the ribbon. Now another option appears. Here select the type of it such as New, popular, free, sale, discount, etc. Among them, if you choose the discount option there you’ll get another option. You can edit the discount percentage such as 40%/20%.

There is another additional option for the external link. If you want to add any click there and add the external link button, name, and the URL.

Following the same process, add other images one by one, and set their caption, ribbon, and category.

Title subtitle ribbon and popup

Set Image Size and Column

There you can select the size among 9 options including medium, full, thumbnail, etc. Keep it default or choose any of the sizes. And then select the number of columns. By default, it remains 3. If you are displaying lots of images then change it to 4/5. Again, if you want to showcase the images more with a larger size then change it to 1/2.

Set Image Size and Column for Gallery

Customize the Setting

In the settings options, there are no remarkable options to bring additional changes. By default, the galley shows the Filter Nav. If you can, you can hide it by changing the Filter Nav option to NO.

Now select the gutter. It is the distance between the border of the 2 images. Now there are a few more options, Mansory, hover scale, tilt effect, etc. I am keeping it by default.

Customize settings for Filterable Gallery

Set the Overlay Setting

You must learn about the overlay setting options to dispute your images perfectly. Here learn about the options.

  • If you want to show title then turn in the Show Title option.
  • Do the same for the subtitles and category.
  • if you need to show the Hover icon then click Yes. Now set an icon from the icon library or upload any icon manually by clicking Upload SVG.
  • Next select the overlay types and turn on it off caption.
Overlay Settings for Filterable Gallery

Set up the Style

There are 5 menus to customize in the style. Let’s get an idea of how to customize them.

Filter Style

If you are displaying the Filter Nav then make them a bit stylish.

  • First set the alignment to left, center, or bottom.
  • Now turn on the border-bottom if you want.
  • Set the padding and margin.
  • Now select the typography. Here you can select the font, size, transform, style, decoration, and others. There are huge options to set. Try different options and choose any suitable one.
  • Next add the text color and background color.
  • Finally select a border type and set the other border options such as width, radius, colors, and box-shadow.
Filterable Gallery Filter Style

Item Style

Arrange your Item Padding, Margin, Border and Border radius from this item style option.

Filterable Gallery Item Style

Image Style

Here some options are different from the previous 2 types. Let’s explore.

  • First you can select the hover overlay color.
  • Next choose the title color and typography of the title. Just like I explained the typography style for filler settings, the caption typography options are the same. Set the subtitle setting in the same way.
  • Now choose the icon style by setting the size and color.
Filterable Gallery Image Style

Overlay Setting

There are also a good number of setting options for overlay.

  • First choose the background type. Here if you want to set an image first. After that, you’ll find a few more options. From there you can image position, attachment, size, etc. When you hover the cursor on any image the background image will appear.
  • Next set the caption style. Choose the typography, color, hover setting, border type, and other options.
Filterable Gallery Overlay customization

Button 1 & 2 Setting

If you are using any button then set the button style. Select the color, typography, background color, border, and others.
Filterable Gallery Button Style

These are the main options. Following the steps, you can bring tons of changes in style and create the most stuff suitable to display multiple images.