How to Create a WordPress Website in Gutenberg: A Step-by-Step Guide

Building a WordPress website has become super easy with the help of the Gutenberg block editor. This powerful block editor allows you to develop and design your website effortlessly without requiring technical skills.

This Gutenberg editor also helps you web design and manage content more easily than the traditional Classic Editor.

Whether you’re new to WordPress or looking to build a simple blog or a complex website, this WordPress Gutenberg block editor tutorial will guide you step-by-step through the process.

After working with a variety of clients such as small, medium, and enterprise-level, I have seen some common problems in the website like website speed and performance. There are many website builders such as Elementor, Divi, and Oxygen that increase the DOM size which directly affects the speed of your website.

Having several years of experience, I have found that staying with WordPress block editor is the best way to build a website with good speed and performance. It gives you a faster and more efficient experience without facing any issues with the website.

If you’re looking for an experienced professional to help you build and design your WordPress website, I’m here to help! I have years of expertise in WordPress development and have assisted numerous website owners in creating complex, customized sites that not only look great but also perform excellently.

Whether you’re starting from scratch or need someone to improve your current site, I have the skills and expertise to bring your vision to life.

Introduction

Creating a website using WordPress requires knowledge of HTML, CSS, and other coding languages. In today’s digital world, the Gutenberg block editor in WordPress has revolutionized the process of creating responsive websites.

With the help of the Gutenberg block editor, you can simplify your web design process and easily Figma to WordPress Conversion.  Gutenberg is a user-friendly editor.

If you’re unsure how to build a website using the WordPress editor tool, don’t worry! I’ve worked with many clients who wanted to create their websites using Gutenberg, WordPress’s block editor.

I can guide you through the process and help you create a website that meets your requirements. Whether it’s a simple blog or a complex responsive website, I’ve got you covered!

What is the Gutenberg editor in WordPress?

Gutenberg is the default block editor for WordPress, replacing the Classic Editor. This block editor was introduced with WordPress version 5.0 in December 2018. Gutenberg uses a block-based system, meaning every piece of content on the website (such as text, images, videos, etc.) is treated as a block.

It allows you to build web pages using blocks—individual components that can be easily manipulated and arranged.

This block editor allows you to add paragraphs, headings, images, videos, buttons, and embeds easily, without requiring technical knowledge. Each block has its settings, saving you time when customizing your website layout.

I can help you using the block editor to create a page. Me and my team are experienced in this Gutenberg block editor which will make your complex website easy and saves you time.

Gutenberg vs classic editor in WordPress

Choosing between the Gutenberg editor and the Classic Editor is an important decision for website owners. If you’re unsure about which option to choose for building your website in WordPress, don’t worry! I’ve created a table to help you make a quick and informed decision.

WordPress used the Classic Editor before the introduction of Gutenberg. The Classic Editor is similar to a word processor like Microsoft Word and requires some additional plugins and coding for building complex websites.

Let’s understand the key differences between them to help you choose wisely:

As you see above the key differences between the classic editor and Gutenberg plugin, A thought might have come to your mind that the Gutenberg block editor gives you more flexibility options and helps you to build dynamic and visually appealing websites as compared to the classic editor.

In my opinion, if you have a complex website you need to prefer a Gutenberg editor.

What are the advantages of using Gutenberg in WordPress?

The Gutenberg block editor offers several advantages that make it a preferable choice for both new and experienced WordPress users:

• User-Friendly: It is a user-friendly block editor. Gutenberg is straightforward and allows users to create diverse content without knowing the complex code.
• Customizable Blocks: It helps you to customize each block’s appearance and functionality based on your specific requirements.
• Reusable Blocks: In the reusable block, you can save your content as reusable blocks for the future when you need to repeatedly use it in different posts and postings.
• Faster Website Building: With the help of easy-to-use settings, building a WordPress web page with Gutenberg editor is fast and efficient. Explore more about WordPress speed optimization here.
• Mobile Responsiveness: Your web pages automatically adjust to different screen sizes, ensuring mobile-friendliness. Your website is more mobile-friendly when you use the Gutenberg block.
• Integrated with themes and plugins: Most of the WordPress themes and plugins are optimized for Gutenberg editor which enhances your website experience.
• Accessibility: The Gutenberg block editor in WordPress provides accessibility features to help people with disabilities

