Website Design Income Stream – How to Make Money Online and Offline Designing WordPress Websites

We have come to one of the most important skill you would ever learn on planet earth; or better still; as an Internet Marketer.

Designing websites is one skill I learnt that personally changed the way I make money online and fast tracked my online journey to a better income stream.

The first website I ever built for myself was in 2006, and the website designer built the site for N150, 000. This was a simple company website built on Drupal and didn’t come with much functionalities.

The website designer also charged N30, 000 to design a logo which was in PNG; no Photoshop editable files.

In addition to all of the above, he kept on collecting monies for the fixing of one issue or the other, and this continued for like two years.

I was being bled of money!

It got so frustrating that I decided to learn website design.

I started with Drupal since my site was built on it. I learnt it and other CMS like Joomla and WordPress. From trying out the different CMS and comparing them, I decided to go with WordPress, and I have never really looked back.

By the way, it took me about two weeks to learn website design and I built a client site within that period for $300 at fiverr.

I watched video tutorials and read books on website design……. WordPress especially, and did practically everything I could do on WordPress using live designs.

I built different kinds of websites…. for myself and for clients. Ecommerce, corporate websites, school portals, etc. and it was fun doing these things.

I was using my skill as a website designer to make money both online and offline. I couldn’t believe myself. I did all this without learning how to code.

Why am I telling you all these?

Simply to let you know that designing a website is not as difficult as you have been made to believe. You can begin to build websites and earn from it, as long as you have a willing mind to learn, and then take action.

I am going to show you how to do so presently in this article…and also how to use it to make money online and offline using this skill.

It is one of the surest ways of making money online and surviving during this recession. Whether you live in Nigeria or not, you can do it.

No matter whom you are or where you live, if this is the only thing you grasp from this website, you will never lack in your life.

• Even if you have never designed a website before now;
• even if you don’t know any coding;
• even if you are an 8 years old child or a 90 years old grand ma;
• even if you are a complete novice or you are half-brained,

By the time we are through with this article, with the accompany added videos, you will be able to design database driven websites like CNN.com, etc.

Website Design With WordPress

Website Developers use different softwares and applications in building websites. They could use Dreamweaver, Joomla, Drupal, WordPress, etc.

We will be using WordPress which is the most popularly used CMS worldwide in building websites.

Organizations like CNN use WordPress in developing their site as well as celebrities like Jay Z. What you are about to learn now is what people spend thousands of naira in learning.

We are going to design a live website.

I used a sample website for this tutorial and was doing the write up as I was designing. Everything was done life and you can follow along.

To design a website using WordPress, you would need the following:

• A domain name
• A webhosting account
• Theme

You pay for domain name and webhosting space. Sometimes, both packages could come together; with a free domain name.

Everything should cost between N10, 000 – N15, 000 depending on requirements and the type of website you are building.

For the purpose of this tutorial, we will be using namecheap.com for registering our domain name and webhosting.

NameCheap is one of the well-known registrars in the world.

I try to avoid Nigerian hosting services like the plague. I have never had any pleasant experiences with them, and I would advise you to avoid them as well; maybe until they improve…and also, they purchase reseller packages from some of the top registrars to sell to you.

For namecheap.com that we will be using, they are really affordable and reliable and I have been using them for the past 5 years for most of my domain name registrations and shared hosting.

Domain name will cost between $10 – $12 basically, which is about N3,800 – N5,000, depending on exchange rates as at the time I wrote this article.

Webhosting for the first year will also cost about $20 when you purchase the cheapest package.

They are reliable, really affordable and fast. You could also use others like hostgator.com or godaddy.com.

I have used all these hosts and while I can say they are reliable; at least as at when I used them; namecheap.com beats them in terms of affordability for shared hosting.

Aside namecheap.com, I would advise hostgator.com for shared hosting. I don’t quite fancy GoDaddy when it comes to hosting but they are good with purchasing of domain names especially if you are into domain flipping business.

The website we will build will look like the screen shot below.

It is a full databased driven website.

It’s responsive; meaning that it can fit into phone devices like tablets and iPads when being viewed.

It’s also SEO friendly.

Web developers will often charge between N100, 000 to N150, 000 for this kind of job which takes less than 4hrs to build.

Enough of the talk. Let’s get started already.

Getting a Domain Name and Webhosting

