bus. 2nd row
Download Theme
Download Contents
Demo Website

0. Introduction

This is a Complete Tutorial to help you Create Your First Business Website in WordPress. There is no coding involved, as we are using a Drag n Drop Builder. It’s very easy to use and thousands of people have already built their websites. Check them out here!

I recommend watching the video and using the text instructions as a guide. Let’s get started…

What are the requirements?

1. No pre-knowledge or special software required

2. Any Computer – Windows, OSX or Linux

3. Spare time and Willingness to Learn.

4. Hosting & Domain (I’ll walk you through step by step, on how to get started)

What are you going to get from this Tutorial?

1. Learn How to Make your First Website (also great for more experienced people who want more customizations for their website)

2. Learn How to Make it “SUPER” Mobile Friendly or What I call “APP LIKE”

3. Learn How to make it Beautiful, SEO Friendly & Maybe even Earn money from selling your new web design/development skills!

 

Back to Top

1. Getting Domain & Hosting

Domain & Hosting is essential (actually it’s a must) for a website.

There are 863,105,652 websites today (as of 2015) and each one of them must have their own domains with hosting. (Source) 

Your domain, is your web address. For example. Google’s domain is Google.com. Your’s will be yourname.com or yourbusiness.com

Hosting is where all your website files are stored, so people can access your website 24/7 from all around the world.

In this tutorial, we’re going to be using HostGator for both our domains and hosting. 

Why HostGator?

1. I personally, I’ve hosted my websites at HostGator for close to 6 years now. If I have issues, I use their live chat support – so what that means is you don’t need to submit support tickets!

2. They are one of the most popular and reliable hosting providers with over 9,000,000 other domains hosted here.

3. 45 day Money Back Guarantee – If you don’t like their service, you don’t have to worry and can cancel to get your money back.

4. And that’s not it. They also offer a 99.9% Uptime Guarantee, to ensure your website loads – when your visitors go to your website!

Let’s Get Started!

1) Go to Hostgator.com

2) Click on Get Started or Web hosting (on top left)

3) Choose 1 from the 3 plans. I recommend Baby for best value as you can host unlimited domains.

4) Click on Sign up Now

5) Enter in your domain name, you want. You may need to be creative as the one you like might be taken. Also Deselect Domain Privacy.

Note: If you already have a domain, select “I’ve Already Own This Domain” and enter in your existing domain. You can connect it after you’ve got your hosting by following these instructions Or you can always contact live chat support.

6) Select Package type again, and Billing cycle. I normally go month to month but you can save more on a yearly plan.

7) Enter in your username/password

8) Enter in your billing information

9) Deselect the additional services

10) Enter in Coupon Code: HOGANCHUA (Up to 35% off and $5.99 domain!)

Note: I get a small referral fee, if you use my coupon. It helps me continue making these tutorial for your guys for free. You also get a bigger discount, a win-win 🙂

11) Review Order information (Make sure to enter your primary email address, as the login details will be sent there)

12) Select “I’ve read and agreed to the terms and services…”

13) Click on Check Out Now.

14) Done. You should get a congratulations page or if you’re paying my PayPal, you’ll need to login and pay that first.

Now it’s time to check your email, for the login details so you can Install WordPress.

 

Back to Top

2. Install WordPress

1) Go to your Email & Find the Cpanel Login Details

Note: Make sure to check your SPAM or wait a few moments for it to arrive.

2) Click the link the provided for your Cpanel (where we install WordPress)

3) Login with Username/Password

4) Scroll down and Click on Quick Install

5) Click on Install WordPress

6) Again, Click on Install WordPress

7) Select website that you want to install WordPress on.

8) Fill in the details (leave out the “install/path/here” section)

9) Click on Install WordPress

Note: You can change the details later on. 

10) Wait 1 minute for that to install. If you just bought your domain and hosting, sometimes it might take 15 minutes for Hostgator to set everything up on the backend. Some cases 2-3 hours, and up to 24 hours, but in my experience it’s been really quick. If you have any problems, contact their live chat support team.

Now, that you’ve finished installing WordPress on your domain, it’s time to login!

 

Back to Top

3. Edit General Settings (Login for 1st Time)

1) Click on the login link they provided after installation. i.e. http://yourdomain.com/wp-admin

2) Login to WordPress with your username/password

3) Update WordPress if necessary > Click on please update now.

4) Close all popups, not required and clutters up your workspace.

5) Users > Edit your profile > Click on Generate New Password > Set your new password > Update Profile. (Set a strong password, or select confirm use of weak password)

6) Go to Settings > Permalinks > Set to Post name > Save Changes

7) Check out your website. (without theme installed)

 

Back to Top

4. Delete Unnecessary Plugins

Delete Plugins (Avoid Potential Conflicts)

1) Click on Plugins > Select all > Deactivate > Apply

2) Select all again > Delete > Apply > Yes, delete these files and data

 

Back to Top

5. Install Theme (& Contents)

1) Go to Hoganchua.com > Tutorials > Find the Post for this tutorial or Go to YouTube Description.

2) Download Theme & Download Contents (Required to follow along with tutorial)

