CSS Nectar Web Design Gallery
Loading

How to make your own website

Tutorials

Introduction to making a website

This is a complete guide for making your own starting website, which will look professional, and be fully customizable by you! You’ll not learn to code a website but you will learn the tools for using the open-sourced materials from the Internet to build a website which will have the potential to convert and increase leads for your business!

In this tutorial to build your own website we’ll use WordPress as a foundation for your new platform. WordPress is a CMS (Content Management System), which is very popular on the Internet and therefore well documented. You’ll be able to find tons of other tutorials and questions about WordPress simply by searching Google.

We’ll start by explaining each of the steps required for setting up a standard WordPress website and then we’ll use a concrete example to help you step-by-step! The step-by-step guide will contain links for the exact material we’re using and also include prices etc.

If you’re already familiar with setting up a very standard WordPress website this tutorial might not be for you.

You’ll learn how to set-up a standard WordPress website with the plugins needed for making a simple professional website for your business!

  • Index
  • Introduction to making a website
  • Getting a domain name
    • Where you can find it
    • What to consider
      • Length of domain
      • Domain extension
  • Choosing a hosting service
    • What do you need
    • What’s your budget
  • Choosing a template design
    • Where can you find templates
    • What to look for in a template design
    • What to think about before buying
      • Your customers style
  • Editing a website template
    • What you can and should change
    • What not to change or edit
      • Website setup
    • Licenses
  • Getting started with a website
  • Step 1
    • Purchasing a hosting service
      • Setting up the hosting platform
    • Installing WordPress
      • Setting everything up at the hosting provider
      • Installing and creating the WordPress website
  • Step 2
    • Finding a theme for your website
      • Installing the theme
      • Customizing the template
    • Preview the website
      • Responsive testing
  • Step 3
    • Create your first page
      • Adding all pages needed
  • Step 4
    • Find WordPress plugins
    • Installing the plugin
    • Plugin shortcodes
      • Insert your shortcode
    • Customize widgets
  • Conclusion / End product

Getting a domain name

A domain name is your websites identity. Therefore it’s important to find and select the correct domain for your needs. There are many different ways to choose domain name. A typical way is to choosing your business name with the extension of your country. This is a very typical approach, which is highly popular. Due to new TLDs (Top Level Domains) such as .it, .am and more, some companies choose to mix it up with their name and the domain extension (like: instagr.am / play.it / make.it).

Where you can find it

There are a lot of providers for purchasing a domain name. Depending on what extension you're looking for you’ll have to go to the specific registrant. A domain name can be bought from some registrants without purchasing a hosting service for the domain. This will allow you to simple redirect people using the specific domain to your main website. We’ll cover this in a future tutorial.

What to consider

Your domain name should be specific to your business and depending on your market you should consider a domain name, which will relate to the personality of your costumers. Once you have a basic understanding of what names your customers would relate to, you should consider following key-questions:

Length of domain

The length of your domain is important for two reasons. First, your visitors will have to type your domain name in many situations. Not to say anything stupid about visitors, but – we’re all lazy! The longer your domain name is the higher chance of misspelling or potential visitor loss. If your business name is your entire family name and ”& exclusive investment partners”… This is too long and here you should diffidently shorten it to something else, like the initials.

Domain extension

Second, you should consider the extension of your domain name. Each extension / TLD has its own set of rules. Once you have found a name you should read about the rules for your desired TLD. Some country name TLDs have limited their rules and could potentially set limitations for your business.

Choosing a hosting service

Choosing the correct hosting service can be very tricky and depending on your needs there will be some extreme expensive solutions, which easily could be avoided. If you’re not planning a website with thousand of users or heavy content – you will be fine with a shared hosting service. Shared hosting services are cheaper because the expenses for the server is shared between all the websites located at the specific server.

What do you need

For a small company with the needs of a typical small company with pages like about us, contact etc. you’ll only need a shared hosting plan. There are many providers for shared hosting. Some of the more popular ones are: GoDaddy.com, One.com and Siteground.com. These and many other providers offer very simple 1-click solutions for installing WordPress. One.com offers Shared Hosting for less than $2 a month!

What’s your budget

When you’re using shared hosting you might experience slower load-time. This is due to the shared capacity of the server. If your budget allows, you could purchase your own server – this could potentially greatly improve the performance of your website. We won’t be covering that in this tutorial.

Choosing a template design