How the WordPress Gutenberg Editor Works?

When you are new and not familiar with WordPress Gutenberg editor, So I am guiding you about how the Gutenberg Editor Works in WordPress.

To become familiar with Gutenberg block editor, you need to know how to navigate and how to use it effectively because Gutenberg works in the block section and every block has a different purpose whether it’s for text, images, video, or columns.

So let me guide you on how it works:

• Accessing Gutenberg: Firstly, you need to log in to your WordPress dashboard and go to any one of these Posts > Add New or Pages > Add New.
• Adding Blocks: You need to click the “+” icon at the top left corner. You can select various block types such as paragraphs, headings, images, videos, and more depending on your web page requirements. You can easily drag and drop on your web page.
• Customizing Blocks: After adding blocks to your web page, You can change any block by changing their color, text, alignment, and many more. Every block has its settings. You can use this option in the toolbar that appears above it or through settings on the right panel.
• Arranging Blocks: By clicking on the up or down arrow, you can rearrange blocks to change the order of content without using cut and paste.
• Saving Drafts and Publishing: Once you’re done with your website layout, You can save it in the draft section or publish it directly.
• Previewing Content: You also have the option to preview how it will look by simply clicking on the “Preview” button.

Keyboard Shortcuts for Gutenberg

Keyboard shortcuts help you to make the page-building workflow in Gutenberg faster and more efficient. I have created a handy table of common shortcuts that I frequently use while working with the Gutenberg editor.

Using these shortcuts can significantly speed up your editing process.

Steps by Steps to Create a Website in WordPress Using Gutenberg

Now you have a basic understanding of how the Gutenberg block editor works in WordPress, So it’s time to build and design your web page with this editor tool. Creating a web page in WordPress using the Gutenberg editor is a straightforward process. Below, I have explained in a detailed step-by-step guide to create a WordPress website using Gutenberg:

Step 1: Set Up Your WordPress Website

To start building your WordPress website, You need to set up a few essential things before starting. Please have a look below:

• Domain Name: You need to purchase a domain to register your website’s address on the internet (e.g., www.yourwebsite.com) The domain name should be different and easy to remember for your users.
• Web Hosting: You need to choose a hosting provider like Bluehost, Siteground, or HostGator to store a website’s files and data. These services often have easy one-click WordPress installation options. You can read more about the top best WordPress hosting companies.
• Now Install WordPress:You need to follow the prompts to install WordPress on your domain

First, enter your domain name

< Now set up your admin account by selecting a username and Password < Done with the installation
< Log into the WordPress dashboard by visiting www.yourdomain.com/wp-admin using the same
< You will see a WordPress dashboard which is the control panel of your website.

Step 2: Need to Access Gutenberg Editor

Once the WordPress setup is done, You might need to ensure that the Gutenberg is enabled. As of WordPress 5.0, Gutenberg is the default editor.

Navigate to Settings > Writing and ensure that the “Default editor for all users” option is set to the Block Editor (Gutenberg).
Also keep this in mind that, if the Classic Editor plugin is installed previously, You have to deactivate or delete it from Plugins > Installed Plugins.

Step 3: Create a New Page

You are good to start building your web pages once you have confirmed that Gutenberg is enabled.

To start creating new pages you need to go to pages. On the left-hand menu, You have to click Pages. You’ll see a list of your existing pages (if any). To create a new one, click the Add New button at the top.

Then, At the top of the new page, you’ll see a field for your page title. Enter a descriptive title for your new page (e.g., “Home” or “About Us”) based on your web page.

Step 4: Insert Content Blocks

As we mentioned earlier, Gutenberg works by using blocks for every element on the web page. These blocks allow you to add different types of content, such as paragraphs, images, headings, buttons, and more.

