Build Your Own Business Website
The Definitive Guide for 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.
Contents
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.
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
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.
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
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
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
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:
- The Global/Site-Wide Styles are managed with Avada’s Theme Options. These mostly include colors, fonts and spacing.
- The are some Global Styles that we can override locally on a page or post using Fusion Page Options.
- 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
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.