If you’re looking for a clean and interactive way to present your blog content, displaying Posts in Tabs is a smart solution. Using the Post Tabs widget, you can neatly organize your posts by category, tag, or any custom taxonomy—making it easier for visitors to find what they’re interested in. This method not only improves navigation but also enhances the overall look and feel of your WordPress site.
Popular Use Cases for Displaying Posts in Tabs on an Elementor Website
News & Magazine Websites
Display articles by categories like Politics, Tech, or Sports using tabs. It keeps content organized and makes it easier for readers to explore trending topics.
Personal or Niche Blogs
Organize posts into tabs such as Travel, Food, or Lifestyle. It helps readers find specific content quickly and improves the overall blog navigation experience.
Educational Websites
Use tabs to separate content by subjects or learning levels. This format makes it easier for students to find relevant materials based on their interests.
E-commerce Websites with a Blog
Use tabs like Product Guides, Tutorials, or Reviews to help customers explore useful content, boosting both engagement and purchasing decisions on your store.
Health & Wellness Websites
Organize posts into tabs such as Fitness, Nutrition, or Mindfulness. It helps readers find focused content aligned with their personal wellness goals or interests.
Business or Agency Websites
Showcase blog content in tabs like Case Studies, News, or Insights. This layout gives a clean, professional look and improves content discoverability for visitors.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Post Tabs widget to your Elementor website
To display posts in tabs, install the Post Tabs widget from the Unlimited Elements Widget library.
Go to Unlimited Elements in the WordPress Dashboard
Search for the "Post Tabs"
Hover over the widget and click install
Step #3: Add Post Tabs widget to your Elementor page
Now, in the Elementor editor, Find the Post Tabs widget and drag it to the desired part of your page.
Posts Query Settings
In the Post Query selection, 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.
Query ID (Pro)
Give your Query unique ID to been able to filter it in server side using add_filter() function. This feature exists in a PRO Version only.
General Settings
Post Image Size
Select the post image size accordingly to the layout.
Alignment
Set the alignment of post tabs items.
- Left
- Center
- Right
Direction
Set the direction of post items to display in post tabs.
- ltr- Left to Right
- rtl- Right to Left
Button Text
Type the custom text for button.
Intro Number of Characters
Choose the number of characters to display as intro in post tabs.
Layout
Select the layout from given below options.
- Horizontal
- Vertical (Pro)
Make Tabs Equal
Stretch to full width and make equal sizes.
Scroll to Head
Turn on or off the scroll to head option for different devices.
- Off
- Desktop (Pro)
- Mobile (Pro)
- Desktop+Mobile (Pro)
Set Url Hash (Pro Feature)
Allow to come back to the active tab by url.
Text Tag Wrapper
Select the text tag wrapper accordingly.
Close Active Tab On Click (Pro Feature)
Enable this option to close active tab on click.
Button Behavior
Select the button behavior from the following options:
- Post Link
- Dynamic Post Popup
- Disable Link
- Link from Meta Field
Link Type
Select the link type from the following options:
- Same Window
- New Window
Layout Settings
Show Post Image
Show/Hide the post image in post tabs.
Image Layout
Select the image layout:
- On Top
- On Side
Show Post Title
Show/Hide the post title of post tabs.
Show Post Date
Show/Hide post date in the post.
Show Time Ago (Pro Feature)
Show/Hide time ago in the post.
Show Post Intro Text
Show/Hide the intro text of posts.
Show Post Full Content
Turning on will display the full content of posts.
Show Post Button
Show/Hide the post button.
Fallback Image
Select a fallback image to display when a post has no featured image.
Tabs Settings
Tab Title Source
Select the tab title source from the following options:
- Post Title
- Custom Text
- Post Date
- Post Intro
- Custom Field
Show Increment
Enable this option to show increment in post tabs.
Responsive Settings
Responsive Breakpoint
This will turn tabs into accordion under a certain screen resolution or enable Swipe To Scroll Mode.
Breakpoint (px)
Screen resolution when tabs become accordion for responsive support.
Accordion Expand Icon
Choose the accordion expand icon accordingly.
Accordion Collapse Icon
Choose the accordion collapse icon.
Start Collapsed
Select the start collapsed from the following options:
- None
- Desktop + Mobile
- Mobile Only
Show Increment
Enable this option to show increment in post tabs.
Additional Data Settings
Debug Meta Fields
Show/Hide all meta fields with content for debug purposes.
Show Author
Show/Hide the author of the post.
Show Comments
Show/Hide the post comments number.
Show Custom Meta (Pro)
Display custom metadata, ACF (advanced custom fields) in the post tabs.
- Show custom meta
- Select meta filed name
- Add custom text before metadata
- Choose custom meta icon
Connected Widgets Settings
Enable Remote Connection
Widget Name for Connection
Choose this to "Auto Detectable", so it will automatically detect the remote widgets.
Sync
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Posts Pagination and Filtering Options
Add the AJAX-based faceted filter system, seamlessly empowering you to craft diverse layouts with ease. Take control by applying multiple filters, ensuring a super-fast and dynamic filtering experience tailored to your website needs.
Pagination
Select the pagination to show Numbers, Using Pagination Widget or None.
Enable Post Filtering
When turned on, you can use all the post filters widgets like tabs filter, load more etc with this widget.
Filters Behaviour
Select the filter behaviour:
- Ajax
- Ajax and URL Change
- Ajax, URL Change and Back Button
Group
Select the group, and allow filtering group of widgets at once.
Disable Third Party Modifications
Disable other themes or plugins hooks and their code so they will not influence on the query.
Wrapping it Up!
And there you have it! Displaying Posts in Tabs with Elementor is a simple yet effective way to improve content organization and boost user engagement. Whether you’re highlighting recent posts, popular articles, or different blog categories, the tabbed layout offers a sleek solution. Start using the Post Tabs widget today and give your WordPress blog a modern, interactive touch.
