How to Use Post Grid Tab Widget

How to Use Post Grid Tab Widget

From the title, you can guess what is the widget about. Taking the support of the widget, you might show your post Grid and Tab wise. Here, below, I’m going to write a doc so that you shouldn’t suffer from the Post Grid Tab widget.

So, Let’s dive into the doc.

To Insert Widget

Content Tab

Using the Content tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.

Now, I’m going to show the sections of the tab and how they work behind the widget.


Simply, go to the Content tab > Layout.

In this section, you can adjust the Columns number, Post Limit, and Item Height. In addition, you might select Image or Write and Image Size. Using the switcher button Content Reverse, you’ll be able to present the post reversely. Look at the picture above.


This section works for setting the source location of data that you need to display by the reference like Author, Categories, Tags, and Formats. The references can be different in accordance with the source location. Read more

For example, 

A.  Go to Source ➤ next select data location( as posts, pages, etc.) 

B. Then, write the author’s name in the Author field. Similarly, in the Categories, Tags, and Formats field.

C. On the other hand, select categories from the Categories field.

D. Order By and Order controls are here to arrange the data you want to display through Random, Title, Date, or Menu order wise and also with ascending or descending order.


Simply, go to the Content Tab > Additional > work with the controls and hit on the yes/no switcher button.

This section will allow you to manage Title, Title HTML Tag, Author, Date, Comments, Category, Post Image, Excerpt, Excerpt Length, Read More, Close Button, and Arrows.

More, importantly, if you click on any image of the post, the post will reveal with details as you can see in the screenshot. And this is the Post Grid Tab.

Style Tab

Now, let’s work with Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the tab in Elementor will always give you a fantastic experience.

Let’s have a look.


Go to the Style tab > Layout > check all the controls.

Firstly, here, in this section, you can adjust padding, border width and color simply using the scroll bar one by one. Mostly, by the 3rd scroll bar, you can fix what post tab will be active.

In addition, you might add Active Item and Content Background Color as well as Item Border Color. Keep your eyes on the picture above.

Title, Meta, Excerpt

Go to the Style tab > Title, Meta, Excerpt one by one.

In these sections, you’ll be able to set normal and hover text color, spacing, alignment, and typography. But, in Meta, you can add Divider color Read more about Typography.

Read More

Follow the flow, Style tab > Read More.

In this section, you will be able to adjust Border Type and Radius, Box Shadow, Padding, Spacing, and Typography.

But, you’ll find two modes such as Normal and Hover. And the modes will let you add Text Color, Background Color, and Animation.

Close Button

In this section, you will be able to adjust Border Type and Radius, Box Shadow, and Padding.

The modes (Normal and Hover) will let you add Text Color, Background Color, and Animation.


Lastly, come to the Style tab > Arrows >then in the Normal mode, add Color, Background Color, Border Type and Radius, Box Shadow and padding.

In terms of Hover mode, you can only add Color and Background Color.

Video Assist

At the end of this doc, I hope you’ve noticed what is Post Grid Tab widget by Element Pack and how it works for you. Watch the video inserted above. If you want to discover what more is possible to do using this one, you can visit the demo page.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Copyright © 2022 BdThemes. All Rights Reserved.