fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

wordpress-black-friday-deals
toggle-button-for-elementor
elementor-widget-library

Post Tabs for Elementor

The “Post Tabs Widget” gives you a great way to showcase posts in a tabs layout. You can turn on or off any part of the post tabs to make them look exactly how you want and suit your website needs. Post tabs can even be used to show your Woocommerce products in your Elementor website. It also supports advanced options such as Remote Connection and syncing with other widgets.

 

Let’s look at each of the options in the “Post Tabs Widget” below.

Install Post Tabs Widget for Elementor #

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

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

General Settings #

1

Post Image Size

Select the image size from given options.

  • Medium Large
  • Large
  • Medium
  • Thumbnail
  • Full Size
  • Woocommerce Thumbnail
  • Woocommerce Single
  • Wocommerce Gallery Thumbnail
  • Shop Catalog
  • Shop Single
  • Shop Thumbnail
2

Alignment

Set the alignment of post tabs items.

  • Left 
  • Center
  • Right
3

Direction

Set the direction of post items to display in post tabs.

  • ltr- Left to Right
  • rtl- Right to Left
4

Button Text

Type the custom text for button.

5

Intro Number of Characters

Choose the number of characters to display as intro in post tabs.

6

Layout

Select the layout from given below options.

  • Horizontal
  • Vertical
7

Scroll to Head

Turn on or off the scroll to head option for different devices.

  • Off
  • Desktop
  • Mobile
  • Desktop+Mobile

Layout Settings #

Show or hide elements in Post Tabs.

1

Show Post Image

Show/Hide the post image in post tabs.

2

Show Post Title

Show/Hide the post title of post tabs.

3

Show Post Date

Show/Hide post date in the post.

4

Show Post Intro Text

Show/Hide the intro text of posts.

5

Show Post Full Content

Turning on will display the full content of posts.

6

Show Post Button

Show/Hide the post button.

Connected Widgets Settings #

1

Enable Remote Connection

This enables the remote connection functionality for this widget.
2

Visit Name for Connection

Provide a name for the connection that other widgets will use to connect and control this widget.

3

Sync

You can connect two item-based widgets and sync them.
4

Sync Group

Choose the same group for two or more item-based widgets so they can sync together.

Post Query Setting #

Select the exact posts you want to show on your Post Tabs.

1

Posts Source

Choose any of the below options for your post source.

  • Current Query Post
  • Custom Posts
  • Related Posts
  • Manual Selection
2

Post Types

Choose the type of post you want to display.

3

Include By

Include the posts from different options given below

  • Include Sticky Posts
  • Get Only Sticky Posts
  • Author
  • Date
  • Post Parent
  • Post Meta
  • Most Viewed
  • ID's from PHP function
  • ID's from Post Meta
  • ID's from Dynamic Field
4

Include By Terms

Choose specific posts that you would like to include from your selection by adding rules.

  • Include By Terms Relation
  • Include Terms Children
5

Exclude By

Choose specific posts that you would like to exclude from your selection by adding rules.

  • Terms
  • Current Posts
  • Author
  • Post Without Featured Image
  • Posts with current category
  • Posts with current tags
  • Offset
  • Avoid Duplicates
  • ID's from Dynamic Field

To know more about post query setting, please visit our article on Advanced Post Selection

Post Pagination and Ajax Setting #

1

Pagination

Display the pagination for your post grid

  • None
  • Numbers
  • Using Pagination Widget
2

Enable Post Filtering

When turned on you can use all the post-filter widgets like tab filters, load more and infinite scroll.

3

Filters Behaviour

  • Ajax
  • Ajax and URL change - Will change the URL each time the filter changes and add the possibility to use browser back navigation.

Learn more about the diffrent Ajax filters that can work with the Post Tabs in the links bellow:

Post Tabs Widget Styling #

Every aspect of the widget’s design can be controlled through different styling options. 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.

Tab Container Styling #

Set the tab container radius, padding and border.

Tab Bar Styling #

In this section, style the tab bar background, padding, alignment, and width.

Tab Item Styling #

You can set the typography, radius, padding, margin, background, and color of tab items.

Tab Item Hover Styling #

In this section, set the tab background, item color, and border on hover.

Tab Item Active Styling #

Style the tab active background, active color, and active border.

Content Styling #

Here, you can style the content background, padding, spacing, and radius.

Post Image Styling #

You can style the post image radius, height, and image border.

Post Title Styling #

Set the color, typography, and spacing of post title.

Post Date Styling #

Style the post date text color, typography, and spacing.

Post Text Styling #

You can style the post text color, typography, and spacing.

Post Button Styling #

This section lets you set the padding, radius, color, spacing and border of post button.

Usage Examples #

Here are some live use cases for the Post Tabs Widget.

Post Tabs with vertical layout.

Video Overview #

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!