How to Build a Beautiful Blog with Elementor and Astra in under an Hour?
Sujay Pawar

June 25, 2018

How To Build A Beautiful Blog With Elementor And Astra In Under An Hour

How-To-Build-A-Beautiful-Blog-With-Elementor-And-Astra-In-Under-An-Hour

Struggling with how to find a blog theme that does exactly what you want it to do? There’s so much choice out there that the term “needle in a haystack” really couldn’t be more fitting.

Instead of wasting time trying to find a theme that’s hard-coded to do exactly what you need, why not just use a flexible lightweight theme that lets you do exactly what you want? Without needing to know a single thing about code!

That’s what the combination of Elementor and the Astra theme can offer for your blog. And in this post, you’re going to learn exactly how you can use these two free tools to create an awesome blog in well under an hour.

How This Dynamic Duo Helps You Build Your Blog

Here’s how you put together Astra and Elementor to build a great-looking, fully-customizable blog:

  • Astra theme – the Astra theme, and its free add-on Starter Sites plugin, acts as the flexible foundation for your blog and lets you quickly import templates and customize your blog using simple, code-free controls.
  • Elementor – this free page builder helps you design and customize your blog’s core pages using simple, code-free drag-and-drop editing.

The only thing you’ll need to get started is a fresh copy of WordPress – other than that these two tools take care of everything.

It’s time to build your blog…

Part 1: Building Your Blog’s Foundation With Astra

Astra is a great foundation for your blog for two main reasons:

  • It gives you a beginner-friendly way to customize your blog’s design using the simple, code-free WordPress Customizer.
  • It’s well-coded and super lightweight, so your blog will load fast and you won’t encounter any bugs or issues.

Step 1: Install The Astra Theme + Astra Starter Sites Plugin

To build your blog’s foundation, you’ll need to install The Astra theme and its free companion Astra Starter Sites plugin. Both extensions are listed at WordPress.org, so you can install them without leaving your WordPress dashboard:

install astra theme

Step 2: Import One Of The Astra Starter Sites

After you’ve installed the Astra theme and Astra Starter sites plugin, you’re ready to import your blog design!*

To do that, go to Appearance → Astra Sites in your WordPress dashboard.

Then, make sure to select the Elementor page builder option:

select page builder

You’ll then see all the possible starter sites you can import. Some templates – marked Agency – require the premium Astra agency package. If you want to avoid seeing these, you can use the “Free” tab instead.

To quickly preview any template, just click on it:

astra blog templates

Once you find a design that you like (we’re using the Coach starter site for this tutorial), click on it. Then, on the live preview, start the import process by clicking Install Plugins:

install plugins

Wait for a second while WordPress works, then you can click the Import This Site button to finish the process:

import blog templates

Once the process finishes, you can click the button again to view your site.

*You can always use the Customizer controls in the next section to design your blog from scratch – the Starter Sites just save you a lot of time and give you a great-looking design right away.

Step 3: Tweak Your Blog With The WordPress Customizer

Once you’ve imported your demo site, you’re ready to really make your blog your own.

To do this, you can use the Astra theme’s detailed Customizer controls. Without needing to know any code, these let you control:

  • The colors used on your blog
  • How your blog post layout looks
  • What fonts to use on your blog
  • Lots, lots more

You can learn more about the various Customizer controls in this help article.

To access the Customizer, go to Appearance → Customize in your WordPress dashboard.

This area is kind of like a sandbox – none of the changes you make are live until you hit Publish. So feel free to experiment and explore – you’ll see a live preview as you make every change and you can’t break anything!

configure with customizer

Some areas that are especially worth exploring are:

  • Colors & Background – this lets you control the colors of various parts of your blog.
  • Layout – this helps you control how your blog content looks, as well as other parts of your blog’s layout.
  • Typography – this lets you control the font and font size for various parts of your blog.

If you want even more options, you can upgrade to Astra Pro for:

  • More detailed color and typography controls – these give you even more options for customizing your blog.
  • Extra header options – for example, you can create a cool sticky header for your blog.
  • More control over your blog layout – you can display your posts in a grid, control your author bio display, and lots of other helpful blog settings.

View a full list of Astra Pro features.

Part 2: Customizing Your Core Pages With Elementor

Astra helps you make all kinds of tweaks to your blog’s style and design. But all of your blog’s core pages – homepage, about, etc. – are built with the Elementor page builder.

To customize these pages, you can use the drag-and-drop Elementor interface. Just click the Edit with Elementor option when you’re editing one of these pages:

edit with elementor

If you need some help using Elementor to edit your blog’s pages, the Elementor 101 videos are a great place to start.

There’s More With The Pro Versions Of Astra And Elementor

If you ever want more functionality, both Astra and Elementor have pro versions that offer extra functionality.

This functionality gives you even more control and flexibility when building your blog. For example, with Astra Pro you get:

  • Deeper control over blog layouts – among other features, you can set up a grid layout for your blog posts, which is especially helpful if you use eye-catching featured images.
  • Deeper color and typography options – get even more pinpoint control over your blog’s colors and typography.
  • Sticky and transparent header – get more control over where your blog’s navigation menu appears and how it functions.
  • Page Headers – create great-looking page title areas with breadcrumbs, meta fields, and other options.
  • Scroll to top link – improve your site’s user experience by letting users quickly scroll back to the top.
  • White label – if you’re building a blog for someone else, you can remove all Astra branding and replace it with your own.

