How To Design A Professional Website (Part 2)

- A Step-by-step Guide

May 27th 2018

Written by: Collins Okuwe

Welcome to part two of how to design a professional website without coding. Ever since we published part one of this post, we’ve been getting lots of commendation and appreciation from countless number of persons. I want to really say thanks for appreciating the good work that we put into creating that post. We are happy it has helped a lot of people to see what they can achieve. We are glad a good number of persons have already started out implementing what they learnt from it and have started achieving something meaningful with the information. We are always looking out to be of help and we enjoy seeing people succeed. Please do well to share your success story with us as well either in the comments section at the end of this post, via email (contact@5-staracademy.com) or whatsapp – 08133187556.

If this is your first time reading this and you have not gone through part one, I suggest you pause now and go read it first before continuing with this post. Check it out HERE.

In part one of this post, we said there is one question that is very necessary to be answered before we ever venture into designing or building a website. That question is: Are we designing offline or online? We said the answer to this question will determine the route we will follow in other for us to design our site. This therefore means that we must have that question answered first and foremost before we can begin.

Just like for you to have a house you must first have a land somewhere which the house is going to be built on and then the address of your house is determined by the street and area or zone where the house is located, so also it is with websites.  The digital land that will carry or hold your website is provided by web servers. All websites are hosted on servers and the address of your website is given by the uniform resource locator (URL). Therefore, for you to have a website, you MUST first have a domain name and hosting. This usually goes for a fee which is dependent on the company hosting your site for you. Once you have this, with what you learnt in part one (I showed you everything without leaving any stone unturned), you already know how to install WordPress. What’s now left is for us to start designing our site.

Someone may now ask: what if I don’t have or have not secured a domain name yet, can’t I design my site? The answer is a big YES, YOU CAN!

If you don’t have a hosted domain name yet, you can still install WorPress and start designing your site. This you will do offline using a local host server management software installed on your computer. With this, you are able to design as though you are online. When you have finished your design, you can later upload it to your domain whenever it is ready. How beautiful and sweet! In case you don’t know, this is the key to mastering web design – designing offline. The reason why I say so is because you can give yourself assignment to design several dummy websites and then while doing so, you learn and master the art of web design. This was how I gained mastery of web design.

Now over to today’s business…

Today, we are going over the design aspect of our website. In the last post, I only showed you how to set up your work space (online). Before we can start designing, we have to first of all set up our work space (i.e. install WordPress). As I said before, this we can do online or offline. So what are the requirements to do this?

  1. For online, you need your domain name and what you learnt in part one
  2. For offline, configure your local host server and install WordPress on your computer. To get the software and more information on how to set up WordPress offline on your local computer, click here.

Here’s the truth of the matter… you need to figure this out and meet any of these requirements first before you continue with the rest of this post. The remaining part of this post may not add much value to you as it is purely practical.

Like I have always said, my goal here is to be of help and teach you how to design a website. I don’t want to teach theory. I don’t want to teach you what you can not apply. You need to be able to follow through step-by-step as we proceed further as that is the only way you can learn and master the art of web design and any other skill in any field at all. Whichever route you want to take, you sort that out and when you have done that, then let’s proceed.

DESIGNING AND CUSTOMIZING OUR WEBSITE

To begin designing our site offline, we will have to first log into the dashboard or back end of our site. To log in, type: localhost/your database name/wp-admin. For my demo website, it will be: localhost/motivation/wp-admin. 

Now enter your username and password and click on login. Our dashboard will be just like the picture shown below.

Your log in page

Your dashboard when you’ve logged in 

This is where we will be doing all the designing and customization of our website. This is where we will control everything that shows on our site. I want you to take a look at the left hand side of the dashboard – the area I marked with a yellow ink. These are the tabs we are going to be using to do all the work.

HOW TO CHANGE AND SET A THEME

The first thing we will do is to change the look of our site and make it look like how we want it to. The default look of a newly installed wordpress site is what you see when you just installed wordpress on your site. To change this, we will be installing a new theme. On the left hand side of your dashboard, click on appearance and then click on upload theme.

Now click on browse and locate where your theme is in your computer. For those who got the software I talked about before now, from the file you downloaded, from the folder you downloaded, locate the zipped file named: bazaar-lite.1.3.0 in your package. Select this file and click on open. This is the theme we will be uploading to our site. Ensure it is in a zipped format before uploading i.e. don’t unzip it. On the next screen that pops up, click install and on the next, click activate.

