Do you want to create a filterable image gallery in Elementor so users can filter images by category? By adding a category-wise filter, you can improve the user experience and navigation so users can browse and sort through specific image categories.
With the Gallery Listing widget from The Plus Addons for Elementor, you can add a category-wise filter to your image gallery.
To check the complete feature overview documentation of The Plus Addons for Elementor Gallery Listing widget, click here: Gallery Listing Widget Settings Overview
Requirement — This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated.
To do this, add the Gallery Listing widget on the page. After selecting the appropriate listing style and layout from the Layout tab, go to the Content tab and choose Repeater from the Select Option dropdown. Use this when you want to manually add and categorize images inside the widget, because the category filter depends on categories assigned within each repeater item.
Note: The Category option is only available for Repeater.
Make sure you have added and assigned categories to your images while adding content to each repeater item. This step is required because the filter reads the category assigned to each item. Without categories assigned, the filter will have nothing to display.
Then go to the Extra Options tab, and enable the Category Wise Filter toggle to activate category-based filtering for your gallery. This makes a row of filter buttons appear above the gallery so visitors can click a category and see only the images belonging to it.
Note: Category filter is not available for the Carousel layout.
Now you will be able to see filter options in your image gallery listing that you can use to filter images by category.
In the All Filter Category Text field, you can edit the label for the “All” filter button. This is useful when you want to localize the label or replace “All” with a phrase that fits your gallery’s context, such as “Show Everything.”
From the Category Filter Style dropdown, select a predefined style for the filter labels in their normal state. This determines the visual appearance of the filter buttons before a visitor interacts with them.
From the Filter Hover Style dropdown, select a predefined style for the filter labels in their hover state. Use this to create a visible style change when a visitor moves their cursor over a filter button, which reinforces that the buttons are interactive.
From the Filter Alignment section, you can align the filter labels. Use this to match the alignment of the filter row to the rest of the gallery layout, such as centering filters above a centered grid.
If your images are tagged with a custom taxonomy rather than standard categories, the Dynamic Categories widget from The Plus Addons for Elementor can display those taxonomy terms as a standalone navigation list on the same page.
Also, read How to Create an Elementor Gallery with ACF Gallery.
