Build Your Own Business Website Like A Pro [DIY Guide]

This is the definitive guide to build your own business website like a pro in 2020.

This guide to build your own business website includes instructional content, videos, downloads and plenty of shortcuts to keep you engaged and moving forward. To ensure you don’t get stuck, I’ve set up a Facebook support group where I’ll answer all of your questions.

It’s all free, by the way. I don’t charge anything to teach you how to build this simple business website. The tools you’ll need aren’t free and unfortunately I can’t give them to you. BUT they’re inexpensive and more than worth every penny. Need proof? This website and every website I build is done this exact way.

In this comprehensive guide to build your own business website I’ll cover:

  • Where to acquire professional tools and resources without overpaying
  • How to properly setup and use your new tools and resources
  • How to create & gather high-quality content and graphics including logos & eye-catching visuals
  • How to correctly setup WordPress & your theme
  • How to design & build engaging web pages
  • How to extend your site’s functionality with contact forms
  • How to optimize your website for mobile and speed

So, if you want a professionally designed website for about what you’d pay for a nice dinner out, you’ll love this guide.

Let’s get started.

Build Your Own Website Like a Pro - The Definitive Guide

Contents

How to Build Your Own Website Chapter 1: Project Kickoff

Chapter 1: Acquire

How to Build Your Own Website Chapter 2: Setting Up Technology

Chapter 2: Install

How to Build Your Own Website Chapter 3: Gather & Create Content

Chapter 3: Build

How to Build Your Own Website Chapter 4: Design & Build

Chapter 4: Extend

How to Build Your Own Website Chapter 5: QA Testing

Chapter 5: Launch

How to Build Your Own Website Chapter 6: Optimize & Launch

Chapter 6: Grow

CHAPTER 1:

Acquire

How to Build Your Own Business Website Chapter 1: Acquire

In this chapter we’ll start the same way I start all projects, with a kickoff to focus us on what we have and what we need. In order to do that we need to understand what the moving parts are, where to get them, what to spend money on, and how much to spend. We’ll go over:

  • What the Moving Parts are and the Three Buckets They Fit In
  • What is Needed, What It Costs and Where To Get It
  • Gathering, Creating and Developing Content
  • Gathering and Creating Art

Understanding the Moving Parts

A website is simply defined as an internet destination made up of one or more pages under a common domain name published on at least one web server. That means in order to have a website you need to have:

  • a domain name
  • a web page with content
  • a web server to host and serve your web pages

That’s at the very least. We’re not doing the very least though. We’re going to give this real effort using professional tools so there are a couple more things to add to that list.

  • A Content Management System (CMS)
  • Professional Design Tools
  • High Quality Images and Graphics
  • Advanced Knowledge and Expertise

I’m going to walk you through exactly how I design and develop websites every time I do it. Doing it the same way every time helps me produce websites quickly without sacrificing quality.

This is the process and products I use for this website and all the ones I design.

What You’ll Need & How Much it Costs

All the things you need can be acquired in a few places for about what you ‘d pay for a nice dinner out. There are thousands of places across the web where you can get what you need but quality and price varies greatly. Fear not! I’m going to save you a lot of trial and error.

Over the years I’ve tried a bunch of different combinations. The services that I’ve found that provide the most return for the price are:

Item

Cost

Domain Name Registration (Per year) $15.95
Siteground’s Startup Hosting (Use My Link & Only Pay $3.95/month. Regularly $11.95/month.) $47.40
Avada Premium WordPress Theme (One-time licensing fee) $60.00
WordPress Content Management System (CMS) FREE
Premium Functionality FREE
Stock Photography, Video, Graphics FREE
Total $123.35

That’s it. $123.35 and a few hours worth of work and you can have a professional quality website!

ACTIVITY – Get What Your Need

In a perfect world everyone starts from scratch so we’re all on the same page all the way through. Unfortunately the world isn’t perfect. So choose the combination of products from the box below that best describes your situation and then proceed to the next section.

I’m starting from scratch.

You’ll need to get a Domain Name & Hosting from Siteground and then get a license for Avada.

Get a Domain Name & Hosting
Get a Licensed Copy of Avada

I already have a Domain Name.

Get Hosting from Siteground and then get a licensed copy of Avada.

Get Hosting
Get a Licensed Copy of Avada

