BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro widget

Filterable Gallery Widget for Elementor Pro

A grid or masonry gallery visitors can filter by category

Overview

What Filterable Gallery does

Filterable Gallery shows images in a grid or masonry layout with a row of category buttons above it. Clicking a category shows only the matching items, and images can open in the Elementor lightbox. Use it for portfolios, project galleries and photo collections that fall into groups.

Live demo

See it in action

Features

What it can do

  • A filter bar built automatically from the categories you type on each item.

  • Four filter styles: Pills, Buttons, Underline and Plain Text, with optional item counts.

  • Grid layout with a fixed image ratio, or masonry layout that keeps each image's own height.

  • Featured items that span two columns and two rows in the grid layout.

  • Five caption choices, from an overlay on hover to a caption below the image.

  • Image hover effects: Zoom, Grayscale to Color, Blur and Lift Card.

  • Elementor lightbox that only steps through the items currently visible.

  • A Load More button that reveals items in steps.

Use cases

When to use it

Agency portfolio

Tag each project with the services involved and let visitors filter by Branding, Web or Ecommerce.

Photography gallery

Use the masonry layout so portrait and landscape photos keep their shape.

Project showcase

Give each item a Custom Link so a click opens the project page and not the lightbox.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag the Filterable Gallery widget onto the page and open Gallery Items.

  2. For each item choose an Image, type a Title and add its Filter Categories separated by commas.

  3. Open Filter Bar and pick a Style, the Alignment and how the bar behaves On Mobile.

  4. Open Layout and choose Grid or Masonry, then set Columns, Gap and, for the grid, the Image Ratio.

  5. Choose a Caption type, an Image Hover Effect and a Click Action.

  6. If the gallery is long, open Load More, turn on Enable Load More and set Items Shown First and Items per Click.

  7. Style the filter buttons, items and captions in the Style tab.

FAQ

Questions and answers

Can an item belong to more than one category?

Yes. Enter several categories separated by commas, for example Web, Ecommerce. The item then shows under each of them.

Can a link on another page open a specific category?

Yes. Link to the gallery page with #filter-your-category at the end, for example #filter-branding, and the gallery switches to that category. The filter bar must be shown for this to work.

Does the lightbox show hidden items?

No. Only the items visible under the current filter and Load More limit are part of the lightbox slideshow.

Bright Addons Pro

Get Filterable Gallery with Bright Addons Pro

Bright Addons Pro has 80 Pro widgets plus all 51 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $18 a year, with a 14-day money-back guarantee.