How to create a Divi filterable gallery

Apr 28, 2023 | Divi Resources

What’s a Filterable Gallery and How to Create One in Divi

Showcasing a portfolio with categories/a filter displayed on top can help prospects explore your work effectively. The same is with the Divi filterable gallery. You add images with a clear, distinguishable filter so users can easily explore visuals of different kinds without getting confused.

If you’re looking to create a Divi filterable image gallery, then in this post, you’ll find the steps on how to do that effectively. But first, let’s start with what’s a filterable gallery.

What’s a Filterable Image Gallery?

Divi Image Gallery without filter

Unlike a simple image gallery, in which you find different images placed together in a grid without pointing out which one belongs to what domain, the filterable gallery clearly showcases which image is for what purpose.

For instance, an image that belongs to the technology field, through a filterable gallery, you’ll be able to distinguish it easily.

Divi Filterable Gallery

In a filterable gallery, you can filter galleries based on categories or different terms. The gallery has a filter/ a bar with all the categories/terms. When the user clicks on a particular category, they only see the images from that category. Hence, allows them to quickly sort and find things they were looking for.

Benefits of a Filterable Gallery

A filterable image gallery can provide you with different benefits that would improve your website’s user engagement. Let’s have a look at them as well,

Improved UX and Easy Sorting of Images

There’s no doubt that a filterable gallery will not improve the user experience. With filters on the top of the gallery, it becomes easier for the visitors to sort and find the required visual. They don’t have to go through multiple processes to find their required image.

Organized Presentation

Having a filter for the gallery section will keep all the images nicely organized and easy to explore. The website will appear as a standard platform people like to visit.

Priority to Essential Images or Portfolio

With the filters on the gallery, you can decide which category should be displayed first. The human interaction goes from left to right, thus they will select the filter which is on the left side, first.

Enhanced User Interaction

When website visitors look at a filterable image gallery, they would intend to explore all the images. And to do that, they will try the filters available on the filter bar. Hence, improved user interaction as well as engagement.

How to Create Divi Filterable Gallery?

To build a gallery with filters in Divi, you can save time by using some Divi gallery plugins. However, premium solution from the #1 Bestselling Divi Author on Elegant Themes Marketplace can help you the most. With a plugin, it’s easier to customize the gallery and present images in the best way. 

For this post, we’ve got the ultimate plugin, Divi Gallery Extended, that can help you add a Divi gallery filter for images.

This plugin provides you with different tools and options that maximize a filterable image gallery’s performance. You can display pagination on the gallery if there are many images and you don’t want to increase the page load. Apart from that, the plugin lets you, 

  • Separate gallery images in up to 15 columns. 
  • Adjust column spacing. 
  • Display images in the Lightbox with title, caption, slider and background.
  • Edit gallery media in bulk.
  • Add overlay effects and much more.

Overall, the plugin extends the presentation of your gallery and that too with a filter. Now, if you’re ready to learn how to create a Divi filterable gallery, then let’s begin.

3 Steps to Create a Filterable Gallery in Divi

The steps to create a Divi filterable gallery are very simple and only take a few minutes. Simply follow them one by one and you’ll have your fantastic image gallery with a filter in Divi. 

#Step 1: Install Divi Gallery Extended and Activate It

In order to create a filterable image gallery in Divi, we need to first install the Divi Gallery Extended plugin. Therefore, first visit the Divi Extended store and get the plugin.

Divi Gallery Extended for filter gallery from Divi Extended

After getting the plugin, install it on your Divi WordPress site. You can follow the docs to learn how to install the plugin and later activate it. Once successfully installed and activated the plugin, move on to the next step to build our filterable image gallery.

#Step 2: Assign Images Categories

The filter of the gallery needs categories. Therefore, before we create the gallery, it’s essential that we assign categories to the images. So, in order to do that, go to Media Media Categories.

Creating categories for filterable gallery

Create new categories that you want to display in the filter bar. Once created the categories, head to the Library.

In the library, first change the view to list and then select the images you want to assign categories. Then, choose Edit as the bulk option and click Apply.

Assigning category to images for filter gallery

As you hit the Apply button, you’ll see the options to assign categories, Alt Text, custom link, caption and description. Here, simply select the categories and then click the Update button.

#Step 3: Add the Filterable Image Gallery Module

We have successfully assigned categories to the images. Now, let’s create our filterable image gallery. Create a new page or edit an existing one. Then launch the Divi Visual Builder and insert the following Dynamic Masonry Gallery module.

Inserting the Divi filterable gallery module

As soon as you insert the module, you’ll find the images in a gallery having the masonry layout the same as below screenshot.

The above image gallery example is a simple masonry gallery. To turn it into a filterable gallery, we need to perform a few actions. First, in the Configuration settings of the module, set number of images you want to display. By default, it displays 20 images in the gallery. Thus, define numbers per your requirement. After deciding the image quantity, head over to the Categories and select the ones you want to display in the filterable gallery.

Once selected the categories, go to the Elements settings and check the Enable Filterable Gallery to YES.

After enabling the filter gallery feature, set a custom All Images Text if needed. The default look of the filterable image gallery would be like the following screenshot.

This is the default look, but you can customize it further by heading to the design tab, which offers you the options such as,

  • Change filter category background for both active and non-active filters.
  • Apply text customizations.
  • Shadow effects and more.

Besides the filter options, you get other features that enhance the image gallery’s look immensely and you can have Divi filterable image galleries like the below examples.

Examples of Filterable Image Gallery

Filterable Gallery Example

Example 2

Example 3


By looking at the above image gallery examples, we can clearly see how amazing a filter can make the display. Users can easily explore the desired image with no extraneous effort. And to build these beautiful galleries with category filters, you only need Divi Gallery Extended.

We have already covered the steps, and it’s evident that building Divi filterable galleries isn’t an arduous task. Plus, the plugin offers you more options so that you can build elegant image galleries of different kinds.

Therefore, try this fantastic Divi gallery plugin that lets you build a Divi filterable image gallery in no time.

Posted By:
With the sharp acumen and logical mind, Lokesh specializes in process analysis, mapping, improvement, requirements gathering, workflow automation, and helping his clients find their place in the ever so competitive business arena.


Submit a Comment

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


Submit a Comment

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

How to Build an Email List in Divi Effectively

How to Build an Email List in Divi Effectively

Divi is a remarkable drag-and-drop website builder that allows you to create stunning Divi email optin forms and attract leads. However, creating an optin form is only the first step. To make the most of it, you need to optimize your optin forms to convert more...

13 Best Divi Extensions One Should Use In 2023

13 Best Divi Extensions One Should Use In 2023

If you’re using the Divi theme for your WordPress website, you’ve already made an excellent choice. Divi is one of the most powerful WordPress themes in the market that provides you with intuitive and unique solutions. By using this theme, it’s easier to build...

LearnDash and Divi: 10 Reasons to Use LearnDash With Divi

LearnDash and Divi: 10 Reasons to Use LearnDash With Divi

LearnDash is a perfect plugin for WordPress to build online tutorials or coaching websites. Undoubtedly, it provides the best options to add courses and lessons on the website and manage them. However, using it on a default WordPress theme puts it on a backtrack. The...

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Child Theme Divi Header Layouts