I already have a
Domain Name & Hosting.

Get a licensed copy of Avada.

Get a Licensed Copy of Avada
Note that this guide doesn’t cover other hosts or registrars so setting up WordPress and Name Servers will be up to you.

Content & Design Resources

Part of the acquisition phase is gathering up all of the content and art that you’ll need to build your website. The website you’re building comes with some images but you’ll want to change them to make it your own. If you need help in any of those areas, there are a few resources below to help you get there.

Tutorial: How to Design a Simple Logo Yourself

Article: Planning Content for Your Website

List: Best Free Design Resources

ACTIVITY – Resize your Logo

Step 1: Upload your logo here: https://onlinepngtools.com/resize-png (Visual Instructions)

Step 2: Change the dimensions to 150px x 50 px (or whatever half your original file is)

Step 3: Press “Save As” and download your logo to your computer.

Now you have 2 different sizes for your logo.

Logo sizing examples for website design.

After you resize your logo you’ll have a regular size (1X) for normal monitors and a Retina version (2X) at twice the size for higher resolution monitors. This graphic is for illustrative purposes only.

CHAPTER 2:

Install

How to Build Your Own Website Chapter 2: Setting Up Technology

At this point you should have all the tools you need to build your website. Everything doesn’t have to be 100% written and every picture doesn’t have to be selected and downloaded. However, you should have an idea of what pages will need to say and where you can get art to fill the gaps.

Now we’re going to move to the hosting account and get everything installed and ready to build.

In this chapter I’ll cover the basics:

Inside Siteground

  • How to Setup your SSL Certificate
  • How to Create Email Accounts
  • How to Install WordPress

Inside WordPress

  • Setup WordPress
  • How to Install, Update  & Register Your Theme
  • How to Import WordPress Content

Inside Avada

  • How to Import Theme Styles & Settings
  • How to Customize the Theme to Fit Your Brand

It is important that you perform the steps in this chapter in the order they are listed. If you try to import the WordPress XML file I’m giving you with this guide BEFORE you install the theme and corresponding plugins, it will fail. Then when you do it the second time you’ll have duplicate pages and content. It isn’t the end of the world but it’ll slow you down.

Inside Siteground

Click a Toggle Below for Detailed Instructions

How do I set up Siteground?

We’re going to get everything we can out of the way now so we don’t have to come back for awhile. To do that we need to get to the account’s dashboard. (Example)

Step 1: Login to Siteground and if you haven’t already, install WordPress.

Step 2: Click “Websites” at the top and then click the “Site Tools” button. (Your Destination)

This is your hosting account dashboard for your domain name. You can find everything you need here to manage your domain name and the most important things for you right now are found in the side menu.

  • Name Servers – if you need to know what your Name Servers are, this is where you find them.
  • SSL Certificates – this is where you set up your SSL certificate.
  • Email – This is where you create email accounts.

Setup Your SSL Certificate

Step 1: Click on ‘Security > SSL Manager’

Step 2: In the Install area make sure your domain name is selected in the Select Domain drop down.

Step 3: Select ‘Let’s Encrypt’ in the Select SSL dropdown. (NOT Let’s Encrypt Wildcard)

Step 4: Press the orange Get button.

That’s it. Your SSL Certificate is now installed.

Setup Email Accounts for your Website

Step 1: Click ‘Email > Accounts’ in the left side menu

Step 2: Create as many email accounts as you like in the ‘Create New Email Account’ area

It’s really that simple.

Manage Your Email Account

You’ve got an account and now you either need to know how to check it or how to forward it to an account you will check, right? Right.

On the main ”Email Accounts’ page there will now be a a ‘Manage Email Accounts’ section below the ‘Create New Email Account’ section that you just used. One the right hand side is a menu accessed by clicking the three stacked dots. You can check your email there and also get the information needed to set up your phone or email software.

If you want to forward the email, there you can do that by going to ‘Email Accounts > Forwarders.’

Inside WordPress

In this section we’re venturing inside WordPress where we’re going to perform a quick first pass on the settings. Then we’re going to install and setup the theme before moving on to importing our working content.

The video reviews the process that is outlines in the toggles below.

Click a Toggle Below for Detailed Instructions

How do I Setup WordPress?

Watch the extended video.

