Elementor Filterable Gallery Widget - Make Images Filterable
A static gallery shows images. A filterable gallery lets people find what they care about. The Filterable Image Gallery widget gives your portfolio, product catalogue, or photo collection a category bar at the top. Visitors click a tab, the grid filters instantly, and every item can carry a title, subtitle, and two styled buttons for “View Details” or “Live Demo”.
The widget is free in the Master Addons plugin and works without Elementor Pro.
See the filter tabs in action
This grid is the widget itself, not a screenshot. Four categories and an All tab sit above it, and clicking a category hides every item that does not carry that label. Each card here also shows a title and a subtitle pulled from its own fields.
- All listings
- Apartments
- Villas
- Townhouses
- Offices
Cove Street Loft
2 bed · 1 bath · 940 sq ft — $2,450/mo
Marina Point 8B
1 bed · 1 bath · 680 sq ft — $1,890/mo
Ridgeway Villa
4 bed · 3 bath · pool — $1.24M
Glasshouse on Elm
3 bed · 2 bath · 2,100 sq ft — $980,000
Bricklane Row 12
3 bed · 2 bath · garage — $720,000
Alder Court 4
2 bed · 2 bath · walled garden — $645,000
Harbour Works, Floor 3
4,200 sq ft · 38 desks — $6,400/mo
The Quay Studio
1,800 sq ft · 16 desks — $2,950/moWhat you can do with the filterable gallery widget
Category filtering with full control
Enable the filter bar and visitors see category buttons above the gallery: “All”, “Branding”, “Photography”, “Web Design”, whatever labels you set. Rename the “All” tab, align the bar left, center, or right, and style active tabs with separate colors, backgrounds, and borders so people always know what they’ve selected.
- Assign each image to a category using the Filter Label field. Comma-separate for multiple categories.
- Active state styling makes the selected tab stand out from the rest.
- Typography and spacing on the filter bar are fully customizable.
Gallery layout and 3D effects
Choose the number of columns, enable Masonry for a Pinterest-style staggered grid, and control spacing with Gutter settings. Then layer on interactive effects: Hover Scale makes items enlarge on mouseover, and the Tilt Effect adds a 3D perspective that follows the cursor with optional glare. It’s the kind of detail that makes a gallery feel considered instead of default.
- Masonry layout for dynamic, uneven image heights.
- 3D tilt with adjustable perspective, speed, and glare intensity.
- Hover scale with configurable transition speed.
- Responsive columns that stack cleanly on mobile.
Styled text overlays and dual CTAs
Every gallery item can show a title, subtitle, and category label, each with independent typography and color. On hover, an overlay color fades in and two buttons appear: “Details” and “Demo” (or whatever text you write). Both buttons have full Normal and Hover state controls for background, text color, border, radius, and shadow.
- Separate Title Style, Subtitle Style, and Category Style sections.
- Two buttons per item, each styled independently.
- Hover icon size and color to match your brand.
- Image overlay color with smooth transition.
- Want more hover animations on single images? Try the Image Hover Effects widget.
Build a filterable portfolio in Elementor
Elementor’s own Portfolio widget needs Pro. This grid runs on Master Addons, so the filter bar works on a free Elementor install. Every item carries a project title, a subtitle for the category or year, and two button fields, which is how a portfolio card can point at the live site and the case study at the same time. The buttons below go to the demo page.
- All projects
- Residential
- Hospitality
- Retail
- Workplace
Ashgrove House
Private residence · Melbourne · 2025
Lime Wash Apartment
Full refurbishment · Lisbon · 2025
The Fenwick Hotel
Lobby and lounge · Edinburgh · 2024
Kellner Guest House
32 rooms · Vienna · 2024
Studio Nine Flagship
Retail fit-out · Copenhagen · 2025
Marlow & Fold
Concept store · Toronto · 2023
Beacon Labs HQ
1,400 sq m workplace · Berlin · 2025
Ardent Partners
Office and meeting suite · Dublin · 2024Filterable gallery in Elementor without Pro
Elementor’s free Image Gallery is a grid with a lightbox. The whole control list is images, columns, gap, caption, link and lightbox, so there is no filter bar and no masonry in it. Elementor keeps its richer Gallery widget on the Pro list, which is where a licence comes in. This widget adds the filter bar on a free Elementor install.
| Feature | Elementor Image Gallery (free) | Master Addons Filterable Image Gallery |
|---|---|---|
| Category filter tabs | No | Yes, from a Filter Label per item |
| “All” tab | No | Yes, with your own label |
| Masonry | No | Yes |
| Columns | Yes | Yes, 1 to 6 |
| Lightbox | Yes | Yes |
| Captions | The attachment caption | A title, subtitle and category you type per item |
| Buttons on an item | No | Two, each with its own URL |
| Ribbon badge | No | Yes |
| 3D tilt on hover | No | Yes, with glare |
| Needs Elementor Pro | No | No |
What the widget does and does not do
Everything below was checked in the widget panel. The second half matters as much as the first: if you need paging or a search box, this is the wrong widget and it is better to know now.
| Setting | Supported |
|---|---|
| Category filter tabs | Yes, one Filter Label per item, comma separated for more than one |
| “All” tab | Yes, and you can rename it |
| Masonry | Yes |
| Image aspect ratio lock | Yes |
| Columns | 1 to 6, one value for every screen size |
| Lightbox popup | Yes |
| Links instead of the popup | Yes |
| Buttons per item | Two, each with its own URL |
| Ribbon badge | Yes, 12 presets plus a discount field |
| Title, subtitle and category label | Yes, each with its own typography |
| Tooltip on an item | Yes |
| Overlay | On hover, always, never, or hide on hover |
| 3D tilt with glare | Yes |
| Entry animation | Yes |
| Load more button | No |
| Pagination | No |
| Search box | No |
| Video items | No |
| Posts or products as the source | No, the gallery is a repeater you fill in |
Other image widgets in the same plugin: Image Hover Effects for captions that appear on hover, Image Carousel for a sliding row, Gallery Slider for a large preview with a thumbnail strip, Image Hotspot for markers on a single image, and Advanced Image for one image with a caption and a link.
Filterable gallery examples and use cases
- Portfolios: let visitors filter by project type, branding, web, photography, illustration.
- Product catalogues: category tabs for “All”, “New Arrivals”, “Sale”, “Best Sellers”.
- Restaurant menus: filter by “Starters”, “Mains”, “Desserts”, “Drinks”.
- Real estate listings: “Apartments”, “Houses”, “Commercial”, “Land”.
- Wedding photography: “Ceremony”, “Reception”, “Portraits”, “Details”.
- Agency case studies: filter by client industry or service type.
How to create a filterable gallery in Elementor
- Drop the widget. In Elementor, search “Filterable Image Gallery” under Master Addons and drag it into your section.
- Add gallery items. Click + Add Item for each image. Upload the image, write a title and subtitle, set the Filter Label (category name), and add button text and links if needed.
- Enable the filter bar. Turn on Show Filter Nav, set your column count, pick Masonry or regular grid, and adjust Gutter spacing. Enable Hover Scale and Tilt Effect for interactivity.
- Style everything. In the Style tab, design the filter bar, item cards, text overlays, buttons, and hover states. Publish when done.
Frequently Asked Questions For Filterable Image Gallery
What is the Filterable Image Gallery widget?
A standalone Elementor widget that turns any image grid into a category-filtered gallery. Visitors click filter tabs to show only relevant items. Each item can display a title, subtitle, and two styled call-to-action buttons.
Is the Filterable Image Gallery widget free?
Yes. It comes with the free Master Addons plugin, so you can build a filterable gallery without Elementor Pro or a Master Addons Pro license. You can add as many gallery items as you need.
How do I assign items to filter categories?
In the Gallery Contents section for each item, find the Filter Label field and enter the category name (“Technology”, “Branding”, “Photography”). All items with the same label group under one filter button. Comma-separate to assign an item to multiple categories.
Does Elementor have a filterable gallery?
Elementor’s free Image Gallery is a plain grid, so it has no filter bar. The Gallery widget Elementor ships with Pro is the paid route. This widget adds the category tabs on a free Elementor install.
Can I build a portfolio with this widget?
Yes. Each item takes a project title, a subtitle for the category or the year, and two buttons with their own URLs, so one card can point at the live site and at the case study.
Can visitors open images in a lightbox?
Yes. Each button can link to a lightbox popup, an external URL, or a page on your site. Set the link destination per item in the gallery contents section.
Is the gallery responsive on mobile?
Yes. Columns stack automatically, four columns become two or one on smaller screens. Filter buttons wrap to fit. Use Elementor’s responsive mode to adjust Gutter and font sizes for mobile specifically.
How is this different from a regular Image Carousel or Gallery Slider?
A carousel or slider shows one image at a time and cycles through them. A filterable gallery shows everything at once and lets visitors narrow the grid by category. Use the Image Carousel for hero sections and logo rows, or Gallery Slider (Pro) when you want one large image with thumbnails. Use a filterable gallery for portfolios, catalogues and collections where browsing matters.
Does the gallery have load more or pagination?
No. Every item in the repeater loads with the page, so a 40 image portfolio ships all 40 at once. Split very large sets across pages, or keep the image files light.
Why are my filter tabs not showing?
Three things to check: Show Filter Nav is switched on in the Settings tab, every item has a Filter Label, and the page cache was cleared after you edited. An item with an empty label never joins a category.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
![Master Addons Post/Page Duplicator extension for Elementor: MA Duplicator row link in the WordPress Pages list creating a Landing Page - [Duplicated #128] draft](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
