How To Create A Website With Astra & Gutenberg Block Patterns

Making a website can be daunting, especially if you do not know how to code and build a website from scratch. You also don’t need to worry about getting your hands on the best website graphic design tools from the start.

There are other aspects you should focus on at the beginning of your blogging journey.

This article aims to assist anyone who wishes to make their own website using the Astra WordPress theme and the Gutenberg block patterns without the need to learn any coding or create their own theme from the ground up.

I will teach you the basics to get started, whether you’re a freelancer trying to start a blog to display your work or a small business owner looking to reach a larger audience.

What Is WordPress Gutenberg?

Gutenberg is the new WordPress editor built from the ground up with a focus on flexibility. It initially appeared in WordPress 5.0, and it is meant to replace the default classic TinyMCE editor, which has been around since the beginning of WordPress and has not changed much since then.

In case you’re unfamiliar, WordPress is a content management system, or CMS, which is a program that lets you manage important aspects of your website, such as content, without knowing how to code.

As a result, WordPress makes it easy for anyone, even non-programmers, to create a website.

Gutenberg is a block-based editor, which means that instead of using one single content field, you can now use separate blocks for different kinds of content. This gives you more control over your website’s appearance.

It also makes it easier to add content without using any code like HTML or CSS.

Gutenberg was created to make the process of creating content more intuitive and pleasing to the eye.

It also brings the functionality of page builders into WordPress core, making it easier to create beautiful-looking pages without writing any code at all.

However, to build a website with WordPress, we need a theme.

What Is Astra?

Astra is one of the most lightweight and customizable WordPress themes you can find in the market, built for performance and speed — it has been tested for loading in less than 0.5 seconds.

It is used by over 1,600,000 websites globally and is rated five stars in over 5,000 genuine user reviews.

Astra enables you to easily customize every facet of your website design without writing any code with a plethora of features. It comes with pre-built website templates that can reduce your website design time and make it easier to build a beautiful website.

You’ll have complete control over design, colors, layout, typography, and more through the easy-to-use Customizer feature.

Astra is a free WordPress theme that anyone may use to start building their own website.

However, for extra features, you may upgrade to Astra Pro.

Astra Pro is the powerful premium add-on that takes your site even further. With Astra Pro, you can add more color options, typography options, customizations, and more.

What’s more, Astra Pro includes templates for Gutenberg, Elementor, Beaver Builder, and Divi Builder. These themes make it easier to create a professional-looking website design.

Click here for a complete list of the features included with Astra Pro.

How Astra Pro Makes Creating a Website Simple

Astra Pro is an extension plugin for the Astra theme. It adds a ton of customization and design options to your site.

This makes things simple and saves you from using multiple plugins on one page, which can cause complications.

Astra Pro comes with a library of starter templates that you can use to build your website with ease. It also enhances your website’s customization capabilities by adding several new features.

If you’re not familiar with block patterns, they are similar to page templates but based on blocks – not pages or post types. This means you can use them anywhere you can add blocks.

For example, you could use a block pattern in your posts, pages, custom post types, or other widgets and sidebars throughout your website.

What Are Block Patterns?

One of the many new features since WordPress 5.5 is the introduction of block patterns for the native Gutenberg editor.

For a long time, the WordPress team has been seeking to make the experience of designing a WordPress site more intuitive and accessible to users with no coding knowledge.

After all, if your goal is to create an attractive and functional website, it just doesn’t make sense to have to jump through technical hoops while you’re doing it.

Gutenberg block patterns are preconfigured layouts composed of standard Gutenberg blocks. The block patterns behave in the same way as conventional blocks, which means that you can alter them after you have placed them.

On the other hand, the standard layouts make it easy to design a more appealing page. With block patterns, you may customize each part by selecting from various layouts.

You can also generate custom patterns in addition to the default block pattern selections. This implies that theme and plugin authors can add their own block patterns, giving you more customization possibilities.

How To Create a Website in WordPress With Astra and Gutenberg Block Patterns

Before building a website with Astra using Gutenberg blocks, we need a domain name and a web hosting provider.

Domain Name and Web Hosting

