How to Design & Customize Blog Posts in WordPress Using Elementor
Articles Blog

How to Design & Customize Blog Posts in WordPress Using Elementor

August 27, 2019


– [Instructor] Hey YouTubers,
this is Noah from Elementor. Today I’ll be teaching you about
our fantastic Posts Widget. With this widget, you could
display on your page any, and I repeat, any custom post
type in numerous layouts, a very important and practical widget, so let’s get started. First, we’ll search for the widget and drag it in and once
it’s dragged into place, you will see the Content
tab and the Style tab. In the Content area, you have full control over the Layout and the
Query of the widgets. First, in the Layout
area, we have the Columns, where you could set the amount of columns displayed in the widget, you could choose between one and six, so say I choose two, two columns or four, etc. Next we have Post Count, where
you could set the amount, the exact amount of posts to
be displayed in the widget. If I insert for instance, one,
you will see only one post, or 20, you’ll see 20 posts, etc. Then, we have Image
Position, where you could set the position of the image
in relative to the contents. We have Top, as in above the contents, Left, Right or none at all. Then, we have the Image
Size, where you could set the size of the image from Thumbnail to Full. We have Image Ratio,
where you could set here the exact ratio of the images
displayed in the widget and then we have the Image Width, where you could set the
exact width of the images displayed in the widget. Now, note that you could set
it in pixels or percentage. Next, we have the Title
and Excerpt setting for the widgets, so for
Title, you could set whether to show it or
hide it by clicking here. If you choose to show it, you have the following
setting, Title HTML tag, where you could set the
HTML tag for the title as a heading, div, span or regular text. Same goes for the
Excerpt, you could choose whether to show it or
hide it by clicking here. If you choose to show it, you have the following
setting, Excerpt Length, where you could set the
exact amount of words that will be displayed
in the widget’s excerpt. The default is set as 25,
I could set it as five or 10, see how it changes, etc. Now, next we have the Metadata, where here you could select the metadata to be displayed in the widgets. A click on this field here
opens the list of options, so you have Author,
Date, Time or Comments. You could add it here and you could remove it by clicking here. Next, you have the Separator Between, where you could insert
here the exact separator that you want displayed between
the metadata, right here. Say, I only give it one slash, you’ll see here how it changes. Next, we have the Read More setting, where you could also
choose whether to show it or hide it by clicking here
and if you choose to show it, you have the following
setting, Read More Text, where you could insert the exact text that will be displayed right here in the Read More area of the widgets. Say for example, I delete this, see how it changes here. Those were the Layout
settings for the widgets. We’ll move on to the Query
settings of the widgets. First here, we have the Source, where you could select the source from which the widget
will display the contents. We have Posts, Pages, Products, Galleries and Manual Selection,
which we’ll go over soon. After the Source settings,
we have the Filter settings. First, we have Categories, I could filter the posts
displayed by categories. For instance, if I have a fashion category in my website and I insert fashion, see how only the fashion
posts are displayed and same goes for tags. For instance, if I have a
devices tag on my website and I insert devices, see how only the devices posts
are displayed in the widgets. Aside for these two filters, we also have the Authors Filter,
which is extremely helpful for those of you building
a website with many authors and want to display only
a specific author’s posts. A click here opens the list
of authors on my website. Now, I’ll just go back and show you the Source, Manual Selection option. Here, as it sounds, I
could manually insert the exact post or posts
that I want to display. For example, I have a post
called Tips for Vacation. If I insert this, it should automatically
be displayed in the list and I click on it, see how only the Tips for
Vacation post is displayed. That was the Manual
Selection Source option. Next, we have the Advanced options. Here we have Order By, where
you could set the order in which they’re displayed
as in Date, Title, Menu Order or Randomized. Then, we have the Order,
where you could set as Ascending or Descending. You have Offset, where you can insert the amount of posts to be skipped over. For instance, if you insert
two, the widget will begin its display starting from the third post. Now that we went over
all the Content options for the Posts Widget, we’ll
head over to the Style area. Here, we have control
over the Layout, Image and Content Style options in the widgets. In the Layout, we have
first the Column Gap, where you could set the exact gap between the columns in the widgets. We have Row Gap, where you could set the exact gap between
the rows in the widgets. We have Alignment, where you could set the alignment of the content
in the widget as Left, Center or Right. Next, we have the Image Style options, where you could set the Border Radius as pixels or percentage. Say we give it 100, or 50, etc. We have Spacing, where you could set the exact spacing between the image and the content in the widgets. Those were the Layout
and Image Style options. Next for the Content Style options, we have the Title Color,
where you could set the Color of the titles and Topography, which you
could set to Activated. If you do, you have the
standard Topography options, such as Size, Font Family, Weight, Transform, Style, Line Height and Letter Spacing. After Topography, we
have the Title Spacing, where you could set the space between the title and the rest of the contents. Then, we have the Meta
Color, where you could set the color of the metadata right here, say pink. We have the Meta Separator Color, where you could set the separator’s color and Topography as well, which opens for you the Topography settings. Meta Spacing, to set the spacing between the metadata and
the rest of the contents. Then, we have the Excerpt Color. We could set the color of the excerpt and its Topography and Excerpt Spacing between the excerpt
and the Read More text. Last, but not least, we
have the Read More Color, you could set the color of the Read More and its Topography as well. Those were the Style options
for the Posts Widget. Now that we went over the widget’s basics, I’ll just show you a few quick examples for any displays you could set with it. We’ll scroll down and in
this first section here, we have a Posts Widget. Now here, first for the Image Width, I set a width of say, 50 or 49 and for Style Image, I set the Border Radius as a 100 pixels, which made it completely rounded. Say I were to set it as 50,
it would be a bit rounded, but I set it as a 100. For the Layout in the Style options, for Alignment I set it as Center, unlike Left or Right, I centerized it. For the next section, we have a really nice-looking section with a grid like display
of the Posts Widget. How did we do this? In the Content area,
Layout, we set the Columns as three Post Count, also as three and the Image Ratio, we played around with it a bit, which you could see. Image Width, we gave it Full Width. We played a bit around with the colors and topography of the content itself. The section, we gave it
a nice background color. In this last section, we have a more list
display for the widget. Here, we set the Columns as two, while the Post Count is four. For the Image Position, we set it as Left, so you could see, instead
of Top, we set it as Left and Image Size, Thumbnail. Now, Image Ratio, we also
played around a bit with it. We gave it an Image Width as well. As you can see, this widget enables you to creatively add custom
post types to your page with the special touch and display. I hope you enjoyed this video. For more videos and tutorials, subscribe our YouTube channel or visit us at docs.elementor.com.

