How to Replicate a Popular Blog Design With the Elementor Pro Single Builder

How to Replicate a Popular Blog Design With the Elementor Pro Single Builder

I was deeee-lighted to be asked by the guys at Elementor to make a guest tutorial video for them. Quite an honour!

They asked me to make a tutorial showing how to replicate a popular site’s blog post design, using the brilliant new Single Builder in Elementor Pro.

Challenge accepted.

In this video for Elementor, watch over my shoulder as I replicate the blog design for a very popular and well-known WordPress hosting company.

This one video is bursting with all kinds of Elementor workflow tips and tricks. You’ll learn exactly how to use the new Single Builder in Elementor Pro… and much much more besides.

Watch the video:

Also check out a ton of other great videos on Elementor’s YouTube channel.

Sorry the free bonus video I mention is no longer available.

43 thoughts on “How to Replicate a Popular Blog Design With the Elementor Pro Single Builder”

  1. Thank You Dave, for introducing me to Elementor. I have been watching your videos, learning and creating a lot recently.
    This new video is really helpful to a lot of learners(especially beginners), this can help them to experience the beauty of creation.
    Thanks again.
    – Joy

  2. Hi Dave,

    Very nice video. I have one question. In the custom css you use the selector “selector” as in

    selector {
    position: absolute;
    top: 0px;
    left: -60px;
    I’ve not seen the actual word “selector” used this way in css before, and my attempts to Google info about it just gets me information about selectors in general…

    Help out a self-taught css-er, here, would you? Thanks!

    • Thanks Eileen. It’s actually special to Elementor. If you add custom CSS in that box (and that box only), you can use the word ‘selector’ as shorthand for: ‘select THIS widget’. Saves having to figure out how to select that widget itself. 🙂

  3. Thank you, Dave! I learned a lot in this video – and like you said at the end, “Phew!” – for me, anyway (not a designer or developer). Good stuff!

  4. Thanks again Dave,
    This will save time and I’ll be able to create a “look” for my Blogs
    You have a nice, easy and informative way of explaining Elementor in your videos.

  5. Great video, I learned a lot!

    One question about the comment widget which is visible at 22:20 in the video. It states that it uses the active theme comments design. For me it’s not clear where elementor starts and the theme ends. In this case it seems to me that you depend on the theme for the comments design or am I wrong?

    • Thanks Leonard. Yes, the Elementor post comments widget uses the same styling as used by your theme. It’s a shame you can’t change those, but I think we’ll see different ‘skins’ for that widget soon.

    • I will do my friend! Made probably 100 videos this last year, but all for paying students. Had a lot of practice. 🙂

      Good to hear from you buddy. I hope all is well.

  6. Thank you Dave for taking the time to show and explain, extremely useful. Another great way to learn is to tear apart an existing layout, so with that in mind, is this layout available as a template to download for us to experiment with?

    • The form widget is Elementor Pro only I’m afraid. If you had that, then it integrates with MailChimp easily, you just pop your MailChimp API key into Elementor’s settings.

  7. Hi,

    thanks for sharing all your experience in the videos. Do you have any idea, if it is possible to customize my own comment section? Even Elementor Pro lacks this possibility. Or am i wrong?

  8. Hello,
    I have been developing some websites, and your videos are one of the best gems I have ever found in youtube. Thank you for making those videos.

  9. Great tutorial. However, when I view it as mobile, it looks like this template is not responsive at all and it looks terrible. Do you cover this in another video by chance?


Leave a comment