Blog With Elementor And Astra, Free Online Tutorials 2020 — 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 Templates 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…Table of Contents
- How This Dynamic Duo Helps You Build Your Blog
- Part 1: Building Your Blog’s Foundation With Astra
- Part 2: Customizing Your Core Pages With Elementor
- There’s More With The Pro Versions Of Astra And Elementor
- Build Your Blog With Elementor And Astra!
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 + Starter Templates Plugin
To build your blog’s foundation, you’ll need to install The Astra theme and its free companion Starter Templates plugin. Both extensions are listed at WordPress.org, so you can install them without leaving your WordPress dashboard:
Step 2: Import One Of The Starter Templates
After you’ve installed the Astra theme and Astra Starter templates plugin, you’re ready to import your blog design!*
To do that, go to Appearance → Astra Options → Starter Templates in your WordPress dashboard.
Then, make sure to select the Elementor page builder option:
You’ll then see all the possible starter templates 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:
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 Import Site
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 Templates 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!
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:
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!
