How To Create A Website Using Astra & Gutenberg Block Patterns

So, let’s start knowing about a few basics 🙂

And if you are short of time, just click on the table to jump to your section.

Disclaimer note: This article contains affiliate links, which means we make a small commission if you end up buying the product at no extra cost. Saying so, we give high marks to the products, review those which we test and find the best.

Aso check out the below-related articles,

Is Bluehost web hosting good? 

How to improve website security of your small business website

Human Synthesys Studio Action-Packed Review

What is WordPress Gutenberg Block Patterns?

The Gutenberg Editor is a new way of editing content on WordPress, which is set to replace the current post editor. It’s a block-based editor that allows you to create rich content without having to know HTML or CSS.

A block-based editor means you can define blocks of content, which might include a heading, a paragraph, or any other type of content. You can expose some of these blocks to users and keep others hidden.

This is similar to the current post editor where you have an area where your text appears on the front-end and then separate areas for images

What is Astra Pro version?

Astra Pro WordPress theme is a clean and modern, fully responsive template. It comes with all the features and tools that you need for starting a successful blog or website.

This theme is the perfect choice for businesses, bloggers and webmasters who want to create an attractive website with minimal effort. It includes advanced features like custom widgets, unlimited colour schemes, slider revolution, Google fonts and many more.

Astra Pro version comes with a lot of powerful features that will take your website to next level. You can use it even as an e-commerce store if you wish.

How does Astra Pro version theme make creating a website simple?

Astra Pro is a WordPress theme for small businesses, freelancers and creative agencies. It comes with more than 30 pre-made layouts to choose from. You can customize it to suit your needs in just minutes. .The theme includes a layout for posts, pages and about.

Astra Pro version provides you with all the tools which help in how to build a website in WordPress.

It has a drag and drops page builder that lets you create any layout imaginable without touching any code. You can also use Astra theme’s customizer tool to tweak the theme until it looks exactly how you want it to look.

What are Gutenberg block patterns templates?

Gutenberg block patterns are the most popular blocks used in the Gutenberg editor. These blocks can be used to create different types of content such as text, image, video and more.

A key difference is that there are no predefined blocks or containers with Gutenberg. Instead, you can use the blocks to create your own content containers and choose from a variety of CSS classes to style your content.

Gutenberg block patterns is a set of reusable components that can be used to build complex layouts with a single component. These blocks are built using React and styled using CSS, and they are available for free under the MIT license.

Also, the Gutenberg full width block enables you to create full-width layouts for your blog posts and pages with ease.

What is required to build a website?

To create a website, below are the required tools, plugins, platform etc. which are required. I have tried to write a brief on each of the points for better understanding.

Domain

It’s the first thing to be considered for creating a website.

A website domain is the website address that you type into your browser to load a web page.

It’s a unique string of characters that identifies a particular website. It is what you type into your browser bar when you want to visit a site.

There are two types of domains: country-specific and international. Country-specific domains are generally used by businesses in the same country as their target market while international domains can be used by anyone, regardless of where they are located.

A domain name is an internet address that functions as an identifier and a web address. It is the unique web address for a site and usually ends with “.com”, “.net”, or “.org”. For e.g. shoutway.com.

Hosting

A website hosting is a service that provides the infrastructure and tools to create, publish, maintain and host webpages.

Web hosting service providers are responsible for storing website files and databases, running scripts for applications like content management systems (CMS) or e-commerce platforms, providing data transfer services to the user’s website and managing security.

There are two types of web hosting services: managed and unmanaged. Managed hosting services provide a higher level of customer support, while unmanaged hosting services are more cost-effective.

WordPress

It’s a free and open-source content management system (CMS) created by Matt Mullenweg and Mike Little in 2003. WordPress is the most popular CMS in use, powering approximately 60 million websites.

The software offers significant flexibility for those who are designing their own site, with themes and plugins that allow users to tailor the interface to their needs. It can be used as a blogging tool or a full website design platform.

WordPress has been translated into more than eighty languages, making it available in virtually any language for which there is an online translator. The CMS is backed by a large community of developers who contribute new features and security updates through the public code repository.

WordPress Theme (Astra)

Astra WordPress theme has both free and Astra pro version that can be used for any type of website. It is designed to provide an elegant and professional look.

The Astra theme is a modern and minimalistic design, with a focus on typography, readability and user experience. It comes with more than 600 Google Fonts and some advanced typography options like font size, line height and letter spacing.

The Astra theme includes a drag-and-drop page builder, which makes it easy to create custom page layouts without having any coding knowledge. It also has an integrated image editor that lets you edit images with just a few clicks.

The Astra theme has been optimized for speed and SEO, so your site will load fast and rank higher in search engines like Google.

WordPress plugins

WordPress plugins are pieces of software that can be installed on top of a WordPress website to provide additional functionality.

