Changing the Theme and Adding a Logo

11 minutes
Share the link to this page
Copied
  Completed
Changing the theme to Customizr free theme. There is a PDF attached containing some of the slides used in this video.

  Download

Transcript

Hello, so I'm going to change the theme again. But before I do, I'm going to talk a little bit about how your website is viewed on different devices such as smartphones and tablets, as well as laptops and desktop PCs. As you will know, many people access the web these days by a handheld device such as a mobile phone. And it's always very important to check if your site is working well on these smaller devices. Now I've got a little bookmarklet loaded here where I can check this in this theme. Now the theme 2016 is responsive.

So let's have a look at it in a tablet. And as you can see the menu has changed. Do you access the menu like that now, which is more of the way menus work on tablets, and especially phones Nice to see that the social links and more prominent on this view, then you get the content of the page. And then you get the content of the right hand sidebar, you get more links and then the footer. So that's the tablet, and you can have a look at a small tablet, it's pretty much the same, it's just narrower. And a phone, of course, will be very much narrower again, but it's still the same sort of thing.

You've got the site title, and you access the menu, links like that. So that's good, very important. you view the site on all sorts of different devices. And you can do that by just narrowing the window in your browser as well. But always make sure that your theme is responsive, which means it looks good on tablets and mobiles. So we're going to get another theme now.

So we'll go to Appearance themes. And remember, we've got the three free WordPress themes 2015 2014 and the 2016 that we're using, I'm going to add a new theme here. And I'm going to search for it because I know a theme that I'm looking for I'm not necessarily recommending this theme to you, but it's a an example of a responsive theme, which can be customized much more than the 2016 theme. And it's free. And it's called customize, spelt like that. And there it is, it's the first one in the search results.

This is searching the wordpress.org themes repository. I'm going to click on details and preview. And remember to always look at the star rating we've had over 700 ratings of this theme. And if you were to go to the wordpress.org theme repository and search for the same theme, you have Even more info about it. So you actually see the active installs and the last updated date. Both of these are very good signals.

It's been updated within the last month, over 100,000 websites are using it. So it's obviously quite a solid theme, well supported, and well reviewed most of the stars. As you can see, most of the reviewers have positive things to say about the theme. So always be looking at these signals when you choose your theme. But we're back to the theme installer, and I'm going to install the theme, and it's successfully installed the theme. So now if we go to Appearance themes, we'll see that there is a new theme, it's installed it but it hasn't activated it so the site will still look the same.

So we go back and we activate, you can do a live preview, but we might as well do this with the theme pack. activated. So it's activated. Nothing much has changed about the back end. Actually, as you can see, there's an about customizing link there. There's also a help button there, which is always good.

But all the action happens for customizer on the Customize link in appearance, the WordPress back end. And as you can see, our homepage now looks completely different. Let's go back to the homepage and refresh. The site looks absolutely nothing like it did before. The content is there on the homepage. But there's very little else this is similar.

We've lost the menu. This menu comes out from the right hand side, and it doesn't have the correct links in it. So we've lost the menu that we set up for the previous theme and this is something that can happen. When you change themes, you need to set up some of the widgets menu headers that you had done on previous themes, but I'm going to get into the customizing here. And you see a live preview of what you're doing. First of all, there's a sign from the developer.

As I say, this is a free theme. So you are asked for a donation, but I'll just get rid of that. I'll just go back to the homepage. And I'm going to actually remove the slider because I think that will think that will drive us mad if I leave it there. So I'm going to remove that demo slider there. But if you wanted a slider, you could just click through that and set it up in the same way as we're setting up the other customization.

So now that we don't have to look at the slider anymore. So we'll go into global settings and title and tagline. As you can see, that is the same as the settings that we set in WordPress general so we'll leave those as they are logo and fav icon. I've created a logo here and I think if you are serious about a website So it's probably a good idea to design the logo, have it properly designed and have an image there instead of text. Because this will look much more professional. As long as you really choose a good designer, look at this designers work, see if they have done some great stuff, see what their feedback is like on Upwork and 99 designs.

I don't actually like the competitions on 99 designs, they've never worked for me. But I find if I invest time in finding the right people on Upwork and 99 designs, I find that I will get some good results from them. Now I've written down some text here for what you need to say to the designer. You want to give them a good brief, give them examples of logos that you like, tell them the website. It's coming from Tell them the sort of niche The website is in other websites and logos that you like the look of in that niche. So the logo designer can use that as reference for the work they will do for you.

You also needs to say some specific details, you want the logo at the end of the day to be a maximum width of something like 250 pixels and a maximum height of something like 100 pixels to supply us as a PNG on a transparent background. And also with the logo. It should also be supplied as either a high res PSD that's Photoshop document or an AI file, that's an Adobe Illustrator file. You should also ask for the hexadecimal color references in the logo. That's so you can have the same colors and have your logo in some of the text of the website. So the links, for example, and that's why you need to ask for the hexadecimal color references.

You also need to ask for a fav icon, which is a square version of the logo. And that needs to be 112 pixels square at least. And again, it should be a PNG on a transparent background. So with that said, we're going to select the logo image that I have had designed. We'll even put some alt text in there. I'm not sure if that's necessary, but better to do it than not.

Okay, we don't want to crop it, because that crop won't look very good. And there you are, is put the logo in there for you. And you don't have to mess around with CSS and get rid of the title. The title is still there in the HTML. Remember, it's there as the site title. So it'll still have the SEO benefits.

It'll still have the benefit for the search engines, but you have changed it now to a much more attractive logo. And this is got an option for a sticky logo. A sticky logo is one that stays at the top there when you scroll down, and I think that's quite good. It's asking us for another logo for that. And we'll just use the same one, of course in the same way. And cite icon.

This is the fav icon that is in the top left of the browser tab in Chrome, and will appear in various places on other devices as well. So I'm going to select that upload the fav icon that we got designed. Remember, it's a square version of the logo, something like 550 pixels square, so we'll select that and we have to crop it into that square shape. And there it goes. And you'll see already we have that icon there, which is much better than a default icon makes look the site looks so much more professional. So we'll save and publish that.

And now we can go back to our site seven, look at another page. So let's look at the bout me page. So there you'll see we have the sidebar on the left hand side this time, and we have a design for the About Me page looks completely different, but it still looks good. In fact, I think it looks a little bit better than the 2016 theme already, because we got less wasted space than we had up here. Okay, so I've only really made a start at customizing this theme with the new theme that we're using free from WordPress. But as you can see, you can already do a great deal with it.

I'm going to stop this video now and I'm going to carry on and the next few videos will be further customization. With this customize a theme. My name is Rob cabin. I'll hopefully see you in the next videos because you will be amazed. You can do with a few clicks.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.