How to Use Astra WordPress Theme and Gutenberg

Laptop, tablets, smartphone with words "How to Use Astra WordPress Theme and Gutenberg" in bright geometric shapes of blue and purple

In this post I’ll show you how to use the Astra WordPress theme and Gutenberg block editor to build your website using Starter Templates.

The Starter Templates plugin offers you a library of starter sites from which to choose to help you get your site up and running quickly.

Simply replace the demo content and images with your own. It’s easy!

But keep in mind that it’s not necessary to import a starter site. It’s simply an option to help get you started.

If you have a basic knowledge of Gutenberg, then I’d recommend installing the free Astra theme, creating a child theme, and then build your site from scratch using Gutenberg block editor instead.

But if you’ve wanted to explore building an Astra site with Starter Templates, I’m happy to show you how.

Why I Chose Astra WordPress Theme and Gutenberg

I’ve been an avid Genesis fan for years, and most sites I have built are with the Genesis Framework.

The framework is solid, well-supported, and maintained.

But in all honesty, I was getting a bit tired of doing the same thing and decided to investigate other WordPress themes and frameworks.

I also wanted to be able to offer new and fresh designs to my clients that would be easier for them to maintain and customize.

I was in the process of redesigning my own website, and a major requirement was a theme that was lightweight and fast.

And it had to work with Gutenberg, the new WordPress Block Editor.

Astra WordPress Theme – Fast-Loading and Easy to Use

That’s when I came across Astra and made the decision to build my site with it.

I was thrilled at how solid the framework was and the variety of design elements integrated into the theme.

Astra WordPress Theme and Gutenberg Performance Testing

I did run performance testing on my site while it was in development.

And was greatly encouraged to see the site loading quickly even before I added a caching plugin or put the site on Cloudflare!

But the real test came when the site was published and live. I couldn’t be happier with the results from the major online testers:

Google Page Speed Insights Test
blank

Mobile

blank

Desktop


GTMetrix Test
blank

Once my site was done, I realized I needed additional features such as a sticky header and blog layout options that were only available in Astra Pro.

So I purchased that plugin and completed my site.

If you’ve been looking for something fresh, keep reading and I’ll show you how to use Astra WordPress Theme and Gutenberg to build your WordPress website.

Please note that this tutorial assumes you have a working knowledge of WordPress and a basic understanding of Gutenberg.

If not, then you might want to check out this easy-to-learn introductory Gutenberg class.

And if you’re just in the planning phases of your website, make sure to read our website planning guide so you start off on the right foot.

Topics

First we’ll review Astra features and the page builders you can use.

Next I’ll have a step-by-step guide for setting up the free Astra theme and importing a starter site using Starter Templates. Please note: Starter Templates 2.0 has replaced the Astra Starter Sites plugin.

For your convenience, please use the following links to jump to a particular topic of interest:

Astra WordPress Theme Features
Page Builders Supported in Astra
Getting Started with Astra
Install Free Astra Theme
Install Astra Starter Templates Plugin
Import Astra Starter Websites
Astra Pro Plugin
Install Google Analytics
Install an Astra Child Theme
How to Build a WordPress Website with Astra and Gutenberg [VIDEO}

Astra WordPress Theme Features

Starter Sites, Page Builders, WooCommerce Integration and More

One of the things I was looking for with a new theme was the ability to create pages and posts with Gutenberg.

And they needed to load fast ~ even if there were lots of images.

Having worked with several popular page builders such as Divi, Theme Fusion, and WPBakery Page Builder, I knew how much bloat the builders added to a WordPress theme.

And that extra bloat could result in pages taking from 5 to 6 seconds to load instead of 2 seconds or less as recommended by Google.

Since the Gutenberg editor is now native to WordPress, I was particularly interested in a theme that used it.

My guess was that a native editor would inherently be faster than any other page builder.

And it was!

Features

  • Astra integrates with major page builders though you don’t need to use one.
  • It’s easy to add a custom color palette to Astra and Gutenberg.
  • Astra comes with dozens of starter templates and a variety of layouts, fonts, and typography.
  • It has WooCommerce integration.
  • But most importantly it’s performance-focused and optimized for speed.
  • It is also SEO-Optimized and has basic schema markup to help search engines understand your website better.

Page Builders Supported in Astra

Elementor, Beaver Builder, Brizy and Gutenberg

If you’ve ever worked with a page builder, you know how quickly you can create a website once you become familiar with the page builder.

Gutenberg started off as a page builder plugin but is now included with the WordPress core as the native block editor.

The block editor lets you build a website by simply adding blocks to a post or page.

A block can be a heading, paragraph, list, button, section and more.

These website elements used to be difficult for novices to create and customize.

