How to Design a WordPress Single Post Template with Elementor

How to design a single post template with Elementor

The default WordPress way of adding and displaying content is really easy.

You add a page or post. Fill in a few fields. Hit publish.

And when you view that page or post, WordPress uses your theme’s ‘single post template’ to display it on the front end.

There are loads of advantages to this typical approach:

  • It’s really easy to add content to the site. Just fill in some fields.
  • It’s easy to maintain, because the design of your posts is controlled in just 1 template.
  • It’s client proof—they can’t ruin your design.
  • It’s efficient and saves time.
  • It gives you—the designer—total control over design consistency.

Your theme does have styling controls for single posts and pages in the Customizer. For a lot of people, this is the only styling control they need.

But as a non-coder designer, you’re using Elementor because it gives you total custom drag-n-drop control of your designs.

The annoying rather big issue here…

You can’t use Elementor to override and design your own custom single post templates. Dammit!

Except… you CAN! And in today’s video, I show you exactly how.

You can have all the benefits of WordPress’s default functionality, AND Elementor’s superb styling abilities. 

Whoooop!

Watch the video below for step-by-step instructions.

FREE PDF: I’ll send you a handy 1 page cheatsheet for this entire tutorial, for easy future reference. Click here to get yours.

Don’t forget to drop me a comment and let me know what you think!

Check these posts out too...

