Elementor Posts List Tutorial. How to List Blog Posts Attractively?

Elementor Posts List Tutorial. How to List Blog Posts Attractively?

Attractive design and smart presentation
are crucial if you want your visitors to come back to your website. In this video
I’m gonna show you three ways you can showcase content on your pages. We’re
gonna create two post lists and one video playlist. To create these lists,
you’ll need JetBlog plugin which you can get on templatemonster.com. In this
video, I’m using IMPERION WordPress theme which you can also get on templatemonster.com and which goes with JetBlog plugin included. It also has other JetElements plugins which enhance the functionality and the power of this
WordPress theme. First, we are going to create a post list in a Huffington Post
style. I have already designed this post list
and now I’m gonna show you how you can make it on your own. First, you need to go
to the page where you want your post to be displayed and then go to edit with
Elementor on the Elementor panel. If you already have JetBlog plug-in installed.
You’re gonna see Smart Post List. Choose it and drag it to your new section. As I have already pre-designed this post list, I’m gonna show you what settings you
need to change in order to achieve the same result. Right here, in the General
tab, put the widget title which says “In the news” and put the title tag to H2. Untoggle the mark ‘First post at featured’ and set the columns number to 1.
Set the rows number to 4, and toggle this ‘Show Post’ thumbnail. Set post image size to medium and post image position to left. Put post image
max width to 17, and put excerpt length to 30. Put meta position to ‘After excerpt’
and ‘Show Post Author.’ Remove the icon and remove the post date. In the post style
tab, we will need to change three things: the heading, the post, and the post meta.
Let’s go to the heading and set the background type to ‘Classic,’ put the color to ‘Black’ and body type to ‘None’. Leave the border radius at 0, put the
padding to 4 on the left and margin to 500 on the right and on the left. Choose
the title color and set it to white. And, in typography setting set the font size to 24 and font weight to 800, and put the style as ‘Italic’. Set the padding to 10 on the
left and leave margin as it is. That’s it here. Now, let’s go to the post settings.
Set the padding to 10 on the top and 10 at the bottom, and the body type to ‘Solid’. Also, make sure that you unlink the
values, so they don’t. If you link them they will be all the same on all the
sides. But we don’t want that. So, unlink them and put the values that you want.
Now, in the ‘Post title’, put the color to ‘Black’ and the typography to
‘Ariel’ family, the size to 27 and the font weight to 600. Put the letter spacing as
1.1. In the post text, put the color to ‘Black’ and change the topography settings. Set the size to 15 and the weight to 400. Now, in Post meta, you need to change the links color to Red and and that’s pretty much it. We have achieved the same result as they have on Huffington Post. Now, let’s see how you can create this
beautiful post presentation. To do this, you will need Smart Posts Tiles that you
can find in JetElements section. As I have already pre-designed it, I’ll just
show you the values you need to change to achieve the same result. In the layout
section, choose this layout which consists of five posts. Put the minimum
high to 550. You need to toggle Post Method to ‘Show’ and ‘Show the Post Date’. Set the date icon to clock o and toggle the ‘Show post comments’. Now, in the Style tab in the box section, you will need to set the gap between boxes to 3. And if you
want to set the text color to white, it may be not visible on some pictures. So,
if sometimes you use bright pictures it is better to set Box Overlay. Choose the
grey color and put the Opacity somewhere to 30. Now, in the content tab,
choose the color as ‘White’ and the color hover to ‘Black’. In typography section,
make the following changes: set the size to 33 and the way to 500. So transform to
uppercase and leave everything else as it is. Set the margin to 50 on the left
and leave everything else as it is. In the meta section, all you need to do is set meta icon size to 14 and meta icon to 10. Choose the text color as ‘White’ and
the alignment to ‘Center’. The divider gap should be 6 and then you are pretty much
done. To create these good-looking YouTube videos playlist, all you need to have is
JetBlog plugin for Elementor that you can get on templatemonster.com calm. If you already have it installed, go to your Elementor settings and then find in JetElements section ->a Video Playlist. Put it to a new section on your page and you’re gonna see the following settings. Here you can add the videos that you
want to be displayed in your playlist. Adding items is pretty simple: you just
press ‘Add Item’ and then you go and add the item title and the URL of the video
that you want to show. I already have a playlist here, so I’m just gonna show you
the settings you need to change to achieve the same result. Now, on the same Content Tab, go to settings and set the playlist height to 450, the thumbnail
orientation is ‘Vertical’ and leave it as it is. And leave the thumbnail position as ‘Right’. Set the thumbnail list width to 40 and toggle the ‘Show Item Number and
Status’. Also, toggle ‘Show Item Duration’. Now, you need to do a couple changes in
thumbnail styles. Leave the Body Type as ‘None’, but set the ‘Thumbnail Image Gap’ to 10. Now, go to Title Typography and make the following changes: set the
size to 15, and the font weight to 500. Set the Line Height as 25. In the Duration
section, leave everything as it is except Title Color and Duration Color.
Set them both as ‘Black’. So, now you know how to create three
beautiful content showcase styles. And I remind you that the plugin that you
need to do all this is called JetBlog, and you can get it on templatemonster.com Thank you for watching! I hope you liked
this video if you did, leave your thumbs up and subscribe to our channel!

14 thoughts on “Elementor Posts List Tutorial. How to List Blog Posts Attractively?

  1. I just created the post list, however, the thumbnail pictures are not showing. How can I fix this issue?

  2. i want images to show up on blog posts. not sure if this is possible on free version of elementor due to lack of info form the plugin maker.

  3. Excellent demonstration of the way JetBlog can format your blog posts. You've given me some ideas I can definitely use. Thanks!

  4. DO NOT BUY THIS! It's an absolutely terribly clunky and poorly coded piece of crap. You have control over the layout and look but there is almost 0 customizability when it comes to the content. There is no way for you to control What appears where or what category will appear. It ruins pagination. You are better off using just a generic free post manager. It is absolutely ridiculous spending money on something tha takes absolutely no account of what a blogger would use this for. It's built by software developers for software developers and not for bloggers. DO NOT BUY THIS!!!

  5. Hey the layout is nice, but on smartphone it looks like shit, and I don't find configurations for it. What do you say to this?

  6. Can you do a basic version of this? The kind of content for those of us who are not web developers, but we like our stuff to look nice? Use a completely free, basic template and show us how to do this without the need to download anything extra.

Leave a Reply

Your email address will not be published. Required fields are marked *