Filterable Slider

The Filterable Slider Widget in Animation Addons for Elementor is a paid feature. To use this widget, make sure the plugin is installed and activated on your site. While you can browse both free and pro widgets using the filtering options, please note that this particular widget is available only in the pro version.

Introduction

The Filterable Slider Widget allows you to create interactive sliders with filter options for easy content organization.

Key Use Cases for the Filterable Slider Widget:

• Showcase content in a dynamic, filterable slider.
• Customize the design to match your website’s style and layout.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Filterable Slider Widget:

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Find the Filterable Slider Widget in the list.
3. Toggle it on to enable the widget.
4. Now, the Filterable Slider Widget is ready to use!

How to Add Filterable Slider Widget in Elementor:

• Open the page where you want to add the Filterable Slider Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Filterable Slider Widget.”
• Drag the widget to your desired section.
• The Filterable Slider Widget is now ready for customization.

How to Configure Filterable Slider Widget

• In the Elementor panel, search for the “Filterable Slider Widget.”
• Drag and drop the widget into your desired section.
• Add your slider items by uploading images, setting titles, descriptions, and assigning categories.
• Enable filtering options to allow users to switch between slides by category.
• Use the Style tab to customize slider layout, spacing, navigation controls, typography, and colors to match your website’s design.

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

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

Content Settings

Once the Filterable Slider Widget is added to your page, you can configure its settings under four options: Filter, Slides, Slider Options, and Settings.

Filter:

This section allows you to set up filters for the slider. You can categorize your slides and let users filter them based on the selected categories. This helps in organizing and displaying content more effectively.

Slides:

In the Slides section, you can add and manage the individual slides for the slider. You can include images, text, buttons, and links for each slide. This is where you create and arrange the content that will appear in the slider.

Slider Options:

This section provides settings to control the functionality and appearance of the slider. You can adjust the number of slides to show the transition effects, autoplay settings, navigation buttons, and more to customize how the slider operates.

Settings:

The Settings section allows you to adjust various configurations like the slider’s layout, responsiveness, spacing, and alignment. You can fine-tune the visual presentation and ensure the slider fits your design perfectly.

Style Settings

In the Style section, we have the following options to customize:

• Filter
• Image
• Slider Navigation
• Pagination

Filter:

In this section, you can customize the appearance of the filter buttons. Adjust colors, font size, padding, and spacing to match your site’s branding and enhance the visual presentation of the filter options.

Image:

This section allows you to style the images within the slider. You can adjust image borders, hover effects, shadows, and more, to ensure the images look visually appealing and consistent with the overall design.

Slider Navigation:
Here, you can customize the navigation buttons of the slider, such as arrows or dots. Control their size, color, hover effects, and alignment to improve user experience and make navigation intuitive.

Pagination:

This section lets you style the pagination controls that appear if the slider has multiple pages. You can adjust the look of the page indicators, including their size, color, and hover effects, ensuring they align with the overall design of the slider and website.

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

That’s it! You’ve successfully learned how to configure the Filterable Slider Widget in Elementor to create a dynamic and interactive slider with filtering options. For any further assistance or inquiries, feel free to contact our support.