Creating a Filterable Gallery using Elementor boosts your website’s look and gets users more involved! In Unlimited Elements, the Filterable Gallery makes it easy to display your images in a cool grid or masonry layout, with the bonus of Ajax-based search filters. Visitors can easily browse using categories or tags, making it a breeze to find what they’re looking for. This nifty feature elevates the user experience on your Elementor-powered website, making content navigation smooth and fun.
Step by Step Guide
Step #1: Install and activate Unlimited Elements Pro for Elementor
Before getting started you will need to purchase Unlimited Elements Pro from the link below to access the gallery and filter widgets.
Then follow these steps:
Now that you have the plugin installed.
Step #2: Adding the Multi-Source Galleries Widget on the page
Go to the widgets section and search for the gallery you want to use by name. Here is a list of the available gallery types.
Thumbs Gallery
An organized grid display of images and videos with smaller thumbnail representations for efficient mixed-media navigation.
Compact Gallery
A condensed and optimized arrangement of both images and videos, balancing space utilization while maintaining visual appeal.
Grid Gallery
A structured grid layout showcasing a mix of images and videos for a well-organized and visually cohesive presentation.
Slider Gallery
A dynamic presentation supporting images and videos, allowing users to navigate through a sequence using a sliding motion.
Carousel Gallery
An interactive and engaging rotating display of images and videos in a circular or linear format, providing a captivating mixed-media viewing experience.
Tile Gallery
A mosaic-like pattern showcasing a mix of images and videos for an aesthetically pleasing and diverse visual presentation.
Masonry Gallery
A visually dynamic and adaptive layout presenting a mix of images and videos with varying sizes and proportions, creating a modern and artistic display.
To build a filterable gallery you need to install one of the multi-source galleries. in this example, we will use the Masonry Gallery.
Then, in the Elementor editor, Find the Masonry Gallery widget and drag it to the desired part of your page.
Step #3: Configure Gallery Source
After adding the widget to the page, it’s time to configure the source of the gallery.
To add filters to your gallery, it’s necessary to have the items as posts or products. If you haven’t done so previously, create those posts or products. It’s worth mentioning that it also supports custom post types and WordPress pages.
Select “Posts” or “Products” from the “Item Source” dropdown menu.
Step #4: Configure Post/Product Query
In this example, I have selected “products” as the source for the gallery. As a result, a new section now appears in the settings that allows me to specify the query for the gallery, enabling me to choose which products I want to display.
Current Query Products
Showcase your products in a Shop Page for displaying products based on the current query.
Custom Products
Implement advanced include or exclude rules seamlessly anywhere on your website for a personalized product display.
Related Products
Showcase items from the same category as the currently viewed product, providing relevant suggestions for a tailored shopping experience.
Manual Selection
Curate a specific set of products by handpicking them based on their names, allowing for precise and intentional product displays.
Once you have chosen the products to showcase in your gallery, remember to set the maximum number of posts or products you want to display.
Step #5: Turn On Post Pagination and Filtering
To enable filters and pagination for your gallery, you need to activate the “Post Pagination and Filtering” feature. Unlimited Elements provides a diverse range of filters and tools that can be seamlessly integrated with your gallery.
Step #6: Adding the Filter Widget on the page
Navigate back to the widget library and in the “Post Filters and Tools” category. Install the desired filter from there. For this particular case, let’s choose the tab filter widget as our example.
Step #7: Add the Filter to the Page and Configure
Easily enhance your gallery by dragging and dropping the filter onto the page and customizing the settings. To simplify the process, you can select “override query terms” to synchronize the gallery and filter queries seamlessly.
Step #8: Adjust the layout and Style of the Widgets
Enhance the visual aspects of the Masonry Gallery. widget and Tab Filter widget to seamlessly integrate with your website’s overall design. Customize color schemes, typography, and other styling options to create a friendly and visually appealing search experience.
Usage Example
Below is an example of the final view of how you can utilize a filterable gallery feature.
Wrapping it Up
Congratulations on successfully integrating a Filterable Gallery into your Elementor-built website! 🎉 With this awesome addition, you’ve taken your user experience to the next level by allowing visitors to easily navigate and sort through your content with real-time filtering options. 🌟 This enhancement not only makes your site super user-friendly but also encourages deeper exploration of your content, ultimately boosting audience engagement and satisfaction. Keep up the amazing work! 👏