They can extend the core functionality of the platform, or add features that don’t exist in the default installation. They may also be used to remove unwanted features and functions.

Plugins can be used for a variety of tasks, such as adding social media buttons to your website, creating a contact form, or changing the appearance of your website.

Plugins are available from the WordPress Plugin Repository and from third-party sources.

How to build a website with Astra and Gutenberg Block Patterns

Page builders though look stunning, but their heavy pages tend to make a site slow and sluggish, which directly affects your traffic, Google rankings, as well as your sales.

Instead, Astra has included blocks and patterns (Gutenberg) in their library to create a full website just using those. Blocks and patterns are lightweight and make your site light and responsive.

Now let’s check how to build a website in WordPress with the stunning Astra theme along with the Gutenberg blocks patterns templates in less than an hour. The Gutenberg blocks immensely help to keep your website loading time fast as you are not using any page builders.

Initial WordPress installation

Firstly, to start creating a website you need to have a Domain name and a Hosting service as discussed earlier. After you have both, start to install WordPress. Nowadays most web hosting services have inbuilt WordPress install and manage facilities.

Presently I am using Siteground, and once you log in and go to the Dashboard, you can easily find the WordPress tab below which ‘Install & Manage’ option is there. Click on it, and it will take two minutes for WordPress to get installed.

After installing WordPress, go to the plugin section and install the basic plugins required for creating a good website. Next let’s check how to install the Astra theme website with Gutenberg blocks in the following paras.

Install Astra and Starter Templates plugin

Install and Activate Astra WordPress theme: Log in to your WordPress dashboard. Hover over to Appearance. Click on Themes and then Add New as shown in the below snapshot. Search for Astra theme, install and activate it.

Install and Activate Starter Template Plugin

On the WordPress Dashboard, go to the Plugins tab. Then click the Add new button. Search for Starter templates plugin, install and activate.

Starter templates is a free plugin from Astra, which houses hundreds of free and paid whole website themes. Just by installing and editing the starter templates, even a beginner can create a stunning website.

Now go to Appearance as shown below and hover to the Starter templates tab.

Choose a theme

Once after clicking, you will be redirected to the starter templates section as shown below. Now select the Block Editor from the top-right drop-down list.

The three-page builder options which are available in the starter template are

• Block Editor

• Elementor

• Beaver Builder

Elementor and Beaver Builder are stunning page builders used to build whole websites. Page builders as I told are a bit heavy, which may slow down your site’s speed.

In the present post, I shall show you mainly the Gutenberg Block editor and patterns, these are just light blocks and patterns, which you can drag and drop to create your site.

Install a Starter theme

From hundreds of starter templates (free & paid), as shown in the earlier snapshot, you can select any of the themes which will include all the required website pages, images, logo etc.

After selection, you will be prompted to customize the site. You can start customizing by changing font sizes, theme colour and many more.

You can thus fully create your site simply with a few clicks.

Install Ultimate Addons for Gutenberg block patterns templates

Ultimate Addons for Gutenberg is a plugin for WordPress that adds additional functionality to the Gutenberg editor. The plugin has more than 20 tools that can be used with Gutenberg, including an image gallery, Google Maps, contact form and more.

To install the Ultimate Addons for Gutenberg, go to your WordPress dashboard, hover on to your Plugins tab, click on Add New.

Search for ‘Gutenberg’, and as shown in the above snapshot the Ultimate Gutenberg Addons plugins appears. Install and activate it.

Now go to your Pages section, click on the Add new button, in the new page in the left section you will find the Block and Patterns option as shown in the below snapshot. These are the Ultimate Gutenberg Addon blocks and patterns and can be used to create a website page by drag and drop.

Add content or blocks using Gutenberg block patterns templates

To create a Home page, you can drag the Post Grid block to the adjacent page as shown below and you can adjust the number of posts to be displayed.

Similarly, you can try all the other blocks to find their usability.

Now to find a list of patterns, click on the Starter Template tab as shown below which will redirect you to a page with a list of patterns.

The page will be as shown below. From the Top centre select the Patterns tab and you will find hundreds of patterns templates to drag into your website. You can also select the Filter by Color options to get more customization.

Select your favourite pattern from the list and the same will be uploaded to your page as shown in the below snapshot. You can customize the page and change colours too.

You can also use Gutenberg full width block for providing a full width pattern to your website, which will also sue the additional spaces left.

Checking Website

Once done, save and publish the page to see it in your website. Below I have attached the snapshot of the homepage,

Similarly, you can try and check out more blocks and patterns and can drag and drop to create your type of website. Be it a blogging site, e-commerce, member sites anything, Astra-Gutenberg

How to create a custom block pattern and use it on a page?

To create a customized block pattern in the Astra-Gutenberg theme, you need to install a block pattern builder named BlockMeister. For that, go to your Plugins section in Dashboard, Click on Add New and search for the plugin.

