WEBSITE DESIGN - DO IT YOURSELF

WEBSITE DESIGN - DO IT YOURSELF

 

There are many methods you can employ to design or develop your website.
We will employ a very simple approach. This approach requires virtually no programming skills. And if there is, we will provide you in this tutorial.


STEP 1: You will need to Order a Web Hosting account

The first thing you will need to do is to order a web hosting. Click here to order one.




STEP-2: Login to your account

Click on the "" button as in the menu above to login to your "client area" account (LOGIN TO MANAGE ALL YOUR PRODUCTS & SERVICES WITH US).

PLEASE NOTE:- Because you are learning with this method, it is advisable to have two types of browsers. You will use your default browser to act according to the Step-by-Step instructions, and you will use the second browser to check your website you are designing as if it is being checked on another computer by someone else.
For example, if your default browser is "Mozilla Firefox", then the second browser can be "Google Chrome".



STEP-3: Once logged in, locate "Your Active Products/Services" list

Click on the "Hosting Account" you just ordered. In the figure below, "lekkihost.com" is an example. This will take you to STEP-4.

Account Dashboard




STEP-4: Locate the "Login to cPanel" link on the Right-Hand-Side as shown. Click on it.

Click on the "Login to cPanel" link as shown in the figure below. This action will take you to your cPanel environment.

Product's Icon Tray




STEP-5: Scroll around the page and locate the "WordPress" icon as shown

PLEASE NOTE: If you do not see WordPress icon, you will see "Softaculous" icon. Click it to expand for more options, thereafter, you should see a "WordPress" icon.

Click on the "WordPress" icon as shown in the figure below. Once clicked, it will then lead you to STEP-6.

WordPress




STEP-6: Click on the "Install" icon

Click on the "Install" icon. Thereafter, a form is invoked. This form has fields like "Choose Protocol", "Choose Domain", "Site Name", etc.

Installing WordPress




STEP-7: Let us examine the fields one-by-one

The first field is "Choose Protocol". Here, you have options like "http://", "http://www.", "https://", and "https://www." (It is advisable to select the "http://www." as you are just learning).
Choose Protocol

The second field is "Choose Domain". By default, the domain of your Hosting Account will be shown in the options. In this case, as example, "lekkihost.com".
Select your own domain.
Choose Domain

The third field is "In Directory". By default, word like "wp" is displayed in the text field. Delete off this word so that the text field will be empty.
In Directory

The fourth field is "Site Name". By default, words like "My Blog" are displayed in the text field. Replace these words with something like "My Website" or anything you feel comfortable with as your website's name.
Site Name

The fifth field is "Site Description". By default, words like "My WordPress Blog" are displayed in the text field. Replace these words with something you feel comfortable with.
Site Description

The sixth field is "Enable Multisite (WPMU)". By default, the checkbox is unchecked. You can leave it unchecked as shown below.
Enable Multisite (WPMU)

The seventh field is "Admin Username". By default, the word "admin" is displayed in the text field. You may leave it as it is.
Admin Username

The eight field is "Admin Password". By default, a password is autogenerated in the text field. You may choose the password or replace with yours. Please, if replacing with another password, ensure a hard-to-get password. You may combine letters with numbers and possibly symbols.
CAVEAT: YOU MUST ENSURE YOUR ADMIN USERNAME & PASSWORD ARE NOT TO BE FORGOTTEN. YOU WILL USE THEM A LOT!
Admin Password

The ninth field is "Admin Email". Replace any email found in the text field with YOUR OWN EMAIL.
Whenever you forget your password, you will recover it through this email. This also will be your administrative email.
Admin Email

The tenth field is "Select Language" field. Select the language the system will communicate with you when designing your website.
Select Language

The eleventh field is "Limit Login Attempts" field. "Limit Login Attempts" feature blocks an Internet address from making further attempts after a specified limit on retries is reached, making a brute-force attack difficult or impossible. It limits rate of login attempts, including by way of cookies, for each IP.
This field can remain checked as it shown below.
Limit Login Attempts

The last step here is to click the "Install" button. There is a little text field just below the button, that field optionally requires you to add your email where installation reports are sent to.
Click the "Install" button. Once done successfully, then proceed STEP-8.
Install




STEP-8: Login to your Design Area

Open a new tab in your browser, then enter in the address bar as "mysite.com/wp-admin", provided your domain is "mysite.com".
If your domain is "myartworks.com" for example, then you will enter in the address bar as "myartworks.com/wp-admin".

Design Area

After invoking successfully as done above, then the Admin Login Page for the design area appears as below.

Design Area Login

Remember STEP-7 where you created the ADMIN USERNAME & ADMIN PASSWORD. Enter these details in the provided login.
Once logged in successfully, proceed to STEP-9




STEP-9: Get familiarized with the most commonly-used widgets

There are so many widgets with different functions. We will only emphasize on the commonly-used ones.
We will provide you with references after this tutorial, for the more advanced functions.

Dashboard




STEP-10: Get started with the real thing

