Beginner’s Guide on How to Build New Website with Gutenberg

Build New Website with Gutenberg | Have you built a website only by using the Gutenberg Editor? If not, then this article will give you perfect guidance on it. 

Gutenberg is the most exclusively designed editor for modern WordPress. Though, it has been a while since it is launched. Still pens down the most handy and simple tool to design websites easily. 

With the years of its invention, it is now accessible for both developers and non-developers. And without any codes, you can build desired websites in no time. 

So, this article will bring the simpler ways to Build a New Website using Gutenberg.

The best Block Plugin to use To Build New Website with Gutenberg 

With its huge release, Gutenberg has also some integrated plugins that complement its usage. And for this guide, we are going to use the Toolset Blocks for building a website. And here are some features that you must know about the Toolset Blocks: 

• The plugin offers simple usage without designing pages from scratch. 
• It allows you to work in the backend along with watching out for the result without switching to the front end. 
• It is a beginner-friendly plugin. 
• When you have this Toolset Block, you don't any further plugin integration. As it works as a whole for designing a website. 
• Its documentation is easily understood and does not require many heaps.

How to Build a New Website Using Gutenberg

1. Adding, Editing, Moving and Deleting Blocks

The first step comes for building your new website is to know how to create and edit blocks. Well, blocks are the modern form of building websites without any mess. And the best part is it is done within minutes. 

• On the page or post, tap the “+” icon to add a block. 
• Among various appeared blocks, click on the block you wish to add. Or simply search for the required block. 
• After adding the block, enter the content information like the heading or title. Next, on the left side, you will find suitable controls that assist you in editing the block. 
• The sidebar on the right side of the block will help you change the options like formatting, colors, images, and more. 
• The three dots options will help you remove the block along with additional settings. 

Select Some Gutenberg WordPress Themes to Build Your Wesbsite

Let's see some of the best Gutenberg WordPress Themes that you can use to make your website more efficient and to make your website look more professional:

2. Displaying the content side-by-side

The next step is to organize your content side-by-side on a single page. It can be done using the Column block with these steps: 

• Again tap the “+” icon and search for the Columns block to add it. 
• After this, you will see two columns into which you can insert more blocks. 
• You can toggle the column settings or add more columns from the sidebar.

3. Navigating through your Blocks

The next task is to navigate separately with your blocks. While designing a website, you will find so many designs and templates having blocks. So to navigate through every block, you can choose to use the Block Navigation button to edit each one of them. This can be done by tapping the Block Navigation icon at the top of the page.

4. Displaying Fields in the Block Editor Designs

The next is to add post fields to the blocks you have created using the Toolkit blocks. And there are three ways you can display fields.

Method 1: Set Block Content from Field Values

The first method allows you to add content from the fields. Here, we are going to set the heading text from the toolset custom field: 

• Set up a new Content Template and select the custom post type you wish to display. 
• Tap the “+” icon and add the heading block. 
• From the sidebar, enable the Dynamic Heading Text option. 
• Next, choose the post field you wish to display for example the Post Title. This will let you watch the title for each post related to the custom post type.

Method 2: Display Fields as Individual Blocks

Again, you can use blocks to display fields as individual blocks on your page. 

Choose the Single Field Block. 

• Select the Standard Field Type under the Field Type on the sidebar. 
• Next, choose Post Content(body) under the Post Field. This will let you see the description in every post.

Method 3: Combine Fields with Text in one Block

The third way is you can add a mixture of text fields to your page with the following steps: 

• Tap the “+” icon and select the Fields and Text Block. 
• Insert the content in the label you wish to add to your page. Then, choose the type of content you want to add from the icon list. You can add forms, fields or a conditional output. Lastly, select the content you wish to add and tap to Insert Shortcode.

5. Display an Image Gallery

Here’s how you can display a variety of images on your page using the image gallery: 

• Choose the Gallery block by clicking the “+” icon. 
• Then click to upload the images from your device.

6. Style your blocks in the Editor

Styling the blocks is another vital step comes when you design a website. With Gutenberg, you can use two ways to style your blocks as follows:

Styling Items Using Interface

• Tap the block you wish to style and drag your mouse toward the sidebar to expand the style settings.
• From there, you can easily customize the border, background color, padding, and more.

Using the Container Block

The Container Block is the exclusively designed block on the toolset. It can be used to combine various blocks and styles that will be displayed together on a post. 

By adding the Container block, you can then tweak the sidebar settings to style the block.

7. Typography Controls

You can even style the typography section easily to get a professional look to the website. And some types of styles are listed below: 

• You can choose from a wide variety of font types. 
• Also, you can adjust the font size, height, and line spacing. 
• It is also allowed to transform the text into uppercase, lowercase, and capitalize. 
• Similarly, text color, shadow effects, and styles can be tweaked.

8. Create Templates to display Custom Posts

Now comes the most vital part while designing a website. It is creating templates for custom post types. When you create a template, it gets applied to all the layouts of the posts under the custom posts. Giving a step-by-step list for it: 

• Navigate the Toolset option under the dashboard. Then, tap the Create Content Template option for the post type you wish to create a template. 
• Likewise, start adding fields to your templates by clicking on the blocks. You can add headings, images, single field blocks and more. 
• Save and publish after adding all the blocks to your template. This will be applied to all the layouts of the posts having custom post types. 

9. Building Archive Pages

WordPress generates a list of content called archives for each custom post type. And this can be easily customized using the Toolset blocks and Gutenberg. 

• Click the Toolset under the Dashboard for your website. Then, click on the Create Archive just next to the post type you wish to create an archive for. 
• Now from the block editor, you can choose to add elements to be displayed on the posts.
• Once the elements are added, you can now customize every element by using Block Navigation. 
• You can also tweak the default settings for archives like pagination, ordering, and more in the Archive block. 
• Custom texts and other blocks can be added before and after the main archive loop to display the posts. You just need to click the “+” icon before or after the loop for adding blocks.

10. Displaying a custom list of content

To add a custom list of content, the Toolset uses the Block called View. And the steps for adding View are as follows: 

• Tap the “+” icon you want to add a View on. 
• Add the View block and give a title for it and select the type of content you want to display. 
• Now, add the blocks that you want to be a part of the View. 
• You can also edit the ordering by clicking on the Block Navigation. After this, select the View option and start editing the sidebar options. 
• Next, you can edit the number of settings under the View Loop for the whole View including several columns. 

11. Adding Custom Search

Adding Custom search is one of the vital parts of allowing visitors to find their desired content. 

• Add the View Block from the Toolset to your page. 
• Tap on the Search option in the View Wizard option to enable it. 
• After this, you can add search fields and buttons on it. 
• Also, you can toggle the sidebar to edit the settings for the search field. 

Conclusion

This is how the above article was all about Building a new website using Gutenberg. Those who found Gutenberg a difficult editor to use can now use it for web design. As it offers a code-free solution for developers and non-developers. So start building your new website using Gutenberg.

If you feel that customizing Gutenberg blocks you can always go for the prebuilt templates with WP Radiant's Premium Gutenberg WordPress Themes where you can easily import the demo content in one-click. Also you can go for the WordPress Theme Bundle wherein you can get 45+ Premium themes with a single purchase and save yourself a couple of bucks.