Are you struggling to customize your WordPress website without much technical knowledge? If yes, then you are at the right place as through this article you will be able to customize your website flawlessly by using Astra theme and Gutenberg editor.
Read this article till last to know how to build a website in WordPress. This will be helpful for all the newbies and small businesses to set up their brand new websites.
What Is WordPress Gutenberg?
If you recall the times before 2019, when you used to get the interface on WordPress, which was similar to MS Word, for editing the content (while writing the article). That editor is no more the default editor of WordPress and is now referred to as the classic editor or TinyMCE Editor.
The current default WordPress editor is named Gutenberg Block Editor which has an entirely new concept of formatting the content. It is entirely based on the block systems approach where each section is divided into the blocks.
For example, if you are writing a blog post and you want to add a heading and then a paragraph, for that you have to add a heading block and a paragraph block respectively. There are many such blocks like heading block, image block, table block, etc. which were hard to imbed in the old classic editor.
After inserting the block you can edit them by adding the content on it or customizing its colour, size, etc.
Block patterns of Gutenberg Editor have been separately explained in the next sections of this article.
Gutenberg editor was officially launched in December 2018, and within a few days, it became the default WordPress editor with the release of the 5.0 version of WordPress. It means whenever a new user installs WordPress the editor that he gets is Gutenberg.
What Is Astra Pro?
Astra is a free powerful lightweight theme for WordPress websites. Its more advanced paid version is available with extra functionalities, which is known as Astra Pro.
Astra pro has been the first choice of every WordPress site owner because it is beginner-friendly, loads extremely fast, is Adsense friendly and has beautiful customization features.
This theme has more than 1 million active installations. The regular price of Astra Pro is $59 per year and its lifetime plan is also available at $239 with 14 days no-risk money-back guarantee in both plans.
Astra pro can be used for any kind of site whether it is a blog or an eCommerce website.
How Astra Pro Makes Creating A Website Simple?
Astra pro enables hundreds of customization options without any requirement of coding and hence it makes the creation of a website simple and very fast.
It has a number of useful customization features that reduce the use of many plugins making it simple for building the website with Astra.
One can create a professional website using Astra Pro without the need for any developer. Some of the important customization features have been listed below.
Block Patterns Explained
The use of block patterns in a web page while designing is in trend since the launch of Gutenberg. We have already given a little idea about the Gutenberg blocks in previous sections so here we will only discuss block patterns. It is the point of attention that Gutenberg block and block patterns are two different things.
What Are Gutenberg Block Patterns In WordPress?
Gutenberg block patterns are the group of blocks with predefined layouts and customizations that are used for specific purposes.
If you know about page templates then you will not find it difficult to understand block patterns as they are also very similar to page templates. Moreover, block patterns can be used anywhere either on a page or in a blog post.
Let me show you one example of a block pattern. Suppose you are selling some exhibition tickets which have three plans with different pricing. In that case, if you want to display plans with a standard pricing table then you will need to put many blocks and then customize it.
but what if you get a three columned predesigned pricing table in which you only need to replace your information with a demo content without adding separate blocks repeatedly, that is what the block pattern is.
Check the snapshot of a block pattern for the above-cited example.
What Is Required To Build A Website?
The following things are required to run a website.
Domain And Hosting
A domain is the address of your website. It is the URL through which visitors can access your website. For example, the domain name of Google is “Google.com”.
The domain name should reflect your business name or brand. It should not be irrelevant to your purpose.
Website hosting is a space where your website data is stored and can be accessed through visitors. There are many popular website hosting companies like Hostinger, Bluehost, DreamHost, etc. which offer web hosting at very affordable prices.
WordPress
WordPress is a free and open-source content management system (CMS). More accurately, it is the dashboard where you log in to customize your website or to add any content to websites.
WordPress can be installed from the c-panel of your hosting account.
WordPress Theme (Astra)
After installing WordPress, you need to select a theme for your website which allows you to design your website’s pages through its starter templates.
A theme is a foundation of complete website design and appearance. In our case, we have selected the Astra theme which needs to be installed and its templates will be imported in which you can replace the demo content with your original content.
WordPress Plugins
Plugins are the pieces of software that are installed to add some extra specific functionalities to your website. These are available in WordPress, you have to search the plugin of your use and then install it.
For example, the WooCommerce plugin is used to add functionalities to eCommerce sites.
How To Build A Website With Astra And Gutenberg?
Follow the instructions stepwise as given below to know how to build a WordPress website with the help of Astra and Gutenberg.
Initial WordPress Installation
In these times the majority of hosting companies support very easy and flawless WordPress installation. We are going with DreamHost which supports the one-click installation of WordPress.
Step1: Login to your hosting account (here DreamHost).
Step 2: Click on domains and then select one-click installs.
Step 3: Tap on the ‘learn more and install’ button as shown in the snapshot below.
Step 4: Select the domain from the dropdown and click on the install button.
Congrats! You have successfully installed WordPress. You can also install WordPress from Softaculous if your hosting does not support one-click installations.
Install Astra And Starter Templates Plugin
Now login to the WordPress admin panel by typing “yourdomain.com/wp-admin”.
Installing Astra Theme
Step 1: On the WordPress dashboard click on ‘appearance’ and then navigate to ‘theme’.
Step 2: Click on the add new button and search ‘Astra’ on the search bar.
Step 3: Select Astra from search results and then click on the install button.
Step 4: After installation, activate the theme by tapping on the activate button.
The Astra theme has been installed successfully. Now you need to install the Starter Plugin which is discussed in the next section.
Install Astra Starter Templates Plugin
Click on ‘plugin’ and select add a new option, now search for Astra starter templates on the search bar and install it. After installing, click on the activate button.
Choose A Theme
Step 1: Go to the starter templates plugin and click on the see library option.
Step 2: Choose the page builder you want to use. We are selecting Gutenberg since the article is being explained around it.
Install A Starter Theme
Now after choosing the page builder, you will have a library of starter sites. You can choose any demo site to preview it, import the whole site or specific pages.
After importing the site your site will be ready now you can upload your own content and media files in place of demo content.
Install Ultimate Addons For Gutenberg
When you use Gutenberg you will find there are a few important blocks that should be there but they are not found. So to make the Gutenberg editor more advanced and extend its working, we use the ‘Ultimate Addons For Gutenberg’ plugin.
It adds some extra blocks like FAQs schema, star ratings, call to action, Google maps, etc.
To install this plugin, go to the plugin, navigate to add new, and then search Ultimate Addons For Gutenberg. Now click on install and activate.
Add Content Using Gutenberg Block Patterns
Step 1: Create a page or post, then click on the ”+” symbol at the top left corner of the screen. Now navigate to the patterns section.
Step 2: Click on explore button and select the patterns of various kinds and then replace the demo content with the original one.
Customizing Gutenberg Blocks
For adding custom blocks you need some coding knowledge of HTML, CSS, and JS. For eliminate this problem, there are many plugins like Genesis Custom Blocks or Lazy Blocks which can be used to create a custom block.
All you need to do is install any of the mentioned plugins, just like we installed other plugins, and activate them. After that add a new block by reading instructions on the plugin.
If you want to customize the default Gutenberg block, then add the block and from the right corner of the screen, you will get the options to customize its size, alignment, colors, etc. as shown in the snap below for a button block.
Create A Custom Block Pattern Using A Page
Again here just like adding custom blocks, custom block patterns templates can also be added by either coding or with the help of plugins.
The plugin that creates a new block pattern is the Custom Block Patterns plugin. So, install and activate this plugin. (You have already learned to install plugins in the previous section of this article).
Now click on the custom block patterns plugin icon from the dashboard and tap on add new button as shown in the snap below.
The process that you used to create posts with the help of various blocks, similarly, you can use a collection of blocks from the Gutenberg editor page to design a new block pattern that can be used whenever required in a site.
After designing, tap on the publish button and it will be saved.
Testing Your Website
If you are sure you have built your site completely, then publish it and test whether it is running properly or not. A few of the factors that you should test include mobile responsiveness, loading speed, browser compatibility, etc.
Mobile Responsiveness
Your website should be well designed for mobile users also. This mainly depends on the theme you are using and the templates imported.
Proper text spacing, button alignment, size of texts, easy navigation are some crucial things to check with mobile. As of today, 70% of the users prefer running the internet from mobile. Google also ranks mobile responsive sites higher.
Browser Compatibility
The site should be easily accessible with all the browsers. If testing with all browsers is not possible then at least you should test for the major used browser like Chrome, Firefox, Edge, etc.
Browsers along with different operating systems should also be tested.
Website Speed
This can be tested with the help of some popular speed testing sites like Google Pagespeed Insights or GTmetrix.
Visit any of the above speed testing sites and enter the URL of the website for which you want to perform the speed test. It tells the website speed along with factors that can be improved to increase speed.
5 Essential WordPress Plugins To Keep Your Site Healthy
Whenever you launch a website, you need to introduce some additional functionalities to your site which can be done through plugins.
Although there is a huge number of essential plugins for websites. But here we are presenting only the 5 most required plugins for your WordPress site.
Sucuri For Security
The Sucuri WordPress plugin is a popular free plugin for maintaining the security of your website. It has 4 paid versions, basic($199.99), pro($299.99), business($499.99) and multisite (price on request) plans.
Here we are discussing only the WordPress plugin of Sucuri which is available for free.
Prominent Features
Yoast SEO
Yoast is one of the most popular plugins for on-page SEO. It helps to rank your content in search engines.
It has both free and paid versions. There are two paid versions, Yoast SEO Premium Plugin and Plugin Subscription (5 plugins) which cost $99 and $229 per year respectively.
Prominent Features
UpdraftPlus
No matter how secure your site is, your site still might crash and lose all its data. So it is necessary to have the backup of your website which is excellently done by the use of UpdraftPlus.
Updraft plugin is available for free, to extend its features it is also available in paid plans. It has 4 premium plans i.e., Personal (up to 2 sites) for $70 per year, Business (up to 10 sites) for $90 per year, Agency (up to 35 sites) for $145 per year, and Enterprise (unlimited sites) for $195 per year.
Prominent Features
WP Rocket
It is a caching plugin that removes unwanted codes and reduces file sizes to increase the speed of the website. No coding skills are required for reducing the load time of the site with the help of this plugin.
There is no free version of WP Rocket. There are 3 paid plans of WP Rocket which are Single ($39.20) for a single site, Plus ($79.20) for 3 websites, Infinite ($199.20) for unlimited websites.
Prominent Features
WPForms
A website always needs the form to interact with its users irrespective of the niche of your website. For interaction, you need to create forms in which users fill their contact details and other information which can be useful in building the contact list.
WPForms present the preformatted forms like contact forms, payment forms, etc. which are easy to use.
The free version of the WPForms plugin is also available but it comes with many limitations. 4 paid plans are available with full features. Basic ($39.50) for a single site, Plus ($99.50) for 3 sites, Elite ($199.50) for 5 sites, and Pro ($299.50) for unlimited sites.
Prominent Features
Astra And Gutenberg Block Patterns FAQs
Get all the answers to the most commonly asked FAQs related to Astra WordPress theme and Gutenberg.
How do I make a Gutenberg website?
Install the WordPress from the cPanel of your hosting account then choose a theme that is Gutenberg compatible like the Astra Pro theme.
You will have Gutenberg as the default WordPress editor, now you can start customizing your site.
How do I create a custom block in Gutenberg?
Custom blocks can be created by two methods. Either with the help of plugins like Genesis Custom Blocks or entirely by coding. You will still need to perform some coding functions when you are using plugins, they only make the process easier.
How do I use block patterns in WordPress?
Create a post or page then click on the “+” sign on the upper left corner of your screen Then tap on the patterns options, now explore and choose the suitable block template as per your need.
How do I design with Gutenberg?
You can design a page or a post by using block and block patterns. For example, you can add a gallery block to upload images.
The second method is to drag and drop the files and blocks will be automatically created, then customize it to your expected designs.
Is WordPress Gutenberg free?
Yes, the most advanced editor, Gutenberg is absolutely free.
Conclusion: Astra And Gutenberg The Ultimate Combination
Gutenberg editor was initially thought to be meant for editing the writing formats only but with its latest updates and advancements now it can be used as a complete page builder as well.
Before trying any theme one should check the criteria whether the theme is compatible with your page builder (Gutenberg in our case) or not. One such theme which is Gutenberg compatible and also known for its lightning speed is Astra WordPress theme whose features can be upgraded by its premium version Astra Pro.
