In this guide, we will show you how to add a “Tabs Filter widget” to your Elementor website. The Tabs Filter widget allows visitors to filter posts dynamically by clicking different tabs, displaying only the content related to the selected term or tag.Perfect for blogs, portfolios, and product galleries, this widget creates an interactive and organized browsing experience.
Let’s explore the customization options available in the “Tabs Filter widget” for Elementor below.
Elementor Tabs Filter Tutorial Video (Step by Step Guide)
Elementor Multi-Level Filter Tutorial Video (Step by Step Guide)
Add a Free Tabs Filter to Elementor
Add a Free Tabs Filter Widget to an Elementor Page
Elementor Tabs Filter Widget General Settings
Add First Item - All
Resets the post widget to its initial query and adds an ALL item in the tabs filter.
First Item Text
The text for the first "All" tab
Sync to Post Widget After Load
When this option is chosen there is no need to select terms manually. The filter will populate automatically according to the Post Widget terms.
First Tab Selected
Determine if the first tab of the filter will be selected by default on page load.
Override Query Items
The filter will override the terms selected in the post query of the post widget.
* Use when the "Add first Item ALL" option is turned off.
To override the output of the post widget.
Filter Role
Single - When there are no children filters.
Main - Set filter to be parent filter of children filters.
Child - A child filter of a parent. Will be visible only when parent is selected.
To learn more about creating multi-level filters visit the step-by-step tutorial in the link below:
Elementor Tabs Filter Widget Terms Selection Settings
Determine which terms to show in your filter.
Select Post Type
Select which post type you want to filter. This should be the same as in your post widget. Fore example: Pages, Posts, WooCommerce Products or any other Custom Post Type.
Select Taxanomy
Select what kind of taxonomy yo want to filter:
Category
Tags
Include By
Specific terms
Children of
Children of current term
By search text
Only childless
Not a child of another term
Term meta
Exclude By
Specific Terms
Current Term (for archive only)
Hide Empty Terms
Max Number of Terms
Set the maximum number of terms to show in your filter.
Order By
Name
Slug
Term Group
Term ID
Description
Parent
Count (number of posts associated)
Include (specific terms order)
Meta value
Meta value (numeric)
Order Direction
Accending
Descending
Show Query Debug
Show the query for debugging purposes. Don't forget to turn it off before the page is published.
Elementor Tabs Filter Widget Layout Settings
Show Icon
Add an icon to the tabs.
Icon
Select an icon for the filter items.
Layout
- Flex - Inline
- Grid - Columns
Gap
Space between tabs
Show Number of Posts
Shows the number of posts assigned to each tab.
Show Number on "All"
Shows the number on "ALL" filter tab.
Show Image
Show an image for each filter item.
Image Meta Field
Type in the meta name of the image field you want to show.
Show Debug Meta Fields
Show related meta field names you can use.
Elementor Tabs Filter Widget Loader Settings
Elementor Tabs Filter Widget Responsive Settings
Responsive Behaviour
- None
- Swipe to Scroll
- Toggle
Responsive Breakpoint
Set the screen resolution in pixels from when the responsive behaviour will take action.
Open Toggle Icon
The icon for opening the filters.
Close Toggle Icon
The icon for closing the filters.
Toggle Alignment
Set the alignment for the toggle.
Elementor Flag Icons Widget Style Settings
Set the style for the filter items. You can add different styles for different states: Normal, Hover, Selected.
Elementor Tabs Filter Widget Icon Styling Settings
Set the style for the filter icon.
Elementor Tabs Filter Widget Post Count Styling Settings
Set the style for the filter post count.
Elementor Tabs Filter Widget Toggle Styling Settings
Set the style for the filter toggle.
Tabs Filter Widget Design Examples For Elementor
Here are some live use cases for the Tabs Filter widget.
Create Multi-Level Filters
Add filters to multi-source galleries
Add Filters to WooCommerce widgets
Connect two post widgets with the sync feature and filter them together using the Tabs Filter widget.
Thank you for using the Tabs Filter Widget for Elementor! With its dynamic filtering feature, it’s the perfect tool for showcasing posts, products, or portfolio items in an organized and interactive way. Ideal for blogs, online stores, and creative websites, this widget helps visitors quickly find the content they’re interested in with just a click. If you have any questions or need assistance, feel free to reach out. For inspiration and live demos, don’t forget to visit our website.
