Create a Single Column Header
Now that I’ve showed you the two column layout, I want to show you a one column version. Let’s take the typical header out of our front page here for a second and drop it up there, we can create a single column header using the Agility 1 column header. And we’ll call this one front page header and drop that in.
Choosing Header Content
The front page header can only have 1 column but you still have the choice of content. So you can say none, “I don’t want to put any specific content here. I’m going to drag content here instead.” Or you can say, “I want a header image.” Or you can say, “I want a widget area.”
If you say I’m going to drag content here, you can do this for example, drag the site title and the tagline. Let’s see, let’s shift site title and drag tagline down. Save that template and that’s what’s it’s going to look like.
Actually, it looks a little bit better if we take these styles out because if you want just a nice, big site title and tagline which is popular these days, this has been designed specifically to allow you to do that. So you can put a nice, big title and tagline in here without anything else.
Instead of doing that, you could choose a header image and in that case, what you want to do is put the full sized header image in here. Let’s go back to our Media Library and find the right one. It’s this one here. So if we edit that, copy the image size and put our full sized header image in there. Hit save and now we’ve got a nice, big header image that fits nicely in that spot. And if we refresh the Responsinator here, the header image gets shrunk down.
Customize the Header Image for Mobile Devices
Something you should note here is that on a smartphone, the header image looks like this. A 1008 pixel wide header image doesn’t look very good shrunk down. So what the 1 column layout allows you to do is to select other header images that will show up in different devices.
So you can pick image to show up in a tablet device and the tablet device is one that’s between 1024 and 800. You can pick one that will show up in a tablet in portrait mode which is 800 to 500. And you can show one that shows up in a smartphone which is a device that’s smaller than 500. And so that’s what we’re going to do.
We are going to add a couple more files to this. We’re going to add our 800 pixel wide header and we’re going to add our 500 pixel wide header. Go back to our media library. So that’s our 1008 pixel wide header… no, that’s our 1008 pixel wide header. Here is our 800 pixel wide header and this will be shown on devices, between 1024 and 800. So it will replace this image here on the iPad for example.
Now obviously, this image looks fine on the iPad so you may not feel the need to replace this image. It got scaled down to fit the space and maybe you’re happy with the way it looks here. And so you may not feel the need to change it out. But if you do feel the need to change it out or if you want to display something else, you can come over here and paste that URL.
We may as well get the next one, the 500 pixel one and then we’ll get the 300 pixel one. There you go, there it is. This lets you customize the header experience for your mobile users.
So now, when we look at this in the Responsinator, there’s your nice little 300 pixel wide one. You get to a bigger one so now you get to the nice little demonstration site. Professional services company shows up and the logo’s a little bit bigger. But now, instead of having the long one, you’ve got this one here instead so the logo’s more of its natural size on these. And then you’ve got a shorter version but natural height you know, for the 1024 version. The mobile devices all get different header images based on the size.
If it doesn’t matter or if your header image scales just fine, you don’t have to do any of these. And you can mix and match these.