1. Home
  2. Docs
  3. Happy Elementor Addons Pro
  4. Premium Widgets
  5. Post Tiles

Post Tiles

Using the Post tiles widget of Happy Addons Pro, you can easily feature your most interesting blog posts in a stylish way.

You just need to follow the basic instructions step by step and you will be up and running in no time.

Using Post Tiles Widget

Step One:

To start the process, first of all, you need to select the widget from the left sidebar of the screen. And then drag it to the design canvas.

Post Tiles Widget

So after adding the widget, you’ll see that all your website’s posts will appear here under any one of the post templates.

post templates

Step Two:

Next, you’ll get three options in the content section. Layout, Query, and Wrapper Link.

Adding Feature

Now click on the layout option. Here you can change the layout according to your own way. So experiment with different layouts to give the best look to showcase your posts.

showcase posts

Under the layout option, you can customize certain things. For example, Meta data, Icon, Batch, Excerpt etc.

Post Tiles Widget

Next, tap on the query. Here you can also do certain things to apply on your post. Such as you can Include or exclude posts, pages or other manual sections.

Categorize the post according to the dates, orders, and also enable featured & sticky posts.

Post Tiles Widget

Step Three:

Well, enough with the structure, now it’s time to stylize the widget. So let’s see how to apply different things within a quick time.

To do that click on the style section. Here you’ll get five options to customize. And they are:- Tiles, Content, Badge, Meta Data, and Title & Excerpt.

Post Tiles Widget

So the first thing option that you’ll see is Tiles. Here you can customize the structure of the design. For example, Tiles gap, Border Type, Width, Border color, Border radius, Box-shadow, Background type & color, etc.

Post Tiles Widget

Next, tap on the content option. Here you can customize content in the design such as its padding, margin, background type, and alignment, etc.

Post Tiles Widget

To customize content badge, tap on it and the options will appear. As you can see we have out some value on it. Change its position, padding, Border, Border type, Border color, Width, Radius and Typography.

Post Tiles Widget

In the Meta Data option, you can customize and edit its spacing, color, and typography.

meta data

Last we have Title & Excerpt to customize. Same way you can also customize certain things such as bottom spacing, typography, text-shadow, text-color, color, Excerpt, & Typography.

Title and excerpt

Note: Title & Excerpt will only apply on the feature image. So this feature will not be applicable to other images.

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.

happy effects

So after finalizing the design, you can publish it. Here’s how the final look will be.

preview

Update in v2.6.1 – 18 October 2022

Advance Post Queries & Query ID integration with this Post Tile 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/tiles-post/{$query_id}", "custom_query_callback", 10, 1 );	
// Filter Posts by the Posts' order in a Smart Post List Widget.
function my_query_by_post_order( $args ) {
	$args['order'] = "DESC";
	return $args;
}
add_filter( "happyaddons/tiles-post/{$query_id}", "my_query_by_post_order", 10, 1 );

That’s it!

Was this article helpful to you? Yes No

How can we help?