Online Marketing Strategies - Money Journal

How to Design a Website or Blog with WordPress

make-a-website-part-2-featuredIf you followed my tutorial on how to make a website in under 5 minutes, then you should have your WordPress site set up and running rather bland.

Rather than leaving you at a dead end with your WordPress design, I’ve decided to create this tutorial that will show you exactly how to design a website, and not just add a picture here and there, but to make your website look and function like a $30,000 web design for under $60.

If this is your first website? Try my FREE course. There are some valuable user experience tips that will help you design your website more effectively.

Free Course Skip to Video

You don’t need to know how to code or know anything about graphic design, although they’re never bad skills to have.

Here is a checklist of things that you need in order to start designing a beautiful website.

  • A domain name, web hosting, and WordPress set up on your site (covered in part 1 of creating a website using Bluehost).
  • No more than $60. You won’t be paying me. All of this information is provided free 🙂
  • A little bit of patience to get past the learning curves, which I hope to make easier for you.

Before you dig into this detailed article, you should know that I’m not going to refer you to a third party website builder or a free hosting site like Tumblr. You are going to be creating your own website that is yours to keep and one that you will have full control of.

The best website builder is you and I’m going to show you why no other third party service can compare to you and your awesomeness!

By the end of this tutorial, you’ll have the knowledge and skills to design a website beyond what you could have ever imagined making. All of my instructions are based on making a website using Bluehost using the WordPress framework. If you haven’t gone through my tutorial yet on how to create a website, I would strongly recommend that you go through it first because the content of this article won’t be as impactful if you haven’t set up your WordPress configuration yet.

Here are the specifics as to what we will be discussing throughout this article. Some of it might not seem that appealing by the title alone, but knowing the ins and outs of “why”, will be an asset in your marketing and growth phases.

  1. The standard for web design today (2015 and Beyond)
  2. What to look for when choosing your WordPress theme.
  3. Installing your theme.
  4. Installing Demo or Dummy content
  5. Give your WordPress URLs SEO friendly permalinks
  6. Customizing your website design

Let’s get down and dirty into designing your website. I’m super excited to share these tips and tricks with you that I have used dozens of times.

If you just want the video tutorial   Skip to Video

Page Contents

The Standards for Web Design Today (2015 and Beyond)

The world of web design has become much more sophisticated over the past three years. As website owners, we are expected to create something that is attractive, easy to use and full of valuable information. If a website lacks any of these characteristics, the cutthroat nature of web visitors today is to leave and never return which is the equivalent to a slap on the left cheek in the digital world.

Web Design Should be Attractive

Beauty is in the eye of the beholder. If you’ve made a website before and thought it was gorgeous, but a friend or family member told you that it looked like cow manure, chances are, they were more right than you! When designing a website, you want to detach yourself from personal achievement and analyze it objectively. It’s good to get a second or third opinion on the colors, images and overall layout.

In addition to a beautiful design, Google has set a standard for web design.

Web design should be responsive.

A few of years ago when mobile websites were gaining steam, it provided a better user experience since most people were searching for things on the go. Web masters would set a subdomain or extension on their website like m.website.com or website.com/mobile. The problem with this was that search results were being filled with unnecessary duplicate content and not all website owners had the technical knowledge to create mobile sites.
 
Responsive design allows your website to adapt to the various screen sizes that are available in todays market and future markets. Rather than being redirected to a new site like mobile.website.com, web visitors can now view the content at the same URL with an optimized viewing experience based on their screen size/resolution.

Responsive-Showcase

With mobile web surfing growing exponentially, it is our responsibility as website owners, designers and developers to foster an optimal viewing experience for our audience.

The final aspect of an attractive web design is in page speed. You may not think that this is relevant to “attractiveness” of web design, but I can assure you with confidence that it is! Let me explain through an example that you might be familiar with.

In the world of dating and prospecting a potential partner, most people’s first impression is on the physical characteristics. We may look at the eyes, the hair, the build or other physical features that we deem attractive. After we get to know the person, we notice their inner characteristics like sense of humor, wit, interests, integrity or honesty. If we like these traits, this person all of a sudden becomes 10 times more attractive than they ever were!

