How to Make a Website in 2016
In this Step-by-Step guide you will learn how to build your own website that works and looks great on mobile and desktop. We will be using one of the many pre-built templates to make the website look completely professional - so there is no need for you to have web design skills.
What you will learn:
- Why you must have a website that's mobile friendly?
- Get a FREE YourBusinessName.com – domain name
- Get your own webhosting
- Go through the process of setting up a website
- Install a Theme/Template to style your website
- Where to get more themes
Mobile devices are changing the world and the way we live. These days people have their mobile devices on them at all times which they use to communicate, look for information and work. Mobile has reached such a critical level that the number of mobile devices now surpasses the number of personal computers. Many of the new technology companies are no longer focusing on desktop and design all their products mobile first. If you are serious about reaching your entire audience, you must have a website that works and looks great on mobile and desktop.
2016 Internet Traffic Stats
Since a large portion of visitors to your website will now be coming from their mobile devices – you want them to experience the mobile version of your website on their phones and the desktop version when they are on a laptop or PC. Think about it, you can easily send traffic to your mobile website because people are already using their mobile phones to check FaceBook, Instagram, Twitter, LinkedIn, SnapChat, Google and even listen to podcasts. If you do your advertising right and get these visitors to come to your website from the app that they are currently using, the transition will feel natural because your website will have a look and feel just like an app. Also, if someone is listening to a podcast on their phone and you mention your website on the podcast, that person can easily look up your website and they will be automatically taken to the mobile version of your site that will look great and be easy to browse.
Creating a mobile website is easy because there are great tools that non web designers can now use to set up a website in 30 min. The only hard and time consuming part is you will have to create content for your website, like articles or videos.
Choosing a Theme/Template
When it comes to picking a theme for your website, you have two options – Free vs Premium. There are a ton of great looking FREE themes you can install, however there are even better premium themes that cost anywhere from $20 - $60 on ThemeForest. The difference is that for only a small fee you will get tons of cool features to customize your site to make it look like it was created by a professional for thousands of dollars. Now, don’t get me wrong, you can still make a beautiful website with a free theme, but like everything in life – you need to pay to get the good stuff.
Free Mobile Ready Themes
There are thousands of Free mobile ready theme that you can pick from when setting up your website. I will show you how to do this in the remainder of this guide.
Continue reading to learn how to install free themes.
Setting up your Website - DIY
There are a number of website builders out there, but the most popular of them all is WordPress. WordPress is FREE and has been around since 2003. It currently powers 25% of all websites online and is growing rapidly every day. The competition does not even come close to how popular WordPress is.
Benefits of using WordPress
- It's 100% Free - WordPress is OpenSource software. You can download WordPress for free and Install it Yourself !!!
- Fully Customizable - You can change how your website looks using themes. You can also add additional functionality to your website using plugins. There are thousands of Free plugins and Themes available for download once you install WordPress.
- Social Media - You can add any social media feature with a free plugin.
- No Coding Required - All you need to do is click and drag.
- Blogging - comes build into WordPress by default, so you can start blogging right away.
- Free E-Commerce - You can install a Free ecommerce plugin and start selling online right away.
- Saves You Money - You can make a website by yourself that looks like it cost thousands to build.
WordPress vs Other Website Builders
Install WordPress by Yourself
WordPress is free software, but you need to install it using a webhosting provider such as Blue Host.
I recommend the "Plus Plan", because it gets you a free domain name and lots of flexibility. Here's what you will get:
- FREE Domain Name - for new customers
Read the next step to help you with picking a name.
- Unlimited websites - so you can build websites for your friends and family
- Unlimited Disk Space - so you can upload your images and videos
- Unlimited Email Accounts @yourdomain.com - so you have a professional email address
- Free Ads - you will get free credits to adversise your website on platforms like facebook or google
Chose a Domain Name - YourName.com
After going to BlueHost, click on the "Plus Plan" - you will now be given an option to chose a domain name for your website.
If you already have a name in mind, enter the name to check if it's still available and click Next to continue. You may need to try a name made up of three words as its really hard to find short domain names themese days - see below for help on chosing a name.
Having Trouble Choosing a Name?A lot of the times the name you want will be taken. Most two word combinations are hard to find, so try going for three words if you can't find a short name. Here are some suggestions:
- Add location to the name if you are a local business. Ex: NewYorkAccountant
- Add Prefix or Suffix to the name like so:
Check out more examples I've provided:
Make your Invoice Smaller
After you have clicked on the Plus Plan and found your domain name proceed to the check out screen where you enter your billing information.
To make your invoice smaller - uncheck the following options because you will not need them:
- Site Backup Pro - This is up to you, but I tend to backup my own sites.
- Search Engine Jumpstart - This you won't need because in order to get in the search engines you will need to write your own content - great content is what gets you up in the search results, that's all you need to know.
- SiteLock Security - You won't need this either. Your site will remain secure with free automatic WordPress updates.
Finish Your Signup
Check your email after you have finished creating your new hosting account.
You should have received a confirmation email with your account information. Keep this information in a safe place and remember the password you have signed up with.
What's Inside Your Account
Your new hosting account will have a tone of options and features that you can use to install additional websites, add new email accounts, add ftp access and lots more.
To login to your account:
- Go to BlueHost.com and click on Login
- Enter your domain-name and password to log-in
Get your account ready to install WordPress
Your account may come with a default version of WordPress pre-installed. We need to delete this and start clean - so you can learn how to install wordpress by yourself.
- Click on C-Panel in the top left corner.
- Next, click on File Manager under the Files section - use 'Ctrl + F' or 'Command + F' on a Mac to find the File Manager icon on the screen.
Clean up your Folders
Once you are in the File Manager
- Go inside "public_html" folder - this is the main root folder of your website.
- Delete all the files and folders inside this folder.
Note: If there are no files or folders to delete under the "public_html" folder, ignore this part all together.
- Click on Select All and click the Delete button and delete all the files.
- Your "public_html" fodler should now be completely empty, giving you a clean slate to set up your website.
We will now go through the steps of setting up WordPress for your website.To install WordPress yourself:
- Click on C-Panel in the top left corner.
- Look under Website Builders - click on Install WordPress
- Use Ctrl + F to help you find the icon on the screen, it's easier that way.
Using Quick Install
You should now be in the Quick Install Dashboard where you can install WordPress for free.
Use the Free Install Option - there is no need to pay for this as it's pretty straight forward. If you get stuck, you can allways ask questions in the community section of my website.
Finish Installing WordPress
Fill out all of the Information and Install WordPress for your website. You don't need to use your real last and first name unless you want to.
- Select your domain name from the dropdown.
- "install/path/here" - Leave this empty
- Email - Enter your current email address
- Blog Title - Enter your Website name here
- Admin User - This is the username you will log into WordPress with. Pick something other than Admin - because the "admin" username is often targeted by hackers
- First Name - Use any name
- Last Name - Use any last name
You should receive a confirmation email once the installation is finished. It takes about a minute.
Log-In to Your WordPress Website
WordPress has automatically generated a long, secure Password for your website. Check your email for the login information.
- Log-In to your email
- Look for an email - Install Complete (sometimes email is slow so you may have to wait a few minutes to receive it)
- Find Your Username and Password
- You can now login to your website by simply going to:
- Log-in to WordPress with the username and password from the email (this is different than the username and password you created for your bluehost account)
Inside the WordPress Dashboard
If you have followed all of the above steps you should now be logged into your website. This is your main dashboard, where you will be customizing your website.
On the left side are all the different features and options that you can use to modify your website. I am going to explain some of the main features to get you up and running quickly.
What you will learn next?
- Change the Title of your website
- Install a Theme
- Creating a logo
- Adding Pages
- Adding Blog Posts
- Adding Images
- Installing Plugins
Changing the title of your website
You have allready created a title for your website when you first installed WordPress. If you want to change the title to something else go to Settings -> General
- Change the Site Title
- Change the Tagline to a short description of your business (no more than 4-8 words)
- Leave the WordPress Address (URL) as is
- Leave the Site Address (URL) as is
- Check that your Email is correct
- Uncheck "Anyone can Register" - to prevent people from spamming your site with fake registrations
- The rest of the setting are pretty straight forward, like Date and Time
Once you are finished click on Save Changes at the bottom
How to use Themes/Templates
By default your WordPress website will not look very good - that is because the look of your site completely depends on the theme that you install. There are plenty of free themes in the WordPress theme repository which look great - however I highly recomment spending a few bucks on a premium theme from ThemeForest to make your website look like it was built by a professional web designer.
In this tutorial we will install a free theme called Sydney - however you can install whichever theme you like, the process is pretty much the same.
Finding a Free Theme
- To install a theme go to Appearance -> Themes
- On the next page that loads, go to the top and click on the Add New button
- Search for a Theme called Sydney or browse the theme directory to find a theme that you like - the rest of this tutorial will cover how to use the Free Syney Theme only
- Don't forget to check out ThemeForest for some really nice premium themes
Installing a Free Theme
Once you have found the Sydney theme, hover over it and click Install.
Next, Click on Activate to finish installing the theme
Your theme is almost ready - you just need to install a few free plugins to make it function properly. This is covered in the next step.
Detailed guide on how to use the Sydney Theme
NOTE: I have written a complete guide on how to use the Sydney theme with a Free Page Builder - I suggest you follow this guide here if you have decided to use Sydney as your theme.
Installing Free Plugins
Plugins are used to exhance your website with new cool features and functionality. To make the most out of the free Sydney Theme you need to install several free plugins from the WordPress Plugin Repository.
Go to Plugins -> Add New.
Next, Search for and Install the following plugins. Make sure to activate the plugins once installed - simply click on activate after installing.
- Page Builder by SiteOrigin - allows you to build nice looking pages
- SiteOrigin Widgets Bundle - adds widgets such as Google Maps, Social Icons, Price Lists, etc. that you can add to your pages
- Spacer by Justin Saad - allows you to easily add a space between different content blocks on your web pages
- Title Remover by Brittany Internet Services - removes default titles from your pages allowing you to create your own titles with the page builder plugin
Creating a logo for your website
We will now create a free logo for your website. Of course if you want a fancy logo you may want to hire a designer or get Adobe Illustrator or Adobe Photoshop and learn to do it yourself.
To make a free logo we will be using Logo Makr. With LogoMakr you can make a quick simple logo using their free icons.
Make sure the Height of your logo is no more than 60 pixels. You can adjust the size in the top right corner.
Save the logo once you are done.
Upload the Logo to Your Website's Media Folder
Before we can add the logo to the top of the page, we need to first upload the image you've made to the WordPress Media Library.
In your dashboard, Click on Media -> Add New
You can simply "Drag & Drop" your logo here, or Click on "Select Files" and add your logo that way. You will see a progress bar at the bottom of the screen showing you that the logo is being uploaded. That's it, your logo is now ready to be inserted to the top of your website.
Adding the Logo to Your Site
Now that the logo is in the media folder, we can add it to the top left corner of the website.
While in your WordPress Dashboard, Click on Appearance -> Customize
Next, Click on Site title/tagline/logo. Click on Change Image and select the logo you uploaded.
Here you may also want to remove the Tagline - if you don't want it to show below your logo. The Sydney theme adds a tagline below the logo by default.
Click Save & Publish to save your changes. Then click the big 'X' in the top left corner to return to the WordPress dashboard.
Editing the Slider
Here we will replace the "Looking for a New Business Theme" text in the middle of the website, and the background Image.
Click on Appearance -> Customize. Then click on Header Area -> Header Slider
A slider is a very useful tool for rotating images at the top of your homepage. In this example we will keep things simple and only have one main image for your slider.
Change the Slider Speed
In this example we are only going to have one image for the slider - you can experiment adding more images later on if you need to.
Make sure you are in the Header Slider area of the customizer.
Set the Slider Speed to 0 and check the Stop the Slider checkbox to prevent it from rotating through different images.
Changing the Image
You will probably want to replace the default images that come with the theme to something that is more relevant to your website.
A really good source of FREE IMAGES is Unsplash.com - you should definitely check it out to find the image that you like.
- Find the image you like from unsplash.com and upload it to your Media Folder like before - by going to Media -> Add New
- Next, Click the Change Image button and select the image from your media library
- Change the Title for the First Slide to your custom title
- Change the Subtitle for the First Slide to your custom subtitle
- Scroll to the bottom of the Customizer until you see the Call to Action Button
- Make sure that URL for your call to action button is set to #primary
- Set the Text for your call to action button to whatever you want - this can be "Read More" or "Our Services"
- Save & Publish the changes you have made
Adding Content to your Website
Adding content to your site is done by adding new Pages or Posts. What's the difference between pages and posts you may ask? Pages are used for adding things such as a Contact Page or an About Page or any other piece of content that's not part of a blog. Posts are used for adding content to your blog only.
To add a new page Click on Pages -> Add New. Write something to describe what your business is about and click Publish to save the changes.
Note: Make sure the title of your page and the body contain relevant keywords that you want to rank for in the search engines. Don't stuff your content with repetitive keywords too much as this may get you penalized by the search engines instead. Just write naturally and sprinkle some relevant keywords here and there. If you are a local business, make sure to mention the name of your city in the title and body as well.
Making a Static Home Page
By default, your main home page will contain a list of all your blog posts.
What you may want instead is to set one of your pages (that describes your website) as the main home page.
To do so, click on Settings -> Reading
Click on A Static Page (select below)
Next select the page that you want to appear as a Front Page from the list of pages you have written.
Now when you go to your-website.com the page you selected as a front page will apear as the main home page.
Having a sidebar is a great way to display some additional information on the right side of your page that your visitors may find useful. You can use this space to add links to other pages, display a list of your latest posts or pages, or add anything you feel will make your site more useful to the visitor.
Editing the Sidebars
To edit what appears in the sidebar, click on Appearance -> Widgets
Here you can click and drag various items that you want to appear in the sidebar. Once you drag them to the sidebar they will be saved automatically. However when you make changes within each item, then you will have to click the Save button within each individual item to save those changes.
Removing the Sidebar
You may want to remove the sidebar that appears on all pages by default, to do so you will need to edit the page and change the Template to Full Width:
- Click on Pages-> All Pages to see a list of all the pages you have made
- Find the page you want to remove the sidebar from and click Edit
- Look on the right side to find Page Attributes
- Under Templates, click to select "Full Width" - this will get rid of the sidebar on that page
- Click Publish to save your changes.
Once you have written a few pages of content for your website, you will want to have a menu at the top of your website that a visitor can click on to navigate to those pages. To add a menu to your website click on Appearance -> Menus
Creating / Editing the Menu
By default your website will have no menu, and it's up to you to create one.
To create a new menu
- Click on create a new menu link at the top of the page
- Type a new name for your menu beside Menu Name
- Scroll to the bottom and check the Primary Menu checkbox beside Theme locations
- Next, select the pages you want added to the menu and click the Add to Menu button
- Once the pages are added to the menu you can move them around by clicking and dragging
- To have a menu item appear directly under another item, nudge the item to the right a little just like in the example picture.
Allowing people to Comment on your Articles
Your new WordPress website will allow people to post comments on your blog posts and pages. This is usefull if you want to start a discussion about a piece of content that you wrote. Some people prefer not to allow comments on their posts and pages as it may result in spam comments which will require moderation on your part.
There are 3 places where you need to check your comments settings - I will go over them here.
- First, go to Settings -> General
- If you want to allow comments, click on Anyone can register checkbox - this will open up your site to registrations which is what we want before allowing people to comment on your content. You do not want unregistered people commenting as this will likely result in a lot of spam.
- Leave the default user role as Subscriber - this will give users minimal privileges and only allow them to post comments without being able to modify other parts of your website.
Turn on Comments for all your blog posts
We will now modify the comment settings that apply to your entire website. Later I will show you how to modify comment settings for each individual page or post. If you do not want comments on your site then make sure the settings I cover are Unchecked.
- Go to Settings -> Discussion
- Check Allow people to post comments on new articles - this will allow comments on all your blog posts, but not pages. Pages will require you to allow/disallow comments on each page individually - I will cover this in the next step.
- Check Users must be registered and logged in to comment - this will force people to register before they can comment. Remember, we allowed registrations in the previous step.
Turn comments On/Off for individual Pages/Posts
To turn on/off comments for individual pages or posts:
- Go to your Pages or Posts and click Edit under the Post or Page that you want to edit.
- Next, click on Screen Options in the top right corner of the page/post you are editing.
- Check the Discussion checkbox to reveal the Discussion tab.
- Scroll to the bottom of your post/page until you see the Discussion section
- Here you can check/uncheck Allow Comments to allow/disallow comments for that particular page/post
Editing the Footer
The bottom part of your website which is called the "Footer" is a good place to put things such as your Address, Map, Open Hours, Social Media Links, etc.
To edit the footer:
- Click on Appearance -> Widgets while in the WordPress dashboard
- You should now see 3 different Footer sections, Footer1, Footer2, and Footer3.
- Next: You can click and drag the items from the left side of the screen into the Footer section of your choice.
- In Footer1, I have put "SiteOrigin Social Media Button" and "Recent Posts"
- In Footer2, I have put 2 "Text" boxes and filled them out with the Address and Store Hours
- In Footer3, I have put "SiteOrigin Google Maps"
When you first install WordPress, it doesn't really look and work too great out of the box. The reason for this, is that WordPress is meant to be very light weight and fast - there is no reason to slow your site down by having a bunch of features preinstalled that are not used by your individual site. There is no reason for your website to have e-commerce if you are not doing e-commerce. If you want to add e-commerce you would install a free plugin called WooCommerce. Same goes for Themes/Templates. If you want a particular theme or template then you would just install it. Essentially WordPress is a web platform and it functions like Windows or Mac. If you want to add a new App or Feature, you would install it separately.
To find plugins that can take your website to the next level:
- Go to Plugins -> Add New
- Use the Search Field in the top right corner to search for the plugin you need - I would recommend searching on google first to research the plugin you need before installing it.
- After you have found the right plugin hover over it and click Intall Now
While using a Free Theme/Template is a good way to begin learning WordPress, nothing compares to using a Professional Premium theme. This site was made using a premium theme which cost around $30 - which made the entire website building process much easier and faster.
There are a ton of really nice Premium themes you can get from ThemeForest. Also when you get a free theme from the WordPress theme directory, you can usually buy the premium version from the theme developer (just find the theme developers name on Google and go to their website).
If you have a specific theme that you need (for example a business theme, restaurant theme or a resume theme) you can search for themes here - Themeforest Search