Customize the Appearance of Your Site

« Previous    |    Next »

Transcript

In this tutorial, I’ll walk you through some simple steps to change the appearance of your blog.

So, once again, starting in the dashboard, this time click Appearance. This opens up the Themes page where a variety of design schemes are available.

When you hover over any one of these thumbnail images, buttons appear to let you preview it or activate it. And just so you know, you can activate different themes as often as you like.

So, I’ll activate one and now you see that its thumbnail is in the top left because it’s the current theme. To see if I like it, I’ll click on “visit site.”

This one’s okay, but I’d like to try a different one so I’ll hover here over the name of my site, and if I choose Dashboard and go the same path I took before however I can choose Themes directly. Doing this takes me to a different interface. WP, like so many applications, has multiple ways of doing the same thing. So, in this window, I can scroll down the left side to find a different theme. I can click “live preview” to get a look at it. If I like it, I can press “Save & Activate.”

You’ll notice that some of the themes have photos in the header area and a few others have huge background images. One of the cool things is that you can really customize your blog and make it unique by uploading your own images for the header or background. You don’t even have to have them in the right dimensions, WordPress helps you do all of that, too. A caveat thought is that background images do need to be a large size.

So, to demonstrate this, I’ve selected a theme has a header image and before I save it, I’m going to choose Customize and here I’ll choose Header image. I can choose a different one that is provided with this theme, or I can even choose “randomize suggested header” which means that any of the images in this group will be displayed randomly when people visit the site.

But I want to use my own image, so I’ll click Add New Image. This takes us to the Media Library which, if you’re just starting, is probably empty. To upload one or more images, click the upload tab and then click Select Files in the center. Browse to find your image – it will need to be in a web format such as jpg, png, or gif. If you want to have more than one image displayed randomly, you can make it easy on yourself by putting them all in one folder on your computer you can grab all of them, like this. But for my banner, I’m just going to select a couple, so on a mac I’ll hold down the command key and choose these two. In Windows it’s the control key. Once selected, I’ll click “open”

WP is loading them into the media library. When the upload is done, you see the little check mark on the selected image and you can crop them one by one. So click “select and crop” down here. Now I see my photo with a bounding box that is the size of the banner. I can drag that to position it over the subject of my photo and click crop image.
That takes us back to the header customization screen where you can see the banner down here. Now I will do the same thing with the other photos I uploaded, click add new image, select it from the media library, click select and crop, move the bounding box, click crop image. There they are – my two banners. I now click randomize uploaded headers.

So if I click the refresh button, which is in a different place on each browser but is often a small circular arrow at the top, you reload the page and the random header will change. (Note: It’s not alternating, it’s random, so sometimes the same one loads. )

if you wanted to choose one of the themes with a banner image, click customize, and choose background images. If you like, you can upload your own image for the background in exactly the same way I just showed you for the headers.