Table Of Contents

Post Grid Tab widget

How to Use Post Grid Tab Widget

The Post Grid Tab widget is one of the most unique addition to Element Pack as this is a modern post type widget with grid type layouts. Taking the support of the widget, you might show your post Grid and Tab wise.

So, Let’s dive into the doc.

To Insert Widget

inserting the Post Grid Tab widget

Just drag the Post Grid Tab widget from the menu to the inside of your page and start customizing it.

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 in designing the tabs grid.

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


postgridtab 2 2 - BdThemes
postgridtab 3 1 - BdThemes

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.


postgridtab 4 - BdThemes

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 wisely and also with ascending or descending order.


postgridtab 5 - BdThemes

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 details as you can see in the screenshot. And this is the Post Grid Tab widget.

Style Tab

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

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

Let’s have a look.


postgridtab style 1 - BdThemes

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

postgridtab style 2 - BdThemes

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

postgridtab style 3 - BdThemes

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 as Normal and Hover. And the modes will let you add Text Color, Background Color, and Animation.

Close Button

postgridtab style 4 - BdThemes

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 for the Post Grid Tab widget.


postgridtab style 5 - BdThemes

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 the Post Grid Tab widget is by Element Pack is 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.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.