If you are new to WordPress website builder, you may not be familiar with all its benefits. But what you probably know or have heard of is the WordPress block editor or the Gutenberg editor.
Ever since Gutenberg was first released back in 2018, it stirred up a lot of questions and doubts. It was a new editor that functioned differently from the old Classic WYSIWYG editor. It introduced ‘blocks’ which you could, with a drag and drop method, rearrange to create blog posts and pages. It was a pretty revolutionary move, which is why Gutenberg soon beheaded de-throned Classic editor.
Now, Gutenberg editor has completely taken over designing a website with WordPress, especially when WP developers introduced the Full Site Editing (FSE) features with WordPress 5.9. FSE is a collection of features that can help you edit all parts of your website within one interface. This means that, with the FSE features, you are able to use the Gutenberg editor on your entire site. And now Gutenberg editor morphed into the Site Editor. In other words, if you are using the WordPress website builder, your website is like a personal LEGO project一you are carefully placing blocks one on top of/next to the other to create one, larger piece of art.
Note: What makes FSE features so attractive is that it introduced new blocks and customization options, which minimized the need for third-party plugins or code editing.
So, in this article, we will explain the advantages of the Editor and FSE and how you can use the WordPress website builder to create your website. Let’s get started!
What makes the WordPress website builder so attractive
Full Site Editing features are now the core of WordPress, and they can help create a website faster by allowing you to edit and preview your whole website within one interface一the Editor. You can customize different elements and styles of your website, such as header, footer, typography, background colors, all that, and more within the Site Editor.
FSE features and Site Editor save you time and ensure you don’t have to write a single line of code when building your website.
How to use the WordPress website builder
There are three basic steps you need to go through to see the full effect of the WordPress website builder. Here they are:
- Choosing a block theme.
- Customizing the theme.
- Using global styles.
Let’s go through each step individually.
Step #1: Choosing a block theme.
FSE features are available only in FSE-ready WordPress themes or block-based themes. So, the first step is finding an FSE-ready theme that will get you access to the Site Editor.
Since FSE is a pretty new feature, there aren’t tons of block themes available. Luckily for you, we have a few block-based WordPress themes available and waiting for you to use them.
Note: If you want to find more block themes, check out the ones posted on the official WordPress.org website.
Did you know that we have partnered with WooCommerce to create block themes and that our Bonum WordPress theme is the first block-based theme published on this platform? No? Read here what this means for you, the user!
Once you start using a block theme, you’ll see that the entire theme is made of individual blocks. Now, let’s see how you can get into the Site Editor and customize the theme using the WordPress website builder.
Step #2: Customizing the block theme.
To launch the new Site Editor, you’ll need to:
- Access your WordPress Admin panel.
- Navigate to Appearance → Editor.
Once you are in, the Editor will preview your theme’s homepage. But you can edit different pages and different sections of the pages.
First, we advise you to access Page Templates. Templates are elements you use on your page; you can edit theme templates for posts, pages, or 404 pages. It even allows you to create a new template. To access them, click on the WP logo in the top left corner and choose Templates. Once you do, you’ll be able to customize the components of each page section.
Next, we would encourage you to play with the theme’s pages.
In the Themes Kingdom block themes, once you click the ‘+’ icon in the top left corner, you will see a dropdown menu with a two-column layout. These columns are Patterns and Blocks.
Once you click on Blocks, you will see a list of blocks you can add to a page. And once you click on Patterns, you’ll see numerous pre-made patterns that consist of a few blocks.
Note: Please note that Gutenberg also comes with reusable blocks. Reusable blocks work like block templates that you can select from the block sidebar and place anywhere on your site.
Here’s how to save and reuse Gutenberg blocks:
- Select the block you want to save.
- Click on the three-dot icon of the block toolbar.
- Click on Add to Reusable blocks option.
- Enter a name for the block and click Save.
To find a reusable block, click the plus icon at the top left screen and then Browse all. Open the Reusable tab, where you’ll find all your saved, reusable blocks.
Block patterns are pre-made patterns our developers and designers created. The reason why patterns were created in the first place is that users could not make their websites look like the ones in the theme demos. With patterns, such a thing is possible and easily achievable. You can use patterns anywhere on your website, to save time in the design process. If you are interested in knowing which WordPress block patterns we use in the Themes Kingdom FSE-ready themes, check out this article.
Once you are familiar with the basics of creating a page in the WordPress website builder, you can play with the design. You can edit the existing blocks in your theme, add new ones, change patterns, etc. We’ll leave it up to you to take the role of a web designer. 🙂
Step #3: Using global styles.
In the second step, we didn’t mention how your website should look and feel, or how you can choose typeface and background colors. In this step, we are covering these design tricks.
Global styles are styling options that save you time. Once you choose these options, they will be applied to your entire website.
To get started with global styles, open the Site Editor and click on the Styles icon in the top-right corner. Once the Styles panel is opened, you’ll see options for customizing the typography, colors, and layout.
Once you click on Typography, you will see four separate sections: Texts, Links, Headings, and Buttons, and you can set typography settings for each of these elements.
If you click on Colors, you will see three separate sections: Background, Text, and Buttons. You can set colors for each of these elements, and there are numerous options for colors for you to play with.
Regarding the Themes Kingdom block themes, we added one more thing to help you choose the right colors and typography for your website: style options一different style combinations of typography and colors. So, in our Noctua WordPress theme, you can find four style combinations. Style options are available once you click the Styles icon and select Browse styles.
Are you ready to start using the WordPress website builder?
As you had a chance to see, Full Site Editing (FSE) is there to make the website building process simple and quick. Thanks to these features, you can now edit every area of your website from the same place, using blocks to create new elements.
So, now that you know how to use the WordPress website builder to create your site, are you ready to roll up your sleeves and make one? Let us know in the comments.
And if you like reading about WP and website development, feel free to subscribe to the Themes Kingdom newsletter and follow us on Facebook, Instagram, and Twitter.
