Skip to content

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 Your’s will be or

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

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.

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 > 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 > 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” > 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


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


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.


Back to Top


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!


Back to Top

9. Building Homepage


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:
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 >
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.


Back to Top

Styling Sticky Header (if Menu, not visible)

1) Go to Customize

2) Themify Options > Advanced Tab > Sticky header

3) Header wrap > #3b3b3b @ 75% Opacity (automatically changes to #3d3d3d)

4) Save & Publish.


Back to Top

Saving Layout (IMPORTANT)

1) Turn on Builder
2) Hover over Themify Builder > Layouts > Save as Layout > Home > Save

Note: you can load your layout on any page. Or you can also export your layout, and import it into another website.


Back to Top

2nd Row – Headline & Feature Modules

1) Turn on the Builder
2) Drop a text module into row
3) Add in Text: “Served over 13,000 customers since 1987.”

Note: The text you add here can say something about your company. i.e. how long you’ve been operation, how many customers you’ve served or even a main benefit of getting your service/product. Or you can just type in services – if you want to list them here.

4) Set Text to H3 Tag
5) Highlight: “13,000 Customers” and Change Colour > #f1842f (Your accent colour)
6) Save
7) Drop a feature module directly below the text.
8) Feature Title Add in: About

Note: This is where you can add in an About section and link it to your about page, or just talk about your services.

9) Type in: We’re here to help you fulfill your dreams, create something that your proud of and help change the world for the better.

10) Below that, Type in: Learn More >
11) Highlight: Learn More > & Link to any page you’d like in this case it would be something like
12) Highlight: Learn More > & Change text colour to your accent colour > #f1842f

Note: If your accent colour doesn’t stand out then I recommend using a blue (standard link colour) e.g. #008acf

13) Set Layout > 3rd Option
14) Icon Type > Image > Browse Library > Upload Files > Select Files > Main-01 Responsive-Image.png > Open > Insert File URL
Note: You can select icons, and they have hundreds of free icons to choose from. Make sure to use the colours from your colour palette as it will keep everything consistent.
15) Set Size > Medium
16) Set Link >

This ensures when people click on the icon or title – they will also be taken to that page.

17) Go to Styling Tab > Link Colour > #4d4d4d

18) Save.

19) Hover over feature module > Set Columns > 1:1:1

20) Duplicate feature module x2 times & move into respective columns.

21) Double click on 2nd Feature Module

22) Change Feature Title > Services

23) Change Text > We offer a range of services to cater for different needs and budgets. Feel free to browse through our services.

24) Change “Learn More” Link to >

25) Change Image to > Main-02-Customizable.png

26) Change Link >

27) Save

28) Double click on 3rd module

29) Change Feature Title > Gallery

30) Change Text > We have worked with thousands of happy clients over the years. See what we’ve done for them and can do for you.

31) Change “Learn More” Link to >

32) Change Image > Main-03-SEO-Friendly.png

33) Change Link >

34) Save

35) Save & Close Builder

Now, you should be done, adding in all your modules. We need to adjust the fonts, spacing and layout.

Row #2 – Adjust Fonts, Spacing & Layouts

1) Turn on Builder

2) Go to Row Options > Styling > Text Align > Centre > De-select apply to all padding > Add 5% Top Padding > Save.

3) Save & Close Builder

4) Go to Customize > Click on Back (in customizer, not browser) > Typography > Default Typography > Heading 3 > Font Family > Quicksand > Font Weight > 700 > Text Transform > Uppercase

5) Save & Publish

6) Go to Back (in customizer) > Themify Options > Body > 16px > Open Sans > 4d4d4d

7) Save & Publish

8) Click on Custom CSS, Paste in:

p {
line-height: 30px !important;
padding-bottom: 15px !important;

Note: Ideal body text is 15px-25px and Colour, shouldn’t be black #000 rather dark grey such as #4d4d4d depending on your website. Look at,, Airbnb & PayPal.


Back to Top

Row #3 –Testimonials Sliders

1) Turn on Builder
2) Go to Row Options > Styling > Background Colour > #DFE3CB (from Colour palette or light grey #f6f6f6) > Save.
3) Drop in a Text module
4) Add Text: Testimonials
5) Set Text to H3 Tag
6) Save
7) Drop in Slider Module directly below Testimonials
8) Set Display > Text > Add Text:

Vestibulum maximus fringilla ante, eget bibendum diam volutpat et. Suspendisse venenatis mi eu congue maximus. In faucibus, ligula at varius pellentesque, eros nisi venenatis quam, sit amet semper ligula lacus id elit.

John Doe, New York.

Note: this is where you can type in what your clients have said about your business, and this will add more credibility to your website.

9) Italic, the name and Address to separate the content
10) Click +Add new row > Add Text:

Vestibulum maximus fringilla ante, eget bibendum diam volutpat et. Suspendisse venenatis mi eu congue maximus. In faucibus, ligula at varius pellentesque, eros nisi venenatis quam, sit amet semper ligula lacus id elit.

Jane Doe, Sydney Australia.

11) Italic, the name and address to separate the content
12) Click on Preview
13) Select No for Show Slider Pagination
14) Go to Styling Tab > Font Size > 15px
15) Save
16) Hover over Slider Module > Set Columns > 1:2:1
17) Move Slider into middle column
18) Go to Row Options >Styling > Text Align > Centre > Padding > De-select apply to all padding > 4% Top > Save.
Save & Close Builder.


Back to Top

Adding Video

1) Turn on Builder
2) Copy URL from YouTube
3) Drop Video Module into Row
4) Add Link to Video URL
5) Save
6) Save & Close Builder.


Back to Top

Row #4 Call to Action

1) Turn on Builder
2) Go to Row Options > Background Colour > #f1842f (your accent colour) > Save.
3) Duplicate “Testimonials” Text Module > Move it into the Row #4 Call to Action.
4) Double click the Duplicate > Change Text > Questions (or Get started now, Free trial, Learn more, Go Shopping, Call Today) > Save.
5) Drop in a Text Module Directly Below “Questions” > Add Text:

Our support team are here to help you understand which service you need, answer concerns and fix issues. Check out our FAQs, send us an email, or give us a call.

6) Save.
7) Hover over the text module > Set Columns > 1:2:1 > Move module into middle.
8) Another cool method! Drop in a button module below the text > Don’t enter in anything > Save.
9) Go to your button “View Services” > Hover over it > Select Copy (That copies the code to your clipboard)
10) Hover over your empty Button > Paste > OK to Overwrite the data.

Note: that means you can easily copy and paste any different modules which saves you a ton of time customizing.

11) Double click on the Duplicate “View Services” Button.
12) Change Text > Ask Questions > Link > (you can link it to your contact page or wherever you want) > Save.
13) Go to Row Options > Row Width > Full Width > Styling > Font Colour > #ffffff > Text Align > Centre > De-select “Apply to all padding” > 2% Top > 3% Bottom > Save.
14) Double click on “Ask Questions” Button > Styling > Text Align > Default > Save.

Now, I’m going to show you how to make it SUPER Mobile friendly, this site is already very responsive – But these days, it’s not enough – You should optimize it specifically for the Mobile User – because Desktop and Mobile Users are in a different mindset.


Tesla –
Upwork –


Back to Top

Make it “SUPER” Mobile Friendly.

The goal of this is to show you the basic principles of it, and it’s very simple to do. Then you can apply to wherever you feel is necessary.

1) Turn on Builder
2) Duplicate the entire 1st Row
3) Go to Row Options for the Duplicate Row > Styling > Background Colour > a7dbd7 > Save.
4) Double click on the “Our Mission” Button > Change Text > View Map > Link >
5) Insert Icon > fa-map-o > Save (Use search: map)
6) Double click on the “View Services” Button > Change Text > Call Now > Link > tel:+ yournumber
7) Insert Icon > fa-phone-square > Save (Use search: phone)
8) Test Responsiveness, you’ll see the buttons not aligned – because we’ve aligned them to right, left respectively.
9) Double click each button > Styling > Text Align > Center > Save.
10) Edit “House” Image > Delete URL > Browse Library > Upload > (Mob) Main > Insert
11) Go to Styling > Padding > deselect “apply to all” > 30% right > 30% left > Save.
12) Hover over the Row with Cartoon Image > Set Columns > 1:1:1
13) Scroll down to the Bottom row (new)
14) Go to Row Options > Row Width > Full Width > Row Anchor > map (exactly what you put in the link before excluding the # – it’s case sensitive too) > Save
15) Drop in a Map Module > Add Address > Melbourne, Australia > Zoom > 10 > Save.

Note: I’m going to show you how to do a row anchor, this is really cool and allows the visitor to click on a link, and it will automatically scroll to that section.

Set Visibility

1) Go to Row Options for 1st Original Row > Visibility > Mobile > Hide > Save.
2) Go to Row Options for the Duplicate Row > Visibility > Desktop > Hide > Tablet > Hide > Save.
3) Scroll down to the new Map Row > Row Options > Visibility > Desktop > Hide > Tablet > Hide > Save.
4) Save & Close Builder.
5) Test Responsiveness. For the row anchor to work, make sure to refresh the page. There’s one thing I’m not entirely satisfied with and that’s how small our H1 Title became.

Fix Heading Tag Size on Mobile Devices

1) Go to Customizer > Themify Options > Custom CSS > Paste in:

@media screen and (max-width: 768px){
h1 {
font-size:3.2em !important;

Note: You can do this for all heading tags from h1-h6, just change the name and also you can also edit the number infront of the “em” to adjust the size.

IMPORTANT: if you notice that the CSS you’ve applied before doesn’t work any more. Copy that CSS to clipboard and paste it above the recently added CSS.


Back to Top

About Page

1) Go to About Page
2) Turn on Builder
3) Hover over Themify Builder >Import/Export > Import > OK to override all current Builder data > Upload > About Layout Export >Open
4) Now, the layout should be imported – we just need to do a few things before we edit text.
5) Click on Edit Page > Scroll down to Themify Custom Panel > Content Width > Full Width > Update > View Page.
6) Go to Customize > Click back on customizer > Typography > Default Typography > Heading 2 > Font Family > Quicksand > Font Weight > 700 > Save & Publish
7) Go back to Themify Options > Body > Body Link > #008acf > Body Link Hover > underline (or +2 shades darker)
8) Close
9) Editing Text, you should know how to do that already. But what’s important, is what you actually write on your about page. So I’ve written mine, and you can replace what you do and your story about yourself. Your about page will be one of your most viewed pages, so don’t let that go to waste with just 1 sentence and nothing about yourself or your business.
10) For the image, double click the image > Browse library (not Upload, or else it will sometimes automatically crop your images) >Upload Files > Select Files > Your Image > Insert File URL
11) You can make it open in a lightbox, by pasting in the URL into Image Link and select Open link in lightbox

Note: I’ve also include the size of image, so if you can crop your image to that size. And hopefully, you’ve learn how to crop your images earlier, if not please watch that part. Always reduce your image to the lowest size possible while keeping decent quality. Large files will make website load very slowly.

12) I’ve also set in the Mobile version of the page too, all you need to do is copy and paste the text. I’ve removed the images for Mobile devices, because we save space and the page can load quicker.
13) Repeat the process for the 2nd image.
14) Save & Close Builder

Simple & Easy! Let’s move onto the Services Page.


Back to Top

Services Page

1) Go to Services Page
2) Turn on Builder
3) Hover over Themify Builder > Import/Export > Import > Upload > Services Layout > Open
4) Go to Edit Page > Content Width > Full Width > Update > View Page
5) All you need to do is to replace the images, text, links with your own and then you’re good to go.
6) Make sure to change your links and call to action colour to your own accent colour.
7) Turn on Builder
8) Double click on the 1st Text Module > Highlight “Learn More” > Change Colour to yours. Repeat for all. Or if you don’t have a link delete it.
9) Scroll down to bottom row > Row Options > Background Colour > #your accent colour > Save
10) Save & Close Builder.

Note: the image size doesn’t have to be exact, but if you want to use these measurements than I believe it’s a good size in terms of pixels.

And you can also align the images for each column, by hovering over the row on the left, then align it.


Back to Top

Contact Page

1) Go to to Dashboard
2) Plugins > Add New > Contact form 7 > Install > Activate
3) Go back to Contact Page
4) Turn on Builder
5) Hover over Themify Builder > Import/Export > Import > Upload > Contact Layout > Open
6) Go to Edit Page > Content Width > Full Width > Update > View Page
7) Go to Dashboard > Contact > Contact form 1 > Edit > Mail Tab > Ensure your email is here > Save. (also check JUNK Mail – to see if messages get delivered there.)
8) Go back to Contact form, we’ll edit the styling of button and form.
9) Go to Customize > Forms > Form Buttons > #4d4d4d > Form Buttons Hover > 3c3c3c

Note: This is a neutral colour, which is good for all designs/sites and you can use your accent colours & +/- 2 shades using 0to255.

10) Save & Publish
11) Close


Back to Top

Tips & Tricks (& Bonus)

Edit Mobile Menu Icon

1) Go to Customize > Themify Options > Custom CSS > Paste this in:

#menu-icon:before {
 color: #ffffff;

Note: You can find your hex code on color picker, and change it to suit your needs. But white is recommended on dark grey background and dark grey is recommended on white background.

Edit Mobile Menu Styling

1) Go to Customize > Themify Options > Custom CSS > Paste this in:

@media screen and (max-width:1000px){
 .sidemenu {
 background-color:#4d4d4d !important;
 #headerwrap #main-nav a, #headerwrap #main-nav ul a{
 #headerwrap #main-nav li a:hover{
 color: #f1842f;
 #headerwrap #main-nav .current_page_item > a, #headerwrap #main-nav .current-menu-item > a {
 color: #f1842f !important;

2) Adjust the colours as needed.

Back to Top

Additional Layouts

I’ve created some layouts that you can import and use. I’ll show how to use one quickly.

1) Go to Dashboard
2) Pages > Add New
3) Title > Service Page
4) Scroll down to Themify Custom Panel > Content Width > Full Width
5) Publish
6) Hover over Appearance > Menus
7) Select > Service Page 1 > Add to menu
8) Rearrange page below “Services” (appears as dropdown menu)
9) Go to your “Service page 1”
10) Turn on Builder
11) Hover over Themify Builder > Import/Export > Import > OK > Upload > Bonus Service Page > Open


Back to Top

Congrats & Final Message.

Okay, we’re done! Congrats, you’ve just built a complete website and saved thousands of dollars!

Please give the video a big thumbs up if you enjoyed it. Share this Video on Twitter and tag my name @hoganchua – And I’ll send you the links to some bonus videos not listed.

Make sure you subscribe for other videos! Drop a comment below if you have any questions, I’m always on my computer!

Make sure to provide a link or a screenshot of your problem, so I can understand the problem better.

So Download JING (free screenshot software) and get a free account at Screencast.

Cheers! Hogan Chua.


Back to Top