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.
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 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.
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.
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.
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.
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.
Item Style
Arrange your Item Padding, Margin, Border and Border radius from this item style option.
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.
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.
Button 1 & 2 Setting
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.