When translating this into web design and the digital world, page speed is super sexy! People love to navigate to a website and to have it load instantaneously! Statistics show that visitors are more likely to abandon a website if the page loads too slowly. Kissmetrics shows this best in an infographic on how loading time affects your website.

Page speed has become such a large factor in web design that Google has incorporated it into their search algorithms.

Your Website should be easy to use

The first two websites that I think of when I think “ease of use” are Google and Amazon. The intended purpose of both of these websites is to get a visitor searching for information or a product. Their goals are so clear that using either of these sites has become second nature to most of us.

Before you can make your website easy to use, you need to solidify the purpose that your website should serve and the goals you would like to achieve by serving these purposes.

Imagine if you went to Amazon and there was no search function. Or if you wanted to add an item to your cart so you could make your purchase, but couldn’t’ find the add to cart button. You would probably get frustrated and look for another merchant.

A less obvious purpose may be a blog. A blog is generally intended to provide detailed information in a specific niche. The goal may be to have your visitors read your content as well as sign up for a newsletter so they can be updated on future posts. If you make it difficult for people to find out how to subscribe, they will probably leave before you can say WAIT!

When designing your website, you should write a list of goals and purposes that your website will serve. With that in mind, you will know exactly what to look for when finding the best web design for your needs.

Your website should be jam packed with valuable information

Content is the cornerstone to your success! It doesn’t have to be in the form of a blog. Content is anything that allows you to interact with your audience such as images, video, audio, text or whatever creative way you use to communicate with your audience.

Content is also the way you interact with search engines! Most of us will do a Google search when we have a question. In fact, “Googling” has become such an integral part of our daily lives that we’ve all probably said “Google it” at some point.

When creating your content, you want to write for people first, and then the search engines. Your content should provide value to those reading it, whether it’s a blog post, a product description, or details about your services. I’ve written a detailed article about On Page SEO copywriting tips that should give you a good idea on how to write and streamline your content creation.

All three of today’s requirements for a website boil down to one thing:

User Experience!

Knowing this, we want to create a positive user experience on all levels for our visitors. Now that we have a good handle of the expectations of web design, let’s put this into action and start customizing WordPress for your design plans!

Video Tutorial on Designing your Website

I’ve put together a 30 minute video that will get you started with designing your $30,000 looking and functioning website. Feel free to share the video with others who you think can benefit from this. If you would prefer to read, you can follow along with this article which has more details than the video.


Elegant Themes   Theme used in Video

WordPress Themes – What to Look for and Where to Get it.

Before I show you how to customize a WordPress theme, you should familiarize yourself with what WordPress is and what a theme is.

WordPress is an open-source content management system (CMS) which allows you to create a website or a blog and maintain it through a graphical user interface (GUI). Open-source means that the code is provided for free and can be modified and/or redistributed. This is where themes come into place.

Since WordPress is an open-source web software, developers from all over the world are able to create themes and plugins to add on to WordPress. They are allowed to sell themes and plugins, or provide them for free.

Themes generally define an overall look with built in functions that will likely compliment its purpose. For example, WordPress eCommerce themes should all have a checkout process function in addition to an easy way to add new products to your store.

Plugins are used to provide additional features to your website without a huge emphasis on the actual look and feel of the website. For example, a WordPress eCommerce plugin may add a feature of zooming in on a product image when it is hovered over.

I’m not going to focus on free WordPress themes simply because I’m talking about creating a $30,000 website for under $60. I have probably spent about a hundred hours looking for free WordPress themes in the past, and I was never able to find any that are worth my time.

I hate saying things like “you get what you pay for”, but when it comes to web design and creating a boast worthy website, you don’t want to cheap out on it. Unless you are a graphic designer, proficient programmer and consider your hourly rate to be worth less than a penny per hour, buying a premium WordPress theme is the route to go.

Best places to get Premium WordPress Themes

There are two websites that I use to get my WordPress themes. There are a ton of other places, but the reason why I chose these two websites is because:

  1. They both offer phenomenal after sales support.
  2. The designs and functions of these themes are unbelievable!
  3. I’ve tried over 80 themes from these websites, and I have never had problems.

