How to Create a Custom WordPress Website with Gutenberg Blocks

A step-by-step guide on how to build a custom WordPress website with Gutenberg blocks and editor.

So as you know I’m like the biggest advocate of everyone building their own site. I’ve always had a set way to build a site and never really looked into any other way. But WordPress introduced something called Gutenberg in 2018, it was pretty weird to use at first but like 4 years later a lot of my sites now are just using Gutenberg itself! 

I’ve been working on building tutorials on every way to build a site so in this post I’m going to show you how I build Custom WordPress websites with Gutenberg Blocks!

What You Need to Build A Site

So if you’ve read my older posts, my favourite analogy to break down a site is like building a house or storefront. You need three main things to make sure you have a solid building.

  • a strong foundation,
  • a well planned out structure
  • and beautiful design to make a house your home.

And then once all that’s said and done I’ll teach you how to use Gutenberg so whatever changes you want to make in the future will be as simple as a drag and drop!

So let’s get to it!

“Give a Man a Fish, and You Feed Him for a Day. Teach a Man To Fish, and You Feed Him for a Lifetime”

how to build a strong website like a house - the three fundamentals are foundation, structure and design

Foundation | WordPress Hosting and Domain

So when building a custom WordPress Website your foundation is your hosting and domain. Hosting is like the real estate or land that you choose to build your site on. It holds all the files on your site and it services all the people that come to visit your site. This brings us to the domain name which acts like the address people use to find your site! 

@dylankyang How to purchase your hosting and domain #howtobuildasite #wordpress #webdesign #smbgrowingtogether #learnontiktok ♬ original sound – Dylan Yang

How To Purchase Hosting and Domain for Your WordPress Website

SiteGround is my personal favourite recommendation for almost everyone wanting to build a website!

DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 1

They’re fast, easy-to-use, reliable and most importantly can scale depending on your business (growth is key!). I’ve tried so many hosting providers and honestly they’ve been my favourite customer service to interact with. On top of that, they offer FREE SSL, 1-click site tools, and you can bundle your domain together for a great price! So if you’re down this is what I’d recommend.

Pick a Hosting Plan Based on Your Business Needs

I’d recommend GrowBig because it’s the most versatile) and press “Get Plan”

The best hosting and domain for your gutenberg wordpress site

Register a new domain name

I’d choose full words that are easy to remember and a .com ending because it’s the default people think of for websites)

how to choose a domain for your wordpress website

Input Your Information and Pay!

The best bang-for-your-buck deal is a 12-month contract. But I usually just lock in a 3-year deal cause then I can save costs in the long run and I’ll know how the finances will weigh out. Right now they have a 3 month promotion of SG site scanner which I usually opt-out of but i mean if you have time to get this free deal right now you might as well!

Submit your payment information for your SiteGround Hosting Plan
Selecting the best SiteGround hosting plan for your site

Just hit pay now and you should get an email confirmation in a few moments!

Structure | Content Management System (WordPress.org)

The structure is how you’ll organize all those files on your site. You can do it manually like building with raw materials (code). But to save you time from needing to learn to code we can just use a good management system (CMS) which gives you the building blocks you can use to create any site you want without needing to code everything from scratch!

@dylankyang Part 5: How to install wordpress #howtobuildasite #wordpress #smbgrowingtogether #learnontiktok #webdesign P4: Hosting and Domain @dylankyang ♬ original sound – Dylan Yang

Check Your Email

You should get an email coming in pretty quickly with a link to build your new site! If not just log in to your SiteGround dashboard and select websites!

Siteground's website hosting and domain Confirmation Email
How to create new website on Siteground

Let’s Start Building Your Website!

Select “Add Website” or “New Website” depending on if you are in your email or the SiteGround dashboard. It’ll take you to a page that looks like this. Click “Existing Domain” and select the one you purchased from the drop-down menu.

Choosing the type of website you'd like to create on your SiteGround hosting plan

Create A New WordPress Website

It’ll then take you to a page that looks like this. Where you’ll get to choose the system for your site so select “Start New Website” then “WordPress”.

How to Install a WordPress Site onto your SiteGround Hosting plan

Secure Your WordPress Login Information

