So you want to build a website. Earlier, building a website required a team of developers and designers. If you wanted to build a website, you first had to learn html and CSS. 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 professional website for your business 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 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. For example, compare website to a marketing brochure. A brochure once printed cannot be edited and updated. However you can update your website as soon as you introduce new products / services.
A professional looking website also enhances your business image and your business comes across as trustworthy and professional. Also, now making a website is super easy and very cost effective, so there is no reason for your to not build a website.
Step 1: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 WebsiteBeginner.com
A Domain name is the unique identity of your website. No two websites can have the same domain name.
What is web hosting?
If domain name is address of your house, then hosting is the actual house where you live in.
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 acquiring 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.
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.
What if my domain is not available?
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. You can purchase a domain name later and connect it with 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.
Step 2 : 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
Bluehost lets you install wordpress in a single click.
Simply Login to your Bluehost Dashboard and navigate to My SItes menu. There you will see a button to Create Site. Clikc on this button
Clicking on this button will open a wizard to install your wordpress site. It will ask you to fill in details like SiteName, Site Tagline, Domain name etc.
Once you fill in these details, it will install a fresh copy of wordpress and create an admin user. The admin user credentials will be emailed to you on your email.
You will use the admin credentials to log into your wordpress website.
Go ahead and log into to your wordpress website, you will be taken to 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 Beginner”.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.
Simple go to Settings->Permalink and select “Post Name ” format for your permalinks. refer to the screenshot.
WordPress makes it super easy to customize the permalinks and setup a human readable url structure.
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.
What are WordPress Themes?
WordPress themes are collection of files and graphics which are responsible for the look and feel of your website. It handles things like color scheme, layout , responsiveness etc of your website.
There is a huge collection of free and paid wordpress themes. For the purpose of this tutorial we will use a free theme. If you want premium themes, then you can check out Themeforest.net
Installing a Theme
Searching and Installing a theme is super easy. You can search and install a theme right from the dashboard. Here are the instructions
- 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.
- For the purpose of this tutorial, we will use a free theme called 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.
Why do I see Hello World post on my website?
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.
In the next section we will see how easy it is to create a professional looking homepage.
Import Demo Content and setup a custom Home Page
In this section I will discuss how we can quickly implement a professional looking layout as your homepage.
Our chosen theme Astra , comes with a library of predefined Home Pages. You can quickly import these homepages into your website and start editing them. Here are the instructions
- 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. It lests you drag and drop various sections and customize the layout.
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 are 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.
What actually happens when you click on the import button?
When you click on Start Import , it imports demo pages, posts, associated images, header navigation menu and footer navigation menu. It also imports all the required plugins.
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 now have a professional looking homepage which 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 and add new pages to your 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 a days WordPress also ships with a native Page Builder , Guetenberg. The focus of Guetenberg is more of post creation and less on page design.
For the purpose of this tutorial, we will use Elementor.
Customize the Home Page
Before we start with editing the 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.
Editing the Content Area.
Lets see how can we edit the content area first. The homepage consists of various sections. We can easy add, edit, delete and reorder a section.
Go to your website homepage and click on the Edit with Elementor Icon on the top. Refer to the screenshot.
The top bar will appear only if your are logged in to your wordpress website. In case the top bar does not appear try logging in and refreshing the page.
When you click on Edit with Elementor, it will open the page editor. The editor allows us to visually edit every element of the page. You can point, click and edit any of the element . Clicking on the element opens up the editor on the left panel. Refer to this screenshot
I simply double clicked on the Hero Text and you will see a text editor appear. Now you can simply make the edits. Make sure to save after every edits.
Once you are comfortable with editing section, you can try the following
- Reorder Sections – Simple Reorder it by selecting the section and dragging it
- Clone Sections – Right click and you will see an option to duplicate the section
- Create New Sections – When you create new section, you can easily import pre built blocks , or create one from scratch
- Delete Sections – Clicking on cross icon will delete the section
So you can now visually edit the homepage without getting into the code.
Creating a New Page
When we import a pre built website, it imports basic pages required for a simple website. However creating new pages are as easy as it was to import the whole website. When you create a new page you , you have two choices.
- Either use the default wordpress editor for the page
- Use Elementor ( or other third party page builder plugin ) to edit the Page
When you create a new page, Select Edit with Elementor. Once you open the elementor editor, you can either build the page by adding sections one by one or you can easily import a pre built page. Refer to the screenshot.
The free version of elementor has a great variety of pre built pages and sections. If you want more choice then you can upgrade to the premium version also.
Editing the Header of Website
In the above sections, you saw how easy it is to edit the website content. In this section , I will show you how easy it is to edit the navigatin menu
- Edit the Navigation
- Change the Website Logo
Editing the Navigation Menu
Editing the navigation menu is equally simple and straightforward. Go to your homepahe and clikc on the customize button at the top. This will open the Customizer Panel which will give you access to the menu customization settings.
The menu settings allow you to easily
- Reorder the Menu Items
- Add new Menu Items
- Delete Existing Menu Items
- Assign Pages / Posts as sub menu items
Editing the Logo
You can easily edit the logo from the customizer panel. Simply click on the Pencil Icon next to the lgoo. It will open up the settings panel where you can easily upload a different logo image.
The Astra theme offers various advanced customization options like
- Editing the Header Layout
- Typography Handling
- Color Customization
You can explore advanced option for deeper customization of your website
Setup Contact Page
When we imported the website. It imported a contact form plugin and a contact form page. The contact page can be accessed via the Contact Menu. It is a functioning contact form and I would suggest you to test it.
By default, it install the WPforms plugin. It is a free form builder plugin for wordpress. Other popular form builder plugins for wordpress include Contact Form 7 , Jetpack Ninja Forms etc.
Setup XML Sitemap
A website is of no use if it cannot be discovered by search 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.
Thats it. As you can see that now a days, creating a website is extremely easy. You dont need to be coding expert to create a professional looking website. All you need is patience and a willingness to learn.
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