WordPress should already installed so now you need to run through some basic settings to make sure everything you do from here on out is done right. There are a few settings that we need to take a quick look at especially if you’re starting from scratch or you’re new to WordPress. These are the bare minimum. You should read through all of the settings but. for the sake of time, these three are the ones you should pay the most attention to.

Login to WordPress: Login to your WordPress admin area by going to “yourdomainname.com/login” (obviously replace yourdomainname.com with whatever your domain name is) (WordPress Login Screen)

Admin Menu: After logging in to the WordPress Admin area, you should see a vertical menu on the left side of your screen that looks like this.

Scroll towards the bottom until you see Settings (as shown).

Step 1: ‘Settings > Reading > Search Engine Visibility’ make sure “Discourage search engines from indexing this site” is NOT CHECKED if you want to be found by search engines.

Step 2: ‘Settings > Discussion’ make sure you uncheck the top three boxes unless you want to deal with a ton of spam comments. The top two are providing any benefit to you and the third one will keep spam comments off of your website. Only turn that on if you are serious about managing comments and discussion.

Step 3: ‘Settings > Permalinks’ make sure you select Postname. It is better for your SEO when URLs are short and descriptive. SEO structure should be intentionally inserted in the title, hierarchy and architecture.

Thats it for WordPress first pass. Pretty simple huh?

How do I install my theme?

When you purchased Avada, you should have been prompted to download it to your computer. If you haven’t done that yet, go to themeforest.net and download the file called Installable WordPress file. (Example) You can download all of them but we’ll only use that one.

Installation Steps

Step 1. Navigate to ‘Appearance > Themes’

Step 2. Press the ‘Add New’ button towards the top left.

Step 3. When the button changes to ‘Upload Theme’, click it again.

Step 4. A new area should appear below that button. Click ‘Choose File’ and navigate to the folder where you downloaded your zipped Avada theme file containing ONLY the Installable WordPress files.

Step 5. Select it and press Open or Enter.

Step 6. Press Install Now.

Step 7. On the next screen Activate the theme.

Note: If you run into trouble and get an error it is probably because you’re either trying to upload the wrong zip file OR you aren’t uploading a zip file at all. Remember, you only want to upload the zip file that contains “Installable WordPress Files Only.”

Your Theme is now activated but there are a few steps to take to get it ready to style. Your version may be slightly different depending on when you purchased it, but the process is the same. You’ll notice there is a new navigation item at the top of the black WordPress administration menu labeled Avada. The items listed under Avada correspond to the tabs above the video on the Avada welcome page except for the last two: Fusion Patcher and Theme Options. We’ll get to those in a minute. The areas where we’re going to spend our time right now are Registration, Plugins, and Fusion Patcher.

Register Your Theme

Step 1. Navigate to ‘Avada > Register’

Step 2. Click the ‘Generate A Personal Token’ link.

Step 3. Name Your Token – It’s handy to name it after the website

Step 4. The required fields should already be checked but you should still verify them.

Step 5. Agree to the terms.

Step 6. Press Create Token Button

Step 7. Copy the Token & Paste it into the box provided on your site and press Submit.

Congratulations, you’re legal now.

Apply any Patches or Updates

  1. Go to ‘Avada > Fusion Patcher‘ and click the blue ‘Apply Patch’ button next to each update.
  2. Go to ‘Dashboard > Updates‘ and apply any updates.

Import WordPress Content

  1. Download This File named WP-Export.xml_.zip and unzip it. Keep it handy because you’re about to upload it.
  2. Navigate to ‘Tools > Import’ and click ‘Install Now’ under WordPress at the bottom of import options list. (Seen Here)
  3. Once it is uploaded, click ‘Run Importer’
  4. On the next screen, click ‘Choose File’
  5. Navigate to the file you just downloaded and select the uncompressed file named ‘WP-Export.xml’
  6. Press the blue ‘Upload File & Import’ button.
  7. On the next screen, under Assign Authors, click the drop-down next to “or assign posts to an existing user” and select yourself or someone in your organization
  8. IMPORTANT: click the checkbox under ‘Import Attachments: Download and import file attachments’
  9. Press the ‘Submit’ button.

The import process should be very fast and you should be taken to a congratulations screen. I purposefully made that file and the graphics you’re importing very small.

