Make a cool website on a budget: step by step manual for small businesses

A couple of years back, my friend Alex has opened a repair shop. He’s good at his job, and his income more than allows him to live as he wants to. But the only way for you to find out he exists is via the word of mouth — Alex sees computers as arcane devices, that channel the mystic power of Facebook and online gaming.

When I offered to help him represent his business on the Web, Alex frowned and said that it’s way too complicated. He said he’d have to make a website, locate it somewhere and advertise it somehow — all of which costs a lot of money and is not worth it at all.

That’s how I had the idea to write a step-by-step manual on how to create a website for a small business on a shoe-string budget, fast and without any coding.

Step 1. Let’s set our goals

Theory

You can’t make a website if you do not know why do you need one. Business websites can be usually divided in three types.

Business card. Business cards are static, which means the all the data is uploaded to the website during its creation and rarely updates. This is a good solution for companies that are working locally — repair shops, barber shops, etc. Business cards are more for representation, but if you promote your website correctly, they can become a source of new clients.

Blogs. Blogs develop on the previous idea. If the business-card website if completely static, blog also has a dynamic page that lists the latest news and other contemporary materials. This one is good for businesses that have time to talk to their clients.

Online shop. Online shop is a website where you can buy something directly. Usually, online shops also have a blog and a zone where you can review their goods and discuss them.

WordPress works equally all for all three goals, so that’s what I recommend.

Practice

For this example I will be making a business card website with a small blog.

Step 2. Choosing a hosting

Theory

Hosting is a computer where the files of the website are located. They can be kept on your personal PC too, but as we have proven earlier — it’s way too inconvinient. Any hosting company will provide you with something that is faster, more reliable and cheaper.

On this stage, almost any hosting plan will suit you — your website won’t have many visitor and WordPress is very well-optimized. But I recommend you to buy a hosting with some room for growth. This way your website will handle the peak loads well.

Another important moment is to have an automated CMS installer on the hosting. For example, Softaculous can install WordPress in 3 minutes without any hassle.

Practice

For this website I’ll be using Unihost’s plan U-Drive. I could do it with U-Ride too, but on U-Drive I have some room for experimentation. I’m buying an annual plan, which puts the cost of the website at $8.40 per month.

We’ll be buying the hosting once we have chosen a domain.

Step 3. Choosing a domain name

Theory

Domain name is an address you put into your browser in order to access a website. For example, unihost.com. Here, .com is a domain zone — something like a mail index. And unihost is a unique part of the address, like your house and apartment number.

Domain name should be short, relevant and memorable.

The price for the domain depends on three factors:

1. Domain zone. Each domain zone has its own pricing — some are completely free, like .tk. But i.e. .na will cost you $5000 per year.
2. Premiality. Some domains are so much better, that the owner of the zone jacks up the price just because he can. For example, a domain in .nyc will cost you $30, but autoshop.nyc is up to $35000.
3. Domain length. Even non-premium domains that are four symbols or shorter have higher prices than the longer ones.

For small business I highly recommend the national domain zones — .uk, .de etc. They are usually cheaper and let people see where you located immediately. But there’s nothing wrong with .com either, so if you want to — go for it!

Practice

We won’t be able to handle a premium domain — that’s for sure. But we will be using the .com zone for demonstration purposes.

1. Go to https://unihost.com/cpanel-web-hosting/.
2. Click Host Your Site under the hosting plan you’ve chosen.
3. You’ll see a page where you can choose a domain. Enter the one you’ve chosen — in our case it’s myabsolutelytestdomain.com.
4. Check I want to register this domain and see that it’s available for registration.
5. Click Continue.
6. Verify your order. If it’s correct, click Checkout.
7. ClickDon’t have a Unihost account? Create it now!
8. Fill in the form.
9. Click Create New Account and Continue.
10. Fill in the contact details for the domain registration.
11. Click Next. 
12. Choose the payment method and click Continue.
13. Complete the payment.  

From this moment on, you already have a website. Now all you have to do it set it up and fill in with data.

Step 4. CMS Installation

Theory

Once you payment has been cleared, you’ll receive an e-mail with cPanel login data. From there you can manage your hosting, databases and CMS.

Practice

We’ll install Wordpress through Softaculous — it’s easier, faster and we won’t have to deal with databases.

1. Log into cPanel. 
2. Click on WordPress in the Softaculous App Installer tab at the bottom of the page.
3. Click Install Now.
4. Under Site Settings enter the Site Name and Site Description. They will appear later in the header of your website.
5. Under the Admin Account, enter the admin username and password, as well as the emergency contact e-mail. Save the username and password – you will need them to access your website’s control panel.
6. Once you are done, click Install at the bottom of the page.
7. After the installation is over, click on the Administrative URL link to go to the Dashboard:

Step 5. Theme installation

Theory

Right after the installation, you won’t have a proper website – only a template. And you’ll have to make this template fit your demands. To begin with, let’s install the theme.

Practice

By default, the Twenty Seventeen theme is installed. The website looks like this:

But I want to use another theme. Therefore:

1. Click Appearance in the left sidebar of the Dashboard.
2. Click Themes.
3. Click Add new.
4. Look for a theme you like. I like Sydney — it has an embedded page constructor and top-level menu.
5. Hover your cursor over it and click Install.
   
6. Wait, until the installation is finished and click Activate.

Now your website looks like this:

Step 6. Installing plugins for a theme

Theory

Some themes need plugins to work correctly. Plugins are the add-ons to the CMS that add new functions or change the way the old ones work.

Practice

Syndey needs two plugins — PageBuilder от SiteOrigin and Sydney Toolbox. Let’s install them.