Only registered users can comment.

  1. Trying not to be to melodramatic but this is worth the price of pro all by itself. Made adding posts to static front page so much easier and look 100x's better than what I had. The whole Elementor-Pro experience so far has been great so far. Kudos to the whole team.

  2. post widget can use use only with custom post type plugin in wordpress blog ? or can use also without custom type post plugin in wordpress blog post ? please answer

  3. It looks like the one option I want most when displaying posts is not available in your Posts Widget, the ability to show the full post content, not just an excerpt. If this is possible where exactly is the setting? I didn't see it in your video. If it's not possible is this something you could add? Even the most basic WordPress themes give the option of displaying Full Posts vs. Excerpts. Thanks!

  4. Can I change the style of date format? Also, I couldn't change the position of the meta data, it's always under the title, could you add the styling for future updates?

  5. I did the following, made the blog page static, applied the Widget into the Blog page,Made it the Post page again in (Settings/reading/Post Page): and when you create a post article it does not appear in the Widget . What is going on or what am i doing wrong. Elementor will not let me edit the Main Blog Page as long as it appears under (Settings/reading/Posts Page:) How can i make it work.

  6. How can I design the blog posts pages (the page that displays when you click to "Read more")? Do I have to do each one individually?

  7. Thank you again. I found it a little fast for taking notes but managed with pausing, making a note and then returning. Otherwise, I found the video tutorial very helpful.

  8. Is there a way to order the posts on the FRONT END i.e. a person viewing the website can choose to order the posts alphabetically, date, etc.

  9. Amazing. Nothing short of amazing. So much better than some of the so-called "top of the line" junk I've bought in the past. Elementor rules.

  10. Customization features are worth looking at. But is there any pagination feature for this widget? I think it will be necessary feature!

  11. Hi, understand this is for Pro but can it create a summary post for blog roll instead of the whole post showing in the blog roll, Hope you understand my question

  12. Hi, thanks for your video, I have just a question. When I set the image on the left, and text on the right, I get issues with the responsive sides! Here some images as example:

    https://i.imgur.com/fkj5IkN.png
    https://i.imgur.com/4ZFmQrq.png

    Is there the chance to fix it? I would like to have the image above the text in the mobile version!

  13. So … is this widget only available for Elementor Pro? I just started learning WordPress, still unfamilar with it. Do you provide trial version?

  14. Can you add a look up function where it searches for item after typing a few letters? Remembering the exact post title or category takes time.

  15. Hello Elementor, I have tried editing my current blog post (created previously without Elementor). Now that I've added some design, the content doubled as I scrolled down. How do I fix this? Really need help

  16. Hi Elementor. Thanks for such a good product. Is it possible to remove the post link of the image? I just want to show my last post at home but I do not want to be clicked. Thanks in advanced.

  17. Noah, make a tutorial of this blog page please…http://www.mojomarketplace.com/item/daisy-simple-amp-minimal-wordpress-blog

  18. hey plz help me someone………………..after set up everything its does not showing imgs plz help………..here it is my website plz help http://indicoder.com/tipstricks/

  19. Will there be an option to add borders and box shadows to each blog post? Right now we have that option for the whole widget, but only blank space between posts.

  20. Paid for Pro just for this widget but when I drag it to my page, I only get the text HELLO WORLD. No images, widget not there.

  21. The idea and everyhing is good except that it isnt responsive on a mobile device. The cards-based content completely disappears on a mobile device. Elementor, cn you do something about that?

  22. I have posts fully designed and having featured image. When I drug the Posts widget to the page it doesn't look anything like what you are showing on the video. It only shows titles of those posts and nothing else. No text (partial), no images…. Could you help?

  23. Oh my Lord this is wonderful also love her enthusiasm! Just what I needed and was looking for!!! Thank you Elementor

  24. Thanks very much for the tutorial. I have a current issue where my post excerpts are displaying social "Share This" icons that I'm trying to get rid of but can not for the life of me find where to turn it off. Any ideas?

  25. Hi,
    Thanks for this tutorial very slow and easy to understand for non english speakers.
    Can you help to solve my problem ?
    Is there any possibility to display more than one category badge per posts if they contains more. I can't find how to fix this !
    Also, that's a pity that we can't display category and tags on the metas area… Do you have any solution ?

  26. Thanks for all of your great video tutorials! I really like the flexibility of the Posts widget. Unfortunately, there is no ellipsis (…) after the excerpt. Without the ellipsis, the text looks like it was chopped off by accident. Am I overlooking a setting? If not, I hope that is corrected via a revision soon!

  27. Hey nice video but how can I make sure the text stays in the same way it is in the blog post itself? For example I want to make a number/bullet list 1, 2, 3, 4, 5 all under the other. Inside the post itself it is properly aligned, but on the post grid it's continuous instead of one under the other.

  28. This tutorial is so clear and informative thank you! Also, I LOVE Elementor! I have had my WordPress website set up and ready to go for so long but I just couldn't bring myself to attempt it because I am terrible with technology! But then I found Tyler Moore's youtube video on how to use Elementor with WP and it changed everything! I am now hooked on building my website! I am a designer, not a technical one, and Elementor has made it possible for me to build a beautiful website, whereas the WP one made me want to cry!! THANK YOU!

  29. where should the read more button take you to? Mine takes me to a page that shows the same post, not the rest of the text. Suggestions?

  30. Such poor teaching. You did not show us where you got your picture and text. Where were they stored? How were they put together? So many questions after purchasing Elementor Pro but no place to find answers

  31. Hi … How to show the category name in every post i have made ini Blog Posts widget? The category name only appear when use image feature in Post Widget > Badge > Badge Taxonomy > Category. But i cannot show category name when i choose no image displayed. Thankyou.

  32. Once the widget is setup and displaying, say, 3 columns and 6 posts, how does the visitor view the next page of 6 posts? There is no "next" and "previous" page navigation?

  33. Is there a way to do this without purchasing pro? How do I get a page to show latest posts with images? Thanks!

  34. On my "posts" page there is no option to edit with elementor, but I can on any other page. I'm using genesis framework. Also, the posts page is the only page that automatically generates a header with said page's name. If I switch which page the posts are assigned to, the header goes away and appears on the new page. Additionally, I regain capability to edit with elementor on the old posts page and loose elementor editing on the new posts page. Can't figure it out

  35. In the video you dragged the post widget and images with text appear beautifully alligned looking awasome. But how did you get there? Where did you created those posts and how? You must start from the very beggining. Can you please clarify this out. I am a new elementor pro user.

  36. Great tutorial, but you just jump in there directly. On my post page, i cant find or edit on elementor because i think it wont let me. Ughhh…

  37. Thanks for a great video, it was very easy to follow along. Elementor is very easy and gives a lot of options, but in the post widget I would like to choose the position of the read more link. I like my read more on the left, but I'm not seeing any way to do that. I'd also like to be able to control the entire layout of the post itself for example I want the date separate from the meta and I'd like to see my categories.

  38. Can anyone and you help me with this problem. I mostly work on Anconda IDE and I need to copy content from there but main problem is I can't directly paste the images all I have to do is upload from the media but in one code I have 50 70 images and it's being very difficult for me to work like this. Help me out!

  39. all of my post doesnt appear like this anymore.. why? I used to have control with how many rows i want to show, and how many post but this time i noticed that they are posted one row with super big photos, and the settings and style is actually the same with the default post widget 🙁 i dont know what to do now…

  40. I want to set up a blog over which I have control and then I have one contributor. It is for an educational site. So I post questions and the contributor (student) submits answers. How might I go about doing that in Elementor?

  41. Спасибо огромное! Даже без знания языка всё интуитивно понятно. Молодцы!

  42. I show post in this way but after saving this "Excerpt" shows "Want to create a site? Find Free WordPress Themes and plugins" then shows my other parts of my post.
    Why does it happen? (http://www.educube.com.au/all-news)

  43. The whole widget is REALLY great!
    One question though: Its cool you can align the picture left or right and if you make it like 50% width its directly next to the heading. But what about the excerpt text ALWAYS sticks under the heading? How would I achieve to align the excerpt text with 100% width under heading + picture?
    |50% heading | |50% picture|
    |100% excerpt text|

  44. Thank you. Is there any way to have the posts as a list with the image on the left and the title on the right? I can get it to look like that thanks

  45. Hello, I followed the steps and I have the same configuration as you, however it does not look good, here I leave a screenshot.

    https://ibb.co/JzwSff7

    Do you know what is due?

    thanks

  46. I think a couple of things have changed since this video. I don't seem to be able to change the border radius of the image alone, only the card as a whole. I am also not able to change the Query to select desired categories.

  47. Hi I have found out that the Archive Posts widget shows only the latest 10 blog posts when I turn out Pagination and there is no way to get to the older ones. How can this be fixed? I want all the blog posts shown together on one page without any pagination. The widgets from the other plugins allow for Posts to Show but apparently the Elementor one doesn't. Is there any work around it? Thanks

  48. Thank you. I've spent god only knows how many hours trying to figure this out. I finally bumped into this video and 10 minutes later I'm done. Thank you, thank you, thank you.

  49. It's so shitty that you have to pay for this function. At least have some greatly reduced prices for students!

  50. I just updated to pro and am still working on editing my whole website using oceanWP. All is going well However, I had old post content, a lot of posts. When I click on the blog in the main pages area, and view I see it in the new format form the post widget I used. However when I click on Menu at the top of the website, it takes me to the old posts that are in the old formatting and layout. I also noticed that when I click on the actually newly formatted posts that i did using the new widget, it doesnt open anything up. read more doesn't take you anywhere. I cant read the posts. Is there anyone who can direct me? I need the link on the main top menu to take my viewers to the correct blog home. Can you assist? what am I missing?

    Elementor is amazing and this is the first roadblock for me. Thank you

  51. Nice Video! Will there be a possibility in the future to filter the posts by a category? This feature is available in the portfolio function. I miss this in the Blog Post function! Thanks for your support and best regards!

Leave a Reply

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