How to set up and style the Filterable Gallery widget in Elementor.
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.
Part of: Bright Addons Pro.
| Option | What it does |
|---|---|
| Items | The list of gallery items, followed by an image size setting for the thumbnails. |
| Image | The image for the item. |
| Title | The item title, shown in the caption and in the lightbox. |
| Description | A short text shown in the caption and in the lightbox. |
| Filter Categories | One or more categories for the item, separated by commas. |
| Custom Link | A link for this item that replaces the gallery click action. |
| Featured Item (2 x 2) | Makes the item span two columns and two rows in the grid layout. |
| Option | What it does |
|---|---|
| Show Filter Bar | Shows or hides the category buttons. |
| Show "All" Button | Adds a button that shows every item. |
| "All" Label | The text of that button. |
| Active Filter on Load | The category selected when the page opens. Empty starts with All. |
| Show Item Count | Shows the number of items on each filter button. |
| Style | The look of the filter buttons. |
| Alignment | Aligns the filter bar left, center or right. |
| On Mobile | Wraps the buttons onto new lines or lets visitors swipe the bar sideways. |
| Option | What it does |
|---|---|
| Layout | Chooses a grid with same size images or a masonry layout. |
| Columns | The number of columns, from 1 to 8, per device. |
| Gap | The space between items. |
| Image Ratio | The shape of images in the grid layout, such as 1:1, 4:3 or 16:9. |
| Caption | Where the caption appears: on hover, always on the image, below the image or not at all. |
| Show Categories in Caption | Adds the item's categories to its caption. |
| Hover Icon | The icon shown on hover with the overlay and slide up captions. |
| Image Hover Effect | The effect applied to the image or card on hover. |
| Click Action | Opens the lightbox, opens the image file in a new tab, or nothing unless the item has a custom link. |
| Title Tag | Sets the HTML tag used for item titles. |
| Option | What it does |
|---|---|
| Enable Load More | Shows only part of the gallery first, with a button to reveal more. |
| Items Shown First | How many items are visible before the button is clicked. |
| Items per Click | How many more items each click reveals. |
| Button Text | The text of the Load More button. |
| Button Icon | An optional icon on the button, placed before or after the text. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $16 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
spacing, typography, colors, background and shadow for Normal, Hover and Active states, border, radius, padding and item count colors.
background, border, shadow and radius of the cards with a hover state, plus CSS filters for images.
overlay background, caption padding, alignment and background, text styles for title, description and categories, and the hover icon.
alignment, space above, typography, colors, background, border, radius and padding.
Yes. Enter several categories separated by commas, for example Web, Ecommerce. The item then shows under each of them.
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.
No. Only the items visible under the current filter and Load More limit are part of the lightbox slideshow.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide