Hey hey ladies and gents! Today I’m going to help you put together a website with Hostgator.

I’m going to show you how to make a professional website for FREE 🙂

Okay, almost for free. You need to register a domain and get hosting. But you’re still saving thousands of dollars doing this on your own. All you need is like an hour. 

Have no fear – it’s really simple.

Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.

Step 1: Register Your Domain

Go to Hostgator -> Click Get Started Now -> Choose a Plan -> Click Sign up now (doesn’t matter which)

Type in a domain you want to register and push enter to see if it is available. If you found one that is – move onto step 2.

Step 2: Choose Hosting Service

Use the discount code: NYCTECHCLUB to save 65%

(its an affiliate link so hostgator also pays me a commission for helping you)

Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.

  1. Decide what plan is best for you (if you only will have 1 website – choose hatchling plan, if you think you’ll have more than 1 website – choose baby plan)
  2. Fill in all the info (I suggest you choose a 12 month billing cycle)
  3. Unclick all additional services (they are unnecessary and extra money)
  4. Enter “NYCTECHCLUB” for a 25% off coupon code (our very own special coupon code!)
  5. Agree to the terms and conditions and “Check Out”

You will receive a hostgator email in your inbox with all your login and account details

Hosting is storage for you to make your website and hold data/content/images/videos for your website. Think of hosting like a house and all the furniture being the data you put in your house. If you don’t have a house, you don’t have anywhere to live 🙂

Step 3: You’ll get an Email with Your Account Info

  1. Pull up your new account email from Hostgator
  2. Click on the link that says “Your Control Panel”
  3. Login with the username and password from your email

Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.


Step 4:  Install WordPress using Hostgator

There’s one last thing we need to do before we can start customizing our website – we have to install the platform we’re going to use to make it.

  1. Now that’re you’re logged in to your cpanel
  2. Scroll down to Software/Services section of the main page
  3. Click on the icon that says “QuickInstall”
  4. Click on WordPress on the left side menu
  5. Click Continue
  6. Enter an admin email (that you get email from), blog title (you can change this later), user name and other details
  7. Click “Install now!”

Awesome! Now we have wordpress installed! You can go to your domain address and see that we have just uploaded a website to your site (we’ll fix this whole thing and make it pretty – don’t worry!)

Step 5: Log to Your New  Site

You might have to wait 5-15 minutes before you can click to log into your new site. Take a break if you need.

There are two ways to log onto your site

  1. You can click on the link provided on the hostgator page after the quick install and use the username and password
  2. You can go to your email and open the new email you get with details about logging into your site (same info as above)

To customize and add content to your site, you will always log into the site with the following address: www.YourSite.com/wp-admin

So go ahead and log on!

Step 6: Choose A New Theme (template)

If you followed Step 5, you are not on the “Dashboard” of your website. Now it’s time to start customizing our website!

WordPress offers you a variety of themes, which are skeletons, to make and customize our website. I’m going to help you customize a theme for free that would cost you roughly $2500 if you paid someone else to do it for you.

  1.  On the left side, find the Appearance link – hover over it and click “Themes”
  2. At the top you’ll see some tabs – click on WordPress.org Themes
  3. Then filter by clicking Popular and find the “Spacious” theme
  4. If you can’t find it, just type into the search bar on the right “Spacious”
  5. Then drag your arrow over the theme and click “Install”
  6. You’ll be brought to another page – click “Activate”

Step 7: Let’s Start Customizing Our Site!

First click on the customize button

All we’re going to do is add a title to our side and a tag line or “motto”

Did you make sure to click Save? If so then let’s click the X on the upper left corner and start making/building! 🙂

Step 8: Save a few Images You’ll Need

For now, I would like you to “right click and save as” the following images to a folder on your computer. You can eventually replace these with all your own images, but for now, let’s use some images I have.

Make sure you save all of these (or go to the resources below to find your own images)

Wow that’s a lot of images (not really) but it’s a great start. Remember, images make your site really pop and look beautiful so don’t be shy with having images on your site.

Step 10: Add Images to Media Library

