Do you have a lot of photos that you would like to display in an organized manner? If yes, Filterable Gallery is the solution you are looking for. Filterable Gallery functionality allows you to group your photos into categories. Once the photos are grouped in categories, you can use them as clickable filters on the front-end. This exciting image gallery widget comes with a lot of styling options, features, and makes it so easy to build powerful galleries on your Elementor website.
In this tutorial, we will look at how you can create a filterable gallery in Elementor with the Image Gallery widget of PowerPack Elementor addons. Before we begin, make sure that you have the Elementor and PowerPack add-on installed and activated on your website. Once done, we can start with our process!
How to Create a Filterable Gallery in Elementor?
Step 1: Adding the Image Gallery widget
Open the page where you want to add the Gallery in Elementor editor. For this, go to WP admin dashboard > Pages and click on the Edit with Elementor for the respective page. Once you are in the editor, drag and drop the Gallery widget by PowerPack on the page.
Step 2: Adding Images in the Gallery
Now we will be adding the images to the gallery in groups. These groups of images will help us bifurcate the pictures.
For this, first, click on the Add Item button and give your filter a proper name. Do keep in mind, this name will be displayed on the filter button over the gallery. Now add the desired images by selecting from the media library and clicking on the Insert Gallery button.
Repeat the process and add more individual galleries by clicking on the “Add Item” button.
Step 3: Adding Filters to the Gallery
To enable the filtering option, click on the toggle switch under the filter subsection. You can change the alignment of the filter buttons over the image and can change the “All” Filter Label.
Step 4: Customizing the Gallery
Now, go to the settings subsection and here you can make further changes to your gallery as shown in the image below. You can change the Image Size to your desired one. You can choose the layout from grid and masonry.
If you wish, you can even enter the number of columns you want on your website. You can change the ordering and can enable and customize the captions as well. If you wish to link your gallery, you can do that too by selecting the “Link to” option.
Further, you can use the “Load More” feature of the image gallery as well. This will help you maintain the speed of your website by only loading some images at a time. You can do this by merely enabling the Load More button.
Step 5: Styling Filterable Gallery Layout and Thumbnails
For the layout of the gallery, you can change the columns and row gaps using the slides or by entering a number.
For the thumbnails, you can scale the images and can change the opacity of the images or thumbnails. If you wish to add color filters to the images, you can easily do that with the image filter option. You can add an overlay on the images as well.
Step 7: Styling Filters
If you have added filters on the top of the image, you can customize them as well. You can change the typography, color, spacing, borders, and padding for the filters using the options given under the filter subsection.
Filterable Gallery is all set!
Once you publish the page, this is what your image gallery will look like:
There are many amazing designs and layouts that you can make with the filterable gallery widget. For more inspiration, you can have a look at our demo page.
If you want to give the images gallery widget a try, you can get it along with 55+ other creative widgets that will make your design process more comfortable and fun! Get the PowerPack Elementor addons now!
Do share this article if you find it useful and do let me know what you think about this widget in the comments below!