And if you purchase Elementor Pro, you’ll get helpful new widgets that let you display your blog posts as part of your Elementor designs, as well as lots of other helpful functionality:

Build Your Blog With Elementor And Astra

Building a blog with Astra and Elementor gives you the power to completely customize your blog without having to know anything about code.

Using simple controls and drag-and-drop editing, you can build your perfect blog. And because Astra is optimized to load quickly, your blog won’t just look great, it will perform great, too.

We can’t wait to see what you come up with!

Join 208,419 Subscribers

Get exclusive access to new tips, articles, guides, updates, and more.

About the Author

Sujay is CEO and Co-Founder of Brainstorm Force, the company behind Astra. He is a diehard entrepreneur, growth hacker, and YouTube addict. Get in touch with him on Twitter @sujaypawar.

Sharing is Caring!
Share on facebook
Share on twitter
Share on telegram
Share on whatsapp

29 comments

  1. Pingback: How To Choose A WordPress Theme in 2018: The Definitive Checklist

  2. Pingback: How To Choose A Best WordPress Theme : The Definitive Checklist

  3. Thanks for sharing useful information. Great valuable article. Kindly tell me one thing how could a word flash continuosly in elementor??

    1. You’re welcome! 🙂

      Are you looking forward to implementing something shown on the demo page here

      If so, this can be done using the Fancy Heading widget of the Ultimate Addons for Elementor. You can take a look at the video tutorial we have for you.

    1. Hey Marvin,

      Sorry for the inconvenience caused!

      Looks like it was a temporary issue and we’ve already fixed that. However, if you still aren’t able to access these sites at your end, please open up a ticket at our support center, so that we can take a look and help.

  4. Hi, I’ve been trying to figure this one out on my own, but it’s just not working for me:( I’m using Elementor with Astra Theme; I imported the Outdoor Adventure Site and for some reason just cannot build a Blog Page.
    (I can’t edit it in Elementor, and when I go to “Costumize”, I can’t add more Blogs or costumize the blog section. )

    Also I’m afraid of losing what I’ve already built.

    Where can I find more specifics on this?

    Thank you in advance!

  5. The video appears to require Elementor Pro to drag the posts into the page. Is that right? How can I have a blog page with the free version?

    1. Hello Alex,

      Yes, Elementor Pro has the Post widget that allows you to fetch posts on a page. However, if you want a more advanced a creative Post widget, you can opt for the one in the Ultimate Addons for Elementor. You can read more about this widget in our article here.

      1. Hi Support Team. I have the same question as Alex. How can we have blog pages with the free version? (Ultimate Addons isn’t free)

  6. Hello I have imported the Astra Pro Yoga Instructor theme, but when trying to edit the blog template, it does not work, I lost everything after adding the blog to “Writing Settings”, I realized later that I should not have done that but once I removed it it did not work for me and I have not been able to restore the blog template and I’m afraid to lose everything I’ve already done. Can you help me? Is there a way to restore it? I use Elementor free and I do not see any blog / post widget, I also use Astra Pro.

  7. Hello! I’m loving this theme! I am using the “Outdoor Adventure” starter site with Elementor, and I’m having trouble modifying my blog archive page. Is there a way to reset that page to the starter site without losing all my blog posts? Whatever page is set as the “Posts Page” in Settings->Reading won’t open in Elementor, and has no header image. Any suggestions? Thank you!

  8. Claudia Iconaru

    Hi, Laura! Astra with Elementor was recommended to me for avoiding bloating theme issues built with visual composer/bakery. However i cannot make a beautiful fashion magazine layout with dynamic posts list just with elementor pro. I saw a tutorial recommending jet blog plugin but even that doesn’t offer the visuals i am used to. And again I have to make a decision between good code and looks/feel. Are you planning to release a fashion magazine layout with elementor with the pro/agency pack any time soon? Thank you very much!

  9. Hello,

    Can I do use this on a current blog with blogs dating back to over two years? Should I change theme etc will all my blogs still there while editing?

    1. Hey Lizelle,

      These steps help you import a ready-to-use complete website demo. It is recommended that you do this on a fresh WordPress installation.

  10. Thank you so much for this article.This article presents clear idea designed for the new people of blogging.

  11. WOW! Thank you for the wonderful video on adding a blog widget. It was just what I was looking for.

    Everything in the blog video was perfectly explained and extremely helpful.

    Thank you.

  12. Francine Weagle

    It’s a beautiful theme, but my posts never post to the blog. Any post I make creates a new “post” category. No one and no article has explained why this is happening. All WordPress can tell me is that it is an issue with the Astra theme. I guess, I will not be using this theme anymore.

    1. Strange. And I’m pretty sure it is not an issue caused by the Astra theme as it’s used by over 500,000 users without this problem. If you would like, please lodge a support ticket and provide us access to your backend. We will be happy to take a closer look and help 🙂

    1. Hello Kristian,

      The Posts widget you see is added using the Elementor Pro widget of the Elementor page builder.

      Yes, the video is made with Elementor Pro installed on the website.

Leave a Comment

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

Recommended Articles

Scroll to Top
Like what you read? Leave a comment

Send this to a friend