Step 11: Create Header Logo

Step 12: Activate Slider / Create Slider Pages

Step 13: Make Products & Services Section

Step 14: Make Image Gallery

Step 15: Put Blog Posts on Homepage

Just download the Recent Post Extended Widget.

Drag it into your widgets and click a few boxes and UNCLICK “use default css” and PASTE in this (edit summary font as necessary – see video for details):

.rpwe-block ul{
list-style: none !important;
margin-left: 0 !important;
padding-left: 0 !important;
.read-more, .more-link { color: #ef0202; padding-left: 8px;
.rpwe-block li{
border-bottom: 1px solid #eee;
margin-bottom: 10px;
padding-bottom: 10px;
list-style-type: none;

.rpwe-block a{
display: inline !important;
text-decoration: none;

.rpwe-block h3 { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; clear: none; font-size: 22px !important; font-weight: 400; line-height: 1.5em; margin-bottom: 0 !important; margin-top: 0 !important; padding-bottom: 1px;

border: 1px solid #eee !important;
box-shadow: none !important;
margin: 2px 10px 2px 0;
padding: 3px !important;

.rpwe-summary { font-size: 12px; line-height: 24px;

color: #bbb;
font-size: 11px;

display: inline;
float: left;

display: inline;
float: right;

display: block;
margin-left: auto;
margin-right: auto;

content: “”;
display: table !important;

clear: both;

zoom: 1;

We’re going to create some pages for our site first. This is going to help us create the menu at the top of our site and also link to slider (the big image on the homepage)

After you add these pages, you should be able to see at the top of your site that they are links on the header (this is called the Header Menu).

We can edit the header menu later (I’ll show you how below!)

Step 10: Create Two Slider Pages

You can create up to five feature pages (this is the section with the big image that slides and links to another page). It makes your site look beautiful and professional.

I’m only creating two for example purposes.

These are going to show up on the top of your homepage in the menu but we’re going to delete them later. Don’t worry about this for now!

Step 11: Let’s Add Some Additional Pages for the Buttons (service pages)

So now we’re going to add pages for the icons we have that will direct people to different areas of our site.

This section is similar to adding Pages (Step 8) but with one additional step.

We’ll add the buttons to the homepage in a few steps from now.

Step 12: Make a Call To Action Page

These are going to show up on the top of your homepage in the menu but we’re going to delete them later. Don’t worry about this for now!

Step 13: Create Blog Posts / Articles

If you’re a writer and want to update your post with articles every now and then, the best way is to create blog posts.

This is really similar to make pages but blog posts can be shown as recent postings which pages cannot.

Step 14: Enable and Add Slider to Homepage

This is where we’ll put in the beautiful large images in our homepage and link them to other pages/areas of the site

  1. In the dashboard, go to Appearance->Theme Options.
  2. Go to Slider Tab (on the very right).
  3. To activate the slider, check the Check to activate slider checkbox
  4. Upload the slider image # 1 for the first slider. Similarly, add the corresponding slider title, slider description and redirect link (for my site I’ll put (“http://www.dreambeachbody.com/grand-central”) . You can link to a link within your site or outside of your site.
  5. Repeat the above step for your other slides. (my other slider page will link to The Bridge)
  6. Then click on Save Changes. That’s it, open your home page and it should be there. 🙂

Step 15: Set up Business Template (the meat of the website!)

First Step

  1. In the dashboard, add a new page – Title it “Blank”.
  2. In the Page Attributes option box, choose the Business Template in the Template drop-down option.
  3. Publish the page. Yes, that’s it for the first step.
  4. Create a second page titled “Blog”
  5. In the Page Attributes option box, choose the Business Template in the Template drop-down option
  6. Publish the page. This is the second step.

Note (do this!): If you want to set this Business Page as the Home page, then follow the instruction below:

  1. In the dashboard, go to Settings->Reading.
  2. Check on the ‘Static Page’ option.
  3. Choose the business page “Blank” (the page you created following the instruction above) as the front page.
  4. Choose the “Blog” page as your posts page.
  5. Save the Changes.

Second Step

The Business template has four widget areas within it. Have a look here in this image. Click on the image for a better view.


  1. Business Top Sidebar
  2. Business Middle Left Sidebar
  3. Business Middle Right Sidebar
  4. Business Bottom Sidebar

Go to the left side menu and find Appearance > and Click Widgets

You just need to add some widgets to these sidebars to setup the business template. Third Step Below are some widgets provided by the theme that you could use to make your business template look awesome.

  1. TG: Services: Add this widget to Business Top/Bottom Sidebar. In this widget, select the pages in the drop down option you created in Step 10. There are six page drop-down options within it. The title, description and featured image of that same pages that you select will be shown.
  2. TG: Call to Action: Add this widget to Business Top/Bottom Sidebar. In this widget, add the first and second title line, button text, button redirect link and all is done. The address to put in the redirect page for our site is “http://www.dreambeachbody.com/call-to-action”
  3. TG: Testimonials: Add this widget to any Business Middle Right Sidebar. In this widgets, add the title, text, name, byline and all is done.
  4. TG: Featured Single Page: Add this widget to Business Middle Left Sidebar. In this widget, select any of your page in the drop down option. The title, description and featured image of that same page that you select will be shown.
  5. TG: Featured Widget: Add this widget to Business Top/Bottom Sidebar. In this widget, add the title and description. select any of your page in the drop down option. There are three page drop-down options within it. The featured image of that same page that you select will be shown.

Step 16: Customize Footer (bottom of website)

Similar to Step 15 – we are just going to drag and drop some stuff into the Footer Sidebar 1, 2, 3, and 4 for our footer!

Yes, it is that easy!

  1. Let’s drag the Search widget into Footer Sidebar 1
  2. Recent Widget with Thumbnails (the plugin we got) for Footer Sidebar 2
  3. Custom Menu into Footer Sidebar 3
  4. And a Text widget into Footer Sidebar 4 (type some stuff into the widget)

Make sure you click save on each one after you drag them into the right sidebar!

Step 17: Add Social Icons

Go to Plugins > Add New > Browse > Search “Social Media Widget”

Click Install and Activate

Step 18: Customize Your Header Menu

By default, the menus will fall back to Pages. That means just after activation of the theme you will see all the pages as menus. If you want selective menus with a combination of links, pages, categories then custom menu is what you should be looking for.

Set up Custom Menu

  1. Go to Appearance > Menus in the WordPress menu
  2. Click on Create a new menu link
  3. Give a name to your menu in Menu Name and click Create Menu button
  4. Now choose the pages, categories, custom links from the left-side of your screen by selecting the checkbox and click on Add Menu
  5. Click Save Menu after adding required pages, categories in the menu

Then go to Appearance > Customize > Navigation > and select the menu you just made in the Primary Menu drop down

Step 19: Customize Right Side Bar Menu

 Widgets! More widgets! 

You should have gotten some good practice in Step 13 on dragging widgets onto your home page. Now we are going to drag a few more.

Step 20: Add a Contact Page

For your footer add this text into a text widget:

<li> </li>

Contact Us Page

  1. Download Contact Form 7 plugin (go to Plugins > Add New > Browse > Search for Contact Form 7)
  2. Then go to plugin’s page and set it. Here is a detail on that Docs (You don’t need to look at this right now)

Contact us page template

  1. Go to dashboard, then create a page. Give it a name “Contact” or “Contact us” as you wish.
  2. Now on the right hand side you can see Template Drop-down. Select Contact Page Template
  3. Copy the contact form 7 shortcode and paste it in this page. You can find this by going to Contact on the left side menu and click on “Contact Form 1” – you’ll see the code right in front of you
  4. Click on Publish.


And we’re done! Congrats! I know it took a little bit of time and work but you honestly just saved yourself THOUSANDS of Dollars!! And I can’t be any happier for you.

Now that you’ve made a beautiful website, how about customizing it yourself?

Here are some additional resources to help you out in case you need them.

One Response

Comments are closed.