You need a domain name and a web host to have a website.

A domain name is the address of your website. It’s what people type in the URL bar to get to your website. For example, www.vaslou.com, google.com, and forbes.com are all domain names.

Domain names should be relevant to your business or niche. If you’re a blogger, I recommend using your real name, as you’ll be able to build a personal brand. Because you’re not tied to a specific limited name, you’ll be able to change your content strategy at any time.

A web host, like DreamHost, is where your website “lives” on the Internet. Web hosts give space on their servers for your website, as well as the technology that allows people all over the world to see it at any time of day or night.

Get started with DreamHost for $2.59/mo (includes a free domain name).

WordPress Installation

After choosing your web host, you need to install WordPress.

Most web host providers offer an easy WordPress installation on their servers. If you choose DreamHost, you can install WordPress with one click.

Inside your DreamHost dashboard, select WordPress and click on “Learn More & Install.”

Select your domain name from the drop-down menu, and click the “Install it for me now!” button.

Congratulations, you now have WordPress installed on your web hosting server. You can start a live chat with DreamHost’s customer support if you run into any issues. You’ll be able to solve your problem in no time.

Astra WordPress Theme

Now that WordPress is installed, you need to install the Astra theme.

Inside your WordPress dashboard, click on Appearance > Themes.

Then click on Add New.

Type “Astra” in the search box, select the Astra theme, and click on Install.

To activate the theme, click on Activate.

Starter Templates Plugin

Now that you have the Astra theme installed, your website should look like this.

As you can see, the theme is in its raw state (and it doesn’t look that much appealing).

To take advantage of website templates already built for us, you will start by installing the Starter Templates plugin.

WordPress plugins are programs that you can install on your WordPress website to add new features and functionality, such as photo galleries, contact forms, spam protection, etc.

You can upload a plugin by logging into your WordPress website, clicking on Plugins, and clicking on Add New.

By installing WordPress plugins, you can add new features to your website without knowing any code or programming.

To install the Starter Templates plugin, you can type “Astra” in the search box and click on Install Now on the Starter Templates box.

To activate the plugin, click on Activate.

You now have the Starter Templates plugin active.

Install a Starter Theme

To choose one of the themes, click on Plugins and look for Starter Templates. Click on See Library.

Now you can pick your favorite page builder.

Elementor and Beaver Builder are two powerful page builders for which the Starter Templates plugin offers many design templates. However, we’ll use the Block Editor, as the main purpose of this article is to show you how to use Gutenberg block patterns with the Astra theme.

You’ll be shown a ton of professional-looking website templates you can choose from.

When selecting your favorite theme, you’ll be prompted to customize it, including your logo, colors, and fonts.

You can also choose to import the placeholder photos. However, if you don’t want those images in your media library, you can uncheck that box.

In a few seconds, you’ll have your theme ready.

Install Ultimate Addons for Gutenberg

Astra has all the features you need to create a website that looks professional and beautiful. It also works great with popular page builders such as Elementor and Beaver Builder.

If you are using the Gutenberg editor on your site, then Spectra is a must-have plugin. Ultimate Addons for Gutenberg is a free WordPress plugin built by Brainstorm Force—the same team behind Astra.

There are a few reasons why you should use the Ultimate Addons for Gutenberg plugin to create your website with Astra.

First of all, Ultimate Addons for Gutenberg will make your website-building journey with Astra more fun and exciting. It is one of Gutenberg’s best page builder plugins and provides you with a massive set of additional blocks that can help you build a beautiful website with ease.

To install Ultimate Addons for Gutenberg, click on Plugins on your WordPress dashboard, and type “Gutenberg Blocks” on the search box. Look for Gutenberg Blocks — Ultimate Addons for Gutenberg, click Install Now, and Activate.

Now, when you’re editing a page or a post, you have more Gutenberg blocks to choose from.

How to Use Gutenberg Block Patterns

Adding content using Gutenberg block patterns is easy. When editing a page or a post, click on the “+” sign to create a new block.

The default tab that appears is Blocks. However, if you click on Patterns, you get access to the Gutenberg block patterns templates, separated by types such as buttons, columns, galleries, headers, text, and queries.

