Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Setup the Header

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now that we’ve created the menu for our Professional Services website it’s time to set up the header. When we talked about the parts of an Agility page remember I told you that the header consists of three parts: the top header area, the main header and the top menu area. Each of these can be customized.

Customize The Three Areas of the Header

When we talked about the global display options you saw where you could turn on and off the different parts of the header. Well, we are going to go back over to skin content and look at the header settings available. Here are our header settings: top header bar, the main header and the top menu area. We call it top header area but it’s the top header bar.

Top Header Bar Settings

The way you start customizing what happens is you come to the main area and click on top header bar. And the first set of choices you have is what column configuration you want that top header to have.

Column Configuration

It’s set to have two columns equally sized but it could just as easily be something else. You could have four columns equally sized or a single column or three columns equally sized or two columns two thirds width and one third width. Each of these areas gives you a choice of what size you want the columns to be inside of this.

As I said, right now this has two columns. The left column that goes to the halfway point and the right column that goes from that halfway point to the edge end. In the left column the text is aligned to the left and the right column everything’s aligned to the right so that’s why you have what looks like stuff on either end.

Let’s look at that on my site, byobwebsite. I only have one column in that bar. I put a widget area in there with the search box in that one column and then I centered it.

Content You Can Have In Each Column

So you have a choice of what the column arrangement is and then for each column you get to choose what content goes in there. Every column can have the following choices.

  • The site title and tagline
  • The Thesis header image
  • A set of response of header images
  • A widget area
  • Just the site title
  • Just the tagline
  • A WordPress menu
  • Your phone number
  • A Thesis text box
  • Social media icons

In addition to that for people who know how to use a skin editor you can use the “let me drag whatever I want in there” option.

You have that same set of choices for column two. We have it set up so the phone number is in column one and the social media icons are in column two. Once you save those choices then you can go back over the skin content options and under top header bar the options you chose are shown.

Phone Number Options

Each of those has it’s own settings. So the phone number has some settings and the social profile links have settings. Let’s click on our phone number here. We’re not using heading text here obviously, we just want the phone number to be there with no text. We’ll talk about when you can use heading text with with the phone number box but this is not a good place to use it.

After heading text there’s the phone number area. You’re only going to put your numbers in here. If you’re in Europe you’re going to start with your country code then your county code, your city code and your number.

If you’re in the United States you’re going to start with 1 because that is the country code in the U.S. The U.S. and Canada share the same country code. Then we have an area code and the number. You just put that string of numbers in there.

If you know anything about clickable telephone links you know that there are other things that get added to it like a plus sign and that sort of thing. I didn’t want you to have to know that so I automatically add that for you. All you need to do is make sure you just add the numbers there. If you do that it’s going to work just fine. So there’s a phone number.

Now you can decide how you want the phone number to be displayed. I want it to show as (206) 801-5209. And I could say call me or call us like that. Save these options.

Let’s come back over and look at that on the site. You have Call Us and then the phone number. And this is a clickable link on a phone, so if customer has their phone in front of them all they have to do is click that link on your website. In fact, this link is the very first thing that will be at the top of a mobile phones view of this page. If they click it they can call you right now.

You could make this little cuter if you wanted by adding an icon to this. So go back over to font awesome and icons. Search for phone. We could use the mobile phone or the regular phone icon. Let’s use the mobile phone. Again, you just grab this whole code. Go to our setting and instead of call us we’ll put that code there. Save the options.

Let’s take a look at it. The mobile phone is sitting there. The color is wrong, it’s white. Oh, because I made these icons white and this icon is also white. Anyway, that’s the first the piece of the header.

Main Header Settings

Then the second piece of the header is the main header. I’ve got it set up right now with two columns one third and two thirds. The one third column has the Thesis header image and the two thirds column has a site title and tagline. Again, this has exactly the same set of choices as the first one.

Default Settings

By default that comes up with the Thesis header image and site title and tagline. If you want to add a header image to this you can come over to the header image link there. Click that, select the header image. I’ll choose that logo and insert it. And there it is.

Adding Responsive Header Images

We’ve got two columns with the same column configuration but that’s not really what I want. What I really want is a set of responsive header images. So I’m going to come back over to skin content.

First, I want you to notice that the main header doesn’t have any settings below it. That’s because site title and tagline don’t have any settings and the Thesis header image setting is over here under Header Image.

Let’s change the column configuration. We’re going to say a single column and instead of a Thesis header image we’re going to choose a set of responsive header images. Save our options.

Benefits of Responsive Header Image