1. Click Begin installing plugins on top of the Dashboard.
2. You’ll see a page with links to the plugins. Click Install under one of them. 
3. Wait until the plugin installation is over and click Return to Required Plugins Installer. 
4. Repeat this with the second plugin.
5. Click Activate under one of them. 
6. Click Activate under the other one.
7. Click Return to Dashboard.

Step 7. Theme setup

Now the theme is installed. Let’s set it up.

1. Click Appearance on the left sidebar of the Dasboard.
2. Click Customize.  
3. You’ll see your website’s main page with an additional menu to the left.

Let’s customize the header.

1. Click Header area.
   
2. Click Header slider to setup the slider on the main page.
3. Under Slider speed you can choose how fast will the images change in milliseconds (1000 ms = 1s). Also, you can stop the text slider and make the text the same on all the images.
4. Click Change image under the first image.
5. Choose an image from the website library or upload a new one.
6. Click Choose Image in the lower right.
7. Write a headline and the subheadline for the slider.
8. Do the same for all the other slides. If you do not have enough images — just remove the standard ones from the rotation.
9. Change the action button text. This button scrolls the header down and shows the user your actual main page.
10. Click the arrow in the upper left.
11. Click Save and Publish.

Now let’s setup headers for other pages.

1. Click on the Header Type.
2. Under Site header type check Image or Video. Full screen slider is way too big to show it anywhere except for the main page.
3. Click the arrow in the upper left.
4. Click Header Media to change what media is shown in the header of the other pages.
5. In order to put your video in the header:
   1. For Youtube video past the link to the video under Or, enter a YouTube URL.
   2. For local video, click Select Video and choose a file from the WordPress library or upload a new one.
      
   3. You’ll still need to setup a header image – it will be shown before the video is loaded.
7. Click on Hide Image to remove a placeholder.
9. Click on Add New Image. 
11. Choose an image from the library or upload a new one. The preferred aspect ratio is 16:9.
    
13. Click Select and Crop.
15. Click Crop.
17. Edit the header height if you want to show more or less of the image. You can also disable the dark overlay.
18. Click the arrow in the upper left.
19. Click Save and Publish.

Now, I want to move the menu to the middle of the page.

1. Click Menu style.
   
2. Check the Centered (menu and site logo).
3. Click the arrow in the upper left.
4. Click it again.
5. Click Save and Publish.

Now I want to add a site logo and an image in the browser’s tab.

1. Click Site title/tagline/logo.
2. If you don’t have a logo — here you can change your site title and description.
3. If you have a logo, you can put it on the website. To do this:
   1. Click Select Image under Upload your logo.
   2. Choose an image from the library or upload a new one.
4. Now click Select Image under Site icon.
5. Choose an image from the library or upload a new one.
   1. If you logo is rectangular – you’d better make a square or round version for this.
   2. If your logo is already square or round – just use it.
6. Click the arrow in the upper left.
7. Click Save and Publish.

I also do not like the black/white/red coloring scheme. I’d rather the main accent color was blue. Here’s how to change it:

1. Click Colors.
2. Click General.
3. Click Select color under Primary color.
4. Choose a new color:
5. Click the arrow in the upper left.
6. Click it again.
7. Click Save and Publish.

Now, let’s add some contact information, so that people could find us:

1. Click Widgets.
2. Click Footer 1.
3. Click Add a Widget.
   
4. Click Sydney: Contact Info.
5. Fill in the form
6. Click the arrow in the upper left.
7. Click it again.
8. Click Save and Publish

Finally, I want to disable the sidebar in blog. I think that it adds no value at the business website, while wasting quite a lot of space.

1. Click Blog options.
2. Under Layout, Check Full-width (no sidebar).
3. Click the arrow in the upper left.
4. Click Save and Publish

Once you are done setting up the theme to your liking – click on the cross in the upper left

Step 7. Content creation

Теория

Once you have achieved the desired look for your website, you can start creating content pages. For the purposes of this example, let’s create pages Main, News, Our services, Service 1, Service 2 and About.

Practice

1. In the upper left of the Dashboard, click Pages.
2. Click Add new.
3. Enter the page title, for example Main.
4. Fill it with text, images and other content in the simple visual editor. If you know HTML, you can also edit the code by clicking the Text tab.
5. To the right, in the Template field, choose the Full-Width template. This will remove the sidebar from the page.
6. Click Publish.

Create other pages the same way. The page News should be empty, since we will move the blog to it. In order to do this:

1. In the left sidebar of the Dashboard, click Settings.
2. Click Reading.
3. Under Front page displays click Static Page.
4. Under Main page choose Main.
5. Under Posts page choose News.
   
6. Click Save Changes.

Now, let’s add those pages to the website’s main menu:

1. On the Dasboard, click Appearance.
2. Click Menus.
3. Remove all the pages from the current menu. To do this, click on the arrow to the right of the page and click Remove.
4. Check all the pages you’ve created in the list on the left and click Add to Menu.
5. Rearrange the pages by dragging them around. Drag the pages Service 1 and Service on top of Our Services to make them sub items and turn Our Services in the submenu.
6. Click Create Menu.
7. Check the Primary Menu under Display location and click Save menu.

Congratulations — now you know how to make a real website, with pretty header, blog and widgets! It even looks well on mobile!

Now all you have to do is to get visitors. I recommend adding your website address to your physical business cards, as well as other types of advertisement. If you plan to make promote your website — I recommend ads in Adwords and social networks. But that’s a whole new area that will require more than once article to cover.

Sends me comments with links to the websites you’ve created! And in case you are facing some trouble — don’t be afraid to ask questions, I’ll be happy to help!