1. Home
  2. Docs
  3. Happy Elementor Addons P...
  4. Premium Widgets
  5. Post Grid Widget

Post Grid Widget

Using the Post Grid widget of Happy Addons Pro, you can seamlessly showcase your blog in different stylish ways. Therefore, it will increase your blog standard to the next level and make your blog post more appealing to the visitors.

So let’s see quickly how you can make the best use of this feature.

Using Post Grid Widget

Step one:

Like all other Happy Addons widgets, this widget is also requires only drop-drag to get started initially.

So navigate to your Elementor page, and select the widget from the left side of your screen and drag it on the screen.

Post Grid Widget

After adding the widget, you could see that your posts are already appearing next to the right side of the screen. Also, customizing options are available to edit.

Adding widgets

So move on to the next step.

Step Two:


Next, in the layout section, you’ll be able to use 7 different skins for your posts.

  • Classic (default)
  • Hawai
  • Standard
  • Monastic
  • Stylica
  • Outbox
  • Crossroad
Post grid styles

Here you can also perform certain things to give a better look at your blog post view. For example, you can set the column, activate feature image, badge, select badge taxonomy, hide or show title, title-tag, meta-data, hide or show icon, and enable separator, etc.

Post Grid Widget

In the last part of the layout section, you can also set the excerpt limitation, customize Read more button and choose whether your post will be opened in a new window or not.

Customizing Widgets


This section is the most important part of this feature. You need to carefully select the post type. Here are three types of option for you. Post type – Posts, Pages, Manual Selection. Do make sure that you’re selecting posts, in this case. Because you’re going to show the post as a grid view not pages.

How to edit WordPress Widget

Or if you want to select the post manually, then search for it and then choose the query. After you cancel the manual selection, then it will take its previous place.

Add Queries

Pagination & Load More

Here you’ll get 4 different paginations. Each of these paginations have different features. So make sure you’re using your desired pattern.

Edit WordPress Widget

Interesting Part: While your page is done with the loading, if you click on the button, it will automatically disappear.

How to customize Post Grid Widget

To know how Wrapper link works, check out the link now

Step Three:

So after done with eh primary customization, now its time to stylize the design a bit more. Okay, let’s see how to do it.

To do that tap on the Style Button.

Happy Addons Features

First we have column & row. So you can give the preferable size.

How stylize Elementor Widgets

Then in the Item Box section, you can customize margin, padding, box-shadow, border, border-type, border-radius, height, and width, etc.

How to edit item box

Next tap on the Image option to customize your blog image and modify the look. For example, height, margin options, border, border-type, border-radius, and CSS filters, etc.

Stylize Item Box

To stylize the Badge, tap on the Badge section. And then change its padding, margin, its position, border-type, width, border-radius, typography, badge’s text colors, and more.

Post Grid Widget

Same thing goes for when you’ll stylize Content. Yes, you can certainly change its margin, padding, margin bottom, typography, text color, text margin-padding, and colors, etc.

How to edit Image in Elementor

Next, tap on the Meta to edit your post’s meta information in a stylish way.

Post Grid Widget

Next, click on the Read More button and change its margin, padding, border, border-type, width, border-radius, text, text color, size, etc.

Tutorials Elementor

And in the last part of the Style section, you have Pagination to edit. So just tap on it, and change its margin, padding, border-type, typography, border-radius and text colors.

Important Note:

When you activate the Stylica skin, then one more option will appear for you to edit.

Elementor Customization Process

Then navigate to the Style section, and here you’ll get one more option which is Divider Shape

Post Grid Widget

So here is how you can apply the Divider Shape to your design and give it a splendid look. Also, you can increase the amount by height, width, and colors.

Divide Shape feature

Step Four:

If you want to add motion effects, happy effectsbackground or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor. Give a read to this Document to know more about Advanced features and its uses.

Advanced Post Grid Feature

So finally after done with the whole process, your design will be like the following screenshot.

Final preview

Update in v2.6.1 – 18 October 2022

Advance Post Queries & Query ID integration with this Post Grid Widgets is now available in this version of v2.6.1.

Go to your function PHP file. Then add this below code.

function custom_query_callback( $args ) {
	// Modify the posts query here
	return $args;
add_filter( "happyaddons/post-grid/{$query_id}", "custom_query_callback", 10, 1 );		
// Filter Posts by the Posts' order in a Post Grid Widget.
function my_query_by_post_order( $args ) {
	$args['order'] = "DESC";
	return $args;
add_filter( "happyaddons/post-grid/{$query_id}", "my_query_by_post_order", 10, 1 );		

That’s It!

How can we help?