Elegant Themes is a company that provides over 85 WordPress themes for as low as $69. This company has been around since 2008 and has grown to over 260,000 customers. Web development was obviously different back in 2008, so they have updated all of their themes to meet today’s standards. When it comes to design, responsive and page speed, they surpass the quality of today’s standards.

Their price plans work on three membership levels:

  • Personal – $69/year
  • Developer – $89/year
  • Lifetime Access – $249 – one time payment.

I personally went with the Lifetime Access simply because I’m a huge fan of one time payment offers. The $249 works out to $2.86/theme for life with a whole bunch of plugins as well. Each level offers different features, which you can check out here.

I presently have 6 active websites – all in different niches – all with different themes from Elegant that have individually produced 10x the amount I paid years ago in passive income.

The second website that I use is Themeforest. Themeforest is essentially the eBay of everything related to website design. Developers create themes and sell them from $28 – $63. They presently have over 4,800 WordPress themes alone from various developers around the world. Themeforest is the website I use to get my WordPress theme if my themes from Elegant do not have the core functionality that I require or if there is a particularly appealing template that I find useful for one of my websites.

Both WordPress theme websites are phenomenal! I have found that Elegant Themes has better customer support since they are a company who has built all of their themes, while Themeforest’s customer support will vary depending on the individual seller.

Before you go crazy on themes, I’d recommend going through the six self-check questions I ask myself before buying any theme.

6 things that we should look for when choosing a premium WordPress theme

There are 6 questions you should ask yourself before buying a premium WordPress theme.

  1. Is the design triple AAA (Appropriate, Attractive and Appealing) in my niche?
  2. Does the WordPress theme have a responsive design?
  3. Is the page speed above average?
  4. Does the theme contain the built in features required to run the main functions of my website?
  5. Does the theme have support if I run into a problem?
  6. Does the theme have dummy content?

If you don’t know how to answer these questions yet, then no worries. I’ll show you how I answer the questions above and you’ll find it super easy to choose the perfect theme for your website.

AAA – Appropriate, Attractive and Appealing

With a vast array of vibrant web-based companies, WordPress themes are appropriately categorized by niche or industry. For example, if you are a photographer, you would probably want to look for WordPress portfolio themes while a realtor would want to look for a real estate theme for WordPress.

These categorical separations allow theme developers to create industry specific features to fulfill the requirements and desires for thriving professionals who want to use a website as a means of branding or marketing.

Attractiveness and appeal of a website are a couple subjective factors to consider. Although you may not find a theme that is exactly what you envisioned, the majority of themes available will likely fulfill 9/10 of your needs. When looking for attractiveness, take a look through the inner demo pages of the theme to see the different kinds of layouts that can be created with the theme features.

You’ve probably seen a bunch of your competitors’ websites and will probably notice that they give off a similar aura reflecting the vibe of the industry. For example, WordPress corporate themes tend to give off the “corporate feel” of simple, clean and to the point. A portfolio theme will probably be more image driven with galleries showcasing one’s artwork, photography or completed projects.

I would not recommend deviating too far off from industry standards unless the feelings you want to emphasize is something unique. The overall appeal and feeling of a website not only communicates a purpose but can also evoke subtle subconscious emotions to your visitors.

Check if the website design is mobile responsive

As I mentioned before, making your website responsive for different screen resolutions is a standard for modern day web design. There are a few ways to check if a website has been designed to be responsive.

  1. Check the description of the theme. If they are responsive, developers will ensure that they put that in the title of the theme or at least in the description.
  2. Visit the theme’s demo site on both your mobile device and laptop/desktop. If you notice that the theme adapts to your screen size and looks different from your laptop/desktop, then it is likely mobile responsive. Make sure to look through the inner pages of the theme’s demo as well to ensure that it is bug free.
  3. Try screenfly. It is a free website that allows you to see a website from all sorts of different devices. I would recommend checking out the most common ones like a 13″, 15″ laptop, iPhone 5, iPad and a larger 27″ screen. Simply paste the demo URL in screenfly and use the icon menus to choose your screen resolution.

