How to Add a Filter Gallery to Your Website in Just a Few Minutes!

I’ll show you a fast, practical way to add a filterable image gallery to a WordPress site using Elementor and the Essential Add-ons for Elementor plugin. This method gives you a clean, interactive gallery with filter buttons so visitors can quickly find what they want.

Table of Contents

• Step 1: Install Elementor and Essential Add-ons for Elementor
• Step 2: Enable the Filterable Gallery module
• Step 3: Open the page with Elementor
• Step 4: Add the Filterable Gallery widget
• Step 5: Add control names and gallery items
• Step 6: Add images and links
• Step 7: Style the gallery
• Step 8: Preview and test
• Tips and best practices
• Frequently asked questions
• Wrap-up

Step 1: Install Elementor and Essential Add-ons for Elementor

First, make sure you have Elementor installed. Then go to Plugins > Add New and search for Essential Add-ons for Elementor. Click Install, then Activate.

Step 2: Enable the Filterable Gallery module

After activation the plugin may run a quick setup. When you reach the module list, open the Creative Elements section and enable Filterable Galleries. This makes the filterable gallery widget available inside Elementor.

Step 3: Open the page with Elementor

Edit the page where you want the gallery. Right-click the page link and choose Edit with Elementor to open it in a new tab so you can work without losing your place.

Step 4: Add the Filterable Gallery widget

In Elementor’s widget search type filterable and look for the widget tagged EA or Filterable Gallery. Drag it onto the canvas where you want the gallery to appear.

Set the basic options:

• Items — how many gallery items to show (you can add many, three is fine for testing)
• Columns — number of columns to display
• Link behavior — link to button, image, or lightbox depending on your preference

Step 5: Add control names and gallery items

Each filter button is created by adding a control (control name) and assigning gallery items to that control. I recommend writing control names in lowercase so they behave predictably.

• Example control names: house, building, front
• Example gallery item names: White House, Barkley Hotel, Garden Front

You can duplicate items, remove unused ones, or add more items as needed. Make sure each gallery item is assigned to the correct control.

Step 6: Add images and links

Scroll inside the widget settings to add images for each gallery item from your media library. You can also add links for each item — choose whether links open in a new tab or are set to nofollow.

Step 7: Style the gallery

Open the Style tab to adjust appearance. Useful options include:

• Background color — set a card background or keep white for a minimalist look
• Border style and width — set to solid and tweak width for a framed look
• Border radius — increase for rounded cards (I used 10px for a softer look)
• Margin and spacing — control gaps between cards

Step 8: Preview and test

Click the preview icon (the eye) to open the page in a new tab and test the filter buttons. Click each filter to confirm the correct items show and links behave as expected.

Tips and best practices

• Optimize images before uploading to improve page load times and performance.
• Use meaningful control names that reflect categories visitors will understand.
• Keep filters simple — too many filters can overwhelm users.
• Test on mobile — adjust columns and spacing so the gallery stays usable on small screens.

Frequently asked questions

Wrap-up

A filterable gallery is a great way to make visual content easier to browse. With Elementor and Essential Add-ons you can build a polished gallery in a few minutes, style it to match your site, and keep it responsive. Try a few variations and pick the layout and controls that work best for your content.