How to Design a Blog Post on WordPress Using Elementor

Looking for an Elementor blog template for WordPress? Learn how to do it using Elementor's Theme Builder.

As you may know, Elementor is already capable of helping you redesign your headers and footers. But that’s only the tip of the iceberg…

Another great thing that you can do with the 2.0 is build yourself an entirely new single post template with the use of the Elementor Theme Builder. No need to get your hands dirty playing with source code.

In this tutorial, I’m going to show you exactly how to do that. You’ll be amazed at how easy it is.

Here’s the final result we’re going for:

Note- this is only an example single post template that you can build. You can find other Elementor blog templates here

The process presented below is universal, so you can create other structures and designs as well. You’re only limited by your imagination.

What's so great about this sort of Elementor-powered single post template?

To get the obvious out of the way first, it looks great, and you can customize it freely just like any other creation built with Elementor. You get to use the same set of features, drag-and-drop interface, and all the content blocks that Elementor gives you normally.

But there’s more:

  • Multiple Elementor single post templates. You can create multiple single post templates and have them running side by side.
  • Designated templates per category. You can have different templates for different types of posts or different categories.
  • Build once and set off across site. You can enable any of your templates on even a single blog post, or you can use it across the board for all posts.
  • Add additional elements. You get additional elements that you can add to the template, such as social media buttons, author blocks and more – stuff that might not be available in your current theme by default.
  • Edit in real time. You can edit your template in real time while looking at a live preview containing your actual blog data, instead of some dummy, placeholder content.
  • Consistent blog template. The template won’t vanish when you update the theme.

Okay, let’s get on with the how-to:

What you need to get started

Just a couple of things: Installing both Elementor and Elementor Pro is pretty straightforward as far as WordPress plugins go. The only additional step to get Elementor Pro running is to enter your personal license key on the plugin’s settings page: Elementor → License.At this stage, you can begin building your new single post template.

1. Setting the groundwork for your Elementor single post template

  • First things first, yes, you still need a WordPress theme to begin with. Elementor doesn’t replace your theme but rather works alongside it, simply improving on this and that.
  • Also, don’t worry about losing your theme’s default single post template. What we’re doing here won’t delete any of your theme’s files. If you ever want to come back to that standard template, you can.

Before we get to work with Elementor, let’s make sure that you have at least one complete, representative post on your blog. Meaning, something that you consider an excellent example of what your average blog post looks like.

We’re going to use that post when previewing your new template. We’re doing that just so we get to work on some real content, instead of having to rely on half-empty posts.

With that out of the way, let’s begin building the template.

2. Creating a new Elementor template

Go to Elementor → My Templates and click on the “Add New” button. Choose “Single” as your template type and click on “create template.”

In the next step, Elementor will ask you if you want to start with any of the available predesigned blocks.

You are free to check how those look and perhaps even use one of them as your new template. However, in this tutorial, we’re going to build a new template from scratch – just so we can learn all the ins and outs of the process better.

(Nevertheless, I do have a downloadable template for you at the bottom of this guide, in case you don’t have the time to go through the process on your own.)

When you see that pop-up with the templates to choose from, you can just click on “x” and close it. This will land you at the blank Elementor canvas.

At this stage, let’s hook up the preview to one of your live posts. For that, click on the preview icon in the bottom left corner, and then on Settings:

Preview settings

From the Preview Settings box set “Preview Dynamic Content as” to “Post” and then pick that one representative post of yours that I told you to prepare earlier.

Picking representative post

This will populate the preview window with the post’s data.

Before we move onto the next step, here’s a quick look at the structure that we’ll use for our single post template:

Single post template structure

As you can see, three main sections there:

  • (a) – the head section
  • (b) – the post body section
  • (c) – the comments section

We’re using this structure just to make things easier to grasp. Lumping everything together in a single section might be too confusing to follow.

Let’s now build each section one by one:

3. Building the blog post's head section

The head section contains a handful of important elements:

  • the headline of the post
  • the author box – author image and biography
  • the post meta – publication date and category
  • the featured image of the post

All of those elements are quite easy to add, which you’ll see in just a minute.

Let’s start by adding a new single-column section.

Adding a new single-column section
Here are the settings I like to use for that:
Layout settings
  • I personally like to go for a minimal style that helps my content stand out on its own, so I tend to avoid any “flashy” elements.

As you can see, the only settings I’ve set are:

  • Content Width – Boxed
  • Width – 960px