How to measure page speed and what page speed is good enough?

The faster the page speed, the better! The way we measure page speed is not by counting 1-2-3-4-5 until the page loads, but there are tools that we can use to measure all of the backend activity as well!

Google pagespeed insights is a free tool provided by Google which gives you a score on a scale out of 100. Pagespeed insights provide both mobile and desktop scores. There are tons of ways to improve page speed, but since we are talking about selecting a fast theme out of the box, here is what I would consider to be a good enough page speed score to use as the bare minimum out of the box set up.

  • Mobile page speed – 70/100 or greater
  • Desktop speed of 80/100 or greater

Here’s a screenshot from a Google Pagespeed Insights tests I ran on Elegant’s Divi 2.0 theme.

pagespeed-divi-desktop pagespeed-divi-mobile

Do the Built in Theme Features suit my Needs?

Before building out your website, you should have a list of features that you require to run your website. Here are some examples of common needs that previous clients have requested.

  • Contact form
  • Drag and drop page builder
  • Ability to host images in a portfolio
  • eCommerce functions to sell items
  • Able to write in a blog.
  • Show upcoming events.
  • Have Google maps integrated into the website
  • Ability to stream audio

After you have your list of the bare necessities for your website’s functional needs, you can begin searching for themes that support these. You may not find a theme that has all of these features built into them, but fortunately, there are plugins that you can download to add on to your theme.

My recommendation is to select a theme that has the core features. If you said that you need all of the features I listed above, chances are, you won’t be able to find one since not many websites would actually require all of these features. Remember, WordPress themes are generally created and sorted by category to fit the needs of a niche.

Does the Theme have Support if I run into a Problem?

If you bought a theme from Elegant, then yes. You will have the support that you need to get your website set up and running wonderfully! They have extensive documentation and you won’t have to worry about the after sales support.

Themeforest on the other hand can be hit or miss. I compared Themeforest to eBay before. Normally when someone buys an item from eBay, they look into the seller’s feedback. Themeforest offers the same feature where you can see how many times the theme has been purchased and the star rating that some buyers have left.

Another tip I can give you is to look through the theme’s comments. There are a ton of people who ask questions left and right about configuring the theme, or reporting bug issues. If you find that the theme developer is not responding, then you may want to look for another theme that provides support.

Does the Theme have Dummy Content?

Dummy content (demo content) is basically a file that you can use to import the exact content that you see on the theme demo page directly onto your site. Before you grab your pitchforks and chase me through the woods, I’m not promoting unoriginality!

The dummy content acts as a great resource that will let you play a game of trial and error as you get to know your theme layout settings. If you look at my website now, you probably have no idea which theme I used. The reason is because I have changed the color scheme, layouts and images. The truth is, I started with dummy content which allowed me to see how the developers originally laid out their pages. If there were certain sections I liked, I would use that section and combine it with another section. In other places, I would create what I thought would be the most appropriate.

Demo content isn’t intended to be used to create thousands of identical websites out there. Its purpose is to be used as a tangible guide to see what the makes the front-end look the way it does. I’ve built websites both with and without dummy content. I can tell you that having dummy content speeds up the process exponentially when creating your own custom layouts.

Now that we have all of the technical backend details out of the way, the rest of this post will be more of a tutorial on setting up your WordPress theme and customizing it for your audience!

You should have an idea of what to look for in a theme, so if you’re ready to get your premium WordPress theme, then check out Elegant Themes and Themeforest (affiliate links) and see which one is best for the project you have in mind now.

elegant themes themeforest

If you’re not ready to buy yet, then no worries! You can always come back to this article at another time and follow the rest of the tutorial from here. You will need to have a theme to work with to take full advantage of the rest of this tutorial.

How to Install a WordPress Theme

There are about 5 ways to install a WordPress theme. Rather than going through every single one, here are the two simplest ways to do it without downloading an FTP program or learning unnecessary software.

Install WordPress Theme through Cpanel