As an example, I chose the first one on the list of the Buttons type.

This Gutenberg block pattern comprises three blocks, each composed of several other blocks. To change any of them, click on them and use the block editor on the right side of the screen to make changes.

Although not every block has the same customization options, you have complete control over how it displays.

How to Create a Custom Block Pattern on a Page

Besides using the pre-built block patterns templates inside Gutenberg, you can also create your custom block patterns. For that, we’ll need BlockMeister, a free block pattern plugin.

Go to Plugins > Add New, and type “BlockMeister.” Click on Install Now and then Activate.

Next, go to Block Patterns and click on Add New.

You’ll now be on the default Gutenberg editor page. Add all of your desired blocks to create the pattern you want to utilize. Press Publish when you’re done.

You have created your first custom block pattern.

When you create a new page or post, you’ll be able to see it in the drop-down menu in the Patterns tab of the Gutenberg blocks.

You can add as many block patterns as you want.

Wasn’t that easy?

Website Speed

After building custom blocks, it’s time to test our website speed.

Because I want a clean start, there will be no additional articles, pages, media, or plugins to influence this experiment. This way, speed tests can be as accurate as possible. The goal is to employ a simple Astra theme as light as possible.

I’m using a dedicated test domain for this experience (https://vaslou-test.com).

Here are the sites used to conduct the speed tests:

• Google PageSpeed Insights.
• GTmetrix.
• Pingdom Tools.

Google PageSpeed Insights

GTmetrix

Pingdom Tools

As you can see, the Astra theme is one of the fastest WordPress themes available. It scored a 100% performance on both Google’s PageSpeed Insights and GTmetrix.

A quick website is essential for Google ranking. However, remember that web hosting also affects your website speed.

The reason for Google prioritizing site speed as ranking criteria is straightforward: it results in a much better user experience for visitors. The quicker the speed with which your website loads, the greater the likelihood that a user will have a favorable experience when visiting your site.

5 Essential WordPress Plugins To Keep Your Website Healthy

When starting on a new WordPress website, several essential plugins come to mind. Plugins are like apps for your WordPress website. They extend and expand the functionality that already comes as part of WordPress.

So why are they so essential? I’ve put together a list of five key plugins to get you up and running quickly and easily. You can find all of these plugins in the WordPress plugin directory.

1. Rank Math

Rank Math is a plugin for WordPress that helps optimize your website for search engines. This means that you can make your website look better on Google and, in turn, get more traffic.

It’s a free and paid plugin with practically all the capabilities you’ll need to optimize your website. You can update the title and description of your pages, get feedback on each page’s content and ensure all images have alt tags.

This will help make your website look even better on Google while also increasing the quantity of organic traffic you receive from search engines – which is usually one of the most significant traffic sources for any website.

Key Features

• It helps you optimize your articles for keyphrases, including synonyms and related keyphrases.
• Automatically creates XML sitemaps.
• It identifies duplicate content.
• It helps you build a strong internal linking structure.
• Includes a powerful redirect feature that avoids errors and dead ends.
• Adds structure data to your website, so Google understands it better.

Pricing

Rank Math is an entirely free plugin. However, consider getting the Rank Math Pro plan for $59 per year for extra features.

2. FlyingPress

FlyingPress is the most lightweight and powerful caching plugin for WordPress on the market.

It integrates many speed optimization features to make your website faster — and it does all of this automatically, which means there’s no need for any coding knowledge whatsoever.

With FlyingPress, you can potentially boost your site’s Core Web Vitals easily, which translates into a better overall user experience and higher conversion rates for your business.

Key Features

• Fast page caching.
• The cache is automatically preloaded when you make updates to your web pages.
• Preload fonts.
• You can minify and consolidate your site’s CSS and JS files, improve CSS delivery, and load JS deferred.
• Lazy loading lets you load media files like images only when needed.

Pricing

• Personal: $60 first year, then $42/yr (1 website)

3. Elementor

Elementor is a WordPress page builder that enables you to design professional website pages without the necessary coding knowledge.

Whether you’re a small business owner, freelancer, marketer, or even an agency, you can use Elementor to create your marketing content — landing pages, posts, websites, pop-ups, etc.

It’s easy to use and has features that enable you to build a website fast.

Key Features

• Over 100 designer-made website kits for every need.
• Real-time design collaboration with other team members.
• Drag-and-drop editor.
• Includes over 90 widgets fully customizable.
• Custom positions, margins, padding, and global settings for typographies & colors.

Pricing

Elementor has a free version where you can do almost anything. A premium edition with more capabilities is available for $49 per year and is limited to one website.

4. Sucuri

Sucuri is a prominent WordPress security plugin that protects sites built on other CMSs such as Magento, Drupal, and Joomla.

Sucuri offers both a free and a paid edition. The paid version includes what they consider the best feature of the plugin — an enterprise-grade firewall.

Key Features

• File Integrity Monitoring.
• Security Activity Auditing.
• Blocklist Monitoring.
• Remote Malware Scanning.
• Post-Hack Security Actions.
• Security Notifications

Pricing

• Basic Platform: $199/yr.
• Pro Platform: $299/yr.
• Business Platform: $499/yr.

5. UpdraftPlus

UpdraftPlus is one of the most well-known and widely used WordPress backup plugins available today. It’s easy to set up, easy to use, and has comprehensive features to ensure your website is safe.

UpdraftPlus is a backup and restoration plugin that offers excellent backup and restore features. It enables you to perform a complete backup of your site, save it on numerous cloud storage alternatives such as Dropbox, Google Drive, and Amazon S3, and instantly restore backups from your WordPress admin panel.

Key Features

• It backups your WordPress files, databases, plugins, and themes manually or regularly.
• Daily, weekly, fortnightly, or monthly backup schedules every 2, 4, 8, or 12 hours.
• It clones your WordPress site and transfers it to a new domain or host easily.
• It allows for incremental backups.
• It encrypts sensitive databases.
• Locks access to the plugin via a password.

Pricing

UpdraftPlus is available free of cost. However, for extra features, they offer a premium version with different plans:

• Personal: $84 (2 licenses).
• Business: $114 (10 licenses).
• Agency: $174 (35 licenses).
• Enterprise: $234 (unlimited licenses).
• Gold: $478.80/yr (unlimited licenses).

Astra & Gutenberg Block Patterns FAQs

Here are some questions related to the Astra WordPress theme and Gutenberg Block Patterns.

How do I make a Gutenberg website?

Making a WordPress website with the new Gutenberg editor is pretty straightforward. You’ll need a theme compatible with the Gutenberg block editor, such as Astra.

After deciding your domain name and hosting provider, you need to install WordPress on your server. You can then install the Astra theme in your WordPress dashboard’s Theme area.

You now have a website with a Gutenberg-compatible theme that is ready for you to personalize completely.

How do I create a custom block in Gutenberg?

To create a custom block in Gutenberg, you need a plugin to create custom blocks such as Genesis Custom Blocks free plugin. This plugin lets you add a wide range of fields to your block and configure how they’re displayed.

Bear in mind that some coding skills might be necessary to create custom blocks.

What are Gutenberg block patterns?

Block patterns are a collection of prefabricated blocks that you may insert into pages and posts and personalize with your own content. It’s an easy approach to build gorgeous layouts that combine multiple blocks to create professional-looking designs.

How do I use block patterns in WordPress?

To use block patterns in the WordPress editor, follow these steps:

1. Create a new post or page.
2. Select the “+” sign on top of the screen.
3. Click on the Patterns tab.
4. Choose the block pattern you want to use.

Is Gutenberg free?

The WordPress block editor, also known as Gutenberg, is entirely free. However, in order to install WordPress and make use of the Gutenberg blocks, you must be a subscriber to a hosting provider.

Wrapping It Up!

As you can see, creating a website using Astra and Gutenberg block patterns is simple and straightforward.

Because the Astra WordPress theme is optimized for Gutenberg blocks, creating a website with WordPress is a smooth and seamless experience. You can start focusing on creating more content rather than the development workload. In the end, isn’t this what we all want?