How to Design Your WordPress Website

Last updated on by admin

Once you have registered your domain, signed up for a web hosting like SiteGround or bluehost and installed WordPress, you can begin designing your website on your domain. In part 3 of the series “How to Build a WordPress Website from Scratch“, I’m going to show you how you can get started with a brand new WordPress website.

The first thing you have to do is to log into your WordPress website. This is where all the action begins. In your browser, type your login in URL as follows:

http://yoursite.com/wp-admin

or

http://yoursite.com/wp-login.php

Then hit return (don’t forget to substitute your own domain name here). You will see a screen come up like this:

screenshot of WordPress admin login form

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.

You will then see a screen that looks something like this:

screenshot showing the WordPress admin dashboard home

The detail in the body of your screen may look a little bit different but what we are 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 of the very top left “Home” icon just above the “Dashboard” button and you will see a drop-down that says “Visit Site”. Click on that and you will be taken to your beautiful website. Here is what mine looks like:

screenshot showing a demo of the frontend of a WordPress website

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

But first, let me explain all about “Theme”.

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 Seventeen” theme. This a very well-designed and popular theme but it has been designed with business in mind. Because of this, it has a wide range of features available.

I want to show you some of the options Twenty Seventeen provide but feel free to change your theme to something like Twenty Sixteen or Twenty Fifteen. To change your theme hover your mouse of 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 pops up, click on “Themes”. You will see a screen something like this:

screenshot showing how to change a WordPress theme

Hover your mouse over Twenty Sixteen and then click “Activate”. That’s all you have to do to change the theme.

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 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 Seventeen WordPress layout for now, you will find it quicker to build your own site. And, as I have stated, you can change the theme later if you wish.

The Twenty Seventeen 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 a video in .mp4 format or a YouTube video. It can also 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 on your website. If you are planning a large website this could become a hierarchy of pages. Twenty Seventeen also supports a social links menu that can show links to your social media profiles such as Facebook, Twitter, Instagram etc.
  • 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 image or a mixture of both. You can choose to show a static front page for your homepage instead of showing the blog posts.
  • The sidebar on the right side of the page contains “widgets” which typically contain navigational links to guide the user to other parts of our website. Widgets can also contain text or images.
  • The footer is at the bottom of the page. The footer is optional and can also contain widgets.

If 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 to a header video or image? If so, you will need to prepare and upload your own video or graphics.

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 will be deleting that and focus on some of the things you can do to begin making Twenty Seventeen look and feel the way you want.

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

From the dashboard, go to “Appearance > Customize”. You will see some drop-down menus on the left panel, as shown here:

screenshot showing the WordPress twenty seventeen theme customize

This is where you can customize Twenty Seventeen 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 change 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 Identity”. Here you will 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.

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 Seventeen Color Scheme

Still in the “Customize” panel, click on “Colors” and you will see that you can change the color scheme to light, dark or a custom one. There is also an option to change the Header Text Color.

Add a Header Image/Video

There is a default header image that comes with the Twenty Seventeen theme. But if you want your site to have a different header image you can upload it in the “Header Media” section. From the “Header Media” section click on “Add New Image” and you will be taken to the Media Library. Click on the “Upload Files” tab and you will see a screen where you can drag and drop a file, or click “Select Files” to navigate to the image on your computer.

screenshot showing how to upload a header image from the Customize panel in WordPress

When you have located the image to use as a header, click on it and then click on “Open” at the bottom of the screen. You will then see the “Choose Image” screen with your image already selected. Click “Select and Crop”. If your image is not 2000 x 1200 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.

If you add a video for the header, this image will be used as a fallback while the video loads. The video needs to be in .mp4 format and can be uploaded the same way as you did the image. For the best user experience, I recommend that your video matches the size of your image (2000 x 1200 pixels). You can also provide a link to a YouTube video to use it as the header.

screenshot showing the header media section of the Customize panel in Twenty Seventeen WordPress theme

I suggest that you experiment with all the options 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 have 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.

The final item in this tutorial 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.

screenshot showing how to log out of WordPress admin dashboard

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

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 or you can organize your ideas into a simple structure for your own site. Warning – do not just copy and paste content from other websites or it might have a negative impact on your website ranking. 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 2000 x 1200 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 sidebar widgets.

Previous (Part 2): How to Install WordPress on Your Web Hosting Account

GET a Special 60% OFF WordPress Hosting Here

Leave a Reply

Your email address will not be published. Required fields are marked *