This is my preferred method. If you followed the first tutorial and signed up with Bluehost, simply type this into the address bar. You’ll have to remove Yourdomain with your actual website name.

Yourdomain.com/cpanel

You will be redirected to the bluehost login page where you can enter in your user credentials.

02.bluehost-login

Locate the file manager and click on the icon. Select go and a new tab should open displaying all of the files on your web server.

file-manager

Select the wp-content folder from the file manager and then the themes folder.

wp-content-themes

Upload your premium WordPress theme here. If you bought a theme from Themeforest, make sure to download the installable WordPress files separately for this step.

themeforest-theme-download

If you bought Elegant Themes, then you want to upload the theme_name.zip file. Inside the zip file should be another folder that is titled the theme name and a bunch of sub folders and files included. If you want to verify that it is indeed the theme files, look for the functions.php file within the folder to confirm that it is the correct file to upload.

Elegant has exact details of how to install their themes.

Click on the upload icon in your file manager once you are in the themes folder.

upload-button

A new window should pop up where you can upload the theme zip file. Browse for your file and upload the zip file into the directory.

After the theme has completed uploading, go back to the file manager main window and click on the reload link above the files. Not the refresh button in the browser. You should now be able to see your zip file uploaded onto your web server.

reload-and-theme-files

Select the theme files zip file by single clicking it. After the file is selected, press the extract icon at the top. After the file has completed extracting, you should see the folder for your theme appear in the file manager.

extract-files

Your theme is now installed on your server.

Install WordPress Theme through WordPress Admin

If you followed my first post, you should know how to login to your WordPress admin. In case you missed it, you can access your WordPress admin by typing in the URL bar

Yourdomain.com/wp-admin

Enter in your login details and password.

wordpress-login

You should be brought to your wordpress dashboard. Click on the Appearance tab from the left side bar. You will be brought to your themes activation page. At the top of the main window, you should see an “Add New” button. Click it.

add-new-theme

You can now browse for your zip file and upload the file by clicking the Install now button. This essentially does the exact same thing as our theme installation from Cpanel. I personally find Cpanel to be more reliable than uploading through the WordPress software itself.

Either way will work, but I believe there is a higher probability of it failing when installing directly through the WordPress admin.

wp-admin-install-theme

How to Activate WordPress Theme

Regardless of the method you used, you can activate your theme by visiting the themes main page by clicking on the Appearance tab on the left side menu bar.

Once the themes page has loaded, hover over your new theme and click the activate button.

activate-wp-theme

If we visit our page, it still looks pretty dull. This is where we install the Dummy content.

How to Install Dummy Content/Demo Content

Dummy content is generally provided in one of three different ways.

  1. 1 click import module, which is done through your theme settings.
  2. A dummy.xml file
  3. It’s not provided at all.

The 1-click import is the easiest way to import dummy content. The steps are always different since each theme developer creates their theme settings differently. Most 1-click demo content import buttons can be found in the theme settings.

The theme that I am using for this demonstration is called Enfold from Themeforest. This theme has an awesome 1 click import feature for all 7 of its layouts. If you’re also using this theme, you can find the demo import options by following these steps:

  1. Click on the Enfold theme settings from the left side bar.
  2. Click on the Demo Import tab on the left side bar menu within the main window frame.
  3. Hover over the demo you would like to import and click the import button.
  4. Wait until the import is complete.

import-enfold-demo

As great as this simple import feature is, the majority of theme developers are still using a dummy.xml file to allow their customers to upload the dummy content settings. Developers may also call this file demo.xml, sample.xml, dummy-data.xml or any other variant.

The best way to identify and install dummy.xml files is to read the theme developers documentation on importing the sample content.

Generally the procedure goes as follows:

  1. Locate the dummy.xml file
  2. Select Tools -> Import from the WordPress admin left sidebar menu.
  3. Select the WordPress Importer

01.dummy-content

4. If you have not already installed the WordPress importer, install the plugin and activate it.

wordpress-importer

5. Upload the dummy.xml or similar file and follow the step by step instructions to follow.

dummy-content-import-final

You will likely have to configure the reading settings to set your home page as well as blog page. I will not bother going through this instructions as they will be available in the theme documentation for the premium WordPress theme that you purchase.