Remember, this method we are engaging is a simple approach to designing a website. This means, most of the work has almost been done for you. What you need basically is good template.
Your template is the layout or blueprint of your site; it helps structure your website, giving you areas to place pictures and text, or things like navigation bars and other widgets. Your template should vary depending on the kind of page you are creating, but will share similar themes and patterns across your site.

You will be required to select from a variety of themes. A theme dictates the look and style of your website.Your theme is made up of a range of things, such as font types and sizes, your colour scheme and other areas that affect the aesthetics of your site. Your theme helps to reflect your identity through your site, and helps to improve your customer's experience.

- Navigate from the Left-Hand-Side "Appearance" -> "Themes".

Themes Selection

- Take time to check the best THEME that will be suitable for your type of website, then "Activate/Install/Customize".

Install Theme

- HURRAY! Once successfully installed, you have fulfilled the first step in designing your website. Open your second browser and then check your website, like "www.myartworks.com" as an example.




STEP-11: Creating Pages as First Step in Customization

You will need to create your website pages. Pages of your website may include "About Us" page, "Contact Us" page, "Products & Services" page, etc.

- Navigate from the Left-Hand-Side "Pages" -> "Add New".

Create Pages

- Enter the page title (e.g. "About Us"). You may add something to the content just for viewing sake at first. You can always refer back to update content later.

Create Pages

- From your far right, click the "Publish" button. This is to save your page and then enable it for public viewing.

Save Your Created Page

- You can repeat same process for all the pages you want in your website (example: "Contact Us","Products & Services", "FAQs", etc).




STEP-12: Attaching Pages to a Menu.

- Navigate from the Left-Hand-Side "Appearance" -> "Menu".

- You will need to first name your "Menu" as shown below.

- You will notice the names of the pages you created in Step-11 appearing here. Select each page in the checkbox, and then click the "Add to Menu" button.

Attaching Pages to a Menu

- Scroll to bottom of page and then select as "Primary Menu" and the Save, as shown below.

Attaching Pages to a Menu




STEP-13: Open the second browser and check your website by refreshing it.

Remember, you can edit anything you are seeing on the website. This depends on your creativity and design skills.




STEP-14: Continuing with Customization.

- Navigate from the Left-Hand-Side "Appearance" -> "Customize".

Way to Customization

- You will see the list of customizable areas, some of which include "Site Identity", "Colors", "Header Image", "Background Image", etc.

Customization Area






STEP-15: Customizing the "Site Identity".

The "Site Identity" is the title of your webpage. This comes up at the topmost part of any browser whenever a page loads (see the figure below).

Site Identity






STEP-16: Customizing the others.

Same procedure is applicable to the other items on the Customizable Menu List.
Please note that this method is a simple one and gives more advantage for those that want to use this as blog.
A blog requires comments after a post.

If you want to disable comments for your contents so that your website behaves like standard website, please do the following:-

    - Navigate from "Settings" - "Discussion".
    - Do as shown in the figure below.
    - Once done, scroll down the page to "Save" the changes made.

Disable Comments

Save Changes






STEP-17: Creating a FORM.

In some cases, you will need your customers to contact you directly with some basic data. This is easily done via a FORM.
Sending an email may not capture the needed data, but a form does.

With this method of designing a website, this is easy as when you started the tutorial from STEP-1.

Before we begin, it is ideal to understand some basic FORM elements. They are:-

  1. Checkbox field: allows the user to tick a box to make choices
    BSc   MSc   PhD

  2. Dropdown field: creates a dropdown of options


  3. Email Address field: requires an email address format


  4. Name field: text field


  5. Radio Button field: similar to the checkbox field type
    Male   Female

  6. Text field: a single line of text


  7. Text Area field: several lines of text


  8. Web Address field: requires a URL format


  9. Button field: allows user to submit the form

Please NOTE:- When a user submits your contact form, it will be mailed to the email address you entered in STEP-7 above, and the subject line will be the title of your post. If you wish, you can change both the recipient and the email subject of your emails by navigating the "Settings" tab. Separate recipient emails with a comma to send to multiple recipients.

- Navigate "Plugins" - "Contact Form 7". If you cannot find the "Contact Form 7", then you can use the search button at the top-right-hand corner.

- Once searched, then install accordingly.

Contact Form 7 Installation

- Once installed, do not forget to activate as shown below

Activate Contact Form 7

- Navigate back to your Pages section to access your Contact Page as you created it in STEP-11 above.

- Open your Contact Page and paste this code, copy it from the "[" till reaching the end "]":

[contact-form-7 id="1234" title="Contact form 1"]


- Do not forget to save your changes by click the "Update" button on the far right-hand-side.

Contact Form 7 Plugged In

- Refresh your website on the second browser and see the changes on your contact page.






STEP-18: Customizing your FORM.

You may feel that the default form is too simple for you and you want to add more fields to it.




STEP-19: Let us take a break here! We will be back to add more tutorials as soon as possible.

 




LekkiHost; a World Class Web Host.
Copyright LekkiHost © 2017. All rights reserved.

LekkiHost Limited is registered in Nigeria with
Registration Number RC1267483.