Build Your Own Business Website header image

Setup the Agility 3.2 Header

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

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

Now that we are done setting up Agility 3.2 for the first time, we can proceed to setting up the header. To do that we need to go to Skin Content.

Header Layout Options

Let’s just review how the header is laid out. It consists of three parts: the top header bar, the main header area and the top menu area.

How To Turn Parts Off

This is the default set up in Agility but you might not want all those areas and to that end there are two parts that you can turn off. Under global settings you can turn off the top menu and/or the top bar and just have the main header area. you can turn back on again.

The same thing is true with the footer area. You can turn off one aspect of the footer area.

You can’t get rid of the main header with the global settings because you need to have some kind of header area. In fact, each of these header areas can be configured and they all have the same options.

Use Skin Editor for Advanced Options

For those of you who are going to be using the Skin Editor, the header is comprised of the Agility Easy Header Box. And if you’re in the Skin Editor, it is Agility Easy Header. Come down here and look in the boxes here. That is the box that is used to construct the header and we’re using three of them, top header bar, main header, top menu area. All three of those are the pieces that make up the header.

Header Area Options

The Agility Easy Header is designed to be set up not in the Skin Editor but rather here in Skin Content. All three of these header boxes have the same options.

Column Configuration – Top Header Bar

The top header bar starts off with you choosing how many columns you want and how you want those columns configured. Now this is the case for the header, content grid, the footer and the Agility easy responsive column sections. They all have the same set of choices.

There are many different ways to set up the columns.

  • Single column
  • Two columns equally sized
  • Two columns with two-thirds on the left and one third on the right
  • Two columns with one third on the left and two thirds on the right
  • Two columns with three quarters – one quarter
  • Two columns with one quarter – three quarters
  • Three columns equally sized
  • Three columns with a half – one quarter – one quarter
  • Three columns with one quarter – one half – one-quarter
  • Three columns with one quarter – one quarter – one half
  • Four columns equally sized

You’ve got this range of choices here for the column configuration. In the default state it’s two columns equally sized.

Choose Content for Columns

Once you decide how many columns you want then you choose what the content of that column is. You have a large number of choices

  • Site title and Tagline
  • Thesis header image
  • A set of responsive header images
  • A widget area
  • Just a site title
  • Just a site tagline
  • A WordPress menu
  • Your phone number
  • Thesis text box
  • Social media icons

Using the Skin Editor for Other Options

If you want something other than those offerings and you are willing to work in the Skin Editor then you can choose “let me drag whatever I want there” in the Skin Editor. By choosing that box you then go manage options inside the Skin Editor instead.

But most people don’t want to do that. Most people want to forget the Skin Editor and just want to put something in this section of the header that is already available.

Settings for the Content Choices

We’re going to choose phone number and then social media icons. Let’s look at BYOBWebsite to show you what my site has there. My top bar just has a custom search box. So you can do anything you want with that top bar and what I wanted was an easy search box.

After column configuration you’ve got the content configuration and then for a bunch of these you have settings for that content.

Example: Phone Number

For example, here is the Column 1 – Phone Number. The setting that come with that are adding a heading and then you put the actual phone number. By actual phone number I mean the phone number with numbers only and it’s best if it is internationalized.

If you’re in Great Britain you put all of those extra numbers in there in front. In the U.S. you put the 1 and then the area code and then the number. I think you put country code and area code and county code for Great Britain. Everybody’s a little bit different but just make sure you put the full number in there.

What you don’t have to do is put the plus sign. If you know what this supposed to look like, this will automatically put the rest of the stuff in that is necessary in order for an international telephone call to work. What I mean by that is you can put just your plain old phone number in but it’s not going to work if somebody’s not in your country or it’s not going to work if somebody’s not your area code.

Then this is essentially the link. You would type the number in the way you want it and you could even have a heading of “call us today”. It can be just about anything you want but you would put the link in here because when somebody uses it on a mobile device they can just touch that and it will call you.

Example: Social Media Icons

The social profile links also has settings and in this case you can choose a style of social icon. Right now there’s only one style of social icon and that is Social Icon Style 1. That’s the default style.

You can choose No Style and it will take all styling away from it and will just be a bare icon or you can choose Style 2 which is one you can set up in Skin Design. You can also customize Style 1 in Skin Design as well.

Anyway here’s where you choose your style and if you wanted a heading above those icons you could add it here and then you could give it class and you can give it text. Obviously we don’t want that in this situation.

Not All Options Have Settings

So you have the column configuration, you have the content configuration and you have the content settings. Now not everything has a content setting. Let’s look at main heading. I don’t have anything below it and it says Two columns, one third – two thirds.

I’m going to have a Thesis header image in my one-third and I’ve got my site title and tagline in my second 3rd. Come back here and you can see there are no settings for that.

You put the Thesis header image by coming over here to header image, selecting your header image and once you’ve done that the header image has been added. We’re back to our phone number and social icons here.

Column Configuration – Top Menu Area

Let’s go back to Skin Content and come down to look at our Top Menu Area. Again, we have the same set of conditions. The same number of columns you can choose and same column content options.

Example: WordPress Menu

We chose a WordPress menu which means that we have a setting to fill out. We need to choose which menu we are going to use. Select a WordPress menu and I’m going to take the main menu. Set it and now our menu is going to change here. Save those options.

Maybe that menu doesn’t exist… appearance and menus. I’ve got this one, main menu. Select it and nothing. That’s the problem. I didn’t realize that my main menu had no content so I’m just going to add things to the menu. Okay, now it’s showing up.

Options without Content Settings

Obviously, most of these things don’t have any content settings. Most of them in the header section in any case. Let’s come back over to the Skin Content and look at the site title and tagline option. It doesn’t have a setting. The Thesis header image doesn’t have a setting. The widget area doesn’t have a setting. And neither do the separate options of site title or tagline.

Obviously WordPress menu does. Phone number does. Text box does. Social media icons does. Obviously “let me drag” doesn’t.

Example: Responsive Header Images

Let’s look at what happens here when we choose a single column and we choose a set of responsive header images. Now when we go back over the Skin Content, on our 1b – Main Header we’ve got responsive header images.

What responsive header images option does is it swaps out the image based on the size of the device viewing the site. It’s not that big a deal when your header image is 320 pixels wide but if your header image is 1032 or 1140 or if you’ve got a big long header image they don’t shrink well.

When the viewer squeezes it down to be responsive it’s generally not very easy to read and so that’s what this is for. You can click the add image button and I’ll find a nice big header image. I’ll choose the one for the full width.

Obviously if your site is 1032 wide your full width header should be 1032. If your site’s 1280, then it’s going to be 1280 and so on. Next you choose your tablet portrait header image which I recommend to be 700 pixels wide. Then pick your phone landscape which I recommend be 500 pixels wide and finally for your phone portrait, I recommend it be 300 pixels wide.

Then you can choose the text that you want for the header image title. The title is the thing that shows up as you hover over the image. You can see right now this is “click to return home”. That’s actually Thesis’ built-in thing.

This header image allows you to change that so that you can make it say whatever you want it to say. Just in case you’re doing this in a full width column, let’s say you’re doing it in a two-thirds width column you can set that here. So three quarters of two-thirds or one-half whatever it is. You can set that so that it helps the box recognize which image should be displayed in which context.

So if you put a set of responsive header images in a size other than one full width column, make sure you choose that size here so that the box understands what to do.

And the Thesis text box is your other choice. Instead of this you can choose a Thesis text box and then that’s just going to behave exactly like a text box. You can put whatever HTML in there you want. I use the text box to put my Google custom search up here.

0 Comments… add one
0 comments… add one

Leave a Comment