To add a block, click the “+” button at the top-left corner of the editor section, or you can click the plus sign inside the editor itself. Once you click the icon you will be able to see a variety of block options or you can also search for a specific block by category as per your requirement.

Below we are sharing some commonly used blocks for you:

• Paragraph: You can add some basic text content.
• Heading: To give the titles and subtitles.
• Image: To add images.
• Video: To embed videos.
• Button: For adding call-to-action buttons.
• List: To create ordered or unordered lists.
• Quote: To highlight important quotes or testimonials.

Step 5: Customize and Arrange Each Block

In the Gutenberg block editor, you have the option to customize and rearrange every block of your web page. Each block has its own settings and customization options. After adding a block, you’ll see a toolbar with block-specific options.

Additionally, the right-hand sidebar gives you more detailed settings for each block, allowing you to customize typography, spacing, and block behavior.

If you want to rearrange the blocks on your web page you can use the up/down arrows in the toolbar section to move a block up or down the page. Apart from this you can click and drag the block to a new position. This functionality makes it easy to reorganize your content.

Step 6: Create Layouts with Advanced Blocks

Gutenberg editor gives you the option to create complex layouts without requiring external page builders. Also If you need to design professional layouts on the web page, you can go with the columns and other advanced blocks.

If you want to add a column layout, you need to click the “+” button, search for “Columns,” and then select the block. You can select the number of columns you want (e.g., two, three, or four).

Every column on the page serves as its own space where you can include additional blocks containing text, images, and buttons.

Also, Gutenberg gives you a cover block option if you want to create a section with a full-width image and overlay text (such as a hero banner).

To go with this option you need to click the “+” button and search for Cover. Then you have to upload or choose an existing image from your media library. After that add a heading or paragraph over the image, and adjust the opacity and alignment accordingly.

Step 7: Save, Preview, and Publish Your Page

When you are done with adding all the necessary blocks and customizing them, you have to save changes by clicking “Save Draft” or “Publish”.

To preview how your page looks before publishing, click “Preview” in the top-right corner of the Gutenberg editor and choose to view it on desktop, tablet, or mobile to ensure it displays well on all devices.

Now it’s time to publish your page design, Select the Publish button. You can also schedule it for a future date.

Finally, Your page is now live and accessible to your users!

Your Guide to Best Practices for Building WordPress Sites with Gutenberg for Web Designers

• Try to keep your layouts clean and easy to navigate because Gutenberg gives you many design flexibility options. If you add too many blocks to your web page, It looks cluttered, and maybe the user may leave your page.
• Always remember to preview your design on different devices—desktop, tablet, and mobile—after completing your pages to ensure they look great across all screen sizes.
• If you’re using the same content on different pages, like a call-to-action or testimonial, you can use Gutenberg’s Reusable Blocks. This helps you create the content once and easily reuse it on multiple pages. It saves you a lot of time.
• You must be sure to compress images before uploading them. Also, remember large image files can slow down your web page speed and hurt the user experience.

With these best practices and the guidance provided above, you’re well on your way to building professional, responsive, and dynamic WordPress websites using the Gutenberg block editor.

But if you are still confused and need expert support then I can help you to build the website.

Conclusion

Gutenberg block editor is a user-friendly and powerful tool that makes building a WordPress website easy and accessible to everyone, regardless of experience. With its block-based editor tool, you can add and customize content effortlessly, whether it’s simple text, images, or complex layouts.

Gutenberg gives you the flexibility to design with ease, allowing you to focus more on creating great content rather than worrying about technical details.

Now that you understand how to use the Gutenberg editor, you’re ready to start building your WordPress-responsive website and bring your ideas to life!

ControlF5 helps you to build a WordPress website using the Gutenberg editor tool. We have an experienced team of WordPress developers who are updated with the latest trends and updates of WordPress.

For further details, you can contact me and our team that helps you build your WordPress website based on your specific needs and requirements.

FAQ