A set of responsive header images means that this image will get swapped out depending upon the size of the device viewing it. Let’s look at this in the responsinator. This is the image you see not that. This is too long. These days a lot of people have these nice long logos or header images. Well, when those large images get squeezed down by a phone they’re impossible to read which is why we use the responsive images.

The Number of Image Sizes Needed

In this case we’ve got an image designed specifically for a phone and we’ve got an image designed specifically for a wide phone or the wide view of a phone. And we’ve got one designed specifically for the tablet view and then one designed specifically for the tablet view in this arrangement. You can see the difference between this one and the desktop view. For the desktop you want to stretch it out a lot further than the tablet view.

The point of doing this is to allow you to have the great big header image on the desktop view but then change out the image for each of the other views.

Let’s save this and go back over to Skin content options. You’ll see the main header now has a setting and that is for the responsive header images.

Upload the Images

I am 1032 wide in desktop view so I want one that’s a 1032, one that’s 700, one that’s 500 and one that’s 300. Let’s upload the files. Select my files and this is the one I want. That’s the 1032.

There are attachment display settings here. It doesn’t really matter here but it’s not going to have an alignment, it’s not going to link to anything and we’re going to use the full size image. Just insert it there. And it shows you what it looks like right now.

Then we’re going to pick the 700 pixel wide one. Upload the file select. How big is that one? It’s eight hundred. Insert it into the post. That’s a little bit too wide and it’ll get cut off. So come back over here to the media library. And we are going to edit the image. And I’m just going to scale it to 700. Scale it and save it.

Then come back over here to Thesis, Skin content and I’m going to repick that image. Oh I didn’t save the options. I knew it was missing somewhere because there’s the big one and here’s a 700 pixel that actually is 700. Insert them into the post.

You can see that when it resized it it gave it a whole different name. Then we’re going to grab the phone landscape on the 500 pixel one. And we use 430 that’s smaller than 500 so it’ll work just fine. Insert that into the post.

Then finally the phone at 300. It’s actually this one right here. Insert that one into the post and now we have all of our images.

Title of the Header Image

This does give you a chance to change the title of the header image. What’s in there now is
“Return to our home page”. This is especially useful if you have your site in a different language. So if you want to write “return our home page” in Dutch you can do that here.

Specify Width of Column

The other thing you want to do is is specify the width of the column that the image is located in. If you don’t specify it’s going to assume it’s full width and it’s going to write CSS accordingly. You could actually use this in a two thirds column instead of a full width column and it would write CSS differently.

Save the options. And now when we reload this we’ve got this image now. Let’s look at it over here and we’re going to have all those different header images. And we get all of that because of the way that we set those images up.

Top Menu Area Settings

The last thing in the header that needs to be set up is the top menu area. That’s really simple. The top menu area is set up to be a single column and have a WordPress menu. We’ve set a WordPress menu.

That’s how it’s set up it but it could be set up just like the other ones. If you want your menu at the very top you could put your menu at the very top. If you wanted your responsive images down here you could put them here. You can change this up.

Change the Layout or Order As Desired

In any of these three places you can do whatever it is you want. It just happens that a layout like this is a typical layout. That’s why I’ve chosen to do it that way but I have given you the flexibility of choosing any kind of column configuration and any typical header relevant in that column configuration.

Back to the settings and this is where you decide which menu goes in there. Select the menu display and it’s the main menu. Come back and now you’ve got your main menu with all the drop owns because they’re available to you on the menu.

Access to Agility Skin

Robin asked how to purchase Agility. Robin you have access to it free because you’re here. So all you have to do is come over to the website and become a free member. That has to happen first. Then as a free member you can come over to courses. Under courses go to start building your website here. Then to Build a professional website using WordPress and Thesis 2.3.

This is where all the videos are going to be to and we’re going to start posting these videos tomorrow. You can download Agility 3.2. You can download BackupBuddy. You can download my comment spam keyword list. The link to the Google search engine optimization starter guide is here. All that is available to you because you’re here at a free seminar.

You’re certainly welcome to join the site as a paid member and then you’d have access to it and all the rest of my videos, plugins and so on. But having said that, I’m offering it to you for free because you’re here for a seminar.

I don’t do these seminars for sales. I know most of these kinds of things are done as a big sales pitch but this is for instructional purposes for my site and members. My job is to instruct and if you’re at my seminar you can have whatever it is I’m demonstrating. The only thing I can’t give you is Thesis 2.3 because that violates the license.

Agility Skin Cheat Sheets