The domain name is the name you want your website to bear.

It is best for it to bear the name of your business or something related to it.

The site we will be building together is a modelling and styling business website.

There are many places to buy domain name, but for this training, we will use namecheap.com to get the domain name.

Let’s assume that the domain name we want to buy is electro-digipower.com.

To buy, let’s go to namecheap.com.

Type the domain name of your choice into the address bar. You will see something similar as below, meaning the domain name is available for purchase.

Click the cart icon to add it to your cart.

Now, click on the VIEW CART button above and the screen below will show up.

Apply coupons when available or CONFIRM ORDER to make your purchase.

You will be required to sign up for an account if you don’t already have one, or log into the account and make your purchase.

After you have purchased the domain name, you will have the domain name details sent to you. You will receive something similar to the screenshot below.

Now that the domain name has been registered, time to get webhosting for the domain name.

We are going to use namecheap.com as well for the hosting.

Here we go!

At the Name Cheap website, click on the HOSTING and choose SHARED HOSTING from the drop-down menu.

The screenshot below will show up.

We will choose the $9.88/yr. package by clicking the ADD TO CART button.

The screenshot below will show up with the options as shown. This section is very important as the wrong choice could mess things up for real.

Let’s get to understand the various options above.

1 ………. This means you have a domain name in your cart that you already started the process of purchasing but have not yet purchased.

2 ………. This means you can get the .WEBSITE domain for free without paying a dime.

3 ………. This means you can start the purchase of a new domain

4 ………. This means you can use a domain you already purchased at Name Cheap.

5 ………. This means that you can use a domain name you purchased from another registrar other than namecheap.com

For the purpose of this tutorials we will go with option 4 since we have a domain name purchased from namecheap.com registrar.

Click on USE A DOMAIN I OWN WITH NAMECHEAP button and you will be directed to the screenshot below.

I blurred out the domain names for security reasons.

From the screenshot above, click on SELECT for the domain name of your choice that you need to get hosted. It will be added to your cart.

Follow the directed steps and make your purchase.

After successful purchase, the information as shown below relating to your hosting details will be sent to your email.

In the mail sent to you, you will be instructed to access your control panel through a link.

However, you will have to wait for a couple of hours before you can access your newly purchased website.

After the wait, go back to the email and click on the link above that reads CPANEL URL.

You will be taken to the control panel login window from where we can log into the cPanel and start our installation of WordPress so we can commence the design of the website.

How to Install WordPress Using cPanel

Use the hosting details that was sent to your email to login to the cPanel. You will be directed to the screen shot below.

You will notice the SOFTACULOUS APP INSTALLER. Click on it to open up options like WordPress, etc. or scroll down to see WordPress as below.

Now click on the icon that reads WordPress as above if you don’t want to choose the Softaculous option.

You will be led to the page below.

Click on INSTAL NOW and you will be led to the following page.

Follow the instructions.

For CHOOSE DOMAIN, choose the domain name you are interested in design. The one above is IMIRABELLA.

Make sure the IN DIRECTORY option is EMPTY!! This is very important or you will end up installing WordPress in a subdirectory. Many newbies make this mistake.

Fill up other information required on the page and then scroll down.

You will see EMAIL NOTIFICATIONS DETAILS TO. Input a functional email address where you want all login details to be sent. This is also very important.

Then click on the blue INSTAL button above, and the installation will start.

After installation, you will be led to the screen shot below.

WordPress has now been installed on your server.

There are jobs/gigs on fiverr, that offers WordPress installations to clients and charge for it; and we already treated how to make money on fiverr here at danpreneur.com. It doesn’t even take up to 10 minutes to get WordPress installed for someone.

Click on the Admin URL: http://www.imirabella.com/wp-admin/ and you will be led to the WordPress login page where you can login to access the dashboard.

The screen above is the admin dashboard from where you can start designing and customizing your website.

To see how your website looks like for now, click on http://imirabella.com and you will be led to the screen below.

That’s how your new site will look like before customization.

Bland and kind of empty!

This will soon change anyway.

Configuring and Designing Your New WordPress Website

Three of them that are MOST important here entails adjusting the GENERAL SETTINGS, DISCUSSION and PERMALINKS.

This is very important. To adjust these three, go to SETTINGS on the dashboard and click on GENERAL. The page below will show up.

