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

Updated: 10/3/2019

In this post I will show you how to use the Astra WordPress theme and Gutenberg block editor to build your website.

I’ll also give an honest review of my experience working with Astra including technical support and performance testing of the theme.

If you’ve wanted a fresh look for your website, then Astra WordPress Theme and Gutenberg are a winning combination to help you create a beautiful website.

And 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 build 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.

I was in the process of redesigning my own website, and I couldn’t settle on a theme that I liked.

A major requirement was finding a theme that would be 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 this site with it.

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

I was able to build out my site fairly quickly with only two support issues. The first was a simple caching issue.

The second was a problem I found with the blog template for my starter site. The template had an issue with media queries for tablets not displaying the page properly. Astra support fixed the template within 48 hours.

Astra WordPress Theme and Gutenberg Performance Testing

I did run performance testing on my site while it was in development. I 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

Mobile

Desktop


GTMetrix Test

Once my site was done, I realized I needed additional features such as transparent and sticky headers that were only available in Astra Pro. So I purchased that plugin and completed the site.

So if like me 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.

Topics

What follows is a step-by-step guide for setting up the free Astra theme and importing a starter site.

For those that prefer a video demonstration, I’ve also included a YouTube video, which you’ll find at the bottom of this post. The video covers all of the topics in this post and gives you a visual guide of how to build a WordPress website with Astra WordPress theme and Gutenberg.

For your convenience, this article covers the following topics in case you want to jump to a specific topic of interest.

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 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

  • As of this writing, Astra is used on over 300,000 sites.
  • Astra integrates with major page builders.
  • Astra comes with dozens of starter sites and a variety of layouts, fonts, and typography.
  • It has WooCommerce integration.
  • But most importantly it’s performance-focused and optimized for speed. And as a web designer, that’s what was most appealing to me.
  • 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 a user 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 Sites

These steps will walk you through setting up your site by importing one of the Astra Starter Sites. A starter site is simply a basic WordPress site that you can import and use as a starting point for your new website.

Astra comes with over a hundred starter sites that are niche-specific such as travel, health and fitness, beauty, restaurant, tech and more. But first you have to start by installing the free Astra WordPress Theme.

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

Install and Activate Astra WordPress Theme

The following instructions assume you understand how to install and activate a WordPress theme .

  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

If you need a detailed demo on how to install a WordPress theme, please refer to the following article:

Install and Activate Astra Starter Sites Plugin

The following instructions assume you understand how to install and activate a WordPress plugin.

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

If you need a detailed demo on how to install a WordPress plugin, please refer to the following article:

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.

So let’s get started!

How to Import an Astra Starter Site

As mentioned earlier, the following instructions assume you have a basic knowledge of WordPress.

If not, you may want to watch our step-by-step video, which I’ve provided to help guide you through the process of installing and activating the Astra WordPress theme.

Otherwise, here are the steps to import a starter site:

  1. First, decide on the page builder you will be using. I highly recommend and will be working with the WordPress block editor, Gutenberg, in this post. But you also can choose Beaver Builder, Elementor, or Brizy if you are more comfortable working with them.
  2. From the dashboard, go to Plugins>Installed Plugins.
  3. Under Astra Starter Sites 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. I will click “Block Editor (Gutenberg)” since that’s the page builder I want to use.
  6. The window will refresh with dozens of options for a starter site using your selected page builder. As of this writing, Gutenberg has the fewest starter sites with 21 templates available.
  7. You can preview the starter site before you import it. To do so, hover the mouse over the starter site you’re interested in to see the sample home page.
  8. Click on it to choose your starter site.
  9. A left pane will open and you will have the option to import the selected starter site. See screenshot. A description of import options is below.

Starter Site Options Explained

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

Doing so will make it easier for you to build your site to look like the starter site you chose.

The following section will describe what each of these options is.

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

Why not import the dummy pages, posts, images and menus? It will really help if you are new to all of this.

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 just 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 Site.”

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, you can view your new site!

Build and Customize Your Website

Before you start customizing your site, you might want to generate and install a child theme.

Now you can upload your logo and customize your site with your brand’s colors. Replace the starter site content with images and posts of your own.

You can completely build your site without spending a cent!

But before you call it done, let’s take a look at why you might want to purchase the Astra Pro plugin or one of the bundles.

Astra Pro Plugin

Major Features

The Astro Pro Plugin is an add-on to the free Astra WordPress theme that extends the 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 and transparent headers (that’s the feature that I needed!)
  6. Variable footer layouts
  7. Unlimited website usage
  8. White branding of your web design
  9. Ability to “hook” into the theme to add 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 premium plugin.

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 Use Astra WordPress Theme and Gutenberg

Our video tutorial will show you step-by-step instructions on how to use Astra WordPress Theme and Gutenberg to build your website.

Please note the first two minutes of the video covers Astra Features and Page Builders. The actual “how-to” steps start at the 2:13 mark.

And as I mentioned in the video, if you’re still feeling a bit lost using the Gutenberg block editor, make sure to check out this awesome Gutenberg Ninja introductory course. It’s easy-to-follow, no-nonsense training that will get you up to speed in no time!

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.

I showed you how to install the free Astra theme and the Astra Starter Sites Plugin.

We imported an Astra Starter Website. And then covered the Astra Pro Plugin, which gives you even more features and control over your website.

From here you can customize 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.

Leave a Reply

avatar
  Subscribe  
Notify 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