3) Click on Appearance > Themes > Add New > Upload theme > Choose file > Locate themify-ultra.zip > Open > Install Now

4) After Theme Installed Successfully > Activate

5) Select No, thanks for Import Demo

6) Click on Transfer Tab

7) Import > Browse Computer for “Theme Setting Export.zip” > Open > Yes to Override settings/configurations

8) Done, the settings should have been imported. Check out your website!

Note: Please check out my FAQ for installation problems such as file upload size exceeded and if your file automatically unzipped.

Congrats, we’ve installed our theme (builder). Now we can add in our website pages!

 

Back to Top

6. Adding Pages (Set Static Home)

1) Click on Pages > Select All > Move to Trash > Apply

2) Click on Trash > Select All > Delete Permanently

3) Click on Add New > Type in Home (for homepage) > Publish

4) Click on Add New > Repeat process for:
– About
– Services
– Contact
– Gallery

Setting Static Homepage

1) Click on “Visit Page” to get to Homepage

2) Click on Customize

3) Click on Back (in the customizer, NOT browser) > Static Front Page > A static page > Front page > Home > Save & Publish

4) Close

Before start building, I’m going discuss the basics of choosing Fonts, Colours, Hero Image & Rules of Web Design so you can make a beautiful website (even if you’ve never built a website or are bad at design.)

This is probably the most important part of the tutorial!

 

Back to Top

7. EDIT HEADER & NAVIGATION MENU

1) Click on Customize > Themify Options

2) Click on Header > Header Wrap > Background Colour > #3b3b3b (Elegance)

Choose: White (Simplicity)/Dark Grey. Most websites follow this rule, it’s clean and gives a modern look.

And now, you can’t see your links, so we’re going to change those now.

3) Click on Main Navigation > Menu Link > 16px > Open Sans > Color > #ffffff

Note: the font you choose here, can be either one of your two fonts you chose.

Also if your header colour is white – set it to #3b3b3b (dark grey)

4) Menu Link Hover > Colour > #f1842f

Note: Use +2 shades darker/lighter (use 0to255) of the link colour OR your accent colour (the one you want to use for your call to action buttons/sections). Can be light and darker shade, depends on the background because sometimes you can’t see your accent colour.

In this case, I’ve chosen my call to action colour to make it stand out more. Using the shades, would make it subtle but very professional.

5) Menu Active Link > Colour > #f1842f

Note: Make it the same colour as the Menu Link Hover.

6) Menu Active Link Hover > Colour > #ffffff

7) Save & Publish

8) Site Logo > Font Weight > Bold > Colour > #ffffff (or #3b3b3b)

Note: I will show you how to make logo later but you can add one in by selecting “Logo Image” and uploading a .png (transparent file). Edit size of logo, if required.

9) Save & Publish

10) Close

SET NAVIGATION MENU

1) Go to Dashabord > Appearance > Menus

2) Menu Name > Top Nav > Create Menu

3) Select Pages > Add to Menu

4) Rearrange

5) Theme Locations > Main Navigation > Save Menu (Important)

Done, your main navigation styling and menu is done and your colours should look nice.
Remember the key here, is consistency.

10. ADD PHONE NUMBER TO NAV MENU

1) Go to Dashboard > Appearance > Menus

2) Select Custom Links > URL > Type in > tel:+ > Followed by your number.

– This will enable people on their phones to click it and it will enter your number into their call screen and all they have to do is click on call.

3) Navigation Label > Set to your number or “Call Now”

4) Icon > fa-mobile (use search: mobile)

5) Save Menu

6) Visit site and you should see your menu appear, along with mobile number & icon.

Change Colour

7) Right Click the Phone No. Link > Inspect

8) Look for the Menu Item Number
– It should look something like menu-item-32

9) Write or remember that number

*Go to Video Description (Below) for Text Instructions*

10) Replace the item number in the CSS code below and Paste into Custom CSS:

#menu-item-25 a {
 color: #f1842f !important;
 }
 #menu-item-25 a:hover {
 color: #ffffff !important;
 }

Note: Make sure you also change the Link Colour and Link Hover Colour.

Congrats, we’re ready to build our homepage layout!

Building Homepage

Row #1 – HERO IMAGE

Okay, you should have your Hero ready – As I’ve taught you how to crop it properly. If not, please do rewind.

You don’t want your hero image to be blurry or just bad – first impressions are really important!

Your Hero Image is like your signage for your business. You MUST get it right!
Adding in Hero Image to Row #1

Note: Refresh browser, if it freezes.

1) Turn on Builder
2) Click on Row Options
3) Set Row Width > Full Width
4) Go to Styling Tab
5) Background Image > Browse Library > Upload Files > Select Files > Your Image Cropped > Open > Insert File URL
6) Background Mode > Full Cover > Background Position > Center Center

Note: this will ensure that this is the focus of the image. So even if the image resizes, the center will always be visible.

7) Save.
8) Save & Close Builder
9) Go to “Edit Page” > Scroll down to Themify Custom Panel > Content Width > Full Width
10) Update
11) Click on View Page (Or just go back to homepage)

Now we’re going to add in our Text and Buttons.

