The Design Of Your WordPress Website

Right then – you’ve registered your domain, you’ve signed up for web hosting and you’ve installed WordPress. This lesson will show you how to begin building your website on your domain.

The first thing you have to do is to log in to your WordPress website. This is where all the action begins.

In your browser, type your log in URL as follows: https://yourdomain.com/wp-admin

then hit return (and substitute your own domain name here).

This is your regular log in so it would be a good idea to bookmark this page.

Enter your username and password, click ‘Remember Me’ and the ‘Log In’ button. Note that the username is not case-sensitive but the password is.

The detail in the body of your screen may look a little bit different but what we’re interested in is the left-hand panel of tabs headed ‘Dashboard’. This is where all the action begins.

To see what your website looks like, hover your mouse over the very top left ‘Home’ icon just above the ‘Dashboard’ button and you’ll see a drop-down that says ‘Visit Site’. Click on that and you’ll be taken to your beautiful website.

OK, I know that this doesn’t look very interesting but we’re about to change all that.

But first, let me explain all about ‘themes’.

The visual appearance of a WordPress website is governed by a design template called a ‘theme’. The theme determines the overall appearance and layout of the site, the color scheme, the fonts, and the style – in fact, the whole overall look and feel of the site. Think of it as a ‘skin’.

One of the wonders of WordPress is that you can change the theme of your site with a few clicks of the mouse and everything will (usually) click into place with a brand-new visual style.

The default theme currently provided by WordPress on new installations is the ‘Twenty Sixteen’ theme. This is a very well-designed and popular theme but it has been designed with blogging in mind. Because of this it has a limited range of features available. I want to show you a few more options than Twenty Sixteen provides so I am going to suggest that you start with the Twenty Fourteen theme instead.

Sketch Out A Blueprint For Your Website

To change your theme to Twenty Fourteen, hover your mouse over the top left of your screen which shows the name of your website and click on ‘Dashboard’. Then look down the vertical list of tabs under ‘Dashboard’ and hover your mouse over ‘Appearance’. On the menu that then pops up, click on ‘Themes’.

Hover your mouse over Twenty Fourteen and then click ‘Activate’. That’s all you’ll have to do to change the theme. We’ll return to themes in Lesson 9 but for now I’m going to recommend that you stay with this theme to start with as it will be easier for you to follow the lessons.

So now it’s time to think about the type of website you want to build.

Sketch Out A Blueprint For Your Website

Before going much further, it would be a good idea for you to sketch out on paper roughly what your website is all about and how you want it to behave so that, as we work through the tutorial, you can be putting your ideas into practice.

Firstly, what is the purpose of your website? To promote your business? Display your photographs? Express your personal ideas? Provide a community hub? Or what?

What do you want your website’s front page to look like?

Then, what content are you going to publish? Products or services for sale? Digital images? A personal journal? News of community personnel and events? Think about the first three or four pages that you are planning to publish and consider how you will guide visitors around your site.

At this stage, I suggest you design the layout of your website to be as simple as possible because, if you can live with the regular Twenty Fourteen WordPress layout for now, you will find it quicker to build your own site. And, as I’ve stated, you can change the theme later if you wish.

The Twenty Fourteen architecture provides many of the typical features that are found on most websites:

  • The optional header is at the top of the page and this can be an image, or a block of text, or both. If present, the header appears at the top of every page.
  • Below the header is the ‘menu’ which is a horizontal bar containing tabs which link to the various primary pages in your website. If you are planning a large website this could become a hierarchy of pages.
  • The main body of each page contains an article (page or post) with a title at the top. The body of the article can contain text or images or a mixture of both.
  • The sidebar on the left side of the page contains ‘widgets’ (see Lesson 8) which typically contain navigational links to guide the user to other parts of your website. Widgets can also contain text or images.
  • Twenty Fourteen can optionally display a sidebar on the right as well as the left.
  • The footer is at the bottom of the page. The footer is optional and can also contain widgets.

We will cover all of these items in more detail in the following lessons.

It often helps to start by deciding what you want your front page to look like. Is this going to be a static ‘splash’ page introducing your organization or company? Or do you want a blog-type site where the first thing your visitors will see is your latest news or opinion?

What page links do you want to go in the horizontal menu bar? This will usually remain the same on view as users click from page to page.

Now think about the header. Do you want a header image? If so, you will need to prepare and upload your own graphic or logo.

What color scheme do you have in mind?

What do you want to see in the sidebar? Note that the sidebar is generally used to provide navigation to other parts of your website (or maybe other websites). Or it can contain images or ads.

As you can probably appreciate, the more work you can do at this stage to plan the layout of your website, the easier and quicker it will be to actually build it.

Make A Start On Your Website

At this stage your WordPress website is empty except for the sample content that WordPress (or your hosting company) inserts automatically. We’ll be deleting that stuff in the next lesson. For now, we’ll focus on some of the things you can do to begin making Twenty Fourteen look and feel the way you want.

