14 Oct
Building a Gutenberg Website: The release of Gutenberg was a big boon to web design. As it came with the simplest form of designing intuitive websites in no time.
This has become great news for those who haven’t registered their businesses on the digital market. Indeed, this is a fact that till now most businesses don’t own websites. This is the right time for you to start building a personal business website.
As websites built with Gutenberg do not require any coding skills or need to hire a developer. And this has encouraged many businesses to build their websites.
If you are one of those who wish to start a personal business website, this is the right stop for you. As we are going to discuss the best way to build a website using Gutenberg.
Steps for Building a Gutenberg Website
Step 1 – Select a Website Building Platform
Step 2 – Select a Web Hosting and Domain
Step 3 – Install WordPress
Step 4 – Select a Theme of your choice and activate it.
Step 5 – Add Essential Plugins
Step 6 – Adding Vital Pages using Gutenberg
Step 7 – Customizing the Web Design
Step 1 – Select a Website Building Platform
- Building a website requires having a base platform to run. And that is the hosting provider that helps your website run on the internet.
- Before that, you must first choose the website platform for your website having the best content management. So, as we are talking about the best one, WordPress should be our priority to design a website.
- As WordPress is one of the most active and popular website platforms and CMS you can find. And that too with a higher user base and excellent performance. And most importantly, this is an open-source and user-friendly platform. You don’t even need to apply any developer skills or high-end codes for designing a website. As the platform seems user-friendly non-developers can also use it. So, you are going with the right choice with WordPress.
Step 2 – Choose a Website Hosting and Domain
- Without a doubt, you will find multiple options that will impress with their web hosting offers and plans. But don’t get fooled and go for the best.
- So from a lot of great web hosting platforms, we are going to move with one of the best platforms that are Bluehost.
- Bluehost offers the best hosting services included with the free domain name. Also, it is one of the fast-working and most reliable hosting services. Plus, its subscription plans are also cheaper than others.
- Now that we have chosen the web hosting provider, it’s time you must go for the right hosting plans.
- So now, you need to visit the Bluehost page and tap the Get Started button in blue colour. From here, you will reach the page where you need to choose the hosting plans between basic, plus, choice plus and pro.
- Since you are in the initial stage of starting any business or blog website, we recommend you go for the basic plan. The basic plan costs $2.75 per month and comes with a free domain for a year.
- The next step is to choose a perfect domain name for your website. Tap the Create a Domain and you can type your unique domain name in the text field. Also, it will display various related domain names in the dropdown list. Note that, you must choose the domain with with a “.com” extension. Once you have selected the domain, it’s time to finalize your account and make payment. Next after filling in all the details, your account will be created.
Step 3 – Install WordPress
- Once you have passed the initial step of choosing the website platform and hosting, it’s time to install WordPress.
- Well, the good news is you don’t need to pay extra charges to install WordPress as it is free.
- Bluehost will automatically install WordPress for you.
- Once you have created the account on Bluehost, you will get a confirmation mail along with the login details. Soon after this, you will be guided through the installation procedure.
- Else, you can visit the Bluehost dashboard and tap the Create Site button on the right side. This will automatically install WordPress. Now, you need to enter the login credentials having the username and the password.
Step 4 – Select a Theme of your choice and activate it.
Just after installing WordPress, now it’s time to choose the appearance of the website. When talking about appearance, only one element comes to mind and that is the Theme.
A theme decides how your website content is going presented to the audience. Luckily, WordPress comes with an ample number of options for you to select the type of theme for your website. And that too with a wide variety for every niche website. Also, you can easily customize the theme you have chosen without any codes.
But, the urge is to select the perfect theme that makes a fit for your website. For this, we have collected some factors that will help you choose the right theme:
- The theme you choose must have clean and minimal designs. Clean and simple looks are more attractive to the audience.
- It should have a responsive design so that every screen should adapt to the website layouts.
- The theme should support easy customization.
- It should be well-documented and updated with the latest versions.
- It should be compatible enough to work with plugins.
- Seamless customer support should be observed when you are heading for a theme.
- The last is you much check the reviews and ratings for the theme.
So, this is how you can choose the best theme for your website. And now, you must look for the right steps to install a WordPress Theme.
- Visit the WordPress dashboard and tap the Appearance tab.
- In the Appearance tab, select the Themes option.
- You will be directed to the themes page where you will find endless themes.
- Tap the Add New button on the top to add a new theme. Here, you can browse the themes for your website or simply search from the search bar.
- Click on the Install button once find your desired theme.
- Once installed, the Activate button will appear. Simply tap the button to start using the theme.
Step 5 – Add Essential Plugins
After installing your desired theme, now it’s time to add some extensive functionality. And WordPress has made this possible by offering a superb Plugins collection.
Plugins are tiny software when used for a website help in raising functionality. These are the essential factors to grace the functionality of the whole website. As a theme cannot ensure a good working website. You need to use plugins so that the website becomes efficient while using.
So, WordPress again aces in providing the best range of almost all types of plugins for every feature. But, you can’t install every plugin, you must know the vital plugins for your website.
And therefore, here are some vital plugins that will support your website:
- The first is the Jetpack plugin for security, backups, and performance of the website.
- The Yoast SEO plugin helps improve SEO practices on the website.
- Website caching can be super easy with the WP Super Cache plugin.
- The next is Akismet to block the way of spammy comments or links.
- Google XML sitemaps are one of the prime plugins to add interactive Google maps to your site.
- WPForms is the vital plugin one can have on their website to add interactive forms.
- The next comes the Elementor page builder which is a great plugin to build websites using drag and drop facility.
- Backups can be easily performed using the UpdraftPlus plugin.
- To apply Google Analytics on your site, must use the MonsterInsights on your site.
Now, let us find the vital steps to install plugins on your website:
- Simply reach the WordPress dashboard and tap the Plugins tab.
- On the Plugins page, click the Add New button on the top.
- Select the plugin or simply search on the search field.
- Tap the Install button and then the Activate button to access the plugin.
Step 6 – Adding Vital Pages using Gutenberg
The next step comes to add vital web pages required for a website to run. Adding web pages using the block editor seems very simple to do.
The website requires vital web pages such as the Homepage, About us, Contact, Policy page and more. While most web pages are designed by default and you can easily customize them. And here’s how you can simply design web pages:
- Head your mouse pointer to the WordPress dashboard.
- Tap the Pages menu and then on the Add New option.
- The next page will give a list of your previous pages, you can edit them also by tapping the Edit link below it.
- Or if you wish to form a new page, then tap Add New.
- When you click on the Add New button, the page will be automatically created and you can customize it well.
Step 7 – Customizing the Web Design
Now that we have successfully got all the initial elements for a website, now it’s time to customize it using the Gutenberg editor. We will now use the Gutenberg block editor to add, remove, move or delete elements on the website. Not just this, you can do a lot more when you have the Gutenberg editor. So, here we are going to elaborate on the list along with the steps:
Adding, Editing, Moving, and deleting blocks
For this, you must first reach the Appearance tab under the WordPress dashboard and tap the Customize button.
This will help you reach the editing page of the website.
On the left sidebar, you will see the “+” icon. Simply click to open the blocks section in the sidebar.
By clicking on the “+” icon, you can simply search for the block or find it from the standard list.
Click the block to add to the page.
Once added, you can now add the content details in the block.
You can also move the block by clicking on the block and you will see controls to move the block.
On the right sidebar, you will find options to change the formatting of the blocks like font colour, size and more.
And to remove the block, tap the three-dot option and tap the Remove block.
Display Content side-by-side
On the blocks section, tap the Columns block and drop it on the page.
You will now get to watch two columns on your page to which you can add content.
You can also increase the number of blocks by toggling the number from the right sidebar.
That’s it.
Navigating through the Blocks
Building a website itself needs to include a lot of blocks in your templates. And it sometimes becomes fuzzy when you wish to customize the blocks.
But it can be made easy with the Block navigation button placed at the top of the page.
You just need to tap the Block navigation and you will be able to edit the block you wish to do.
Display Fields in the Block Editor Design
Another feature comes that you can even display custom fields on your post or page. This can be done using the Toolset Blocks and there are three ways to insert:
Setting the block content coming from field values
As said, you can display any type of custom block on your particular post or page. So in the first method, we are going to add the header block.
Create a new template and tap the “+” icon to open the block toolset.
Here, choose the template block to add. We have to add the heading block, and drag and drop it on the page.
From the right sidebar, turn on the dynamic heading text. And then choose the post field you wish to display.
This will help you watch the custom fields for each post that are related to it.
Displaying Fields as Individual Blocks
Choose any single field block from the toolset and click to place it on the post.
Then on the right side of the post, choose the Standard field under the Field type.
Next, on the Post Field, choose the Post Content(Body) option.
This will help the description to appear in the respective posts.
Combining fields with text in a single block
You can even combine the text and fields on a single post by using the Text and Field block.
On the left sidebar, select the Text and Field block to add to the post.
You must then give a label to the text field. After this, you will see some icons to include such as the forms, fields or conditional output.
Just click to add them and done.
Display Image Gallery
When you have Gutenberg Blocks, you can even add multiple images or an image gallery on your website.
Choose the Gallery block from the toolset.
Click the field to add images to the post.
Typography Controls
With Gutenberg, you can even customize the typography to be displayed on any post or page. Automatically, you can even control applying the same typography to the whole website. Here’s what you can customize:
Font type, Font size, style, text color, and shadow.
Conclusion
This is how website design becomes easier with the intuitive Gutenberg Editor. This is a block-based editor that allows simple blocks to design an interactive website. Blocks can be easily added to the website simply by tapping on them or by using the drag-and-drop feature. That is what we have described clearly how to build a simple website using Gutenberg blocks.
