1. Home
  2. Xpro Beaver Addons
  3. Filterable Gallery
  4. Setup


How To Setup Xpro Filterable Gallery For Beaver Builder

Make a professional and well-organized gallery for your website with Xpro filterable gallery for beaver builder!

Looks like you’re trying to find a way to display tons of images in an arranged format. Well, you’re at a perfect place. Xpro filterable gallery for beaver builder allows you to categorize all your images in groups. It comes with a lot of handy features that you can use to set up a user-friendly image gallery.

From a user perspective, it is very tiring to search for a particular image in an unsorted gallery, right? Our filterable gallery module provides you with the control to add multiple filters to one gallery item. You can add clickable filters to make it easy for your visitors to remain focused on what they’re searching for and browse images conveniently. Also, you can style your gallery with custom hover effects, animations, and responsive editing to make the display remarkable.

Flaunt your images with our filterable gallery module and create a professional look on your website by selecting a simple or album gallery. Choose from our various pre-built pop-up styling options and preview the pop-up layout to view your gallery display.


To unlock the full features of the filterable gallery for beaver builder, you need to download the Xpro addons for beaver builder- lite and purchase the pro bundle of our gallery module.

In case, you don’t know the process of installation, check out our docs on how to download and install the Xpro filterable gallery for beaver builder and how to purchase a filterable gallery.

How to Set up Xpro Filterable Gallery for Beaver Builder

To set up an exceptional filterable gallery for your images, here we will guide you through all the steps from adding a module to styling a gallery.

Let’s dive right in!

Step 1: Add the Filterable Gallery Module

To start off with creating an organized gallery with clickable filters, drag and drop the “filterable gallery module” from the modules dropdown on your beaver builder page.

drop and drag- filterable gallery module for beaver builder

Step 2: Configure General settings

A pop-up menu will emerge after dropping a filterable gallery module, configure the general settings manually to display your gallery.

  • Choose a layout to display your gallery in 4 different options i.e., grid, masonry, mosaic, and carousel.
  • Set up the pop-up styles by choosing from our pre-built layouts and enable social shares and downloads to your image gallery.
General settings - Filterable gallery for beaver builder

Step 3: Enable Filters

Click on the “filters” section from the pop-up menu.

  • Enable filters on your image gallery by customizing a name, and the animation type.
  • Make your gallery responsive for different devices. You can also choose to preview the changes you’re making.
  • Choose to show or hide the toggle dropdown in front of the filter title.
  • Create a visually enticing gallery to grab the attention of your users by adding different color contrast to the background, hover, and separators.
Enable filters - Filterable gallery for beaver builder

Step 4: Organize Photo groups

Click on the “Gallery” and start sorting out all your images in categories.

  • You can add as many photo groups as you want and then categorize the particular set of pictures in every group. Add a featured image to enable easy search and browsing for your users.
Add photo groups- filterable gallery for beaver builder

How to Style Xpro Filterable Gallery for Beaver Builder

Begin styling your filterable gallery by clicking on the “styles” section.

Customize Gallery Box

Customize gallery boxes by changing the border colors, radius, width, and shadows.

Overlay Effects and Icon

You can add different hover effects and icons to your gallery images. Xpro filterable gallery for beaver builder allows you to add custom colors to icons, backgrounds, and borders.

Title and Description

  • Filterable gallery for beaver builder also permits the users to make personalized changes in the title and description of the filters that you’ve added to categorize the gallery.
  • Change the color, and margin top and bottom to make the display more visually enticing.
Styling - Filterable gallery for beaver builder

How to Customize Typography in Xpro Filterable Gallery for Beaver Builder

By clicking on the “typography” section from the pop-up menu, you can add different font sizes and styles to your filter titles and image descriptions. Add text shadows and spaces to grab the attention of your prospects on your perfectly displayed filterable gallery.

Typography- Filterable gallery for beaver builder

Final Outcome!

That’s it! You can create a filterable image gallery by just dropping the module, choosing the images, and then assigning the photos to different categories. Xpro filterable gallery also comes up with over-the-top styling features to design a custom gallery by adding multiple color contrast, effects, filters, and typography options.

You can also choose to go on an easy way by choosing from our diverse range of pre-built filterable gallery templates.

How can we help?