How To Create a Website Using Astra Theme And Gutenberg Editor 2022

In this article, I’ll show you the best way to use the Astra theme and Gutenberg block editor to construct your website utilizing Starter Templates.

The Starter Templates plugin provides you a library of starter websites from which to decide on that will help you get your website up and running shortly. Simply change the demo content and pictures with your own. Keep in mind that it’s not mandatory to import a starter website. It’s merely a choice to help get you began.

If you might have a primary knowledge of Gutenberg, then I’d advocate putting in the free Astra theme, creating a child theme, after which constructing your website from scratch using Gutenberg block editor as an alternative.

Astra WordPress Theme

Initially, I am thrilled to tell you how strong the framework is and the number of design parts built into the theme.

And putting in Ultimate Add-ons for the Gutenberg plugin enhanced the design expertise much more.

Astra Theme and Gutenberg

Astra theme and Gutenberg

I ran efficiency testing on my website while it was in development. And was enormously inspired to see the site loading quickly even before I added a caching plugin or put the site on Cloudflare! But the true test came when the site was published and live.

Once my website was done, I noticed I wanted extra options corresponding to a sticky header and blog layout options that had been solely accessible in Astra Pro. So I bought that plugin and completed my website.

If you’ve been in search of one thing recent, keep reading and I’ll present you the best way to use Astra Theme and Gutenberg to build your WordPress website. Please observe that this tutorial assumes you might have working information on WordPress and a primary understanding of Gutenberg.

For those who’re simply within the planning phases of your website, be sure to learn our website planning guide so that you begin on the correct foot.

Astra WordPress Theme Features

Starter Sites, Page Builders, WooCommerce Integration, and More

One of the things I was in search of with a brand new theme was the flexibility to create pages and posts with Gutenberg. And they needed to load quickly ~ even when there have been a lot of photos.

Having worked with several common page builders corresponding to Divi, Elementor, and WPBakery Page Builder, I knew how a lot bloat the builders added to a WordPress theme. And that further bloat might end in pages taking from 5 to six seconds to load instead of two seconds or much less as really useful by Google. Since the Gutenberg editor is now native to WordPress, I used to be particularly excited by a theme that used it. I guessed that a native editor would inherently be quicker than every other page builder. And it was!

But don’t simply take my word for it. Be positive to take a look at this Elementor Guide.

Features

  • Astra integrates with main web page builders though you don’t want to make use of one
  • Astra comes with dozens of starter templates and a wide range of layouts, fonts, and typography
  • It has WooCommerce integration
  • It provides you smartphone, tablet and desktop setting choices
  • But most significantly it’s performance-focused and optimized for speed
Astra theme and Gutenberg

Page Builders Supported In Astra

ElementorBeaver Builder, and Gutenberg

If you’ve ever worked with a web page builder, you know the way shortly you’ll be able to create a website with it. Gutenberg began as a web page builder plugin however is now included with the WordPress core because of the native block editor. The block editor permits you to build a website by merely including blocks to a post or page.
A block could be a heading, paragraph, list, button, section, or more. These website parts were once troublesome for novices to create and customize. But Gutenberg removes all of that complexity. 

Pros And Cons Of Gutenberg Block Editor

Let’s go through Gutenberg Editor Pros and Cons

Pros

  1. Incredible Editing Experience
  2. Medium Style Editor
  3. Gutenberg Means Blocks
  4. Content Focused Editor With More Screen Space
  5. Versatile System
  6. Designer-Friendly Interface
  7. All data Within Your Reach

Cons

  1. Compatibility Issues
  2. A few Shortcuts Won’t Work
  3. API
  4. Risky for Plugins and themes ( but don’t worry it does not affect Astra )

Astra Pro Plugin

The Astra Pro Plugin is an add-on to the free Astra WordPress theme. It extends Astra features and offers extra flexibility and customization choices.

Some of the top features of the plugin :

Astra theme and Gutenberg
  1. Quite a lot of website layouts including boxed, full width, padded and fluid
  2. A collection of 800+ Google fonts so you’ll be able to fully customise your typography
  3. The capability to rigorously customise the colours and background areas in your web site
  4. The capability to create fun and totally different blog layouts
  5. 4 totally 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 let you “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, main menu, and footer

Summary


Hopefully, by now, you might have a greater understanding of the best way to construct a WordPress website with Astra theme and Gutenberg Block Editor. We’ve reviewed the foremost Astra Theme Features and mentioned the built-in page builders. You discovered the best way to set up the free Astra theme, a starter website, and a child theme. And then we coated the Astra Pro Plugin, which provides you much more options and management over your website.

More Blogs