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:

App Development WordPress Theme

 

The App Development WordPress Theme is a dynamic and versatile theme designed specifically for app developers and tech startups. Featuring a modern, clean design, it offers seamless integration with app showcases, portfolio sections, and client testimonials. Customizable layouts, color schemes, and a variety of widgets make it easy to highlight your app's unique features and benefits. With built-in SEO optimization, responsive design, and cross-browser compatibility, this theme ensures your website looks stunning and performs exceptionally well on all devices. Ideal for developers looking to create a professional online presence and attract potential clients effortlessly.

Basketball Club WordPress Theme

The Basketball Club WordPress Theme is the ultimate solution for sports clubs and teams. This theme boasts a vibrant, engaging design that captures the excitement of basketball. Key features include team profiles, match schedules, event calendars, and news updates, making it easy to keep fans informed and engaged. The theme is fully customizable with options for colors, fonts, and layouts, ensuring your site reflects your club's unique identity. Responsive and SEO-friendly, this theme ensures your website performs beautifully on all devices, helping you build a strong online presence and connect with your community.

Blog WordPress Theme

The Blog WordPress Theme is a perfect choice for bloggers seeking a stylish and functional platform. With a clean, minimalist design, this theme focuses on readability and user experience. It offers multiple layout options, customizable color schemes, and typography choices, allowing you to create a unique look for your blog. Key features include social media integration, SEO optimization, and responsive design, ensuring your content reaches a wider audience and looks great on all devices. Whether you're a personal blogger or a professional writer, this theme provides the tools you need to share your stories effectively.

Building Contractor WordPress Theme

The Building Contractor WordPress Theme is designed to help construction companies and contractors showcase their projects and services professionally. With its sleek, modern design, this theme offers features like project galleries, service pages, client testimonials, and a contact form, making it easy for potential clients to learn about your work. The theme is fully customizable, allowing you to adjust colors, fonts, and layouts to match your brand. Responsive and SEO-friendly, this theme ensures your website performs well on all devices, helping you attract more clients and grow your business.

Business Coach WordPress Template

The Business Coach WordPress Template is tailored for coaches, consultants, and mentors looking to establish a professional online presence. Featuring a clean, modern design, this template includes sections for services, client testimonials, blog posts, and contact information. It is fully customizable with options for colors, fonts, and layouts, allowing you to create a website that reflects your brand. With built-in SEO optimization and a responsive design, your website will look great and perform well on all devices. This template provides the perfect platform to showcase your expertise and attract new clients.

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. 

Add your Comment

Back to blog