So, if you haven’t done so already, log in to your website’s dashboard and follow along with me.

From the dashboard, go to ‘Appearance’, ‘Customize’. You’ll see some drop-down menus on the left panel. This is where you can customize Twenty Fourteen to look the way you want.

The left panel shows the tabs where you can click to customize the theme. The body of the screen will preview your changes.

Whenever you customize something the blurred blue button on the top left which says ‘Saved’ will change to ‘Save & Publish’. When you click that button, your changes will be made live. To exit ‘Customize’ (with or without changes) click on the cross on the far left of ‘Saved’. This makes the drop-down menus disappear and you are back in the regular dashboard.

Add A Site Title

You may have created a Site Title and Tagline when you installed WordPress. As you can see, I have already done so on my site. If you have done that too and you don’t want to change it then you can skip this section.

To add a site title, from the drop-down ‘Customize’ menu click on ‘Site Title & Tagline’. Here you’ll enter the title and tagline of your website that will be displayed at the top left of every page.

Enter whatever is appropriate for your website (you can change it later if necessary) and click on the blue ‘Save and Publish’ button at the top left. We’ll be coming back to ‘Site Title’ in Lesson 17 Search Engine Optimization, but for now leave it as is.

The tagline is like a sub-heading to the title and is intended to provide more information about what your site is about. But you can leave it blank if you want.

You can see that the text you have entered will now appear in the header of every page of your site.

Change Twenty Fourteen Color Scheme

Still in the ‘Customize’ panel, click on ‘Colors’ and you’ll see that you can change the Site Title Color and Background Color. There are not many options here as yet but I will be showing you a very useful plugin in Lesson 12 which will give you many more options about colors. I recommend that you don’t change the default colors until we get to that lesson.

Add A Header Image

If you want your site to have a header image you can upload it here. The Twenty Fourteen theme does not provide any inbuilt header images and, by default, will not display one. But if you have a graphic that you want to display across your website as a header you can either resize it to 1260 pixels width by 240 pixels height on your computer, or upload a graphic of any other size and crop it within this screen.

From the Customize panel click on ‘Header Image’ and ‘Add new image’. You will be taken to the Media Library (where we will be coming to in Lesson 7). Click on the ‘Upload Files’ tab and you’ll see a screen where you can drag and drop a file, or click ‘Select Files’ to navigate to the image on your own computer.

When you’ve located the image to use as a header, click on it and then click on ‘Open’ at the bottom of the screen. You’ll then see the ‘Choose Image’ screen with your image already selected. Click ‘Select and Crop’. If your image is not 1260 x 240 pixels you will be asked to crop it to make it fit the header.

Click ‘Skip Cropping’ or ‘Crop Image’ and your image will be loaded into the header.

Here’s what my site now looks like after I added my header image of fingers on a keyboard (which is actually my brand image as a techie writer):

I suggest that you experiment with all the options in this lesson to see how you can change the theme to make it look suitable for the sort of website you want to build. Anything that you change here will be effective immediately but you can change things as often as you like, so nothing is cast in stone. You can return to the default settings if you make the appearance of your website look worse…

When you’ve finished customizing your settings, save and publish your changes then click on the ‘Close’ button in the top left of the Customize screen and this will uncover the dashboard menu items down the left side of the screen.

I’m going to illustrate the rest of the tutorial by using this theme and it will make it easier for you to follow if I keep it as simple as this.

And I might change some of the layout by the time you see it – but you are witnessing how I built it and the illustrations in this masterclass record exactly how I did it.

The final item in this lesson is how to log out of your website.

Look up on the top right corner of your screen where it says ‘Howdy…’ and hover your mouse over that.

A drop-down box will appear and you just have to click on ‘Log Out’.

FAQ

I can’t decide what I want my website to look like! How can I get started?

One way of getting some creative ideas is simply to look at other websites. Browse sites that have the same objective as yours and observe their look and feel.

Find one that you like the look of and have a good browse around. Note the color scheme and the fonts. Check out the header. See how the site navigation works. How does the site use pictures? Does the site have ads?

Note what you like (and don’t like) and see whether you can organize your ideas into a simple structure for your own site. Warning – do not copy other websites or you could be in trouble. And don’t get too complicated to begin with. As your site evolves you can add more bells and whistles but when you are starting out the KISS (‘Keep It Simple Stupid’) principle certainly applies!

I have a company logo 200 x 200 pixels that I want to put on my website. How do I get that into the header?

You could create a graphic of 1260 x 240 pixels with your logo embedded in it. This could also include some text, for example, the name of your company. You could create this using software such as PhotoShop or Irfanview.

Alternatively, do not use a header image but rather insert the logo in one of the sidebars. This is covered in Lesson 8.


Note: If you are reading this, you are probably building an online business. Do you know that using some powerful marketing software can help your business scale to the next level? As the marketing technology develops very fast in recent years, there is a lot of new software being launched every month. To help you decide what marketing software you should use, you can read the detailed reviews of the most innovative marketing software below:

Leave a Comment