So you want to build a website. Earlier, building a website required a team of developers and designers , but things are different today. There are a wide variety of website builders and CMS platforms like WordPress which have made website building within reach of every one.
Here in this guide I will share step by step instructions for you to create a small business website without spending a fortune or hiring a web developer. The best part is that you do not require any knowledge of coding. All you need is a patience and a willingness to learn .
Why is Website in Essential in this day and age?
Majority of consumers research a business on the internet before making a purchase. Think of your website as a digital salesman which works 24 by 7, never takes a holiday and never complains. In this digital age, a website is the most cost effective marketing tool at your disposal. Also, now making a website is super easy and very cost effective, so there is no reason fo your to not build a website
Get a Domain Name and Website Hosting
In order to get you website you will need 2 things. A Domain Name and web hosting. If you are new to the internet, dont worry.
What is a Domain name?
Lets say an old friend wants to visit you? What will you do? You will share your address with him so that he can find your home and pay you a visit.
Domain name is the address of your website. Domain name is what people type in the browser’s url bar to visit your website. So for example the domain name google is https://google.com and domain name of of this website is WebSiteBooklet.com.
A Domain name is the unique identity of your website. No two websites can have the same domain name.
What is web hosting?
A Web Host is a computer on the internet where all you website content like Images, Html Files etc reside.
In order to make a website live on the internet, you need to host it. Websites are hosted on a special computer / servers which are always connected to the internet. There are companies which specialize in providing web hosting services. So when you purchase a web hosting service, you are basically renting / leasing a computer to store your website files.
So in short , you can think of domain name as address of your home and web hosting as the actual house where you live.
How to Register a Domain and how to get web hosting?
Purchase Domain and Webhosting
The first step in building a website is acquitting a domain name and purchasing web hosting. IN this section I will share step by step instruction to book a domain of your choice and purchase web hosting. We will be purchasing our hosting package and domain from blue host. Here are a few reasons for selecting bluehost as a web host of choice.
Now that you are on Bluehost. Click on the Get started button
You will now be asked to choose a hosting package. If you are just starting out, you can select the basic package which costs 3.95 uSD / MOnth
Choose a Domain Name:
Now on the next screen you will be asked to select a domain name. A good domain name is easy to remember and related to your business. So for example you are making a website for your business, you can select mybusinessname.com as domain name.
If your domain name is available, you’ll see the “Create your account” page. If its not available , then you will be asked to choose a different name.
If you cant think of a domain name right now , you can skip this step and choose a domain name later without impacting your content or your website.
If you’ve already got a domain name, just enter it in and click “Next” on the “I have a domain name” form.
Now You will be taken to the registration page.
Before making the payment it is a good idea to confirm the plans details. You can do so under the package information section
Here you must note that in order to lock in the savings, you must purchase a 1 year subscription. Also, the monthly price depends on the subscription duration. A 3 year subscription is cheaper than a 1 year subscription. I recommend selecting a 1 year subscription.
Now enter your payment information and purchase the hosting plans. Congratulations, you are now ready to build your website.
Building the Website
Now that you have the hosting, its now time to build your website. Here are the steps.
- Install WordPress using One Click Installer.
- Basic Site Configuration
- Select and Install A Theme
- Import the Demo Content including a custom Home Page
- Customize the content of Home Page and Inner pages
- Create XML Sitemap
- Submit the SiteMap to Google Webmaster Tools
We will be hosting our website on BlueHost. Bluehost lets you install WordPress with a single click.
Simply Login to your Bluehost Dashboard and navigate to a page. There you will see a button to install wordpress. Click on it and fill the essential details.
Now you will see a success message. It means that you have successfully installed a fresh copy of WordPress.
After you login, you will see the wordpress dashboard.
Before we actually start with building our website, We need to configure basic settings before we start with post and page creation. Here are the settings which we will configure
- Set Site Title and Tag Line
- Setup Permalinks
- Make Site Public
Site Title and tagline
Go to Settings -> General and enter the Site title and tagline. A good Site Title can be the site name itself. For example the site title of this blog is “Website Booklet”.The site tagline must be related to your website/business.
By Default the url of the wordpress pages is of the format mywebsite.com/p?=123. This url structure is not recommended from an SEO point of view. It is recommended to have the url’s in human readable format like mywebsite.com/about-my-business. Thank fully wordpress makes it super easy to customize the permalinks and setup a human readable url structure.
Simple go to Settings->Permalink and select “Post Name ” format for your permalinks. refer to the screenshot.
Search and Install a Theme
Now that we have basic configuration out of the way, its now time to search and install a theme. For this tutorial, I will use a combination of a free theme and free plugin to create a professional looking website.
Searching and Installing a theme is super easy. WordPress has a great collection of free themes. Here is how you can search and install a free theme.
Go to Appearance->Themes
Click on the Add New button. Here you will see a list of themes. You can also search for themes using the search box at upper right corner. There are thousands of free themes.
For the purpose of this tutorial, we will use a free theme Astra. Type Astra in the search box and then click on INstall Button, it will install the theme. refer to the attached screenshot.
Make sure to Activate the theme after the installation is finished.
Now you have Astra Installed. Let’s visit your homepage and see how it looks. refer to this screenshot.
Well this does not look like a business website, but it is still a start. By Default, wordpress displays the list of your blog posts on your home page. If you are creating a business website, then you would like to have a custom homepage which displays information about your business.
Let’s see how we can do that. We will now see how to quickly implement a professional looking layout as your homepage.
Astra comes with a library of predefined Home Pages. You can quickly import these homepages into your website and start editing them.
Got to Appearance -> Astra Options. There on the right-hand side you will an option to import predefined starter sites. Refer to the screenshot.
Click on the Import Sites to start the process
Once the process is started, you will see a screen to select the page builder. Select Elementor. You can select any of the page builders mentioned, however for this tutorial, we will be using Elementor.
What are Page Builders and Why do we need one
Page Builders let you edit the content of your wordpress pages without requiring to code. There are a variety of Page builders available now. SOme of the most popular ones are Elementor, Beaver Builder, WpBakery etc. Now wordpress also ships with a post editor Gutenberg
For the purpose of this tutorial, we will be making use of Elementor.
Now you will be taken to a screen which lists down all the pre defined layouts available with the theme. Some of these layouts are premium while some sre free. For the purpose of this tutorial, we will make use of the Free Agency Layout bundled with the theme. Search for the layout and click on the preview
You will now be taken to a screen for the import. Click on start import to begin.
Whats actually happens when you click on the import button?
When you click on Start Import , it installs all the required plugins. It imports demo pages, posts, associated images, header navigation menu and footer navigation menu. This ensures that all content is automatically created and the navigation is configured automatically as well.
It is also possible to create everything manually, however, beginners might find the whole process a bit overwhelming, hence we have imported a pre built website and use it as a starting point for this tutorial
Once the import is finished, click on View Site. This is how your site will appear.
Now that is not too bad for 10 minutes of work. You can see that the Home Page consists of all important elements like Navigation Menu, Hero Section, Portfolio Section, Clients Section, Team section and footer navigation. The import also created a few internal page like About, Services , Blog and Contact Page.
It is also possible to create custom pages and link them to the website. Now we will have a look at how we can customize the imported page and how we can easily create new pages. Of course, all this will be down without coding.
Customizing / Editing the Website
The demo website has given a great starting point. Now its time to customize the content and the make website our own. This is where Elementor page builder plugin comes into picture.
Elementor (and other page builder) plugins let you visually customize the website content, without writing any code. Recently the Page builder Plugins have taken the WordPress world by storm. It has made page editing a breeze. Some of the most popular page builders are Elementor, Beaver Builder, WpBakery etc.
Now WordPress also ships with a native Page Builder , Guetenberg. The focus of Guetenberg is more of post crating and less on page design.
For the purpose of this tutorial, we will use Elementor.
Editing the Home Page
Before we start with Homepage, let us understand its anatomy. Our Homepage is made up of three components
- Content Area
The header contains the website navigation and the website logo. The content area holds the page content, while the footer area holds the footer widgets and navigation.
The Header and Footer Area are edited through the theme while the page content is edited through Elementor.
Edit the Content Area.
The homepage consists of various sections. We can easy edit a section, add a section or delete a section. We can also reorder any section. Lets see how we can easily edit the homepage content. Go to your website homepage and click on the Edit with Elementor Icon on the top. refer to the screenshot.
This will open the page editor. Now lets edit the Hero Section.
Simply double click on the Hero Text and you will see a text editor appear. Now you can simply make the edits.
Creating a New page
Editing the Navigation
Changing Website Logo
If you are not happy with the free theme, then you can search for premium designs at Themeforest. They have a collection of thousands of well designed wordpress themes.
If you just starting out, then I would suggest to stick to free theme and get a hand of how wordpress works. You can change the theme at later stages also.
Creating a Post is simple. Go to Posts- >Add New. Here you will see the wordpress editor. You can write a wordpress post and assign it a category. You can also preview the post before publishing it.
Create Pages. They a similar to post expect for the fact you dont assign category to them. Pages can be used to create About Us Page, Services Page, Clients Page, Testimonial page etc.
We can easily import a prebuilt Business Home Page Layout. Once it is imported, we can use the Elementor plugin to make the edits to our Home Page
Create a Sitemap.
A website is of no use if it cannot be discovered by seacrh engines like Google. These days Seach Engines have gotten more powerful at discovering new websites, However it is recommended to create a sitemap page and submit it to search engines. I recommend using Yoast SEO plugin for creating a sitemap.
My Home Page looks like a List of Blog Posts . How can I change that?
Where can I get Royalty Free Images for my Website