The design of you website is based 99% of the template you choose or at least 99% for cheaper templates. Some more-expensive templates includes the options for advanced live editing, which will allow you to customize the actual appearance of your website within WordPress.

Where can you find templates

You can find WordPress templates all over the web. A simple search in Google will directly take you to some website that sells templates. A great place is Themeforest.net. Themeforest is part of the company Envato, which sells all kind of digital “downloadables”.

What to look for in a template design

You should look at the price and the description. The theme might be almost exactly what you what – except one thing, which the template might not allow you to change. Therefore read the description after finding a good-looking template and see if anything sticks out. If you need the ability to change and edit a lot of content you should find a template that has many sales. Buying a template with many sales often means that the template is build by a company and continuously updates. These often have the phrase: multipurpose in their title, which means that they can be used for multiple purposes – and often they’ll be highly editable.

What to think about before buying

A Multipurpose template often has a higher price than very static templates. There is therefore no reason to buy a multipurpose template if you can find a template, which is static and cheaper, but has everything you need.

Your customers style

As the last step of finding a template you should consider your costumers style. You might find very clean lines and minimalistic content to be the way to go, but if you’re within an industry that likes bold curved lines your costumers might not understand your website. Example: You’re selling candy online. The website should be very colorful with round circles and smooth lines. These elements all relate to candy – the product.

Editing a website template

WordPress offer an editor function within the administration panel. The editor is accessible after login and located under the Template menu tab.

What you can and should change

The most important thing to change after you’ve bought and installed a template on your website is typically the logo and the name of your business. Depending on the template settings you will be able to upload an image or write something, which will be replacing the template name / logo.

What not to change or edit

From the editor panel you will be able to find the actual code of the templates files. You should only edit in these files if you have a basic understanding of HTML and WordPress.

Website setup

If you really need to change something within the editor here’s our one rule: Never change anything inside < >. If you remember this and simply locate the text you’re looking to change you should be fine.

Licenses

You might want to erase or delete certain parts of the website like copyright or link to the template designer. Before doing anything like this you should read the licenses for the template you’ve bought. It might say that what you want to remove is legally required.

Getting started with a website

Now you should have a basic understanding of what we’re going to do next. We’re going to setup a basic company website with WordPress. The website will have a homepage, an about us page and a contact page. Let’s get started.

Step 1

Purchasing a hosting service

In this guide we’ll use one.com to get started with your hosting. One.com is really easy and quickly to control. First go to www.one.com.

Now search for the domain name you want. A list of results will be available and you can select the one you want.

After this you’ll need to give them your information and complete the payment process. You should be fine with the starting package. We recommend using PayPal or credit card for faster starting process.

Once they’ve received your payment you’ll receive some emails. You’ll receive two emails with the subjects Setup - 1 of 2 and Setup - 2 of 2. These emails include the setup process for your one.com account. You don’t have to do anything with these emails but a potential future developer would need these to access and make changes to your website.

Setting up the hosting platform

Now that you’ve bought a hosting service with a domain name you’re ready to start the foundation of your website. Go to www.login.one.com/cp/ and login to you control-panel.

The control-panel is where you can make general changes to your hosting setup. The control-panel doesn’t have anything directly to do with your website.

This is where you will create and manage your email accounts, your billing information etc.

Installing WordPress

Setting everything up at the hosting provider

From the control panel all you have to do is click on the 1-click WordPress-button and then press New installation. Select your language and keep the placement as default and press Install. Within a minute the page should refresh and a new section called existing 1-click WordPress installations should appear below the install-section.

Click on WP-Admin within the section. You will be taken to a page where you have to setup WordPress. Here you’ll name your website and setup your admin account.

Installing and creating the WordPress website

Start by selecting the language for your WordPress install. Some templates use this setting to automatically change the language.

Now simply fill out the information required and click Install WordPress. Once the website is fully installed you will be able to login to your WordPress control-panel. Press the Login button and sign in with the information given in the step just before. After login you will be redirected directly to the admin dashboard.

From the dashboard you’ll have access to everything on your website. The dashboard can be customized to display recent updates or whatever you might want.

Step 2

You should now have a very simple WordPress website with the default theme of the current WordPress version. If you open a new tab in your browser and visit your website you should see your website’s name and some sample post.

Finding a theme for your website

To search for templates we’ll go to the navigation and click on Appearance -> Themes. Now click on Add new. You should see a page with different templates. You can preview each of these themes until you find the one you want to use. We’ll use the one called: Responsive.

