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.

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 want 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 many sites I have built are with the Genesis Framework.

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

But I wanted to be able to recommend a WordPress theme that would be easier for clients to use.

If you are undecided between Genesis and Astra, please see my theme review to see which one is right for you.

But since I was in the process of redesigning my own website, I decided to investigate Astra using Gutenberg, the new WordPress Block Editor.

Astra WordPress Theme – Fast-Loading and Easy to Use

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

And installing Ultimate Add-ons for Gutenberg plugin enhanced the design experience even more.

Astra WordPress Theme and Gutenberg Performance Testing

I ran 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:


GTMetrix Test
Codefetti.com GTMetrix Performance Report as of 2/15/21

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

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, Avada 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!

But don’t just take my word for it. Be sure to check out this deep performance study by BlogAid to see comparisons.

Features

  • Astra integrates with major page builders though you don’t need to use one
  • Astra comes with dozens of starter templates and a variety of layouts, fonts, and typography
  • It has WooCommerce integration
  • It gives you smartphone, tablet and desktop setting options
  • But most importantly it’s performance-focused and optimized for speed

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 with it.

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.

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

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

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.

For this demo we’ll import the complete site.

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

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.

Delete Previously Imported Site

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

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

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 Widgets / Install Required Plugins

Import Widgets will bring in the pieces your website needs to look like the starter site you have chosen.

And since I chose Gutenberg, the following required 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.

Please note: Importing the Starter Site template also imports the Gutenberg plugin. You will NOT need this plugin on your site since Gutenberg is built into the WordPress core.

Import Content

This option will import the dummy pages, posts, images and menus if you want the complete demo content installed.

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!

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 also 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
  10. Header/Footer Builder which is a drag-and-drop builder that simplifies customizing your above and below headers, primary menu, and footer

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 following video will give you step-by-step instructions for building a WordPress website using Astra and Gutenberg.

Video Demo

How to Build a WordPress Website Using Astra and Gutenbeg

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.

About The Author

16 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Syams Qomar
Syams Qomar
1 year ago

Is this blog realy use Astra?

mary
mary
1 year 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
1 year 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
1 year ago

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

alex smoulders
1 year 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
1 year 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
1 year 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
1 year 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