1) Turn on Builder
2) Drop in a Text Module
3) Type in: Create
4) Click on Toolbar Toogle (or you won’t see option to change heading/colours)
5) Highlight text > Set to Heading 1 > Save

Note: Don’t worry about what it looks like now, we will edit that in a minute.

What should you type for your Headline? 1) Say Exactly What it is (Apple & Tesla) 2) Tell them what they get (Paypal) 3) What are they able to do with it. (Google)

6) Drop in another Text Module directly below headline
7) Type in: an “app like” mobile responsive website > Set H4

What should you type for your Subhead line? Emphasize on your Headline, to ensure that when the visitor reads it – they know exactly what is in it for them. Be specific.

i.e. Google Slides – with Google slides, you can create, edit, collaborate, and present wherever you are. For free.
Upwork – Find freelancers to tackle any job, any size, any time.
Airbnb – Book homes from local hosts in 191+ countries and experience a place like you live there.

8) Save
9) Drop in a Button Module
10) Text > Type in: Our Mission
11) Link > Copy in: http://yourdomain.com/about
12) Go to Styling Tab
13) Font Family > Open Sans > 16px
14) Go to Button Link Tab
15) Background Colour > #f1842f (or #3b3b3b) (this should be white/dark grey or your accent colour – depends on which you want to stand out more)
16) Background Hover > #ee7110 (or #2a2a2a)
17) Link Colour > #ffffff > Link Hover Colour > #ffffff

Note: for hover over colours a good rule is to go +/- 2 shades lighter or darker than original colour.

Go to 0to255 and then type in your colour and then you can easily copy and paste.

18) Scroll down to border > Select “None” for All Borders
19) Save.
20) Duplicate the button
21) Double click on 2nd button
22) Edit Text > View Services
23) Edit Link > yourdomain.com/services
24) Go to Styling Tab > Button Link Tab

Note: for the button colour, you want to have a contrast and also make sure it’s visible.

25) Set Background Colour > #ffffff > Background Hover Colour > #eeeeee
26) Set Link Colour > #3b3b3b > Link Hover Colour > #3b3b3b (Should be opposite to your other button to keep it consistent)
27) Save.

Now I’m going to show you how to align everything in position.

Note: you can align everything center for each individual module, but to save time I like to align it for the entire row.

1) Click on Row Options
2) Go to Styling Tab
3) Text Align > Centre
4) Deselect “Apply to all Padding” > Set Padding > 12.5% Top > 12.5% Bottom
5) Save.
6) Hover over 1st button > Set Column > 1:1
7) Move 2nd button to column on right.
8) Double click on the 1st button > Styling > Text Align > Right > Save.
8) Double click on the 2nd button > Styling > Text Align > Left > Save.
9) Hover over the entire button row > Set Gutter Spacing > Narrow
10) Save & Close Builder.

Set Heading Fonts

1) Go to Dashboard
2) Plugins > Add New > Easy Google Fonts > Install Now > Activate Plugin
3) Go back to Homepage
4) Click on Customize
5) Click on Back (in the customizer, not the browser)
6) Typography > Default Typography > Heading 1
7) Font Family > Open Sans > Font Weight > 600
8) Go to Appearance tab > Font Size > 90px
9) Save & Publish
10) Go to Heading 4 (subheadline) > Font Family > Open Sans > Font Weight > Regular
11) Go to Appearance tab > Font Size > 24px
12) Save & Publish
13) Close
14) Edit “Create” Text Module > Styling > Margin > Deselect “apply to all” > Bottom > -4% > Save
15) Edit “App Like” Text Module > Styling > Padding > Deselect “apply to all” > Bottom > 1% > Save
16) Save & Close Builder

Set Font Colour/Add Row Overlay

Now it’s time to ensure that our headline/text stands out and ensure that people can read it. There are a few ways, but one simple way is to add in an overlay colour.

1) Go to Row Options > Styling >Row Overlay Colour > #000000 @ 30% Opacity (Set it depending to your picture) >
2) Overlay Hover Colour > #000000 @ 25% Opacity (Adds a nice effect when you hover over it.)
3) Font Colour > #ffffff
4) Double click on: an “app like” mobile responsive website
5) Highlight “app like”
6) Click on the Text colour icon > Custom > #f1842f > OK > Save.

Note: You can also change it in the styling tab – but that changes it for all the text within that module.

Okay now, that you’re familiar with finding, cropping, adding, editing your hero image. I’m going to revert back to the blue background with the houses and continue on with the tutorial.

Change Row Background Image & Add Image (FAST FORWARD >>>)

1) Turn on Builder
2) Go to Row Options > Styling > Remove Background Image
3) Add Background Colour > #69d2e7
4) Remove Overlay Colour & Overlay Hover Colour
5) Remove Bottom Padding
6) Save
7) Drop in an Image Module Below
8) Browse Library > Upload Files > Select Files > Main-Houses.png > Insert File URL
9) Hover over image > Set Columns to 1:2:1 > Move Image into 2nd Column.
10) Double Click on: an “app like” mobile responsive website > Styling > Font Colour > #3b3b3
11) Go to Text Tab > Change “app like” to > #ffffff > Save.
12) Save & Close Builder.