Installing the theme

Click on the Install button to install the template. After a minute or two the template should be installed. Now click Activate to activate the template. You will be redirected back to your templates and a message saying, Your template has been activated should appear at the top of the screen.

Customizing the template

In the navigation go to: Appearance -> Theme settings / Theme functions. You’ll see a lot of different settings. You can play around with these to fit your needs but we’ll go to the tab called Homepage.

Keep Overwrite WordPress homepage-settings activated. Choose a title and a subtitle for your homepage. In the content section you should write a short introduction for your visitors. Use this space to describe your business. For now keep this as regular text. You’ll see the principal of the setup in the next step and then you can play around with inserting images and different sizes of text and elements.

For Click here (URL) write: /contact-us/. This is to link the Call-to-action button to your contact page. For Click here (Text) write Contact us. In Featured content you can upload any image you want. Click the Add media button. Select an image and click Upload. Now press: Insert to post.

Scroll down to the bottom of the page and click Save settings.

Preview the website

To preview your website locate your site name at the top left corner of the screen. Hover the name and click on Visit your website. You will see that the website has changed entirely and the new template should be applied.

Responsive testing

To secure that your template is 100% correctly setup find a phone and visit your website. The website should be responsive and also adapted to the resolution of your device.

Step 3

Your website is now setup with the right name, the correct template and with a great foundation. Now you’ll need to delete the sample content created with the WordPress installation. There are 2 things you’ll need to delete.

First go to Posts. Here you’ll need to delete the Hello World post. Second go to Pages and delete the page Example page.

Create your first page

Now your website will be clean and without any content. To create your first page you should click on Add new from the pages page. Give the page a title of About us and click the blue Publish button in the menu at the right side of the screen.

Now the page will be created and saved. Right under the Publish button you’ll find a section with the title Page Attributes. Under Template select the one named: Full width (no sidebar) and click the blue Update button.

A notification with the message: Page updated. View page should appear at the top of the screen. Click the link to view your new About us page. This will be the standard appearance of the page. Below the About us title click the link Edit page.

To add actual information about you or your company you’ll need to write information or add images using the big white section in the middle of the page. This section is the page’s content. You’ll can use WordPress default tools to change sizes of text, insert images, create links and more.

Adding all pages needed

You’ll have to repeat creating all the pages you need by following the same method. For this tutorial we’ll only create one more page called Contact us. For this page we’ll follow the exact same steps but leave the content empty. In step 4 we’ll use this page to integrate a contact form by using a WordPress plugin.

Step 4

Now we’ll install a plugin called: Contact form 7. This will allow you to easily add a contact form to your contact page.

Find WordPress plugins

Go to the Plugins page from the navigation to the left. Search for the plugin called: Contact form 7 and click on Install once you’ve found it.

Installing the plugin

Once the plugin has been downloaded you’ll be able to active it by clicking on Activate plugin. Press the link and wait a few seconds. You should now be redirected to your plugins. Find Contact form 7 and click on Settings.

There will be a default contact form. That’s fine. We’ll use this one to save time. Click edit below the sample contact form. You’ll see 4 tabs. Click on the second tab called E-mail. Now change the settings to fit your needs. Once you’re done click on save at the top right of the page.

Plugin shortcodes

Click on Contact in the navigation to the left. Locate the Shortcode of your contact form and copy it.

Insert your shortcode

Go to Pages and select the Contact us page and click Edit. Insert the code copied before directly into the page content section and press Update in the top right corner.

Customize widgets

To finish up your website we’ll add content to the three boxes on the homepage. To do this go to: Appearance -> Widgets. Now locate the boxes on the right called: Home Widget 1 / 2 / 3. In these boxes you’ll be able to drag and drop widgets to display certain content.

For this tutorial we’ll add a Search field to Widget #1, a text field to Widget #2 and pages to Widget #3. Find the fields to the left and drag them into the desired widget-section. Once you drop a field in a widget section some options will appear. Fill these with the information you’ll want to display. Basically write what they tell you to.

Note: Some plugins will allow you to use their content/functions directly in your widgets area.

Conclusion / End product

By following this tutorial you should end up with a working website, which will allow your visitors to find you online and they’ll be able to contact you as well. Hopefully you’ll also have a basic understanding of how the WordPress admin-panel works. Use this understanding to create more pages, install new plugins and add new content to your website.