103 thoughts on “How to Design a WordPress Single Post Template with Elementor”

    • Yep, thank goodness! Think it’s got a bit hammered by traffic today. Not a bad problem to have, but still nice to be back up and running.

      And thanks for the kind words Simon. I try my best. 🙂

  1. Dave you make it look so natural. Thanks for the layout and displaying the beauty of Elementor Page Builder. What an awesome display of design genius and craftsmanship. Thank you kindly. 🙂

  2. Hi Dave,

    Great to see you back with a new tutorial!

    I haven’t tried creating a template with Elementor yet but I was wondering if there was an advantage to using a plugin instead of simply creating one in Elementor?

    I’ve also been designing single posts using GeneratePress’ full-width option in Elementor. I don’t think you scrolled all the way down in the tutorial but I’m stuck with a comment field that spans the entire page width as well as “previous” / “next” navigation on the edge of the left-hand side. I would like those elements to align with the default theme margins (and in the case of the comment field, be the same size as the one I’m using here on this post).

    Is there a simple fix or do you have some CSS to accomplish this?

    Thank you!
    Michael

    • Ah yes! In my CSS, I have this:

      .no-sidebar.single .inside-article > *, .no-sidebar.single .comments-area > * {
      max-width: 768px;
      margin-left: auto;
      margin-right: auto;
      }

      You can change the width to whatever suits your design.

      Let me know if that works for you Michael.

  3. Hi Dave,

    Thank you for the CSS. For some reason that made all of my content a maximum width of 768px. Any thoughts?

    Cheers!

    • Oh yes. I forgot I used that CSS to set my entire post at that max width (I don’t use Elementor to design my template). Sorry!

      Try this:

      .single .comments-area, .single footer.entry-meta {
      max-width: 768px;
      margin-left: auto;
      margin-right: auto;
      }

  4. Bless you, Dave!!! It worked!!

    My site is not live but this has been bugging me for a while now.

    Thank you so much!!

  5. Hi Dave
    I have installed AE in my wp admin and am having difficulty with the AE post image as the image does not appear at all. I have added the image in the EDIT AT POST IMAGE in the overlay section as FULL size and nothing shows up even with adding padding the section is empty. I cannot progress with the tutorial due to this.
    Is it something that I am not doing?

    • Hmmm… hard to say. You’ve definitely got a featured image uploaded in the post that’s being pulled in? Sorry, just to get the obvious out of the way first. Can you send me a screenshot to hello [at] designbuildweb [dot] co?

    • Hi Tony – do you mean, for my blog single posts? Well, on my own site, I just don’t need to. GP’s blog styling controls were perfectly fine for my needs. I’d use Elementor to design the single post template if I needed a sitewide blog post design that GP couldn’t handle. Always prefer to use the theme first if I can. It’s simpler, quicker.

  6. OMG thank you so much! This article is exact what I’m looking for! You solved my problems troubled me for my whole morning just in 16 minutes. Keep on the tutorials, we really need them!

  7. Hi, Dave, Happy New Year! I have learned a huge amount from various of your tutorials which you present in a very straightforward manner, so thank you very much for that. But I had a problem creating a single post template using AE Pro and GeneratePress.

    I thought I had followed your video to the letter, as far as I could tell, but I must have made an error somewhere because when I click the ‘Read More’ link the single post shows with the theme’s header and footer in place even though I have disabled those in the AE Pro dialogue while editing the single post template.

    I’d be grateful for a clue as to where I should look to solve this problem. If you want to see it in action the site, which is to become my personal blog, is at http://www.trevorsblog.uk

    Best wishes,
    Trevor

    • Hi Trevor – always good to hear from you. HNY to you too! I haven’t chance to check it yet, but when you say you disabled those, where do you mean? Just on that page, using GP’s disable header/footer controls?

      • What I hadn’t realised is that every post needs to be specifically assigned to the new AE single post template. In my innocence I thought that applying the template “to all” meant that all my existing posts would open with that template. The problem arose because I was reincarnating some previous blog posts for a newly created blog site, and they of course had been made with the global template. But, hey ho, learning is still a pleasure even at my time of life! Looking forward to your new video!

  8. Hey I love your videos and it helps a lot when using elementor. Just had a query though.. How do I add a comments section just like this one to my blog posts? Have been looking for an option everywhere couldn’t seem to find one.

  9. big help brother. have a client with 50 US State pages and needed all the same layout. Never thought about AE.

    Appreciate your post. Subscriber for life now.

  10. Very nice, great thank you for your help! Is it possible to create templates of single posts, that are connected to categories? For example I want to have a page with projects (category = Projects), and page with clients (category = Clients), and so that Projects have one template, and Clients another, without the need of tweaking something each time?

  11. Hello Dave.

    Nice tutorial. Tried to follow it, didn’t quite work out.
    I managed to create a single post template(quite similiar to yours in the video), that i can view and am satisfied with.
    Now, when i create a post and select this single post template, it is simply not applied.
    All i get to see is the post content (text, ae post content), but no image, no title, no meta, simply, not my post design.

    Any advice on what i am doing wrong?
    I have elementor pro plugin installed on my wordpress powered site, as well as the
    ae plugin.

  12. Your my master!!!

    They said deliver your content what ever you want the “delivery method” is not important, but sometimes you need to set apart from the rest and using the same wp post method is boring.
    But using this tool is much better!!
    Thanks for sharing!

    • Hi Ruben,

      It depends on your requirements. The current Elementor Pro dynamic functionality is still a little limited.

      If your needs are simple, then definitely no need for AE Pro. But even simple things like dynamically pulling in a featured image as a background image to a section (like a lot of blogs have at the top of the posts, with the headline overlaid on top), just isn’t possible yet with Elementor.

      Best to see how far you get with Elementor Pro, but accept you still might have to use AE Pro. It still does a lot lot more than Elementor right now.

  13. Hi Dave,

    Great video! Anywhere Elementor is having issues overriding my default single post template when I press “apply”. All my blog posts seem to remain unchanged even after I the single post template globally. Any ideas on troubleshooting? I’m stuck 🙁

    Thanks!

  14. Hi Dave,

    Love all your videos and this was no exception! I have been trying to find a posts plugin that will allow me to create a Stories page very much like this one from Microsoft https://news.microsoft.com/stories/index.html At least I would like to incorporate many of the same features like the background image with heading floating overlay, the tabs that overlay with the words “featured & profile, the translucent heading overlay, and the ability to keep all individual posts the same size.
    After watching this video I feel that AE Pro will be able to help with some of these but maybe not all. Would some CSS fill in the missing bits?

    Thank you for the tutorial.

  15. hi dave,
    Found your tutorial about single post template and just thought I had found philosopher’s stone and bought this plugin. but unfortunately this plug-in does not seem to understand when there are shortcodes in one’s content and therefore it does not appear to be interpreted. I use revelution slider and therefore needed this to be displayed too, do you or someone else have an idea how this could be done.

  16. Lovely! Wow! Looked everywhere, but here is where I found the answer. I was facing this issue that I created a template, but the URL was redirecting to the Hompage. Then realized that I hadn’t used that template at all in any of the pages.

    One doubt: When we create a page, should the page also have some content or we can just select the template and things will appear as we had created the template?

    • Yes each post needs some content. If you create a post and don’t add any content, then publish it, all you’ll see is your template without any content in it.

  17. Hi Dave,
    I’m using the WPOcean theme, which may be the problem, but when I add a new AE template, there is no Settings Box, so I can’t set Render Mode to Post Template.

    I can choose the page width in the WPOcean settings, but then I’m stuck. Help!

    • If you click the ‘Screen Options’ tab at the top of the page, is there a box you can check to turn the settings box on?

      If not… you’ll be best asking OceanWP support for help, I’m afraid.

  18. All was going well until I tried to add the body of the post — then it was entered all in one vertical line! Tried everything I could think of to get it to stretch across the space properly.

    I created the whole post in WP, as you did, and the headline and image were entered correctly. (I didn’t try to enter a snippet before the body of the post.)

    What now?

  19. Hello Dave,
    I am newbie on this…I have a question…I am using free Elementor and Free Astra Theme
    I created CPT with CPT UI plugin So I´ve found that by creating CPT´s I will need to create single.php page and categories Templates in order to publish my Post Types , The only thing I have right now are the archive pages for those.
    So let me understand…By using Anywhere elementor Pro I won´t need to create the single and pages via PHP so AEP will do that ?
    Thanks for your videos!
    Cheers from Mexico!

    • Yes AnyWhere Elementor Pro lets you use CPTs. And you can also use them with Elementor Pro (the new single and archive builder), although the functionality is still a little bit limited right now.

      Good luck!

    • Because this video was made last year, before Elementor Pro had the ability to design your single post template. And in any case, the AnyWhere Elementor Pro plugin still has a ton of features that Elementor Pro does not.

  20. Really appreciate your video–but one *major* issue with the Elementor single post “post content” widget/module/whatEver is wrapping around an image that is inserted in the post content.

    The widget is not honoring any margin around the image and its caption, so if the image is aligned left, and the text is flush left, the text is slam up against the edge of the image. Same issue when the image is aligned right, although it’s not as prominent because the text is ragged right. Same issue at the bottom of the caption box: the top of the next line of text is slam up against it.

    Of course this destroys the design and readability.

    I have tried at least 20 different CSS “fixes” (obviously not the right one, yet, if one exists) and nothing fixes it. If you have any, ANY, idea for a workaround or a solution, I hope you’ll let the world know!

    Thanks for your good work

  21. Hello an thanks 🙂

    On the single post template I added two post content fields, but when then editing a post I only see the fist one. Any help please?

    Regards

  22. Hey Dave,
    Do you make a tutorial about blogging? Show us how every single post goes to blog post. For example I create a new post it will go .com/blog/,,,,, blog page will my parents.

  23. Oh Dave, how I love your tutorials. It makes me want to do more.

    But I have a question? Can all these be done with elementor free because I don’t have money to money for the pro version unless you wish to share.

    Thanks from Nigeria

    • In this video, I use free Elementor but I also use a paid add-on called AnyWhere Elementor to make the single post template. However, now you can make single post templates withe Elementor… but you need the Pro version, I’m afraid. Sorry.

  24. Hey Dave! I may need this plugin to accomplish what I need… my issue in a client redesign is that I’ve created a blog post template in Elementor, and added the post content with a standard text box. The “problem” is that when I pull blog excerpts on the main blog preview page, it’s pulling text from the left sidebar (subscribe info, etc), which I don’t want.

    Is using this plugin the best way to work around this?

    • Hmm. That’s odd. Have you put content in the Excerpt field in your WP posts? If you don’t see it, tick it in the Screen Options tab, top right. Does that solve it?

  25. Hi Dave. I’ve just come across your work and it is super helpful! Well done! I have a question – when I moved to a single post template in elementor, the spacing between h2 headers and blockquotes and related things in my blog posts just stopped working. now, spacing is the same as any other line of text. How can I fix this? I had to add css because my bulleted lists disappeared so my assumption here is that css will fix this issue as well.

    Thanks!

    • Hey Randy. Yes this is because your theme’s typography CSS now isn’t being applied, cos the HTML structure has changed. Do you have global fonts disabled in Elementor’s settings? I always disable that (and colors) so that my theme’s CSS can still shine through. Let me know.

  26. Thanks Dave for all your content you’ve provided.
    I have a large learning curve to experience but seemingly you have
    made it as smooth as can be. I am green in this field but hopefully
    you can bring me into blossom.
    Thanks again for all that you do in making these videos

  27. hey Dave, please help me. I just new using elementor. I have a problem to create single post template, i can’t click publish button and not show display condition. What’s problem?

    • This video was using the 3rd party plugin Anywhere Elementor Pro to handle the single post template. If you have Elementor Pro, you can now create single post templates in there instead.

  28. That’s great – thanks! The vid is really clear and easy to follow. I’ve just started using Elementor Pro and was a bit surprised to find that I couldn’t use it to create page or post templates. Now, thanks to your video, I can!

    • But you can. This video is a bit out of date now. Go into the Templates folder (under Elementor in the WP menu) and theme builder. Create your page and post templates there.

      The plugin I show you in this particular video is still great if your requirements for single post templates are more complex than that provided by Pro’s features.

  29. Hi Dave,
    Thanks for your video on the single post template. I have subscribed to your channel. I am sure I can learn a lot from these tutorials as an aspiring web developer.
    Keep up the good work.
    Regards,

  30. Very helpful and good information.
    Thank you very much!

Leave a comment

Tweet
Share