Gutenberg Template WordPress Site Tutorial

Jump To Tutorial Steps

1. Get Hosting
2. Install SSL
3. Install Theme and Plugins
4. Install Gutenberg Template Site
5. Customize Template Site

Some links in this post are partner links, and commissions may be received for qualifying purchases. The final price you pay is not affected. If you found this free tutorial helpful, thank you for your support!

Many beginner WordPress users find themselves at a crossroads each time they want to create a new site. Has Gutenberg come far enough to make the change from other page builders? For most users, the answer is “YES.” Sure, it might take a few days to get used to, but most users can do the things they need to do with free plugins and themes that are powerful and well-supported.

Should I ditch my familiar page builder and try the native Gutenberg Page Builder for my next project?

-WordPress User Probably

Now you can combine free, expert templates with the native Gutenberg page builder. This combines two worlds that have been on a crash course for quite some time. With the Gutenberg template sites, you get an expert site that you can customize to your own needs, and you are not locked into a 3rd party plugin page builder. There are advantages to this approach.

• Native WordPress Compatibility
  • More Support In The Long Term
  • Leverage Future Improvements to Gutenberg (Site Builder)
• Fewer Plugins On Your Site
• Less Code Bloat

Gutenberg Template Site Steps

Below you can find the Gutenberg template site for WordPress steps. Each step has a timestamp link to the above video that demonstrates what to do.

If you need hosting, this step will show you how you can obtain WordPress hosting with one of the three recommended hosts by WordPress.org—a high distinction. SiteGround can be viewed as the middle-ground between cheap hosts without good support, and overly-managed, expensive hosts.

All hosting packages also get the following benefits with SiteGround, right out of the box.

1. Free Daily Backups For 1 Month
2. Free Optimizer Plugin
3. Free Security Plugin
4. Great Customer Service Chat

Installing SSL is key for modern websites because visitors and search engines need to know that information coming to and from your site is encrypted, and that your site displays the lock next to your domain in the address bar of the browser. SiteGround offers free SSL support through Let’s Encrypt, and it only take a minute to set up.

After logging in to SiteGround, choose Websites at the top, then pick Site Tools.

Within Site Tools, Pick Security, SSL Manager. Select your domain and pick Let’s Encrypt

Note, for the smoothest transition, have both your WordPress dashboard available in another window when you add SSL through SiteGround, just like in the video.

The next step is fairly painless, as well. Start by installing and activating the theme, Astra. The theme Astra is required to install the starter site. From the dashboard, pick Appearance, Themes, and search for Astra. Install it and activate it.

The video step also recommends three plugins. The starter site plugin is essential, and the other two are very helpful. For each plugin, pick plugins from the dashboard, add new, and search for each plugin. Install and activate them once you find them.

• Theme – Astra (required)
• Plugin – Astra Starter Sites (required)
• Plugin – Ultimate Addons for Gutenberg (optional)
• Plugin – SEO Press (optional)

Finally, we have reached the point where we can install the Gutenberg template site. In the dashboard, go to Appearance, Starter Templates. Choose the Gutenberg icon if you want a Gutenberg template.

You can browse each template and each page within each template. Similar to the video step, you will be able to adjust the colors and fonts within the plugin before you install the template on your site. Once a suitable template is found, install it. If installation doesn’t work, make sure your plugins are up to date.

At last, we can customize our template site. Beginners would probably benefit most by clicking each block and changing the text. Click each photo to change the photos. The video demonstration also gives a quick overview on how to adjust the header. For more information about your pages, check out the list view, to see how the blocks are laid out, and what they are called. Keep in mind, you can easily duplicate any block, and use it again on the same page. It is also possible to save a block, or a several blocks saved as a group, as a reusable block, and these can be used again on any page.