Sorting is a powerful way to improve content organization and usability on your Elementor website. With the Sorting Filter widget, you can allow users to easily reorder posts when connected with any of our Post widgets. Whether sorting by date, title, popularity, or custom parameters, this feature enhances navigation and helps visitors quickly find the content that matters most.
Step #1: Install and activate Unlimited Elements
Before getting started, you will need to purchase Unlimited Elements Pro from the link below to access the Sorting Filter widget.
Then follow these steps:
Step #2: Adding the Sorting Filter widget to your Elementor website
To add sorting on your Elementor website, install the Sorting Filter widget from the Unlimited Elements Widget library.
Step #3: Add Unlimited Timeline widget to your Elementor page
The Sorting Filter widget works with any post widget and any post type. In this guide, we are using the Unlimited Timeline widget. Add the widget and design it according to your layout.
Source Settings
Navigate to the Source section and select the desired item source. In this tutorial, we will use “Posts” as the item source. Add the “Title Source,” “Subtitle Source,” and other fields according to your design layout.
Posts Query Settings
Navigate to the Post Query section. We can select from a variety of post types, whether it’s regular posts, pages, products, or custom post types. We can even select multiple post types in one display.
Posts Source
Select the posts source to either Custom Posts, Current Query Posts, Related Posts or Manual Selection.
Post Types
Select the post type, we can choose custom post type as well. We have all the options to Include or Exclude the post terms if needed.
Max Posts
Set the maximum number of posts to display.
Order
Select the posts order and order direction accordingly.
Posts Filtering Options
Enable the post filtering functionality to connect it with the sorting filter. This adds an AJAX-based faceted filtering system, allowing you to seamlessly create diverse layouts with ease. You can apply multiple filters to maintain a fast, dynamic filtering experience tailored to your website’s needs.
Enable Post Filtering
When turned on, you can use all the post filters widgets like tabs filter, load more etc with this grid.
Filters Behaviour
Select the filter behaviour to either Ajax, Ajax and URL Change or Ajax, URL Change and Back Button.
Group
Select the group, and allow filtering group of widgets at once.
Step #4: Add the Sorting Filter in Elementor page
Now, in the Elementor editor, find the Sorting Filter widget and drag it to the desired part of your page.
General Settings
Show Order By Label
Show or hide the order by label.
Order By Label Text
Type text to show as order by label.
Show Order Direction Label
Show or hide the order direction label.
Order Direction Label Text
Type text to show as order direction label.
Custom Indicator Icon
Show/Hide the custom indicator icon.
Indicator Icon
Choose an icon to display as indicator icon.
Ascending Text
Type text for ascending order.
Descending Text
Type text for descending order.
Filter Settings
Fields Settings
Wrapping it Up!
By adding Sorting to your Elementor layout, you give users more control over how they browse your content. When combined with Post widgets, it creates a more dynamic and user-friendly experience without requiring any custom code. Implementing a Sorting Filter is a simple upgrade that can significantly improve content discovery and overall engagement on your website.