The Off Canvas Filters widget arranges filters in a mobile-optimized, off-canvas layout, simplifying navigation and enhancing user experience on smaller screens. Designed for optimal performance and a smooth user experience, this widget creates a responsive, off-canvas filter panel that works seamlessly for e-commerce products, portfolios, and other dynamic content. Its extensive customization options help you achieve an interactive browsing experience tailored to your audience. In this tutorial, we will guide you, step-by-step, on how to add off-canvas filters to your Elementor website.
Let’s look at each of the options in the Off Canvas Filters widget for Elementor below.
Before starting, ensure you have added a Post widget or WooCommerce widget and any of the Post Filters widget. The filter integrates seamlessly with various Post, WooCommerce and filter widgets.
Add Off Canvas Filters Widget to Elementor
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Off Canvas Filters”
- Hover over the widget in the search results and click install
- Add the “Custom Canvas Filters” widget to any Elementor Page
General Settings
Breakpoint
Set the breakpoint when widget starts to group the filters into off canvas layout.
Open Filters Text
Type text for open filters button.
Search Button Text
Type text to show as search button.
Reset Button Text
Type text for reset button.
Open Filters Icon
Choose icon for open filters button.
Search Button Icon
Choose icon for search button.
Reset Button Icon
Choose icon for reset button.
Close Button Icon
Choose icon to show in close button.
Show Main Title
Show or hide the main title.
Main Title
Type text for main title.
Show Additional Reset Button
Show/Hide the additional reset button.
Disable Page Scroll
Turn on to disable page scroll when filters are opened.
Off Canvas Filters Widget Styling
There are a number of styling options that allow you to control every aspect of the widget’s design. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Filters Container Styling
You can set the width, height, spacing, vertical alignment, horizontal alignment, background, padding, border and border radius of filters container.
Reset/Search Buttons Container Styling
Set the reset/search buttons gap, spacing, direction, alignment, border radius, padding, and background color.
Open Button Styling
Style the open button direction, gap, typography, padding, color, border, and box shadow.
Search Button Styling
You can set search button direction, gap, typography, padding, color, border, and box shadow.
Reset Button Styling
You can set reset button direction, gap, typography, padding, color, border, and box shadow.
Close Button Styling
Set the close button direction, gap, typography, padding, color, border, and box shadow.
Main Title Styling
Style the typography, text alignment, color, background color, padding, border, and border radius of the main title.
Additional Reset Button Styling
You can set additional reset button direction, gap, spacing, typography, padding, icon size, color, border and border radius.
Off Canvas Filters Widget Design Examples For Elementor
Here are some live use cases for the Off Canvas Filters widget.
Off Canvas Filters shown on post grid for products with multiple filters.
Off Canvas Filters with team member post list.
Thank you for choosing the Off Canvas Filters Widget to enhance your site’s functionality. We hope this tool streamlines content discovery and improves user satisfaction. For additional guidance or support, please visit our help resources or contact our team—we’re here to assist!