Change the settings to suit your website needs. Change the SITE TITLE and TAGLINE to suit your site needs as below.

You see that the title and tagline have been changed to a more professional one that is relevant to the site content.

Then click SAVE CHANGES.

Next we adjust the PERMALINKS.

The PERMALINK is the link viewable on the site when a post is made. The DEFAULT PERMALINK is not search engine and human friendly so we change it to as below for SEO purposes and also create fewer problems for Google bots.

We now choose POST NAME. Save changes.

Next, we have to change the look of the site into something we want.

To do that, we have to install a new theme and remove the default that came with the WordPress installation.

On the dashboard as below, click on APPEARANCES and the screen shot below will show up.

Click on ADD NEW atop the screen of the big bold cross sign + with the ADD NEW THEME caption.

The page above will show up. You will see the theme which we have already installed with several other themes.

WordPress come with loads of free themes you can use to design your website. While most professional website designers will NEVER use a FREE theme for a client’s site, for the purpose of this tutorial, we will use a free theme that is easy to install and customize.

The theme is the Vantage WordPress theme.

Type Vantage into the SEARCH THEMES search bar.

This is the theme we are going to use. It’s the second theme above. It is a free theme so you don’t have to pay for it.

I will repeat again! I don’t use free themes when designing clients’ websites. I use premium themes but for this training and as a beginner, free themes could well do the job.

In the video tutorials attached to this article, I designed a full-blown site using the Divi Premium theme. So, you kind of get two websites designed in one single article piece. A bonus for you.

It is responsive and SEO friendly.

Click on it and install. Then activate.

You will be redirected to the screen shot below.

The theme is now installed. Open the link VISIT SITE on a new tab. You will see the new look of the website as below. You can see on the screenshot above, the instructions to begin installing plugins. Click on it.

The screen shot above showing the new look of our website is what we are going to be working on.

It’s neat, simple and professional.

Now, install the required plugins needed to make the theme work. Screen shot is shown below.

Apply the installations.

Now activate the plugins.

We done!

The next thing to do now is add PAGES to our sites to let visitors know what we are all about.

So, let’s start building the website.

From the DASHBOARD go to PAGES and then click on ADD NEW. The page below will show up.

The PAGES we will be adding to our site are HOME, BLOG, OUR SERVICES, CONTACT US and ABOUT pages.

The HOME page for this theme came already designed so we won’t be adding a home page MENU.

Add OUR SERVICES into the ADD NEW PAGE bar above and click on PUBLISH. The screen shot below will show up.

Do the same for all the other PAGES.

After you have created all the PAGES, go back to APPEARANCES on the DASHBOARD and click on MENUS.

The page below will open up.

Now click on CREATE A NEW MENU. The screen below will show up.

Click on CREATE MENU and the screen below will show up.

Now is the time for us to arrange all our pages created on the main home page.

Select all the pages as above or that you need on the MAIN MENU and then click on ADD TO MENU as seen above. The screen shot below will show up.

Rearrange the pages as you would want them to appear by dragging and dropping. Under MENU SETTINGS, choose PRIMARY MENU and then click on the SAVE MENU button.

Customizing Using The Prebuilt Template Layout and Builder

Now that we have built our pages, we can then customize our layout and choose a beautiful template layout from the prebuilt templates that comes with the Vantage Theme.

This is one of the sweetest things about this theme. You have a handful of templates layout that could match the type of site you want built and all you then need do is customize.

Even a newbie can build a brand-new beautiful website with this theme.

Let’s have a look at the prebuilt templates layout and choose one that suits our website which is a modelling website.

Under APPEARANCES, click on HOME PAGE and the screen shot below will show up.

This is the layout of our present website. We don’t want this and want to choose another layout. Click on LAYOUTS which can be seen under CUSTOM HOME PAGE above.

The screen below will show up.

Now click on LAYOUTS DIRECTORY as above. The screen below will show up.

These are some of the prebuilt layouts. Click on the NEXT button and more layouts will pop up.

We are interested in using the CONSULTANT layout above so click on it and then click on the blue INSERT button as seen on the screen shot above.

Choose the option that says REPLACE CURRENT.

The screen shot above will show up. Scroll down and click on SAVE HOME PAGE.

That’s it!

Installing Some Needed Plugins

