Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Get Animation Addons Pro
Classic Elementor widget · Pro

Filterable Gallery for Elementor A photo and video gallery with category filters

Put photos, videos and audio in one gallery and let visitors sort it by category. The Elementor filterable gallery widget also works as an Elementor portfolio gallery filter: one click on a filter and the items glide to their new places. Photos open in a lightbox, and videos and audio play in a popup, so nobody leaves the page.

Get Animation Addons Pro See the live demos
  • Masonry and grid layouts
  • Smooth filter transition
  • Image lightbox
  • Video and audio popup

Classic widget · Elementor 3 and 4 · ProUpdated

Live demos

Two gallery designs, live

A film studio's media library in masonry and a fashion lookbook in a grid. Filter by type, open a photo in the lightbox or press play on a trailer or a podcast episode.

Sahara FilmsFilmsMediaPress

Media library

Stills, trailers and the podcast

A woman in a linen shirt standing in tall reeds
A man in a blue head wrap beside a camel
A long studio room full of plants and desks
A dancer in a pink dress turning on a rooftop
A woman with red sunglasses and a pleated red collar
A woman with braids holding a make-up brush
A team around a table in a bright office
A woman in white looking out to sea
Three women talking around laptops
Four people looking at a computer screen
A reading corner with a stool and wooden shelves
Media library

A media library with a filter

Tall portraits span two rows and wide stills two columns, so the page reads like a contact sheet. Pick Video, Audio or Image and the tiles slide into the free space. Photos open in the lightbox and the play buttons open a player.

Filter, then open a photo

In Content, set Layout to Masonry and add All, Video, Audio and Image in Filter. In Style, set the Gap to 15 px and adjust the Play Button size and colour.

shallyShopLookbookRadio
A woman in a linen shirt standing in tall reeds
A man in a blue head wrap beside a camel
A dancer in a pink dress turning on a rooftop
A woman with braids holding a make-up brush
A woman with red sunglasses and a pleated red collar
A woman in white looking out to sea
A woven chair beside a white sofa
A calm room with an oval mirror and a low sofa
Fashion lookbook

A lookbook grid with a right-aligned filter

Four even columns with the filter on the right. Each row takes the height of its tallest item, and the rows close up as you filter.

Pick Image, then press play

In Content, set Layout to Grid and add the same four buttons in Filter. In Style, set the filter Alignment to right and the Gap to 15 px.

Features

Key features of Filterable Gallery

What the widget does, with the panel setting behind each feature.

Flexible layouts

Choose a masonry or grid Layout. The Elementor masonry gallery with filter has tall, wide and big tiles, and the Row Height sets the rhythm.

Gallery with category filters

Give each item a category in Gallery and list the buttons in Filter. Visitors get an Elementor gallery with categories and sort it without a page reload.

A filter that moves

Items that stay glide from their old place to the new one in half a second, one after another, instead of jumping.

Images, videos and audio

Mix photos with video and audio items for an Elementor video gallery with filter. Media items get a play button that opens the player in a popup.

Built-in lightbox

An Elementor gallery with lightbox: photos open full size with a counter, arrows, fullscreen, keyboard keys and swipe on phones.

Styled filter bar

Set the Padding, Gap, Margin, Typography, Text Color, Background Type and Alignment of the filter.

Gallery style

Round the corners with Border Radius, space items with Gap and size the Play Button.

Responsive by default

Masonry tiles fall back to single cells on phones and every setting can change per screen size, so the gallery stays tidy on mobile.

Step by step

How to make a filterable gallery in Elementor

Five steps. The bold names are the labels in the Elementor panel.

  1. Install Animation Addons Pro, then turn on Filterable Gallery in Animation Addons → Elements.

  2. In Elementor, search the panel for Filterable Gallery and drag it onto the page.

  3. Pick a Layout, then add your categories in Filter.

  4. In Gallery, add images, videos and audio and give each one its category.

  5. Set the Gap, Row Height and filter style in the Style tab, check mobile and publish.

Get Animation Addons Pro Part of Animation Addons Pro · Works with Elementor Free
FAQ

Questions about Filterable Gallery

How do I make an Elementor gallery with filters?

Add the Filterable Gallery widget from Animation Addons Pro, list your categories in Filter and give each gallery item a category. Visitors then sort the gallery with the buttons above it.

Can I use an Elementor gallery filter by category?

Yes. Each item in Gallery has a category, and the buttons in Filter show only the items of the category a visitor picks. The page does not reload.

Is Filterable Gallery free?

No. It is part of Animation Addons Pro. The free plugin includes the Image Gallery widget, which has a lightbox but no filter.

Can the gallery show videos and audio?

Yes. Gallery items can be images, videos or audio. Video and audio items show a play button, and the player opens in a popup on the same page.

Does it have a lightbox?

Yes. Photos open in a lightbox that fades and scales in, with a counter, previous and next arrows, a fullscreen button, keyboard keys and swipe.

What is the difference between masonry and grid?

In masonry, items can be tall, wide or big and the rows have a fixed height. In grid, items sit in even columns and each row takes its tallest item.

How does the filter animate?

The items that stay move from their old place to the new one in 0.5 seconds, one after another. Items of other categories are hidden.

Will the gallery work on phones?

Yes. Wide and tall tiles become single tiles on phones, columns change per screen size and the lightbox supports swipe.

Does it work in Elementor 4?

Yes. It is a classic widget, so Elementor 4 lists it with the legacy widgets and it works on the same page as atomic elements.

Animation Addons Pro · Elementor 4

Your gallery, sorted by category

Masonry or grid galleries with filters, a lightbox and media popups for Elementor.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license