Now that we have the dummy content plugged into our website, it looks pretty amazing! I know it may have taken you quite a bit of time to get through this, but I can guarantee you that the next time you do this, getting to this point shouldn’t take you longer than 10-15 minutes.

Giving your WordPress URLs SEO Friendly Premalinks

Before we get into customizing your WordPress theme, it’s important that we set up SEO friendly permalinks. I don’t generally like to use Internet marketing jargon, but there is no better way to say it than this!

By default, any new page that is added to WordPress ends in a ?p=###. This means that your “about page’s” URL will be something along the lines of:

Yourdomain.com/?p=4912

What we want to do is make your URLs “about page” URL look like this:

Yourdomain.com/about

Not only does it look friendly, but there are greater benefits in adding real words into the URL for search engines to understand what your page content is about. Thankfully, WordPress has a super easy way to do this.

Here’s how you set up SEO friendly URLs.

  1. Login to your WordPress admin if you haven’t already done so.
  2. Hover over the settings tab in the left side bar menu and choose permalinks.
  3. Select the “post name” option or another one other than the default. I recommend post name if you’re not familiar with custom structures.
  4. Save changes.

Your permalink settings should look something like this:

permalink-settings

If I click on over to my sample about page from the dummy content, I can see in the address bar, that it shows:

Mydomain.com/about/

At this point, you should have more or less the exact same website that you saw in the eye catching demo before you decided to purchase it. The dummy content obviously doesn’t fulfill your content needs, so we need to customize the design, content, and layouts in your WordPress theme.

Customizing your WordPress Theme

As much as I would love to give you a step by step tutorial on customizing your WordPress theme, it just isn’t possible! It’s not because I don’t want to, but I literally can’t!

Every WordPress theme has different options and functions. There are a lot of similarities, but they are often laid out differently.

Rather than leaving you at a dead end, I want to provide you with the resources you need to continue on your design and development stage.

Every single premium WordPress theme that I have encountered has documentation which outlines exactly how to use most features. The documentation should outline the basics like uploading your logo, creating layouts, using image sliders and any other main functions that your theme includes.

Documentation is usually included in the larger all files download or is sometimes hosted on the developer’s website. Depending on the theme you purchase, you will likely see text documents as well as video tutorials on getting set up.

Customizing your WordPress theme to make exactly what you want doesn’t exactly come quick, but it’s a lot faster than hiring a company to do the job for you. More importantly, you’re saving yourself from paying out a company $30,000 to do a job that you can do yourself.

If you ever run into problems with your specific theme, send an e-mail to customer support or to the individual theme developers. I’ve always been happy with the support that I’ve received and I’m super picky about customer service.

You’re Different than Everyone Else! Here’s why…

Most people are terrified at the idea of making a website, and I don’t blame them. They see elements of code and think that they’re not capable of making it happen. Or they follow instructions to set up a WordPress blog and are left alone with the default twenty fourteen theme which we know isn’t the best theme for your website.

The reason why you’re different is because you now know how to make an amazing website for under $60. You now have the knowledge, skills and tools to create your own website.

I urge you to take a leap of faith and believe in yourself! If I had given in to the trillion doubts that I’ve had throughout my years in building online businesses, I wouldn’t be writing this tutorial, which also means you wouldn’t be reading it!

Everything that I’ve shown you here in part one and two should get your website up and running with minimal effort. I’m not saying that you won’t experience times of frustration or self-doubt, but that’s the best part!

There’s a learning curve to everything, but this curve is much smaller than learning 4 different programming languages and graphic design. You are now well equipped to build a dynamic, beautiful and multi-functional website!

If you’ve found this series helpful, please feel free to share it with others who may be in the same stage as you with starting an online business. In my free business building crash course, I encourage people to find an accountability partner! It definitely helps in getting past the learning curves and it’s always reassuring to know that others are in the same race as you.

It’s time for you to take action now and start pumping out some awesome content for people and get search engine traffic!

Author: Sam Oh
top
Moneyjournal.com © All rights reserved.