But Gutenberg removes all of that complexity.

So now we’ll take a look at how you can use the Gutenberg editor with Astra to create your WordPress website.

Getting Started with Astra

How to Use Astra WordPress Theme and Gutenberg

Using Astra Starter Templates

The following steps will walk you through setting up your site by importing one of the Astra Starter Sites using the Astra Starter Templates plugin.

A starter site is a demo site complete with content and images that you can import and customize.

Astra comes with lots of starter sites that are niche-specific such as travel, health and fitness, beauty, restaurant, tech and more.

As you go through the following tutorial, I highly recommend that you set up a sandbox site or use UpdraftClone to create a copy of your site.

This way you can learn as you go without fear of messing up your real website.

And if you are loading Astra into an existing website, make sure to take a backup first.

Install and Activate Astra WordPress Theme

In order to use the Starter Templates plugin you have to install the free Astra WordPress Theme first.

The following instructions assume you have basic WordPress knowledge.

  1. From the WordPress Dashboard, click on Appearance>Themes
  2. Click Add New
  3. Type “Astra” in the Search Themes box
  4. Install the theme
  5. Activate the theme

Install and Activate Astra Starter Sites Plugin

  1. From the WordPress Dashboard, click on Plugins>Add New
  2. Search for “Starter Templates”
  3. Click “Install Now”
  4. Click “Activate”

Import Astra Starter Site

Import Options

Let’s face it. Most of us don’t have the time or knowledge to code a website from scratch.

That’s the beauty of importing an Astra Starter Site! The heavy lifting is done for you.

All you need to do is customize for your branding, tweak, and write your content.

But it bears repeating ~ it’s not necessary to import an Astra starter site if you have a basic knowledge of Gutenberg.

How to Import an Astra Starter Site

Follow these steps to import an Astra starter site:

  1. First, decide on the page builder you will be using. I highly recommend and will be demonstrating the WordPress block editor, Gutenberg, in this post.
  2. From the dashboard, go to Plugins>Installed Plugins.
  3. Under Starter Templates click “See Library.”
  4. In the far right corner under “Howdy”, click the drop down to filter the starter sites for the page builder you want to use.
  5. Choose Gutenberg.
  6. The window will refresh with choices for a starter site using your selected page builder.
  7. Decide which starter site you want.
  8. Click on it to choose your starter site.
  9. You can click the button to preview the starter site.
  10. Decide whether you want to import the complete site or the home template.
blank

For this demo we’ll import the complete site.

When we click Import Complete Site, the following screen displays:

blank

I recommend that you leave all starter site options checked to ensure that the appropriate plugins, styles, widgets, and content get installed with your site.

Starter Site Options Explained

Keeping the default options checked will make it easier for you to build your site to look like the starter site you chose.

Let’s explore each of these options next.

Install Required Plugins

Since I chose Gutenberg the following plugins will be installed:

  • Ultimate Addons for Gutenberg – a wonderful free collection of Gutenberg blocks that will simplify your website building! Choose from blocks such as info box, multi buttons, advanced headings, price list, testimonials and more.
  • Astra Widgets – a free plugin that lets you create widgets for business address, social profile, and list icons. You can then add these widgets to your header, sidebar or footer on your website. See this post to learn more.
Import Customizer Settings

The customizer settings for your selected starter site will be imported. These settings control the design elements of your website.

But rest assured that if you are working on an existing site, a copy of your current customizer settings will get backed up to “wp-content/astra-sites” in case you need to restore it.

Import Content

Go ahead and import the dummy pages, posts, images and menus if you want the complete demo content installed.

Import Widgets

And finally, Import Widgets will bring in all the remaining pieces your website needs to look like the starter site.

Delete Previously Imported Site

If you are experimenting with various starter sites, you can check the box to “Delete Previously Imported Site.”

Otherwise, keep it unchecked to retain your existing posts, pages, etc.

Time to Import Your Starter Site!

Now we are ready to click “Import.”

Make sure you wait until the site is completely imported.

It can take several minutes so just be patient and don’t close your browser window.

Once done, click the View Site button and view your new site!

blank

Build and Customize Your Website

At this point, you’ve installed Astra Theme and Starter Templates plugin.

And you’ve imported a starter site.

But before you start customizing your site, I recommend that you install a child theme.

This way all of your customizations will be preserved if and when the Astra framework updates.

Once your child theme is created, you can replace the content and images and start customizing your new website.

You may be interested in the additional features offered by the Astra Pro.

Let’s do a quick review of that plugin next.

Astra Pro Plugin

Major Features

The Astra Pro Plugin is an add-on to the free Astra WordPress theme.

It extends Astra features and offers additional flexibility and customization options.

