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”
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!
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”
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)
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!
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!
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.
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”.
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…
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!
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.
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”.
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”
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.
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!
Awesome! Now that we have the SSL setup, you can go back to your site to make sure everything checks out.
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!
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-adminInput 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”!
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”.
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.
Then from the drop-down click “deactivate”. Reselect the ones you deactivate then select “delete”.
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”.
Type “starter template” in the top right search bar and hit enter. It’ll be the first result just click “Install” then “Activate”.
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”.
You’ll be prompted with a video that teaches you all about the “Starter Templates”. When you’re ready click “Build Your Website Now”.
Because our goal here is to build with WordPress’s Gutenberg blocks we’re going to select “Block Editor”.
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.
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”/
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”!
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”.
And just like that! Your custom WordPress site is live!
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.
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).
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”.
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!
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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!
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!
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.
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:
- 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 “/”
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.
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!
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