Put in your email and a password (I recommend a generated one and then store it somewhere) cause you’ll need this to log in to WordPress! Click “Continue” and just wait a few moments…

Setting up your WordPress login credentials on Siteground
Wait for Siteground to install wordpress
Three main tools to get around your SiteGround hosted WordPress site

Congrats On Your New WordPress Site!

Woo! You now have a live WordPress Website! You can click “Go To Site” to see how it looks! And as you can see it does look a little plain but I got a few tricks to show you that’ll help you design the site in no time! But before we do that you should notice something about the URL!

What WordPress 2022 them looks like

How to Secure Your Site by Enforcing HTTPS and a SSL Certificate

Depending on your hosting provider you’ll notice in the URL is that your site may not have a lock icon. And if you’ve ever been on a sketchy looking site it usually raises some red flags. You need something called an SSL (Secure Socket Layers) certificate.

Why SSL is important. Don't create your site with just http://

This is essential because I don’t think Google will even rank your site if you don’t have one. Thankfully SiteGround makes that setup super easy! 

@dylankyang How to install ssl certificate and make that site secure #howtobuildasite #wordpress #smbgrowingtogether #learnontiktok #webdesign P5 @dylankyang ♬ original sound – Dylan Yang

Access Site Tools in Your SiteGround Dashboard

You’ll likely already have this page open from installing WordPress onto your site. But if not just go back to SiteGround.com and log in to your account and open up your “Websites” tab. You’ll find the domain you just purchased and had WordPress installed. Click on “Site Tools”.

Site ground Tools
How to access Siteground site tools

Setup Your SSL with SiteGround’s Security Tools

It should take you to yourwebsite.com “Site Tools” page. From here on the left toolbar, you should be able to click “Security” then “SSL Manager”

Setting up SiteGround Security in Site Tools

Install a Certificate with SSL Manager

From the SSL Manager, you’ll be able to select your domain from the drop-down menu. Then you’ll select the SSL certificate you want “Let’s Encrypt” is good for most people. Then hit “Get” and wait a few moments as SiteGround helps you Install your SSL.

Install  New SSL with Siteground's SSL Manager

Enfore HTTPS with Your New SSL Certificate

Once the certificate is created go back to the left toolbar and select “Enforce HTTPS”. From here all you need to do is just hit the switch and your site will now have the lock icon and your site is protected!

How to Enforce HTTPS on SiteGround for your WordPress website

Awesome! Now that we have the SSL setup, you can go back to your site to make sure everything checks out.

http vs https and why you need an SSL certificate
WordPress 2022 Theme

Design | Gutenberg, Starter Template Plugin and Astra Theme

Now we can start designing the look and feel of your site! To make the design process as easy as a click we’ll be using a plugin called Starter Templates! It has a bunch of templates you can choose from so all you literally have to do is pick one install it then plug in your information! It does that by installing the Astra theme for you and whatever necessary plugins to get the template to work exactly as you see it. It’s that simple!

Templates to choose from Astras Starter Template Plugin

But before we get into all of that, you’ll first need to log in to your site.

How To Login To Your New WordPress Website

If for some reason you still have that page open lol you can click Log In Admin. But odd are nobody has that open lol. So to get into your WordPress Dashboard all you need to do is type /wp-admin to the end of your domain.

yoursite.com/wp-admin

Input your WordPress Login Credentials

This is where you’ll input the information you set up earlier. Just input your Email and password and hit “login”!

Siteground WordPress Tools
WordPress website login

Welcome to Your WordPress Dashboard!

Now you’re in your website’s dashboard. This is basically where you control your site! You’ll make pages, posts and whatever other feature you want here. It may look overwhelming at first but trust me there’s not much to it and you’ll be flying around here in a jiffy. To make things go faster we’ll go step by step and I’ll explain stuff along the way. If you still have any questions though don’t hesitate and leave them in the comments down below or DM me on socials! I’ll try to get to them as fast as possible.

Let’s Start With a Fresh WordPress Site

Anyways depending on if you chose SiteGround as your website hosting. Your WordPress dashboard may look different in the beginning so to get us all on the same track just scrolled to the bottom and click “exit”.

SiteGround Central Plugin Landing page
Exit and close Siteground Central Plugin to get to WordPress dashboard
Some hosting providers clouds WordPress dashboard with bloatware
What a clean version of WordPress 5.9 looks like

What Are Plugins and Why Would We Use Them?

Plugins are basically just additional software that you add to your site. It’s like the tools a contractor would bring to build stuff. Siteground sets you up with three of them automatically (other hosting providers will spam the heck out of you [it’s kind of like bloatware] which is also why I like SiteGround over other hosting providers). Two of Sitegrounds plugins are awesome.  The other one is alright (SiteGround Starter). So I’m first going to teach you how to get rid of it in case you didn’t choose SiteGround as your hosting provider.

How To Unintall and Remove WordPress Plugins

On the left toolbar look for “Plugins” and click it to get into “Installed Plugins”. If you bought from another hosting provider you’ll want to get rid of all your plugins. To do that just click the checkbox to select them all.

SiteGround automatically installs three WordPress Plugins
Some hosting providers install a lot of  WordPress plugins that causes bloatware

Then from the drop-down click “deactivate”. Reselect the ones you deactivate then select “delete”.

how to deactivate and delete wordpress plugins
Delete unnecessary plugins before designing your WordPress website

Note: You’ll need to do this in two steps (deactivate then delete) because it helps you prevent breaking your site in the future.

A Quick an Easy Start To Designing Your WordPress Site

Now that you have a nice clean site. We’re going to install a plugin called Starter Templates!

Stater Template is an awesome tool because it gets your site up and running with the bare essentials that you need. You can literally just click this add in some information and your site would be good to go!

How to Install a WordPress Plugin

On your plugin page, all you gotta do is click “Add New”.

Select Add New to install a new plugin

Type “starter template” in the top right search bar and hit enter. It’ll be the first result just click “Install” then “Activate”.

Search for Starter Templates by Brainstorm Force (The creators of WP Astra Theme)

Setting Up The Starter Templates Plugin!

It’ll bring you back to the plugins page and all you have to do is click “See Library”.

Activate and Install Starter Templates to See Their Library of Templates

You’ll be prompted with a video that teaches you all about the “Starter Templates”. When you’re ready click “Build Your Website Now”.

Build your WordPress Website easily with Starter Templates

Because our goal here is to build with WordPress’s Gutenberg blocks we’re going to select “Block Editor”.

How to Design a Site with Gutenberg Blocks and Starter template

Select The Template That Works Best For You

The most common type of sites I see created for small businesses, content creators and students are blog type sites. So I recommend filtering the templates to “Blogger”. But you can always type in the specific type of site you’d like to create.

Select a design form Starter Templates for an easy start on WordPress Astra theme

In this example, we’ll be selecting the “Outdoor Adventure” one. And now all we got to do is follow the instructions!

Create and Upload a Logo

You can skip this step if you want to just use a text logo or need to wait for someone to make a logo for you. But I find it really fun to make one using photoshop or online using PicMonkey. Upload one or not and hit “Continue”/

All you need to do is upload a logo for your site in Starter Template's quick start guide

Choose Your Colours and Fonts

This could take a degree and a half to figure out what works best for your branding and company. But thanks to this plugin they give you the awesome preset colour palettes and font combinations that look amazing! Choose the set you vibe with the most and hit “Continue”!

Astra's Starter Template has amazing color palettes and font pairing that'll be used in your Gutenberg editor

Confirm WP Astra Theme Installation

Then they’ll ask if you want to signup for their mailing list (optional but helpful). And then you’ll be prompted for the stuff that’ll be installed on your site. It’s going to install something called Astra as the theme (I’ll explain what a theme is in a bit). It’ll import some widgets and containers. And then all you gotta do is hit “Submit”.

Confirm you installation of the Astra Theme and additional WordPress plugins you might need for the Gutenberg editor

And just like that! Your custom WordPress site is live!

It only take a few seconds to install your WordPress template on  the Astra theme
This is the Outdoor Adventure template build in WordPress's Astra Theme

How To Customize WordPress With Gutenberg Blocks

So now that your Astra Theme is installed and you got some plugins to get this site to work.

Confirm the Astra theme is installed by going to your WordPress dashboard and clicking Appearance
Check what else was installed from  the Starter Template by going to your WordPress dashboard and selecting plugins

We can make adjustments to make the site however you want! And that’s where the Gutenberg Blocks come in!

What Are WordPress Gutenberg Blocks

Gutenberg is a brand new editor for the WordPress platform. It will radically change the way you create posts, pages, products, and just about everything else on your site. Gutenberg arrived as part of WordPress 5.0, which was released in November 27, 2018. For that reason, it’s important to get up to speed now.

Themeisle

The Gutenberg editor is WordPress’s newish feature to help make your editing experience even easier! It’s basically a way for you to create super functional, responsive and beautiful site by using blocks! (See their example here).

This is WordPress 5.9's Gutenberg Editor where you'll be able to design your site using block!

There are basically really only three types: text, media and features. It does get more specific than that but as for fundamentals if you can understand those three things everything else will come easy to you. I find the best way to learn it, is to just do it and see it in action.

If you’re logged into your site, from your new WordPress homepage, you’ll see a black toolbar at the top and you’ll want to click “Edit Page”.

You can edit existing pages if you're logged in by going to the specific page and clicking Edit Page in the top toolbar

This is the Gutenberg Editor

Here you’ll basically see what your site looks like except everything is interactive. You can simply change the text by clicking it and typing whatever you want to change it to!

This is what Astra's Outdoor Adventure template looks like
Editing with Gutenberg is amazing because it acts as a WYSIWYG interface

And just by changing those lines, you’ve already interacted with two different types of blocks! Headings and buttons!


H2: What is a Heading Block?

Headings are basically large text you put on your site.

H5: Why Are The Different Types of Headings?

Visually it helps visitors see what’s important and helps make your site look better. Function wise, by selecting the hierarchy (H2, H3, H4, etc.) let’s search engines know what is important to your site. This helps with visibility in rankings and just good data in general.

Gutenberg's heading blocks make it easy to know what's important on your site

Heading Settings

You can always make additional adjustments if the setting you want aren’t found in the hovering toolbar when selecting a block. If you take a look at the right sidebar you’ll see the option to select between “Post” and “Block”. You’ll want to select block to adjust the settings.

Gutenberg's Heading settings can be selected on the right side of the editor
You can change the text color and background of the Headings block
Alter the Headings Block typography size, appearance letter-spacing and letter case in the details bar
You can also add HTML anchors or additional CSS classes to modify the design of the Gutenberg Headings block

What is a Button Block?

It’s a button lol. It’s your call to action (CTA). From a business standpoint, everything you create should have to call to action (this blog post is to get you to build a site and use my links if you’d like to because it can help me make some money at no additional cost to you!). Because without a CTA you’ll just be creating to create and you most likely won’t get anything out of it, not saying everything needs to be transaction but at least you should create a possibility of something happening. So that’s what buttons are good for!

It can help you jump between pages, go to a form the possibilities are endless.

Gutenberg button blocks are a great way of getting your visitors to complete your call to action

Backgrounds and Image Blocks

Next, you’ll probably want to change this image up cause it’s not often you’ll want a dude standing by the water lol. So to get to this image that looks like it’s in the background. Where would you intuitively want to click?

If you selected the top block you’re correct!

Background Images are Called Cover Blocks

Cover blocks are usually the things in the background on landing pages. Some major sites put videos behind there or a picture that represents their product, service, company. These are awesome for headers because you can overlay them with text and buttons to help your visitor follow up with your CTA.

You can change the background image in the Gutenberg editor by selecting the cover block and clicking "Replace"

How To Change Background Images in Gutenberg Blocks

To change up the picture all you’ll need to do is take a look at the right sidebar again to confirm that you see the image you want to replace. Now back in the main section where you click to select the cover block, you’ll see a floating toolbar and you’ll want to click “Replace”. And from here you can upload a new image!

Replace images with photos already in your site's WordPress Media Library or upload a new one from your computer

After that, if you want to make more edits like before everything is in the right sidebar. You can make it look like the picture doesn’t move when scrolling by switching fixed background, adjusting a focal point, accessibility and SEO stuff, overlaying colour/opacity and dimensions.

DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 3
DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 5
DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 7

Editing or Replacing Gutenberg Images

Then when you scroll down you’ll see some more images down below. Changing it is basically the same process, just click it and look for the floating toolbar for the settings. Hit “Replace” and upload your new picture.

DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 9

Cropping Images on WordPress

If the dimension of the picture you uploaded isn’t the same you can fix that by pressing the “Crop” icon in the toolbar (it looks like two L’s crossing each other). Then selecting “Aspect Ratio” which looks like a square with two corners in the top left and bottom right, in this example, we’re going with a landscape (horizontal) 3:2 ratio. And hitting apply.

DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 11

And the process is pretty much the same for all the other images. As typical if there are more settings you’re looking for you’ll find them in the right sidebar; Rounding out images, maximum dimensions, file size, SEO properties, alt text, etc.

DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 13
DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 15
DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 17

Reusing Gutenberg Blocks by Grouping

And then as you adjust and design more sites you’ll notice that everyone tends to reuse layouts and structures. That’s the cause as humans we understand patterns more, it helps us comprehend what’s going on and visually it just looks more appealing. So for the section we just changed the pictures in you’ll notice there was an icon in the floating top bar that has two squares intersecting each other. If you click it it’ll take you to a new block called a “Group”.

What is a Group Block

It basically combines all the things you’ve used and puts them in a group so it’s easier to move around, duplicate or reuse around your site. In this example, it selects Headings block, Paragraph block, Button block and an Image block.

DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 19

Side By Side Blocks

What you’ll also notice is that after getting in the grouped block, its floating toolbar also has an icon beside it. This time it’s like three rectangles with a dark one in the middle. These are called column blocks. It allows you to create this section where you have the grouped blocks beside each other. The reason why this is super helpful is that it allows you to create a multitude of layouts!

DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 21

Duplicating Columns

If for example, you wanted to add another feature to this section that has the same layout you could just duplicate the column so all three of the options would be side by side. You would just select the column you want (make sure the icon is the three columns with the black one in the middle) hit the three dots for more options and click “Duplicate”! Then you can make the adjustments as regular and now you have three side by side options!

DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 23

What Are Column Blocks

Once again if you noticed when clicking on the individual column block (icon is three rectangles with the middle one being highlighted). There’s another icon beside the floating toolbar with just three rectangles none highlighted. This is the main column block. Basically, if there’s something besides the floating toolbar it just means it’s nested within another group than can be moved around altogether. So if for example, you wanted to bring these features to the top of the pages all you’d need to do is click the up arrows to move them up or simply drag it by holding the 6 dots icon and scrolling to where you want to place it.

DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 25

And as usual, you can find more settings for the columns by checking the right sidebar.


Those are essentially the main Gutenberg blocks you’ll use to edit and design your site to fit your customization. But in case you wanted to add more stuff to the templates all you’d need to do is click the “plus” icon when you hover around the site.

Adding New Blocks

There are a number of ways to add more blocks to your site:

DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 27
DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 29
DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 31
  • Scroll to the bottom and find the “Plus” icon
  • Hover over an existing block to activate the floating tool bar.
    • Click the three dots icon for more settings
    • Click “Insert Before” or “Insert After”
  • Hit Enter and type “/”
DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 33

Select Block Type or Pattern

You can select between patterns (prebuilt groups of blocks you can use on your site. Or blocks like the basic ones we just used. There are more based on the features and functionality your site may need. You can either search for what you want in the search bar or scroll down to see more options: text, design, media, widgets, themes and more.

DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 35
DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 37
DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 39
DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 41

Addition Block Types

You’ll install more block types by installing plugins to account for the features you may want for your site. But I’d first recommend trying to use what you have already here because there is a multitude of options that you can pretty much make anything happen with these tools!

DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 43
DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 45
DYLANKYANG - Web Design How to Create a Custom WordPress Website with Gutenberg Blocks 47

Congrats On Building Your Custom WordPress Site With Gutenberg!

I think we covered basically everything here! Let me know if you have any more questions in the comment down below or hit me on socials! I’ll be trying to continue my series #howtobuildasite on whatever socials you’re on so check it out there too!

-Dylan

More Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.