I’ve found that to work well for my current theme. Of course, you can pick a different value, but let’s just stick with that for now. We can come back to customize the widths later on when we have all the elements in place.

If your theme forces some leftover background that doesn’t look right, you can also go to the Style tab and set the background color to white.

3.1. Post headline

Elementor 2.0 comes with some new content blocks that are going to be really handy when building this new single post template. Let’s start with the block simply called Post Title. Drag and drop it onto the canvas.

Post title settings

Here are the settings I’m using:

  • Content tab: Alignment – left
  • Style tab: Text Color – black
  • Style tab: Typography: Size – 65px, Weight – 600 (large fonts tend to work well for headlines)

Next, I’m adding a simple divider to add some visual separation between the headline and the rest of the head section.

Adding a Divider

Here are my settings:

3.2. Author info, post meta and featured image

This section is optional, so if you don’t want to showcase any author info or if you’re not using featured images on posts, you can skip to the next step.

However, I think that featured images and author info add a lot of personality to a blog post, which should help build a relationship with your readers.

Let’s start by adding a column block right below the divider.

Adding a culumn block

Use the “33, 66” structure for the columns.

"33, 66" structure

The column on the left is where we’ll put the author box. To do that, find a content block called Author Box and drag and drop it into place.

Here are the settings that I like to use for this block:

For the post meta, we’ll use a content block called Post Info. Drag and drop that one right below the author’s.

Post info block

Here are the settings I use:

Meta Data settings

Finally, let’s take care of the featured image.

This one we’ll place in the right column. Find a content block called Featured Image and drag and drop it into place.

Featured Image block

Here are my settings:

Featured Image settings

Of course, you are free to experiment with different image sizes based on the type of featured images that you use.

The complete head section in action:

4. Building the post body section

Let’s start by adding one more standard single column section to the page.

Now the important part – the settings of the section. The only things I adjust are:

  • Content Width – Boxed
  • Width – 750px

Now, why the 750px? I want this to be roughly 200px less than the width of the first section (which was 960px). This will give me a nice, narrower look for the main content block as compared to the head section.

A trick like that makes the main content pop more and creates a nice visual break point between the head and the rests of the post. Here’s what I mean – what it’s going to look like when we’re done:

For the post content itself, we’re simply going to use a block called Post Content. After you drag and drop it into place, it’s basically good to go!

Post Content block

If you want to, you can experiment with the Typography settings to make sure that the text is clearly readable. You might not want to change the font itself, but rather experiment with Size and Line-Height.

 One optional thing that I like to do is add some small social media buttons right above the main content of the post.

In this particular case, I do this by adding a new Columns block immediately above the post content. Then:

  • put a divider in the left column (you can clone the one you used in the head section of the template),
  • put a block called Share Buttons in the right column.

These are the settings that I use for the latter:

And here’s the final effect – the body of the post and the social media block above:

Social media block

5. Building the WordPress comments section

This is the final section of our new single post template.

The best way to get started here is to clone the previous section and then remove every content block that’s in it. That way, we’re retaining the main settings of the section, and it’s still quicker than starting from scratch.

Since now you’re pretty used to the process, let me just show you the specific blocks that I placed in this section:

Comments section
  • (a) – Divider
  • (b) – Share Buttons
  • (c) – Divider
  • (d) – Facebook Comments

Here are the settings for the Share Buttons block:

Share Buttons settings

And here are the settings for the Facebook Comments block:

Facebook Comments settings

If you prefer using WordPress native comments, no problem! You can do that by using the Post Comments block instead of the one for Facebook comments.

Post Comments block

This is pretty much it when it comes to building your new single post template!

Here’s the final effect once again:

All that we have to do now is save it and tell WordPress to begin using it.

6. Enabling this single post template on the WordPress site

First, click that juicy “PUBLISH” button in the bottom left corner.

Elementor will ask where you want to display this new template. Setting this is pretty clever, and it works based on display conditions that you can assign. Don’t worry, this will all be clear in a sec.

Start by clicking on the “ADD CONDITION” button.

Add Condition button

If you want your new template to replace the default template entirely then use the following setting:

All Posts setting

Apart from that, you can customize this and assign your template to, say, only specific blog categories, specific tags, or even individual blog posts.

  • Here’s how you assign to a specific post:
Assigning template to a specific post
  • Here’s how you assign to a specific category:
Assigning template to a specific category
  • But there’s more. You can also combine conditions together. For example, here’s how you can exclude this template from a specific blog category while letting it show for all the other ones:
Combining conditions together

You can probably already see how powerful this conditions thing can be!

It basically allows you to have multiple single post templates for different occasions.

Once you click on the main “PUBLISH” button, your single post template will be enabled according to the conditions you’ve just set.

How easy was that?

Alternative approach: coding it from the ground up(?)

Okay, so the question is what would you need to do to end up with the same effect if you were to customize the source code of your theme by hand?

TL;DR: it’s impossible.

Okay, okay … impossible is a strong word, but it’s really nearly that.

First off, you have to be able to code, duh! And it’s a pretty serious coding project … PHP, WordPress, HTML, CSS, design.

For instance, let’s just cover that last thing – display conditions for your template.

There’s no ready-to-use structure or framework in any theme (or WordPress core itself) that would allow you to do that. You would need to code that one up from scratch. And you also need some kind of an interface to then be able to use it. This, on its own, is a rather large and complicated coding project.

Then, the single post templates themselves. Or let’s not even make it plural. Let’s focus on just replacing your theme’s default template with one new one.

First, you need to use a child theme for that. Otherwise, all your work will vanish once the theme updates.

But, surprise! creating a new child theme is not always possible. For instance, if you use one of the popular theme frameworks then you’re likely on a child theme already. And it just so happens that WordPress doesn’t allow you to create a child theme of a child theme. So that’s that.

Secondly, you’ll need to understand your theme’s structure thoroughly before you can build a new template. This also means knowing how to create an additional CSS stylesheet that will play along nicely with the theme’s default one.

Lastly, your template might become incompatible after a theme update. After all, the theme developer might change the structure of the theme from one version to another, effectively forcing you to go back to the drawing board.

Though I’m sure some of you will immediately respond with an eager “challenge accepted!”, for the rest of us, mere mortals, a task like that is pretty close to impossible.

Okay, I hope I’ve got you on board and excited about the possibility to build some new, fully customizable templates for your single posts. All thanks to Elementor 2.0! Go ahead, take it for a spin!

If you have any questions about the process presented here, don’t hesitate to ask. (Here are the answers to the most common questions about the new Theme Builder.)

Let me know in the comments how you are going to use Elementor’s Single template for your projects. You can download the complete template shown in this article here.

Liked This Article?

We have a lot more where that came from! Join 760,658 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Karol K
Karol K
Karol K. (@carlosinho) is a blogger and writer, published author, and founder of NewInternetOrder.com

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