Now check your website and you will notice that the look has changed to become like the one shown below.

The new look of our website after installing our theme

HOW TO ADD AND CREATE A PAGE

The next thing we will do is to create the pages we will want our website to have. First, we will create our home page. To do this, go to your dashboard and on the left hand side, click on pages, and then click on: add new.

Enter the title of the page you want to create. Our first page to create will be the home page so I will enter the title as: Home. Then enter the content of the page i.e. text and graphics (images). The reason I love this theme is that you can select the template you want for your pages –right sidebar, left sidebar or full width. You can set this by scrolling down as shown above. When you are done, click on publish.

Now if we refresh our site, the new page we just created will appear on the menu as shown below. If we click on the page, we will have it as shown in the next picture that follows.

It is blank now because I did not enter anything while creating this page and I also selected the right sidebar as the template for this page that’s why it is showing recent posts on the right hand side. This is the widget area.

Now you go ahead and create as much pages as you want for your site and when you have done so, we will continue.

HOW TO SET MENU ITEMS

The menu of a site is simply an arrangement of the navigation to various pages. In our demo site, I have gone ahead to add more pages. The default setting for this theme arranges the menu alphabetically. I don’t want this. I want to re-arrange this my own way. To do this, go to your dashboard, click on appearance and under appearance, click on menu.

Under the field for menu name, name your menu and click: create menu, as shown above. 

Now, you will notice that if you place your mouse over any of the pages, a cross sign appears. Once this cross appears, simply drag the page to where you want it to be. Arrange your menu by dragging the menu items (pages) up and down until you get what you want. Once you are okay with the arrangement, under menu settings, tick the square box beside main menu and click on: save menu, as shown below.

Our menu items have been saved. Our site now looks like what we have above.

HOW TO ADD AND PUBLISH A BLOG POST

Now let’s write our first post. To add a post go to your dashboard and click: Posts. Under posts, click on add new.

Now enter the title of your post, and then type your post as shown above. When you are done, click on: Publish. Our first post has been published. Very simple!

Now enter the title of your post, and then type your post as shown above. When you are done, click on: Publish. Our first post has been published. Very simple! To view your post, simply click on view post. The screenshot above is the post I created for our demo site.

I hope by now you are excited and beginning to see the ease with which any non techie can create a website without any stress at all? This is nothing else but beautiful. What do you think?

This is just an overview designed to give you an idea of what even you can achieve with web design. I have not even scratched the surface at all! 

Before I wrap it up, let me show you how a page with content will look like. On your dashboard, go to pages. Click on the page you want to edit and then start putting content. In my demo site, I want to edit the services page. So I will click on services and then enter my content as shown below.

The section I marked in red is where you use to edit the content of the page (for amateurs and beginners). When we are done editing our text, click on update. The screenshot immediately above shows how this page now looks.

CONGRATULATIONS!

Wow! It’s been a journey. I want to specially congratulate you for the journey so far. It has indeed been a long one. Hope I didn’t lose you on the way? Basically, this is how easy it is to set up any kind of website with WordPress. Also, the site we just created  will run very smoothly on any device. This is what we mean when we say the site is mobile responsive.

What we just covered in this  course will actually take a very good programmer, days or perhaps weeks of hard work to put together and guess what? I have not even started at all. This is just a tip of the iceberg, considering the amazing things you can do with WordPress. This is why I love WordPress.

By now, you should be able to set up a basic website for clients  simply following what you have learnt in this course for free.  So don’t be-little the knowledge because you got it for free. I like to give value and help when I can. That’s the only reason I’m doing this. However, this is only a beginner’s guide. To master everything about web development, I will invite you to take our advanced training where we show you everything about web development with WordPress.

Ready To Go Deeper With Us?

Here’s your chance to become a “PRO” in web design. Just as I said before, what you learnt in this post and the previous is only a tip of the iceberg. I will call this training covered in both part 1 and 2 of this post a crash course; a beginners course. We will be going all in with designing a complete website from start to finish with no step skipped. See you on the other side.

This Post Has 2 Comments

  1. That’s a wonderful piece of the act. Thanks a million as we continue to move forward with you.

    1. Thanks Japhet.

Leave a Reply

×
×

Cart