If you run into any trouble, reach out to me and I’ll help you trouble shoot it.

Inside Avada

The main ideas to adhere to when designing a website are economy and consistency. Economy and consistency are both core tenets in all aspects of business and design. One of the ways I strive to achieve them both is by centralizing my processes. This helps to make building websites fast, or economical, while keeping the visual design consistent. In layman’s terms, you set site-wide rules and then decide if and when to break them on the page.

With that in mind, this project has three main places where styles are changed:

  1. The Global/Site-Wide Styles are managed with Avada’s Theme Options. These mostly include colors, fonts and spacing.
  2. The are some Global Styles that we can override locally on a page or post using Fusion Page Options.
  3. There are Repeating Elements, Columns, Containers and Page Types that are centrally managed using the Fusion Library.

In this section we jump in to the theme options and tweak the settings so that it better reflects your brand. This includes importing styles to overwrite the default theme styles. This is a shortcut designed to skip a lot of repetitive work plus it gets you to a place where the changes that we do make have context. Those changes include changing the logo and favicon, setting your default color palette, changing the fonts, and linking the social media accounts.

You are encouraged to explore the theme options but be aware that some of the changes you make might not be immediately evident.

Click a Toggle Below for Detailed Instructions

How to Import Settings Into Avada

  1. Go to This Google Doc and copy the whole URL
  2. Back in your WordPress Admin area, Navigate to ‘Avada > Theme Options
  3. Scroll down and Click the ‘Import/Export’ menu item at the very bottom of the Fusion Theme Options menu
  4. Scroll back to the top, Click the button labeled ‘Import From URL’ & Paste the whole URL into the text area that appears
  5. Click the Blue ‘Import’ Button

How to Change the Logo

  1. Navigate to ‘Avada > Theme Options > Logo
  2. Under Default Logo, click the Upload button
  3. Upload your logo to the Media Library, fill in the Alt Text and press the blue Select button
  4. Preview your website

Note: the theme respects the size of your logo so if your logo is 800 px tall, it will be displayed that way on the website and look awkward. The theme’s logo is about 100 px tall. If you didn’t do it already, resize your logo with one that is about 75px tall and one that is about 150px tall.

Resources:

Do you need to export your logo to a smaller size?

Do you need to create a logo? Scroll up to Chapter 1 and follow the tutorial.

Set the Favicon

  1. Navigate to ‘Avada > Theme Options > Logo > Favicon‘ (Right below Logo)
  2. Under Favicon, click the Upload button
  3. Upload your Favicon to the Media Library, fill in the Alt Text and press the blue Select button

Change the Default Color Palette

The first place to set the colors is ‘Avada > Theme Options > Colors‘ where you can set the primary color. I prefer this to be a bright color so it stands out. You do this by clicking the colored square and either pasting your hex code into the space provided OR by picking a color with the eye dropper. (See Example)

Second, at the bottom of that same page, click on each square in the Color Palette section and add in your Hex codes or use the color picker to choose a color. This will add your brand and design colors to the default color picker that is found throughout the site saving you time from having to hunt them down each time you change a color. (See Example)

If you want to change other colors, these are the places they can be found:

  • Avada > Header > Header Styling
  • Avada > Header > Sticky Header
  • Avada > Menu > Main Menu
  • Avada > Menu > Mobile Menu
  • Avada > Footer > Footer Styling
  • Avada > Extra > Featured Image Rollover
  • Avada > Fusion Builder Elements – Start at the top of this list and click open (+) each element you’d like to edit. The main ones are: Button, Checklist, Icon, Pricing Table, and Toggles

Change Fonts, Styles and Colors to Suit Your Brand

Everything up to this point has been about process and settings. Now we are getting into the design. The basics of design are not only built on colors and fonts but also on using them consistently. If these colors or fonts don’t match your brand, follow these instructions to change them.

These are the places you may want to change the fonts and font colors although I only recommend changing the Header Font for simplicity and speed.

  • Avada > Typography > Body Typography – Set the body font and color and the link color.
  • Avada > Typography > Headers Typography – Set the font, font style and font colors
  • Avada > Typography > Fusion Builder Elements – Set the fonts on the Button Element to remain consistent with any changes you’ve made elsewhere.
  • Navigate to Avada > Theme Options > Social Media > Social Media Icons
  • Change the Social Network by using the drop-down & Pasting your link in
  • You can also Add more or Delete ones that are there.
  • Press the blue Save Changes button at the bottom or top of the Fusion Theme Settings