Some of the top features of the plugin include:

  1. A variety of site layouts including boxed, full width, padded and fluid
  2. A selection of 800+ Google fonts so you can completely customize your typography
  3. The ability to carefully customize the colors and background areas on your website
  4. The ability to create fun and different blog layouts
  5. 4 different header styles including sticky headers
  6. Variable footer layouts
  7. Unlimited website usage
  8. White branding of your web design
  9. Custom Layouts which allow you to “hook” into the theme to add Facebook Pixel or Google Analytics tracking code

So while you can build a complete website with the free Astra WordPress theme, you might want some of the additional functionality you can get from the Astro Pro plugin.

And while you’re at it, be sure to check out our guide on getting started with Astra Pro Plugin.

The next two sections will explain how to install an Astra Child Theme and add Google Analytics to your site.

How to Install an Astra Child Theme

Keep Your Customizations Safe!

If you plan on customizing the Astra theme, it’s best practice to install a child theme.

The child theme will retain any of your customizations in the theme files so that any future updates won’t break your site or overwrite your changes.

Learn how to create and install an Astra Child Theme here.

Once you have generated and downloaded your child theme, you can install and activate it on your site.

It will inherit all of the parent theme’s functionality and style. And when the parent theme gets updated, the child theme will preserve and protect your changes.

Install Google Analytics

Track Your Website Visitors

You’ll want to install Google Analytics in the header of your website.

It’s easy to do and doesn’t require any additional coding.

For instructions, please refer to this post and video tutorial.

Video Demo

How to Build a WordPress Website Using Astra and Gutenbeg

Update 7/6/2020: New video uploaded to show how to use the Starter Templates plugin, which has replaced the Starter Sites plugin.

Putting it All Together

Summary

Hopefully by now you have a better understanding of how to build a WordPress website with Astra and the Gutenberg Block Editor.

We’ve reviewed the major Astra Theme Features and discussed the integrated page builders.

You learned how to install the free Astra theme, a starter site, and a child theme.

And then we covered the Astra Pro Plugin, which gives you even more features and control over your website.

I hope that this tutorial has been helpful to you.

And I’d love for you to leave your comments or questions below.

I’m always happy to help!


Related Posts

Please note: This post contains affiliate links which means if you use them, I may make a small commission. However, I only recommend products I completely trust and use myself. Doing so also enables me continue to offer free content here and on YouTube.

16 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Syams Qomar
Syams Qomar
4 months ago

Is this blog realy use Astra?

mary
mary
6 months ago

I’m trying to avoid a gap on my pages with a Load More button. Load More leaves a huge gap at the bottom of the page. I thought I solved it by choosing the option other than Masonry layout but it didn’t hold. Help please help.

lawrence
7 months ago

Thank you so much for this post. Ive been designing brands / graphic / websites for over 20 years. I got married so to speak to divi years ago and have also tried for years to get away from but the deeper and busier you get it just makes it harder and harder. Finally had a project where I had to use astra with gutenburg and I am blown away. I feel like I am actually designing again lol. Divi I feel has tried to be everything to everyone and in that path has really bloated it up. We will… Read more »

lawrence
7 months ago

Really? Divi just really got bloated and then some. Noticed it especially after I stopped using the classic editor.

alex smoulders
7 months ago

Thanks Michelle, for sharing with us this very informative and detailed post on how to use astra wordpress and gutenberg theme’s. Really helpful indeed.

Jacco
Jacco
10 months ago

Have been out of the coding now for years and I noticed a huge gap between the time I started and the present, world goes fast :). So I started to experiment with elementor but I was a little disappointed about the page speeds, even after optimizing the website. Dont get me wrong I really like Elementor and all its flexibility. I have Astra and Astra PRO but never used it for some reason.. After looking into Gutenberg I ran into the ultimate addons for gutenberg by astra. Was playing around with it and I noticed the that a non-optimized… Read more »

Nicole
11 months ago

This is brilliant! I currently have Astra theme, with my home page built using Elementor. However, I want to redo my home page and silo pages as I’m not keen on how they are right now. I love the idea of doing it all with Gutenberg instead of Elementor. When I import a starter page what happens to my existing website? Will it immediately switch over and then I hustle to put it all together before too many people notice? Or can I work on it in the background and then launch it as my new website when I’ve finished… Read more »

Nicole
11 months ago

Thank you for the reply. I’m afraid you lost me as soon as we got to cloning! Maybe what I’ll do for now is simply install the Astra Widgets and the Ultimate Addons for Gutenberg plugins. Then I could make a draft page and start playing around with them and designing things. This would allow me to experiment in a “safe” setting before switching over to my new built pages. Is that a reasonable compromise or is there a fatal flaw I’m not aware of?

Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close