Gutenberg Full Site Editing Tutorial - Create A Beautiful Blog

This step by step video will show you how to get started creating a blog site with Full Site Editor.

Note, some links on this tutorial are partner links, and commission can be received for qualifying purchases. This is what enables these tutorials to remain free.

This beginner WordPress tutorial walks you step by step through setting up a blog site equipped with Gutenberg’s new feature, Full Site Editing (FSE). You can use the video at the top of this post, or follow the post content below. Each step in this post includes the video timestamp where you can view the step in the video. With FSE, a user can now create all elements of a WordPress site in Gutenberg such as the header, footer, sidebar, single post page, blog archive page, regular pages, and more. For specific page elements, see the additional videos in the last step.

What is WordPress Full Site Editing?

The latest iteration of WordPress includes a long-awaited feature, Full Site Editing. The Gutenberg Page Builder has been extended the ability to create and adjust all areas of your site, including the header, footer, blog index page, and blog post pages. Now you can tweak template files that, in the past, the developer needed to create as part of a theme. With the Gutenberg’s native Full Site Editor, the developer can still provide templates (this tutorial uses a theme that provides all templates), but you can adjust those templates to fit your needs. You don’t need additional plugins or kits. Ideally, the theme works with the Gutenberg page builder to provide everything you will need to build an amazing WordPress site.

steps for creating a wordpress gutenberg site with full site editor

Get Hosting (Optional) – 2:20
Install SSL (Optional) – 6:55
Install Full Site Editing Theme and Plugins – 8:40
Customize Theme – 13:30
Customize Header, Footer, Blog, and Sidebar (Additional Videos)

You will find this step by step WordPress tutorial will guide you on how to install a beautiful blog theme that is enabled with FSE, along with specific videos in creating elements of your site.

STEP 1: Get Hosting (Optional) – 2:20

I use SiteGround for hosting all my WordPress websites. You can find a few good reasons to use SiteGround below.

Not over-priced, overly managed WordPress hosting.
Free backups stored for a month, so if you get hacked, you can roll back a day or a week.
The chat support is great.
In addition, SiteGround is recommended by WordPress.org. When you go to WordPress.org and look at hosting, it recommends three hosts, so being one of the three is quite impressive.

After choosing the plan in the next step you need to enter a domain either the one that you have or a new one, and proceed.
Moving ahead, now in the third step, you need to fill in your email and your password for SiteGround (basically, this step is where you would get a lot of your SiteGround account stuff taken care of such as billing, site scanner, etc… Basically, for a year it’s about seven bucks a month so once you pay that then we’re going to install WordPress).
Once you get your domain confirmed go to Start A New Website and then under Choose Application > choose WordPress. Put your email and password in the Installation details for your WordPress site.
Now once your WordPress is installed on your new site you can click on > GO TO SITE or go to your admin by clicking on > LOG IN ADMIN or go to > SITE TOOLS.
So, if you go to the site, you will see that it is blank, but to log in, add “/wp-login.php” to the end of your domain.
Now once you log in, you have a SiteGround starter plugin that you don’t need to use so go ahead and hit the Exit.
Further, you’ll be logged in to your site and moved to the dashboard. In this SiteGround Dashboard, if you want the WordPress dashboard just go to the bottom and click on > switch to default or switch to the simplified dashboard.

STEP 2: Install SSL (Optional) – 6:55

If you go to your site, it really helps for this step to be logged in to your site and logged in to your SiteGround account at the same time. That way when you change it to SSL it’s usually pretty smooth.

Log into your WordPress site and log into SiteGround then go to your > Site tools under Websites.
Now on the side go to > SECURITY click on > SSL Manager then go ahead select your domain and under SELECT SSL click on > let’s encrypt > GET.
Once your SSL is installed you get a green checkmark and you don’t have to configure anything more.
The next step is to go directly to your WordPress site and go to Settings > general. Further, in the general settings, you can see “URLs” under URL add an ‘s’ to each of the URLs.

When you add an ‘s’. Scroll all the way to the bottom and save it. You will be kicked out. You’ll need to log back in once you’ve arrived at your site. When you log back in, the lockbox will appear in the address bar.

STEP 3: Install Full Site Editing Theme and Plugins – 8:40

Best Theme For A Full Site Editing Blog

The theme used in this tutorial is called Ona, and it is perfect for blogging and other general content uses. Not only is it a free theme found in the WordPress repository, but the developer provides several templates in addition to three different versions of the theme (three themes in one).

Go to your WordPress dashboard and under Appearance click on > themes > add new. In the search box type “ONA”, then click on > install > Activate.
If you don’t want to use Ona, you can browse Full Site Editing themes in the WordPress repository.
The step below appears at 9:06 in the tutorial video.
To view all of the free, full site editing themes go to >Add new > Feature filter and check Full site editing (apply filters and browse all of the full site editing themes). (Note- If you don’t see the feature filter you need to disable the plug-in.)
After activating ONA, go through Theme setup under Appearance > Theme Setup.
Now to Install Plugins click on Install.
Further to import content by clicking > Import.
Click > Return to the Dashboard
Once you’re on your Dashboard go to Appearance and under it click> ONA. Once you click it you’ll get a free theme with three different versions that you can browse (i.e. MAIN, MINIMAL, CREATIVE). All three versions are well-designed and provide tons of templates.

Install Additional Plugins For Your Blog

The two plugins installed in the video tutorial are free and give you a ton of extra help with your blog. The first plugin, an SEO plugin, SEOPress, will help you add keywords to your posts and let you easily update search engines. The second plugin, Spectra – Gutenberg Blocks, gives you several free blocks to create better pages and posts in the Gutenberg page builder. We only install two plugins because with SiteGround WordPress installation, you already have a security plugin and an optimizer plugin, so those types of plugins are not needed.

In order to get an idea of what the ultimate add-ons are, go to Pages > New Page and browse through all the blocks, then scroll down to see all purple blocks, which you get with the ultimate add-ons. As you can see, Specta is a free plug-in that provides a plethora of custom blocks that you can use on your pages.

STEP 4: Customize Full Site Editing Theme – 13:30

When you go to >Pages, you’ll see an About Page and a Contact page, and when you view them, it automatically inserts that template into the page for you.
Go under Appearance > Editor. Now, go to Templates click on > page-about template (here you would adjust that about page click the block). You can get an idea of what these blocks are called and how they’re laid out by clicking the list view at the top. You can edit paragraphs and images in this section.
Further, to duplicate the entire group click the > Group and then> Duplicate it.
Viewing and editing the Contact page is similar. Access it through the templates.

You can also access the single post blog post template through the same list of templates. After you get the single post template the way you like, go to Posts from the dashboard and create a blog post. Publish it, and view it, and it should adopt the template you created. Below, in the Additional Videos section, you will see how to add a sidebar to your blog posts.

You can also view and edit the blog archive page, called index, from the templates. This has long been a desired feature for WordPress, and Full Site Editor has finally delivered. You can also follow the tutorial below to see how to create the blog page from scratch with Full Site Editor.

Step 5: Additional Videos For Customizing Specific Areas Of FSE Site

Final Thoughts

WordPress 5.9 includes exciting features for both content creators and developers to unify and streamline the design process, as well as give the end-user more power and freedom. This is an exciting jump for WordPress, and designing our websites in a more user-friendly manner will continue to improve.

Moreover, Full Site Editing provides a smoother user experience, uniting the WordPress Site Editor, WordPress theme, and page builder markets.

Now is the time to embrace it and explore all the wonderful new possibilities that it brings for website creation and rich content creation. So, are you ready to make the switch to block themes and FSE? Try it out and let us know what you think in the video comments!