89 Responses

  1. Hello,

    I had an eye on Elementor since 0.7 and… I didn’t built any website with-it BUT it had been the best tool for me to understand the beauty (and subtlety) of modern CSS.

    I literally ‘eat’ the sneak peeks of the Builder feature, since it now allow me to better understand how WordPress works !

    By the way, “let’s just cover that last thing – display conditions for your template”… if there isn’t any way to do it from scratch with WordPress, what if I code my own category.php, I could easily test for whatever conditions I want to in it and use get ‘template-parts’ ?
    So I end with a multi steps conditions (though a lot harder than with Elementor 🙂 ?

    I really appreciate your work, I eagerly wait for your demos with woocommerce which had been a bit stronger to get acquainted with.

    Thanks for your support,

  2. I gained alot. I am presently about to restructure my entire site, and I MEAN ENTIRELY. Do away with most of the plugins I am using due to lack of Elementor as at the time I build the site. My wish is to use elementor throughout the design of the site from ground up. Posts as this are very important to me. I presently downloaded about 40 video tuts on elementor (from elementor channel on Youtube). By next week after my first semester exams, I should start redesigning the site. Kudos to your effort.

  3. Well done, sir. I wish this post was around before I did this – would have saved me some headache! We need more posts like this!

  4. Great info … but this type of info is so much easier to learn/absorb when it’s presented in a video … doing this blog post again in video would probably be really helpful to alot of people.

  5. You are clearly thinking about everything both in adding new features and describing it all in those tutorials. Thanks a lot. Great work!

  6. Thank you for the step by step details, explanations, and useful images.
    I can print this tutorial and read it while I work.
    If I later forget a detail then I can quickly look over the printed version to find the detail I need, without the spending my time re-watching a video.

  7. Actually, I could not print the tutorial from my browser.
    I had to copy the page, paste the copy into a word processor, and reformat it. But even with the extra work, text is a far better reference than a video.
    /
    No more videos, please.
    I cannot watch a video while I work because I have one monitor.
    To later look up something I have to waste time re-watching the video to find what I need. A text document is non-linear. I can easily skip around to find what I need.
    /
    Thanks again for this major improvement in documentation.

  8. I’m using Elementor and trying to improve my SEO with the Yoast plugin. The problem is, all the Yoast settings are in the WP edit screen.
    Should you create your page with Elementor and then go back to edit the SEO in the WP screen?

    How is SEO best implemented with Elementor? On the WP edit screen or within the Elementor editor?

    Any suggestions are appreciated.

  9. I purchased Elementor Pro a couple of days ago primarily to be able to build a single post template rather than have to use the theme template. Thank you for your tutorial. It was very concise and informative. I was able to follow along, step by step and build a single post template. In this manner, I also learned how to use some of the element in Elementor Pro. However, after completing the template, publishing and setting the conditions to ‘all posts’, the posts on my site continue to appear with the theme template rather than the new single post template. Can you explain why this might happen, where I might have gone wrong in developing the template and/or how I might correct the problem? The theme I am using is Bento.

  10. Hello, I have two slight problems here,

    first, if I used the native wp comment, it won’t show the comment (although there is a person who leave comment on that specific comment, and yes of course I did approve the comment.

    Second, if I used facebook comment, this time it will show the person who leave comment, but I didn’t get notified when a person leave a comment.

    Sometime I replied it after a week (because I didn’t realized).

    So, is there anyway to fix this? did I miss something?

  11. AWESOME product… question: are you able to add Custom Post Type fields into the Single Post Template when customizing? And if so, how do you map in the custom fields I’ve created? Is there more documentation on using custom post types in the new theme builder?

    Thanks!!

    Ryan

  12. This is an incredible tutorial! I have one question though. I’m working on a client’s website that was created by someone else. It uses the Poseiden theme (which the client wants to stay with) but he wants the blog redone. No problem! Except there is one, well actually two, problems. The navigation header from Poseiden’s blog template I can’t seem to get rid of for the life of me and that is actually the main thing the client wanted changed! Specifically, the background and text colors. Secondly, for some reason the featured image is showing up twice, both where I’ve specified it to go and directly below the navigation header (the same one the client doesn’t like). Any ideas how I can fix these issues? The client loves my template other than these two issues but the problems are causing me no end of headaches! Thank you in advance for any insight you can give me!

  13. I created a single post template in Elementor Pro and published with the global post condition. I have only one Elementor post template. GeneratePress is the theme and all plugins are up to date.

    In the customizer, I set my home page to ‘posts’ as my site is a blog only site and the new Elementor post template rendered perfectly.

    But when I added a new post yesterday all posts suddenly rendered as generic, theme-quality with no Elementor formatting at all. I tried deleting the past post but nothing changed in the post rendering.

    I add posts from the Posts page in WordPress by simply clicking ‘Add New’. Is it possible the Gutenberg update is interfering with a setting somewhere that points to using the Elementor template or do I need to add the template shortcode to the body text somewhere?

  14. Karol, that was an exceptionally good tutorial! I have a question. Once I have published a template, is there a way I can bring up the UI where I create the conditions for it? Can’t seem to find that anywhere.

  15. Hi, I fallowed the instructions. I would like to have 2 columns of text instead of one. I inserted an “innner section” but the second column does not appear when I create a post.

    Is it impossible to have 2 “edit post content” widgets in ONE single post Template ?

    I hope it is possible. If so, please let me know what I am doing wrong. Thank you. 🙂

  16. OK, hope this is not too dumb a question. I’ve downloaded and installed the template (I can figure out how to tweak it in due course). But now that it’s installed, how do I apply it to existing, or to new, posts? Many thanks

  17. Hi I have created a new single post template, can see, edit and apply it. It works for new posts, but does not seem to have updated my existing posts (though they meet the category criteria I’ve set). Is there any obvious reason why the template might not be applied to old posts?

  18. Ok, but now after creating the template with an embedded YouTube video element, I get back into editing a specific POST with Elementor and I cannot modify the content of the video added at the template step? I realize that while editing the POST with Elementor I can add Elementor widgets to the bottom but I want to embed different videos on each post near the top of the post so viewer notice it without needing to scroll to the bottom.

    I LOVE

    1. Oops, hit “Post Comment” prematurely. Continuation:

      I LOVE the power of the Elementor Single Post Template, now give me the ability to tweak it on specific posts.

  19. Hello: If I create the single post template, does it replace all of my current posts? After I chose a block and inserted, it showed me an already completed post with the new block ‘added’ to my post (not replacing) so it was muddled and not acceptable. I also wonder about how this effects by ‘blog page’ compared to my blog archive. I am still having trouble calling the content to the blog page from the archive. I’m not sure if the single post will effect this. TIA for any assistance.

  20. I think this needs updating. ‘My Templates’ isn’t under the Elementor tab anymore, it’s in it’s own tab ‘Templates’. And the ‘Choose Template Type’ has another option of ‘Select Post Type’.

  21. An excellently written article, if only all blogger offered the same level of content as you, the internet would be a much better place. Please keep it up!. Great tips, I would like to join your blog anyway. Waiting for some more review. Thank you

  22. There’s an error in this article at the area you talk about “adding conditions”, the first image shows “in category” and “featured” when to apply the template to all posts it should be “all posts” and “all”.

  23. Can you please offer advice as to why custom blog posts would still show generic blog layouts when single posts are clicked on from my blog page? I have created a custom blog page and custom single posts template, assigned “all posts” conditions and have unchecked “blogs” in the reading panel.

  24. Thanks so much for giving everyone an extremely terrific opportunity to read critical reviews from here. It’s always very ideal and as well , stuffed with a great time for me and my office colleagues to visit your web site no less than thrice in a week to find out the latest guides you have got. And indeed, I’m actually fulfilled considering the beautiful information you give. Certain 1 facts in this posting are honestly the best we’ve ever had.

  25. Hi,

    I’m trying to preview dynamic content as (any) existing post with my single template but receiving the error ‘the results could not be loaded’. If I load a block from Elementor’s library it picks up the content fine. Any ideas?

  26. Are you planning on supporting “Single Post Template” like features within pages? Meaning I often render the first post in full on the main page and would like to do so without relying on the layout of the post widget. Rather I want to create a temple like the single template and render it with my custom WP Query (repeating it if post count is higher then 1). Currently I am doint this through a short code and some custom php …

  27. When I used the post comments widget the default comments box also shows, so there are two comments boxes at the bottom of the page. How can I remove the default comments box?

      1. Hi Ben,

        Thank you for the response. I am most likely missing some basic information. I took some screenshots to show what I mean. When I disable comments on the post there is a warning to turn them on from the Elementor editor (https://imgur.com/a/7xiX3Qw). When I do turn them on there are two comments boxes showing up in the published post (https://imgur.com/a/yo2BlX6)

        Thanks for the help
        Valerie

  28. Wow, I just noted what Valerie commented about… two comment sections when enabling the Post Comments widget… and the solution is to install yet another plugin!!!

    May I ask what comment system this post if using and how to get this comment style?

  29. “When you see that pop-up with the templates to choose from, you can just click on “x” and close it. This will land you at the blank Elementor canvas.”

    As of Pro 2.4.8, this is not the case. Clicking the X on the referenced screen still gives you a page based on your default template, rather than the Elementor Canvas. I can’t figure out how to build a single post template (or any template to which I can apply publishing conditions) that truly starts from scratch–ie, from no theme at all, using the Elementor Canvas template. Is this possible?

  30. I’ve created the single post template for a custom post type using the Elementor Pro templates. It’s working great.

    If I wanted to add a unique element to one or two posts beyond the template, can I add this element from the individual post without canceling the template?

  31. The publish button was replaced with update button, and can’t setting display condition in the new version.
    How can I publish the template in the new version?

  32. Awesome tip Karol. For photography ideas or shoot VoilaStudio is also specialized in product photoshoot, model photoshoot, creative shoot, designer shoot, video shoot.

  33. I was earlier having some trouble using the Elementor plugin, however, things got crystal clear when I read this beautiful article. Going through the comments also helped a lot. I would request everyone to go through the comments section too.

  34. There is a way to add meta tag to my single post template? I am not using wordpress users by default to identified an author, but i was using a custom post type to do that..Anyone get me an advice?

  35. I created the simple post template but does not show in “Saved Templates” I see it under “Theme Builder” . How can I save it like a template?

  36. Will i be able to also edit a blog (which was published using the template that was created) in elementor pro as per my whims and fancies?

Leave a Reply

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

Want to learn how to build better websites?

Join 760,658 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.