fbpx

Tabs Filter

The Tabs Filter widget will allow website visitors to filter posts dynamically on the page by clicking the different tabs. Each time a user will click on a tab the post widget will filter accordingly and show the posts related to the term or tag selected. 

 

The Tabs filter is a universal solution which can connect to any post widget inside of Unlimited Elements widget library including Post & Product Gallery widgets and Dynamic Loop widgets. Our filter solution works also with two or more synced widgets using the connect widget settings.

 

Add Post Widget to Page #

Before starting with the Tabs Filter you will need to add a post widget to the page. For example you can add: Post Grid, Post List, WooCommerce Grid and many more supported widgets. 

post grid

Post Widget - Post Query #

After you have added the post widget to the page you need to setup the post query to show whatever initial posts you want to show when the page is loaded. If you are not familiar with post query you can visit our documentation for step by step guidance on how to show the posts you want in your post widget.

Post Widget Ajax #

Navigate to the “Posts Pagination and Ajax” and enable the Post Filtering option. Now you can choose the Filter Behaviour:

  1. Ajax
  2. Ajax with URL change

Add Tabs Filter to Page #

This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Tabs Filter”
  3. Hover over the widget in the search results and click install
  4. Add your “Tabs Filter” widget to any Elementor Page

Tabs Filter Settings #

1
Add First Item - All

Resets the post widget to its initial query and adds an ALL item in the tabs filter. 

2
First Item Text

The text for the first "All" tab

3
Sync to Post Widget After Load

The filter will show only terms that are included in the post widget query.

4
First Tab Selected

Determine if the first tab of the filter will be selected by default on page load.

5
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.

6
Filter Role
  1. Single - When there are no children filters.
  2. Main - Set filter to be parent filter of children filters.
  3. 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:

Terms Selection #

Determine which terms to show in your filter.

1
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.

2
Select Taxanomy

Select what kind of taxonomy yo want to filter:

  1.  Category
  2. Tags
3
Include By
  1. Specific terms
  2. Children of
  3. Children of current term
  4. By search text
  5. Only childless
  6. Not a child of another term
  7. Term meta
4
Exclude By
  1. Specific Terms
  2. Current Term (for archive only)
  3. Hide Empty Terms
5
Max Number of Terms

Set the maximum number of terms to show in your filter.

6
Order By
  1. Name
  2. Slug
  3. Term Group
  4. Term ID
  5. Description
  6. Parent
  7. Count (number of posts associated)
  8. Include (specific terms order)
  9. Meta value
  10. Meta value (numeric)
7
Order Direction
  1. Accending
  2. Descending 
8
Show Query Debug

Show the query for debugging purposes. Don't forget to turn it off before the page is published.

Tabs Filter Layout Settings #

1
Show Icon

Add an icon to the tabs.

2
Icon

Select an icon for the filter items.

3
Layout
  1. Flex - Inline
  2. Grid - Columns
4
Gap

Space between tabs

5
Show Number of Posts

Shows the number of posts assigned to each tab.

6
Show Number on "All"

Shows the number on "ALL" filter tab.

7
Show Image

Show an image for each filter item.

8
Image Meta Field

Type in the meta name of the image field you want to show.

9
Show Debug Meta Fields

Show related meta field names you can use.

Tabs Filter Loader Settings #

1
Loader Type
  1. Grayed Tabs
  2. Hidden Tabs
2
Limit Num Tabs

Limit the number of tabs shown when the page is loading.

Tabs Filter Responsive Settings #

1
Responsive Behaviour
  1. None
  2. Swipe to Scroll
  3. Toggle
2
Responsive Breakpoint

Set the screen resolution in pixels from when the responsive behaviour will take action.

3
Open Toggle Icon

The icon for opening the filters.

4
Close Toggle Icon

The icon for closing the filters.

5
Toggle Alignment

Set the alignment for the toggle.

Tabs Filter Item Styling #

Set the style for the filter items. You can add different styles for different states: Normal, Hover, Selected.

Tabs Filter Icon Styling #

Set the style for the filter icon. 

Tabs Filter Post Count Styling #

Set the style for the filter post count. 

Tabs Filter Toggle Styling #

Set the style for the filter toggle. 

Multi-Level Filter Tutorial #

Video Overview #

Usage Example #

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.

Widgets That Work with Tabs Filter Widget #

Thank you for reading 🙂 To see the Tabs Filter in action you can visit our live demo in the link below:

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!