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
Just drag the Post Grid Tab widget from the menu to the inside of your page and start customizing it.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.