Before we build the various pages, we will need to install some plugins.

But what is a plugin?

A plugin is that which adds extra needed functionalities to your WordPress website. I want you to view it as what the Android Market (Play Store) is to your android phone.

When you need some extra functionalities for your phone, you go to Play Store and download an app.

Also, when you need some extra functions in your website, you add the needed plugins.

For this site, some of the plugins we will need to add are:

• Wordfence – For security
• WP Super cache – for caching and speed

To add the above plugins to your website, click on PLUGINS in your dashboard, and then click on ADD NEW.

You will be led to the screen shot below.

As seen above, type in WORDFENCE in the search function and you will see WORDFENCE SECURITY. INSTALL it and then click on ACTIVATE.

As seen above, the plugin has been activated.

Do the same with other plugins you want to install.

Now we can start building the various pages we created, starting with the CUSTOM HOME PAGE.

Customizing The Prebuilt Home Page

As we have already installed a prebuilt template, it saves us the stress of designing the whole Home Page from the start.

Now, back to the Home Page.

Click on APPEARANCES…..and then the HOME PAGE. You will be directed to the screen shot as shown below.

We will need to edit each of the sections of the website CUSTOM HOME PAGE from the backend.

We will customize section by section.

From the home page, the first section is as shown below.

To start editing, go back to the back end.

Click on the SITEORIGIN IMAGE Main Slider column. You will see options like EDIT, DUPLICATE and DELETE.

Click on EDIT and you will get to the screen.

Click on FRAMES and the screenshot below will show up.

We want to change the background image on our home page to suit more to our modelling website.

From the screen above, click on CHOSE MEDIA where you have BACKGROUND IMAGE and follow the slides shown below to get the right image for your website.

Click on SELECT FILES.

Chose the image you want, or a group of images by selecting and then click on OPEN to upload.

Now click on the image you want to use, and then click on SET MEDIA.

Now let’s change the text on the home page to suit our brand. We will also remove the button and just make it simple and neat.

Now click on the DONE button.

It will take you back to the CUSTOM HOME PAGE. Scroll down and save the page. Then visit the front end of your website and you will see something similar below.

We need to change HOME PAGE to just HOME, remove that white space below the menu bar and also remove Call me! Maybe?

Also, we need to add a logo and remove the Mirabella Modelling at the top of the site.

Let’s get to work.

To change HOME PAGE to HOME, click on PAGES on the WordPress dashboard, and then on ALL PAGES. The screen below will show up.

Click on the HOME PAGE – FRONT PAGE and it will lead to the screen below.

Change it to HOME and then click on update as below.

To add a logo, lets visit freelogodesign.org.

There are loads of premium softares that can be used to create logos. They could be quite expensive for a newbie. I have a couple of them but the site above is free to use.

Don’t buy this services. If you need a logo maker, I will recommend a great one for you.

Let me know in the comments section.

It will take you less than 5 minutes to get a logo created here. Input your company name and choose a niche as above

We will choose the third logo design above.

Click on START to get started. You will be directed to the screen below.

Rearrange the logo as you choose. Its plain drag and drop. After your edits, click on SAVE and you will be directed below.

We are going to make use of the FREE option. Click on the download button and you will be directed below.

Fill in your email to receive the download link.

Download the logo from your email.

We are done with the logo design. Time to upload to our website.

Uploading The Logo

To upload the logo, go to APPEARANCE, and then click on CUSTOMIZE. You will be lead below.

Click on THEME SETTINGS, and then click on LOGO and the screen below will pop up.

Now we go back and click on THEME SETTING and then LAY OUT. Fill up the option as below to get the logo on same menu as the pages.

Click on PUBLISH to effect all changes.

We are done with the first section.

Now to the second section below.

To edit the above to our pleasure, we are going back to our CUSTOM HOME PAGE as below.

Click on it and then the EDIT option to lead you to the screenshot below.

To make the edits, click on the various columns:

+ Headline

+ Sub headline

+ Divider

This will open up screenshots where you can freely make changes as below.

Above is for the headline.

Above is for the sub headline.

Remember to always click on the DONE button to make sure the changes remain.

Now, let’s take care of the other parts.

Make changes just as we did with the last section. Click on any you want to edit and make the changes.

That done, we are going to delete some rows we don’t need to keep the home page simple. We will delete the:

