Filterable Gallery

The Filterable Gallery Widget in Animation Addons for Elementor is a pro feature. To use it, make sure the plugin is installed and activated on your website. While you can browse both free and pro widgets using the filtering options, this specific widget is only accessible in the pro version.

Introduction

The Filterable Gallery Widget lets you display images with interactive filters for a clean and organized look.

Key Use Cases for the Filterable Gallery Widget:

• Showcase images in categories with interactive filters.
• Customize layout and style to match your website’s design.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Filterable Gallery Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Filterable Gallery Widget in the list.
• Toggle it on to enable the widget.
• The Filterable Gallery Widget is now ready to use!

How to Add Filterable Gallery Widget in Elementor:

• Open the page where you want to add the Filterable Gallery Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Filterable Gallery Widget.”
• Drag the widget to your desired section.

How to Configure Filterable Gallery Widget 

• In the Elementor panel, search for the “Filterable Gallery Widget.”
• Drag and drop the widget into your desired section.
• Add your gallery items with images, titles, and categories.
• Enable filtering options to let users sort content by category.
• Use the Style tab to customize layout, spacing, typography, hover effects, and colors to match your website’s design.

Configuring Filterable Gallery Widget : A Step-by-Step Guide

Once the Filterable Gallery Widget is added to your page, you can configure its settings under different tabs: Content, Style, and Advanced.

Content Settings

In the Content section, you’ll find the following options:

• Layout: Customize the display style of the gallery, such as grid or masonry layout.
• Filter: Add categories or tags to enable filtering of gallery items.
• Gallery: Upload and manage the images or items that will appear in the gallery.

Style Settings

In the Style tab, you can fine-tune the design of your filterable gallery using the following sections:

1. Layout

• Gap – Adjust the spacing between gallery items.
• Row Height – Define the vertical height of each gallery row.

2. Filter

• Padding – Control the internal spacing of the filter buttons.
• Gap – Set the space between individual filter items.
• Margin – Define outer spacing around the filter area.
• Typography – Customize the font style, size, and weight of filter text.
• Text Color – Choose a color for the filter text.
• Background Type – Set a background color or gradient for the filter buttons.
• Alignment – Align filter options (left, center, or right) within the section.

3. Gallery

• Border Radius – Apply rounded corners to gallery item images.
• Play Button – Customize the Size and Color of the play button shown on video items within the gallery.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

Congratulations! You’ve now successfully set up the Filterable Gallery Widget in Elementor to showcase your images with easy-to-use filter options. If you need any further help or have any questions, don’t hesitate to reach out to our support team.