Resources

Before we get started there is one thing that you’ll probably find handy, but it’s not necessary.  Avada has a color picker integrated throughout BUT having the Hex codes for your brand’s color palette handy will help you work through this quickly and consistently. Hex codes look like this: #xxxxxx and are made up of letters and numbers. They can be tricky to find so here are a few resources to help you out.

  • Canva’s Color Palette Generator – Upload an image and automatically generate a color palette
  • Coolors – Generate random color palettes, lock colors and build from there
  • Color Hunt – Free and open platform for color inspiration with thousands of trendy hand-picked color palettes
  • Paletton – Set one color and generate a color palette based on it
How to Build Your Own Business Website Chapter 3: Build

CHAPTER 3:

Build

This is where the rubber starts to really meet the road. We’ve gone through this process in this particular order because it follows the logical development process of a typical small business website. The steps up to this point should be completed in the order listed before moving forward with Chapter 3.

Part 1: Make a Skeleton & Menu

  • We need to create a skeleton of empty pages so that we can create our menu

Part 2: The Page Builders

  • Introduction to The Three Editors: WordPress Default Editor, Fusion Builder Wire Frames & Fusion Builder Live
  • Introduction to The Library & Page Templates
  • Importing Content for the home page

Part 3: Customize the Home Page

  • Customize the home page using the Fusion Builder Live

Part 4: Build the About Page

  • Customize the banner, add and format content, add in people & bios

Part 5: Build the Parent Services Page

  • Work With Animated Content Boxes

Part 6: Build the Child Service Page

  • Work with Lists
  • Add a Gallery

Part 7: Build the Contact Page

  • Create, Edit & Test the Contact Form

Things to Know Before We Get Started

There are three different views when editing pages & content but we’re mainly going to work in the Live view:

  • The Default WordPress Editor – (Example) This view gives you access to the code-like and basic word processing view. It is the furthest removed from the design.
  • Fusion Builder’s Wire Frame View – (Example) This view gets you closer to a WYSIWYG views with a blocky, drag and drop interface.
  • Fusion Builder’s Live View – (Example) This is a true front-end editor that allows you to edit directly on the page. This is where we’ll spend most of our time.

Web Pages are built on a grid system of rows and columns and are divided into sections. (Example Video) For our purposes:

  • Each Container represents a section of the page that spans the entire width of the page.
  • Within Each Container is at least One Column. You can have up to 6 Columns in One Container.
  • Within Each Column you can place any number of Elements that you’ll use to add content to the page.
  • Containers, Columns and Elements can each be styled in various ways.

Chapter 4:

Extend

How to Build Your Own Website Chapter 4: Design & Build

Congratulations! You now have a working website. If you did nothing else you’d still be open for business. There are a few more things to get done to ensure success. These fall under integration and extension.

  • Integrate Google Analytics and Third Party Code/Software
  • Install & Setup Yoast

Chapter 5:

Launch

How to Build Your Own Website Chapter 5: QA Testing

Now you’re ready to launch and tell the world about your new site. Congratulations! This step may include a social media post, a press release, an event, or any number of newsworthy announcements. The good news is you’re ready for that. You’ve got tracking in place, you’ve got platforms setup, and now you just need to tell the world.

So in this chapter we’re going to:

  • Optimize the Site for Speed
  • Create and Optimize a Blog Post
  • Share it on Social Media

Chapter 6:

Grow

How to Build Your Own Website Chapter 6: Optimize & Launch

Grab these free downloads and read the resources below which are designed to help you grow your website:

FREE: 4 Month SEO Strategy Plan

FREE: Facebook Ads Guide for Beginners

FREE: Inbound Marketing Website Checklist

2020-05-07T01:04:38+00:00Design Tools, DIY, Tutorials, Website Design|

About the Author:

Chip Evans | Web Designer, Graphic Designer, and Art Director in Cumming, Georgia Chip Evans is a Web Designer, Graphic Designer, and art director at Evans Design Studio currently living in Cumming, Georgia. His interests range from marketing, photography, design, web development, and DIY.