Build Your Own Business Website header image

Setup the Header

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

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.


Now that we’ve gotten this template created for the landing page in Agility, it’s best just to start from the top of your design and work your way.

Implementing the Design with Agility Tools

In this case at the top of the design is the header so we are going to create the header first. Then we’ll create this content area, the main content area, second and then we’ll create the supporting content area third.

Agility provides you with a bunch of tools that you can use for this. We’ve got a Content Grid Section which you may remember if you’ve looked at any other Agility videos. This section can be configured from inside of Skin Content. We have the Easy Responsive Column Section which is a section that is always configured inside the Skin Editor. And then we have the Agility Easy Header which is a section that is always configured inside of the Skin Content Section.

We’re going to use all three Agility tools on this.

Naming Convention in Agility

We’re going to start with the Easy Header. I want to show you a naming convention that I used in Agility that I think makes sense for you to follow when doing this work.

Come back over here to Skin Content and you can see we already have these main sections setup: 1a – Top Header, 1b – Main Header, 1c – Top Menu Area so on and so forth. I want to be able to lump all of these video landing page parts together so I’m going to follow this naming convention.

Agility Easy Header

I’m going to start the name of this Agility Easy Header with the number 10. Let’s come over here and we’ve got an Agility Easy Header. I’m going to give it a name and call it 10a Video Landing Page Header. That’s all we have to do here, go ahead and click that. Shift+drag it into this position.

I want to make sure I’m not messing this up so let’s close that. When you are working with the Easy Header and the Content Grid Sections you don’t want both the Skin Editor and the Skin Content Section open at the same time. You want to switch back and forth between them because if you have them both open at the same time they’re going to try to save conflicting information to the database.

In this case we’ve got our Video Landing Page Header. Let’s save this template and then go back over to Thesis and down to the Skin Content. We should see down here the Video Landing Page Header and now we can start configuring that header.

Configure the Header

Remember the header for this landing page has two columns so we’ll say two columns and we may as well say equally sized. The logo in this case is small enough that it’s not going to take up half of the space so we could choose any of the two column configurations and it would work just fine. We’re going to use two columns.

Add a Menu

Then the content for column 1 will be a Thesis header image and the content for column two will be a WordPress menu. Hit save options. Now that we’ve done that let’s come back over to Agility Skin Content Options. We have the Video Landing Page Column 2 menu.

We don’t actually have a menu setup for this so let’s go set that up first. Appearance and menus. We’re just going to put a couple of random things in this. Let’s just create a new one and we’ll call it Video Landing. Create the menu.

Just so it functions let’s choose a couple of her sales pages, Unicity Cleanse, Unicity Balance, Unicity Matcha. We’ll use all three and the menu. Let’s save the menu then go back over to Thesis Skin Content and scroll back down to our WP nav menu. We’re going to pick Video Landing.

Add Header Image

We have already defined the header image. It’s this image right here and that’s the one we want to use on this landing page as well. So it’s the typical header image and it’s also our landing page header image which is why we use the Thesis header image.

There’s only one definition for the Thesis header image so if we wanted to use a totally different header image for that side of the header then we wouldn’t use the Thesis header image, we’d choose something else. For example, we could choose a set of responsive images, we could choose a widget area, we could choose a text box.

Review the Header and Make Changes

We could have chosen any of those things instead of the Thesis header image if we didn’t want to use the same image but since we do want to use the same, it doesn’t matter.

Let’s come back over and take a look at our page now. So go over to pages and this is our latest page. I forgot what we called it, it’s never too late to fix it…there it is. So let’s view this.

Because we haven’t chosen a new template it’s not right. So let’s choose a new template for that page. Right now it’s just using the page template but will come down here to custom template and allow the Video Landing page. Hit update. Let’s view the page and here’s the menu and image.

Change Menu Style

We’re going to want to change the menu style. Let’s take a look at what it’s supposed to look like. So now we know what it’s supposed to look like. Let’s go to Thesis Home and then go to Skin Design.

Because we’re using the simple header, we have to use the header style. The secondary doesn’t really help us so I’m going to go back over here to the menu header.

We’re going to change those colors up. Use the medium dark primary for the main color, the hover text will be the medium contrast. The menu link will be none and underline. The font family won’t be Merriweather, we’re going to Arial. The font size will be 18. Default font weight is fine. Font style font text transform will be uppercase and that’s it.

Make Stylistic Changes

Now we can say Save Design Options and take a look. What I really want is some space above this so and we don’t really need the dark background but we do need some space above that.

So we’re going to come back over to our Skin Editor and over to our landing page. We’re going to look at our options. It looks like we are going to have to use a little bit of custom CSS. I didn’t think I was but let’s just use a little bit of custom CSS to give this padding.

We want padding here but we don’t want the padding here. So we go to our Main Header Column 1, let’s just reload that. Come over to our Main Header Column 1, check to customize padding and then we can just add 10px padding to the top… which will bring this down.

Then we’ll come back over to our header menu and I’m missing the padding, menu item padding. We could make the top padding 60 pixels in this case and see what that does. There you go. This is dropped down kind of halfway through and this is dropped down a little bit from the edge.

Now that we’ve got our header set up we will move on to setting up the main content section of the landing page in Agility.

0 Comments… add one
0 comments… add one

Leave a Comment