How To Build A Site in 3 Steps
A quick step-by-step guide on how to build your website with no coding required!
Affiliate Link Disclaimer
‘How To Build a Site’ has affiliate accounts with some of these services. By signing up with our links, you can help us earn a small commission but that happens at no additional cost to you.
It’s completely optional, we just hope to provide you with the information you’re looking for and can’t wait to see what you build!
Three Things Your Website Needs
The best analogy we found for building a site is very similar to building a house. There are three main things you want to think about;
- a solid foundation,
- a well planned out structure
- and beautiful design to make a house your home.
Foundation | Website Hosting and Domain Name
Structure | Content Management System (WordPress.org)
Once you have a foundation you can start building.
You can build any way that you want; you can build with your own raw materials (code), build with strict pre-built designs (website builders) or with a good management system (CMS) you can do a mix of both.
- This guide will show you how to build with a Content Management System called WordPress.
Design | Themes and Plugins
After you’ve set up your site’s structure with WordPress. We can start designing the look and feel of your site.
- We’ll be using a template in this guide to make the design process as easy as a click. (Starter Templates)
All WordPress design basically consists of two things; a Theme and some plugins. The theme used in these templates is the WP Astra Theme. It has an easy to use interface and is a great theme for beginners.
A plugin that is also used in the templates is; Elementor. Just as every good builder needs a solid tool kit, this all-in-one plugin will be yours to adjust and tweak specific designs on your site.
Let’s get to it!
Join Our Mailing List
A useful tool to print out and check off while you build your site!
Building Your Site's Foundation
How to Build a Strong Foundation
So in order to have a strong foundation, it’ll be good to first understand what’s needed of a website.
A website is just a bunch of files online that you can visit. And in order to make that possible, a website needs two things; a Hosting plan and a Domain name.
Hosting is like the real estate/land that you’ll build your site on. It’s responsible for handling all the content of your site (Web Space), how many people can visit your site at a time (Traffic) and how efficiently everything is ran (Speed).
And lastly, your domain name is like the address to find your site. Your hosting is in a location on the internet called an IP address. But just like longitude and latitude, it’s a little hard to remember. So to make it understandable for humans, we purchase a domain name that can point to our hosting plan. And voila! We have a site that’s easier to remember and find!
Where to buy Hosting and Domain?
SiteGround | Our Favourite Overall Website Service
SiteGround is our go-to recommendation for any kind of website. They are our favourite overall hosting provider out there. And thankfully you can also purchase your domain there (Alternative options are available). We’ve tested so many hosting providers it’s insane. But we’ve found our sites to be the speediest and the most secure at SiteGround.
SiteGround also has the most user-friendly interface we’ve seen. They offer a 1-click site migration tool if you’re already set up somewhere else. SSL is easy to enforce. And if you ever get stuck on anything, their customer service is always available and have most likely already dealt with a similar issue that you may have.
So for speedy, secure and reliable hosting for your website. We’d definitely recommend SiteGround!
How to Purchase Hosting For Website?
SiteGround makes it super easy for you to purchase hosting and domain together for your website. Just click the image below and you’ll be shown three different plans:
Which Hosting Plan to Choose
I'm On a Budget | SiteGround StartUp Plan
For most people, if you only have one business and only need one site. The StartUp option is their go-to. It keeps everything under budget but still allows you to use all of SiteGround’s amazing feature.
Possible Expansion | SiteGround GrowBig Plan
The GrowBig Plan is the most versatile because if you think you might expand in the future or just want to build multiple sites. This plan allows you to cover a multitude of scenarios.
I'm a Professional | SiteGround GoGeek Plan
We personally have the “GoGeek” Plan because we go all-in on our recommendations. Whether you’re a web design company, your circle’s go to tech support or just want the best of everything the”GoGeek” plan is a great option!
Get Your Domain Name
Once you’ve selected your hosting plan you’ll be prompted to register a new domain or input one you already own. (Other places you can buy your domain from)
How To Pick a Domain Name?
There can be a whole dissertation written on how to select a domain name but we’ll just SparkNotes the few points that you should consider when picking your domain name:
- pick a .com name people will usually type that over anything else
- “yourbrand.com” >>> “yourbrand.space”
- make sure its easy to pronounce, type and spelt correctly
- “easywords.com” >>> “misspelledallot.com”
- say it out loud so you know it makes sense and doesn’t say anything bad
- remember it’s not the end of the world if you ever want to change it (it’s been done before)
The main thing I suggest is just to take action, get the ball rolling and we can always pivot after.
How to Purchase your Domain Name?
So once you’ve picked a domain name that’s available you’ll be brought over to Step 3! You’re almost ready to start building your site you’ll just need to put in your information.
Account Information
Put in your email address (make sure you have access to this email) and create/generate a really strong password.
Remember to save this information somewhere cause this will be how you access SiteGround (Hosting and Domain Services). You don’t need to log in here often but if you want to dig deeper into website logistics or need to troubleshoot stuff this is where you’ll do that.
Can I Pay for Hosting with PayPal
The default setup is to pay for hosting and domain via. credit card because it makes auto-renewal a breeze. But in case you don’t have a credit card, we’ve heard it was possible to pay SiteGround with PayPal you just have to message them in the chat and they’ll walk you through the process.
Extra Services
You’ll notice that there are some extra services in the bottom before you process your payment.
Domain registration is automatically checked because we’re purchasing a domain. $17.99
Next is Domain Privacy, it’s not completely necessary. However when anyone registers a domain their information needs to be published on ICANN (this ensures a stable, unified internet and stuff). The problem with this is that sometimes people end up getting a lot of spam calls. So if you don’t want that and you can spare the money then it may be worth it for you.
Lastly, site scanner is just additional security that you can have for your site. Once again not necessary if you’re on a budget. But for this example we will not be getting it.
Structure
What is WordPress?
"WordPress is software designed for everyone, emphasizing accessibility, performance, security, and ease of use. We believe great software should work with minimum set up, so you can focus on sharing your story, product, or services freely. The basic WordPress software is simple and predictable so you can easily get started. It also offers powerful features for growth and success."
How To Install WordPress
SiteGround literally makes this process a breeze. All you have to do is just click “Start New Website” and you’ll be able to select WordPress. And then you’ll be prompted to setup the login to your website (different than your hosting/SiteGround login).
It’ll usually auto-populate your email address (this will be your login to your site) and you’ll just need to enter a password. We recommend using the generate a password so it’s more secure and saving the password somewhere safe but easy for you to find in case you forget. (If you want to change your login credentials we’ll create a guide for that).
If you weren’t prompted to create your site no worries. All you’ll need to do is to go to SiteGround and log in to your account where you purchased your hosting plan.
Click the “Websites” tab and the “New Website” button should be there and you should be where the guide is at.
Congrats Your Site is Live!
Woo! You basically have a live site now!
You can technically jump straight into designing stuff now. But if you’re unfamiliar with WordPress/websites we can give you a quick little tour.
A Quick Tour of WordPress
So first things first, to learn about WordPress we’ll need to get into the dashboard and in order to do that, we’ll need to log in.
How To Log Into your WordPress Site
The default way to log in to your site is to go to yoursite.com/wp-admin. (This can be changed for added security just let us know if you’d like a guide on it.)
You’ll need to enter the email and password we created for your website login. And simply click “Log In”.
Close the SiteGround WordPress Starter Prompt
You’ll likely be sent to the SiteGround Starter Page. This is a great option for cookie-cutter sites. However, because you probably want to get a little more hands-on and have more customizability we’re going to use a different tool.
So just scroll down to the bottom and click Exit.
Navigating the WordPress Dashboard
This should take you to the “backend” of your website. This is what WordPress is, the content management system that you’ll be interacting with to create, edit and change your site.
You can click the little house icon with your site title “My WordPress” to visit the live site. And then click it again to get back to the dashboard.
Undestanding WordPress's Navigation Sidebar
If you take a look at the left you’ll notice that there are a bunch of things to select from; Posts, Media, Pages, etc. This is WordPress’s Navigation Menu, and this is how you will access all the features WordPress has to offer.
To make things simpler, we’ll take the approach of what visitors will see. When people visit your site they basically only see two things; Posts and Pages.
What are WordPress Posts?
Posts are essentially that; blog posts.
If you aren’t familiar with that, then just think of them as time-specific pieces of content. Kind of like when Instagram’s feed was in reverse chronological order. They showed you what happened most recently.
They basically take the formatting from your theme and stay consistent with all the other posts you’ll have on your site when creating content. You also have the option to add categories or tags so you can keep your posts organized and easier to find for your visitors.
What are WordPress Pages
And lastly, guests will also interact with pages of your site. This is probably what most of us are familiar with as it’s the; about pages, contact forms, services, etc. It’s the content pages that don’t need to change as often and you usually want to stylize them differently to serve whatever function you want to give your site.
Don't Forget To Secure Your Website!
Before we start designing your site, we need to secure your site with something called an SSL (Secure Socket Layers).
What is a SSL Certificate
If you’ve ever gone to a sketchy site back in the day you’d noticed there wasn’t a lock icon. That’s because that site wasn’t protecting the data between you and their site.
It can get pretty technical and a little overwhelming. But on a surface level getting the SSL certificate basically means you’ll be able to use HTTPS providing three layers of protection; encryption, data integrity, and authentication.
And from a logistics perspective Google is no longer ranking sites without an SSL, so if you want to be found it’s probably a good idea to set this up. Thankfully if you bought your hosting plan from Site Ground, you’re covered and it’s pretty easy to setup.
How to Add an SSL To Your Site
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”.
Install New SSL and Select SSL Type
You’ll be shown the Site Tools Dashboard for your new site. This is where you’ll be able to access all the backend of your site.
All we need to do here is install a new SSL. And to that just click “Security” –> “SSL Manager”
And you’ll be shown this screen.
Select Domain and SSL Type
Make sure the domain you want to secure is selected.
Then pick the “Let’s Encrypt” SSL and hit “Get”.
You’ll have to wait a moment and it sets up the certificate for you. Another reason why we like SiteGround is that SSLs expire after a year but they auto-renew it for you which is nice.
How Do I Enforce HTTPS
After you’ve created your SSL certificate all you need to do is enforce HTTPS. You can click “configure HTTPS” on the success prompt. But if for some reason you got bored waiting for the certificate and closed the tab you can just go back to the site tools dashboard and select “HTTS Enforce”.
Enforce SSL on SiteGround
This page will list all the sites that have a valid SSL and all you need to do is hit the switch and your site is now secure!
Double check SSLis Active on WordPress
Sometimes even though we enforced our SSL on SiteGround, WordPress may not have changed all the links to https. So to double check everything is working as it should go to your wordpress dashboard (yoursite.com/wp-admin) –> settings.
And check that the two URLs (WordPress Address and Site Address) are both listed with “https://”.
If your site isn’t listed as https select your SG Optimizer plugin –> Environment and check that HTTPS enforce is selected. Your site will refresh and the WordPress settings should now list your site with https.
How To Change Your Site Title and Tagline
While we’re here we can also adjust your Site Title and Tagline. Your Site Title and Tagline are often what shows up in your browser tab or when you share your link on social media. It’s to help SEO and your visitors to know what you’re all about!
Just type in what you want and scroll to the bottom to hit “update”.
Design Your Site
How To Design a WordPress Site
Your WordPress site’s look and feel is based on two things; the theme you choose and the plugins you install.
A “Theme” is a tool that WordPress uses to change the basic design of your site. It control things like; layout, typography, colours and other basic design elements.
And “Plugins” are pieces of software you can ‘plug into’ your site to achieve specific features and functionalities.
The reason why we recommend WordPress so much for beginners is that it’s budget friendly, scalable all the while still being very customizable. There are a ton of developers out there so whatever feature you need you’ll be able to find a plugin that can achieve what you want for free that often has a premium support that you can opt in to when you business begins to grow.
Plugins are ways to extend and add to the functionality that already exists in WordPress. The core of WordPress is designed to be lean and lightweight, to maximize flexibility and minimize code bloat. Plugins offer custom functions and features so that each user can tailor their site to their specific needs.
If you didn’t purchase your hosting with SiteGround, chances are your dashboard looks very different. That’s because a lot of hosting providers pre-install your WordPress with a bunch of plugins that kind of act like bloatware.
Our personal goal is to use the least amount of plugins possible to ensure your site stays speedy. So to make sure we’re all on the same page let’s clear out some plugins.
How to Delete WordPress Plugins
From your site’s WordPress dashboard click “Plugins” and then select “Installed Plugins”.
Deleting plugins require two steps because doing so helps reduce the risk of breaking your site. We first need to deactivate the plugin by clicking “Deactivate” or using the bulk actions, selecting “Deactivate” then pressing “Apply”.
First Select and Deactivate Unwanted Plugins
You can select all the plugins installed by clicking the checkbox in the white bar. But in our case, we just want to delete the “SiteGround Central” plugin so we’ll select that one and deactivate it.
Then Select and Delete the Deactivated Plugins
Once the plugin is deactivated it’ll turn white, which means you can delete it.
The process is pretty much the same. Just hit Delete in the Plugin Row. Or select the checkboxes of the deactivated plugins and use the bulk actions drop-down and select delete, hit apply and you’re good to go!
What Plugins Should I Use?
Our favourite paid plugin is Elementor Pro because it can handle a plethora of features you may possibly want on your site. Can work with very minimal and lightweight themes keeping your site nice and speedy. However, it is a bit pricier than other alternatives and has a steeper learning curve to WordPress.
So since this guide is to build the fastest site on a budget our recommendation is to use the Starter Templates plugin! This allows you to use the FREE version of Elementor along with a series of other awesome themes and plugins.
Starter Templates | Import Templates with a Click by Brainstorm Force
We first learned WordPress from Tyler Moore back in 2012 on YouTube, introduced to Elementor in 2017. And just recently learned about Starter Templates!
It’s truly the easiest way for you to get set up in WordPress ever. It’s basically a gigantic library of templates that you can 1-click install onto your site and be up and running in no time!
How To Install Starter Templates
Similair to how we deactivated and deleted those plugins we’re going to add a new one called “Starter Templates”.
To do so, go to “Dashboard” –> “Plugins” –> “Add New”
After clicking “Add New”, you should be shown a page for plugins.
Search for “Starter Templates”.
Click “Install Now” then “Activate”.
It’ll bring you back to your “Installed Plugins” page. And you should now see “Starter Templates”
Click “See Library”.
You’ll be shown a video on how the Starter Template plugin works and all the available templates for Astra Free and Astra Pro.
Scroll to the bottom and click “Build Your Website Now” to get started.
You’ll make a choice between three types of builders. And our go-to recommendation is always Elementor for its versatility and ease of use.
Selecting a Template
Our preference for selecting a template is going with the cleanest, lightest looking site because they often have the least number of plugins. Those are often the blogger templates.
However, you should choose based on what is closest to your needs as a business. So whether you’re a restaurant, service or an online shop. Starter Templates has categories to help you narrow down your choices.
You can filter through live demos of their free and premium templates here!
Once you’ve selected your template, just click it and we can start designing!
How To Customize Your Template
Starter Templates keeps it simple and just asks you to select your essential branding items.
You upload a logo that you have or skip it for later.
And you can select a colour palette and font combinations.
Once you’re happy with how the preview looks just click continue and you’re good to go!
Upload Your Logo
Select Your Font Pairing and Color Palette
There are endless courses on figuring out how to select the best design elements. So the fact that Starter Templates helps you preselect a bunch of combinations is a huge time saver for beginner designers.
That’s all you have to do is pick the font pairing and colors you like. The great thing about it is you can see these changes in real time so click through all the options to see what you like best!
Hit continue and submit and you’re good to go!
Yay You Have a Site... What just happened?
First Check Your Plugins
Basically, what the Starter Templates plugin just did was install your Astra theme and some plugins. For the “Vlogger” template we chose, it installed two plugins; WPForms Lite and Elementor. Both of these are FREE plugins with an option to upgrade to premium support and features.
WPForms Lite
This is basically a simple plugin that allows you to create a contact form, where all the messages are sent to your email.
Elementor | The All-In-One Design Plugin
This is the star of the show. And if we were to recommend spending money on anything other than hosting and domain this would be the first one. It basically allows you to create anything you want on your site.
It’s a visual drag-and-drop editor that makes designing sites with no coding a breeze. As an example, we’ll take a look at some basic edits here.
How to Use Elementor?
Elementor can be used to design basically any element of your site! The easiest way to learn it is to just do it. So to do so let’s get to the homepage of your site. This can be done by typing in your website address or if you’re in the dashboard just click the house icon with the title of your site!
Because we used the Starter Template, all of our pages have already been built with Elementor. So we can make changes to any existing page by clicking “Edit with Elementor” from the top toolbar.
However, if you were to create a new page or post we would need to go to the back end to start editing with Elementor. To do that just head to your “Dashboard” –> “Pages”–>”Add New”.
This is the WordPress Gutenberg editor but we won’t be using this as Elementor has a lot more features to offer. So to get into the Elemetor editor you’d just need to click “Edit with Elementor”.
Exploring The Elementor Editor
This is the most exciting part because this is how you’ll be designing your site! You can see and do all the edits in real-time and it’s all responsive (all that means is that you can see how it looks in different screen sizes). You can adjust the way you see your site by clicking the “Responsive Mode” button in the bottom left, which brings a toolbar to the top of the editing screen. This allows you to choose between; desktop, tablet or mobile.
Elementor is Easy | Left is Control Right is Visual
What you’ll notice is that you have a bunch of tools on the side and the existing web page on your right. The reason element is so great is that you can interact with everything. All you have to do is click an element you want to change on the right and the options you have will show up on the left.
Navigating The Elementor Heirarchy
Everything in Elementor is built into sections. This is easiest to understand by looking at the “Elementor Navigator” which is toggled by the layer looking icon in the bottom left.
You can drag the “Navigator” to the side to lock it to the screen. You’ll see all the sections that are used on your site. If you take a look at your entire page you’ll understand what each section is. You have the “Jakob Smith” intro kind of section, a category sections, about me section, video section, etc.
To make things easier to organize/understand you can also label the sections by double clicking the name of the section in the navigator.
What Do We Do with Sections
Sections are useful because you can save them in Elementor if you want to use them in different parts of your site. Or especially useful if you want to import templates.
How Do Elementor Sections Work
Sections are basically rows to your page that can contain elements of your site. You can see that by hovering over your site and the big blue boxes will show you what your sections are.
Inside the sections, you can select how many columns you want to divide your page into. Columns are where you put everything on your site like; Text, Images, Buttons, Videos or even an Inner Section! Columns are shown as dotted lines with a grey column box in the top left.
So let’s get into the details of each element.
How To Edit Elementor Text
If we wanted to change the “Jakob Smith” text we can just click on it directly or press the pencil icon in the top right. It’ll pull up the editor on the left and you can edit the text, style, and more!
We’ll change the text to “Build a Site!” and change the alignment to the center.
But the text looks a little big so we can make it smaller by selecting “Style”. Here you can change how the text looks like; font color, typography, text stroke, shadow, etc.
By selecting “Typography” we can change the; font, size, weight, transform the text to all uppercase, stylize it with italics, decorate it with an underline or leave it at default to pull the information from the Theme (The original font pairing we selected in the Starter Template).
How to Remove Elementor Items
Sometimes there may be things in the template you imported that you don’t need. For us, we don’t have a video so all you need to do is right-click the element you don’t want and click “delete”.
How to Add Elementor Items
After editing and removing some elements, you might want to add items! It’s also super simple to do because Elementor is basically a visual drag-and-drop editor. All you’d need to do is click the grid icon in the top right of the left section. And drag the item you want to the right. A blue bar will be highlighted to show you the area where your item will be displayed.
How to Add and Edit A Button
For this example, we’ll be adding a button. So after opening the element tab we’ll just drag and drop the button square into the page. It’s not exactly what we want and it’s a little hard to see so we’ll have to make some adjustments to the button.
We’re in the Content tab so this is where we can change the; text, where the button will go once clicked, alignment, size and adding an icon.
All the elements pull the colours and typography from your theme (the stuff we selected in the “Starter Template”. But if you want to change that we’ll show you how to edit that later).
In the meantime for unique items that you want to change you’ll do that in the style tab. You can adjust the; Typography, Text Shadow, how the button looks normally (not clicked/hovered) like text color, background color, border type, radius, shadow and padding.
Another thing to note about buttons is that they’re interactive. Most of the time when people hover over a button they expect it to do something to let them know that it’s a button. So if we want to adjust that we’ll need to click the hover tab. The expected interaction is to darken the background but you can take whatever creative liberty you want!
A WordPress theme changes the design of your website, often including its layout. Changing your theme changes how your site looks on the front-end, i.e. what a visitor sees when they browse to your site on the web. There are thousands of free WordPress themes in the WordPress.org Theme Directory, though many WordPress sites use custom themes.
How To Install a WordPress Theme
So the first thing you’ll want to do to make any changes to your site is to always get to your site’s dashboard.
From there you’ll click “Appearance” –> “Themes” –> “Add New”
Search for the theme “Astra” and click “Install” then “Activate”
Why Astra | Incredible Demos with Even Better Tools
Our goal in this tutorial is to get you up and running for as cheap and as quick as possible.
We recommend Astra because they have beautiful pre-built demos that you can literally just import into your site and be good to go. They also offer a bundle of add-ons that give you so many features it’s hard to list.
And then if you have a little extra cash to spare the premium version AstraPro is an easy upgrade to the free WordPress theme. It’ll give you access to a bunch of tools that’ll help you out in your design process tenfold.
The free one is our go to recommendation for beginners because all you really need to do is just pick out a demo. And the theme will help you sort out what you need right off the bat. It helps you install the plugins required to get you started.
It’s literally just a click and go kind of thing!
How To Setup WP Astra Theme
To make sure that you’ve installed the Astra theme correctly, just click on “Appearance” –> “Themes” again. And you should be at the theme screen again, except this time you’ll have Astra as an option!
The theme that is currently activated will usually say “Customize” so make sure that’s what the Astra theme says.