After that install and activate it. Next go to the Block pattern section in your Dashboard and click on Add New, which will open up a page as shown next to the below snapshot.

On this page, you can create or customize block patterns with the use of the ‘+’ button on the top left corner. After doing all your activities, click on Save and Publish.

Now come to your Pages section on the Dashboard. Click to Add New to open a page. Here hover over to the pattern section and then click on the drop-down list. You can find your customized pattern available in the list.

Now select it and you can drag and start creating your own page with the customized patterns.

Testing your website

There are many ways to test your website. Tools like GTmetrix, Google Page speed test etc. gives you a better feel of your site’s loading speed.

Once you create your site with the use of Astra-Gutenberg blocks and patterns, its always going to load better than any page builder like Elementor or Divi theme.

In the present case also, my site has shown better results compared to earlier. The page speed is

cloaked above 90% without the use of any paid caching or performance plugin.

5 essential WordPress plugins to keep your website healthy

UpdraftPlus Plugin:

UpdraftPlus is a free WordPress backup plugin that allows you to back up your website and database, or just your database, with just one click.

It also has a built-in WordPress migration tool that can be used to migrate from one host to another without any downtime. .It is also possible to backup your website and database using a scheduled task.

Yoast Seo Plugin

Yoast SEO WordPress Plugin is a free plugin for on-page SEO and readability. The Yoast plugin helps you create content that is readable by humans and search engines. .Yoast SEO plugin supports a number of languages and is easy to install and set up.

It has features such as reading time, keyword analysis, breadcrumbs, meta descriptions, image alt attributes, title tags etc.

Yoast provides you with a helpful dashboard to track your progress with SEO optimization.

Sucuri Plugin for security

The WordPress community is a large and active one, which means that there are always new plugins and updates coming out to improve the experience for all users. One plugin that has been popular in recent months, and for good reason, is the Sucuri WordPress plugin.

Sucuri’s WordPress plugin offers a suite of services to help with security on your site. The most popular services are scanning for malware, checking for outdated plugins or themes, and blocking brute force attacks.

The Sucuri team also provides a number of other services to help with website security such as firewall management and site backup. This plugin can be used by any WordPress site owner who wants to keep their site safe from hackers or other malicious activity.

Broken Link Checker WordPress Plugin

Broken link checker is a WordPress plugin that is used to detect broken links on your website. A broken link can be as simple as a missing image, or it could be a hyperlink to an article that no longer exists.

It is important to keep these errors from being seen by your visitors because it can lead them to think that the website has been hacked or doesn’t work properly.

The plugin will scan your site and show you which links are broken and which are not. You will then be able to click on the individual links and see what they point to so you can fix them if necessary.

Redirection WordPress Plugin

The Redirection WordPress Plugin is a powerful plugin that can be used to redirect users to other pages.

The plugin is built for WordPress and it is an excellent tool for SEO purposes. It can be used to redirect users from one page to another, from one website to another, or from one section of the website to another.

There are many use cases for this plugin such as using it on a 404 page, using it on a contact form submission page, or using it on the registration page. This plugin is compatible with WordPress 3.7+ and is based on the Advanced Custom Fields for WordPress plugin created by Takashi Irie.

Astra & Gutenberg Block patterns templates FAQs

Is WordPress Gutenberg free?

Gutenberg is an absolutely free block and pattern plugin available in the WordPress repository. You can get it after going to the Plugins > Add New > Search for Gutenberg.

How do I make a Gutenberg website?

Creating a website with Gutenberg blocks with compatible WordPress themes are super easy. The Astra theme has hundreds of built-in Gutenberg patterns to create a website.

To create a website you need to have a Domain, a web hosting provider and a CMS platform such as WordPress which is free to use.

Once after installing WordPress from your web host. Go to WordPress Dashboard > Appearance > Themes > Add new > Search for Astra.

To know more about how to create a website using WordPress check out the below Tutorial.

How to create your own website in less than an hour

How do I create a custom block in Gutenberg?

To create a custom block in the Astra Gutenberg theme, install a WordPress plugin Genesis Custom Blocks. Activate the block and in the Add new section, you can create your customized blocks.

After going to your Pages section, Add new and get your blocks from the list on the left side.

How do I use block patterns templates in WordPress?

Go to your Pages section in Dashboard. Click on the Add New pages. Now on the top left side find the ‘+’ sign. Click on it and you will find the Blocks and Patterns list. Select your block pattern and design the page. So Simple!!

How do I design with Gutenberg?

• Install the Astra theme and the Astra starter theme.
• Install Ultimate Gutenberg Addon Plugin.
• Go to page and click on Add New.
• In the new page, click on (+) sign, to get the blocks and patterns.
• Drag and drop those as per your requirement and create your own website.

Share this post: on Twitter on Facebook on LinkedIn