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

Smart Post List

Displaying content on a website is easier than ever with the new Smart Post List widget of Happy Elementor Addons Pro.

All you need to do is follow the instruction below and implement it side-by-side.

Let’s get started:-

How To Utilize Smart Post List Widget

Step One:

First of all, you need to select the widget and drag it to the design canvas.

Smart Post List Widget

So if you have enough posts on you website, they will appear here automatically. That means you just need to customize the step by step.

Smart Post List Widget

Step Two:

First you will get the layout option to customize. If you want to show the top bar in the bottom, then toggle it on or off. Same goes for the first post feature image.

Remember: Only the post will appear as a featured image. Others will remain the same.

Smart Post List Widget

Here you need to be careful about certain things. If you want to get a better view, we’ll recommend you to keep column 2 or 3. Otherwise, it will not look good. Here’s how:-

Final View

Now tap on the Top Bar. Here you can show the top bar above the design, or you can turn it of. Even you can give it a name & heading also.

Smart Post List Widget

Now the most important part comes. Here you need to very careful on certain things while adding filters.

In the filter, you’ll have two options. Drop down and inline. If you choose dropdown, then all the categories that you have created before will automatically show one by one here.

Smart Post List Widget

And if you choose inline, all categories will show together. Also, you can just select the specific item from the list to show on the top bar.

Smart Post List Widget

Next, tap on the featured post button, then all the related options will show up. Here you can put the content inside the design or outside the design. Set up badge taxonomy, activate title, title tag, active meta tag, author icon, date icon, comment icon, excerpt length, and align them easily.

Features post

Next, we have list post to customize. Here you’ll get a few items to customize. For example, title tag, image & size, meta tag, author icon, and alignment, etc.

Post List

Now tap on the Query button. You can set the post type here, also include & exclude the post. Additionally, you can categorize date, order number, activate or deactivate the feature image & sticky post.

queries

Step Three:

Now it’s time to stylize the design. To do that click on the style option. And you can give it different in every individual portion.

style

First we have layout to stylize. Here you can slightly change their position through column gap, row gap, and post list height.

post list

In the top section, you can change the Margin, Padding, Background Type, Shadow, Border Type, and Radius type.

Smart Post List Widget

Same way you can also change Top Bar Title design. For example, you can give it a Border, colorize it, add margin & padding, Border Color, and also Title typography, etc.

Smart Post List Widget

After the Top bar, you can also apply some changes in the Filter menu. Such as their color, background color, inner color, dropdown color, margin, padding, typography, text color and so on. So experiment yourself on these options.

Smart Post List Widget

Similarly, you can repeat the process for the navigation also. Colorize it, change the size, background and spacing in between them.

Smart Post List Widget

To give a better look over the featured image, you can also customize some settings according to your own way. In this case, you should apply the color and mix them up in the right way.

So be careful while adding colors; let’s have a look at the following example.

Smart Post List Widget

So lastly, we have badge to stylize. Add colors in the text, background and resize the shape.

Smart Post List Widget

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.

Smart Post List Widget

So finalizing the design, click on the Publish button. And your design will look like:-

Smart Post List Widget

Update in v2.6.1 – 18 October 2022

Advance Post Queries & Query ID integration with this Smart Post List 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/smart-post-list/{$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/smart-post-list/{$query_id}", "my_query_by_post_order", 10, 1 );	

That’s it!

Was this article helpful to you? Yes No

How can we help?