• STATS
• WHAT THEY SAY
• GET IN TOUCH

To delete, double click on the Spanner sign on top the row and it will get deleted. Then SAVE.

The Blog Section

To make sure the blog section is in good stead, go to SETTINGS on the dashboard, and then click on READING.

Change the POSTS PAGE to BLOG and choose the SUMMARY options for feeds.

Then SAVE CHANGES.

Once these are done, the new home page will look like the screen shot below.

Now let’s go add some articles to the blog and see how it will look.

Go to the dashboard once again and click on POSTS, and then ADD NEW.

Then click PUBLISH.

Add more posts and publish them. Remember to add FEATURED IMAGE to each posts.

The new blog section on home page will look like below.

And if you click on BLOG on the MENU, you will get the screen shot below.

Customizing The Footer

The last section on the home page to consider is the footer. To get the footer into shape, go to WIDGETS under APPEARANCES on our dashboard.

Now drag and drop what you want to the footer above, and then save as shown below.

For each widget you drop, click on it and customize or edit to your desire.

The footer will take the shape of the screen shot below.

Now that we are all done with the front page, let’s go to the other pages and customize. Since they don’t come prebuilt, we have to do it from scratch.

This won’t be a problem at all.

Let’s get it started.

The ABOUT US Page

To customize the about us page, click on pages, and then ALL PAGES on the dashboard and you will be lead below.

Now click on ABOUT US to design it and you will be led below.

Add your text and image and PUBLISH.

Customizing The Contact Us page

We are going to go the easy route with our contact page here. Nothing really fancy, but still does the job.

Go to ALL PAGES as we did with About Us page and click on it to edit. You will get to the screen below.

Now click on PAGE BUILDER. You will get the screen below.

Click on ADD ROW, and you will get the screen below.

It should be two row layouts as above with the left-side higher longer than the right. You can achieve this just by dragging.

Click on INSERT.

Now click on the left side row, and then click on ADD WIDGET. You will get the screen shot below.

Click on SiteORIGIN CONTACT FORM button as above and you will get the screen below.

Do the same for the right-hand row but choose SITEORIGIN EDITOR as seen below.

You will get the screen shot below.

Now click on it to EDIT and make changes to the SITEORIGIN EDITOR. You will get the screen shot below.

Click on DONE and you get back to the screen below.

Now click on update and we are done with the CONTACT US page.

That’s how the contact us page now looks like.

Simple and cute, I guess!

Customizing The OUR SERVICES Page

The services page is the last page to be customized and we are done with the website design.

This is easy, as with all the pages we have designed so far.

Go to ALL PAGES on the dashboard as we did with the other ages. Click on the OUR SERVICE option to edit it and you will get to the screen shot below.

Now, click on PAGE BUILDER. This will take you to the screen below.

Now, click on ADD ROW.

Get the set up above for what we need.

The purpose of the first and last row is for cushioning.

The middle two rows are what we are going to be working on. Click on the first of the two rows and add a widget.

Add the circle widget and then INSERT

You should work on getting the set up below.

Now, click on the first CIRCLE ICON row to start editing.

Customizing each row relating to services you offer and SAVE CHANGES.

Make sure you update to effect changes.

I have used dummy text and some same wordings to get the whole thing done fast.

You will get something similar to the screen below.

You see how cool the services section is, and simple too.

With this, we are done with the website design income stream.

In Conclusion

To conclude this article, I want to make you understand that you can make a whole load of cash designing websites for local businesses in your area or locality.

You can also offer this gig on fiverr, the income stream we treated earlier and make $1000 to $3000 monthly from the gig alone.

I would advise that you MAKE SURE you learn how to put up a website like this. It’s quite easy.

Aside using your website design skills to make money on fiverr, you can as well use it to make money offline.

Take the time to search for and list out business persons in your immediate environment that don’t own a website and show case to them the benefits that a website could offer to their business.

Of course, you would need a proposal and contract templates to make this even more efficient. For this, you may have to check our Income Generator Shop and pick up the package that shows you how to write such documents as well as sample templates.

That aside, you can use words of mouth and your social media to make this work.

I understand that many might find this article a bit techy, so I have included full video tutorials that treats website design from beginning to finish.

Read the article and watch the videos, and then refer back to them when building your website.

Best regards and see you at the top!