One other thing that I forgot to say is that there are the Agility Skin Cheat Sheets. You can find that on the Agility page under member benefits, skins for Thesis 2.3. There are four cheat sheets – the header setup, front page setup, image size recommendations and template layout.

Let’s look at the header cheat sheet to give you an idea of what these are like. You can see that it goes into great detail both about where the settings are for the header and also where the style settings are.

We’re going to talk about style settings because we’re going to style the menu next week but if you want to play around with them, all you have to do is go down to header design options in the bookmarks and you’ll see where all the styles applied to the header and what you can use to style it.

Upgrading From Agility 2.2

Richard asks is 3.2 ready for 2.2 upgrade yet. No, it is not ready for a 2.2 upgrade yet. He’s asking if you’re using Agility 2.2 today is there an automatic upgrade to Agility 3.2 and the answer is no. I still have to create a mechanism for translating Agility 2.2 options into Agility 3.2 options.

It doesn’t mean you can’t use Agility 3.2 on what was originally an Agility 2.2 site. You can do that it’s just that you’ll have to restyle some things because some of the options changed.

Different Backgrounds on Different Pages

Sammy asked how to use different backgrounds for different pages? Well, we’ll talk about that next time. Actually, what you asked me about on a Wednesday requires custom CSS. The whole point, from my perspective, of this class is to demonstrate how to do stuff without even knowing what custom CSS is let alone how to write it.

Not one bit of custom CSS was used to do the layout of the sample site. My intention is to get you to a point where you’ve got something that you like without ever having to use custom CSS.

Now having said that it is really easy. In fact you could probably look up on byobwebsite. Let’s do a search for different backgrounds on different pages and see what turns up. This is actually in Genesis. Let’s go to Thesis.

You may not know but when you do a search you have this opportunity to filter the search results with these choices right here. If you choose latest this is going to bring up Thesis 2.2 and here’s a video on using different background images on different pages. It’s under Customize Thesis 2.1 like a pro. It’s exactly the same as doing it in Thesis 2.3 as it is in 2.1.

Changing from Classic or Personified to Agility Skin

Someone want to know what kinds of problems would occur on existing sites when changing from classic or personified to Agility. Well, all of the styling will be different but you won’t lose any content.

Let’s just look at this site here. If we take which is my demonstration site for Agility 3 and come in here and change it to a different skin. Let’s say we change it to Thesis Classic. You can see it looks different but we didn’t lose any content. But we have to set up the menu again. It’s getting the footer menu up here because we haven’t told thesis classic what to do.

Because I created a header image this is classic puts the header image. So it holds on to that information but none of the text box data, none of the widgets are going to come in. We didn’t lose the widgets. They are still there under appearance and widgets but now they are inside of inactive sidebars because the sidebars that are an Agility do not exist in these is classic.

But as soon as I come back to Thesis, manage skins and activate Agility, it’s back to looking exactly like it looked before. Because shifting back and forth doesn’t change that.

If you’ve already got a website developed in Thesis Classic you can use Thesis’ wonderful ability to go over to manage skins use the preview option. So you can preview this in development mode. So here’s my Intermediate web design bootcamp skin that I taught. Now when I refresh it I can see the skin from that perspective. And.

And that hasn’t changed it for anybody else. If somebody comes in here that is not logged they see the site as it is. But since I’m logged in working on it I can see the site this way. In that case I can go to the skin editor and I can change templates around, I can make CSS changes, I can do all that sort of thing and see what that looks like without having any impact on the live site.

That’s because I’m doing this in redevelopment in a different skin in preview mode. I can even create widgets and everything else like that. So you can redevelop your site using Agility 3.2 and leave the existing skin in place and unchanged while you are working on the Agility version.

Why You Should Upgrade to Thesis 2 From Thesis 1

Agility does not work with Thesis 1, it only works with Thesis 2. Thesis one is an entirely different animal. If your website’s important to you at all you really should be moving from Thesis 1 to Thesis 2 because 1 is not mobile friendly so Google’s automatically dinging you.

Thesis 1.0 is also not HTML5. So you’ve got to go through all kinds of extra hoops to embed media. These 1 does not embrace schema because schema didn’t exist when Thesis 1.0 was developed.

Those are the big reasons why if the site’s important for business then you want to get it out of Thesis 1.0 into Thesis 2.0 as quickly as possible. The way I would do that probably is just set up a clone and redevelop into thesis 2 on a clone and then copy the clone back over. I have a seminar on upgrading from Thesis 1.8.5 Site to Thesis 2.1 Using the Classic Responsive Skin.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment