Build Your Own Business Website header image

How to Create a Landing Page in Thesis 2 & Agility – Part 2 – Create a Custom Template

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.

Essentially, what we’re going to do is create this landing page in Thesis 2 and in Agility and that starts off with creating a new template.

Create the Landing Page Template

Here we are in our Skin Editor and we’re going to come over here to Add New Template. We’re going to call this “Landing Page” and we’re going to create the template. Once you create a custom template like this, it doesn’t have anything in it so what we’re going to do next is just copy over our Typical Page template.

Copy Typical Page Template Layout

So we’ve selected Landing Page here. Now we’re going to copy from template and we’re just going to select our Typical Page as the base for this. So we’ll copy our Typical Page over.

Simplify the Landing Page Layout

In this case, we’re going to drag our menu out of here because we’re not going to use that menu and we’re going to drag our Bottom Footer and our Top Footer out of here. Actually, I suppose we could leave the Bottom Footer in but we’ll take the Top Footer out so we won’t have widgets or anything like that.

Replace Typical Header

In this Header Area, we are going to get rid of this Typical Header and we’re going to use the Agility skin’s ability to create a new header. We’re going to come down to the type of box to add and it’s going to be an Agility 2 Column Header. We’re just going to call this Landing Header and we’ll drag it up into place in that Header Area Page.

We’ll just go ahead and stick with 2 equally-sized columns here but the left column is going to have that header image and the right column is going to have a Nav Menu.

Replace Typical Menu

I’ve created a landing page menu, which just has a couple of links on it so I’m going to choose the Landing Page Menu. I’ve also created a smaller header image for this so I’m going to have to get that. I’m going to go to Add New Media, select the file and get its URL; come back over to this Header Image URL and paste it. Then save that template. Now, we have a different style of header going on here.

Create New Column Layout for the Content

However, we also want a whole different content thing going on to so I’m going to shift drag the Typical 2 Column Content out of this and I am going to create a new set of columns. The way you create new columns in Agility is first, you create a wrapper and then you create the columns. So we’ll create our column wrapper and this is going to be the Landing Main Content 2 Column. We’ll add that box so there’s our wrapper.

Now, we’re going to create 2 new Agility columns and so we’ll call this one Landing Main Left and we’ll create another one, Landing Main Right. Okay, shift this up and drag it into there and then this one into there as well. Then drag the 2 Column Content up here and drop it into Content Area Page.

Now, we’re going to configure this, we’re going to make this 2 columns equally-sized and then leave it alone. Then we’ll come over here to the Left Column and it’s going to be half the width and the Right Column and it’s going to be half the width.

The Right Column is actually that content stuff so we’re going to open up the 2 Column Content. Open up the Main Content Column and I’m just going to drag the WP Loop with the Page Post Box out of Main Content Column and drop it into Landing Main Right.

Then here, if we take a look at our example for a moment, this is going to be a video. So I’m going to take a text box here to put the video and then this is the content.

Add Video to the Landing Page

Come back over to the Skin Editor and our Main Left Column. We’re going to do a video so I’m just going to do that with text box. We’ll call that Landing Video and then here, I’ve got a video already picked out. We’re going to do this video. I’m going to click share and embed and the width of this is based on how wide my Agility columns are and that’s 516 pixels, so that’s what I want this to be.

Now, I can just copy this embed code and come back over to the Skin Editor, go to Landing Video, paste that iframe there. I’m going to disable automatic p tags and there’s no reason to wrap this in a wrapper so I’m going to have no HTML wrapper and we’ll save the template.

Over here, I actually don’t want the Headline showing up so I’m going to drop it out and the large image. I’m also not going to put an image in that so I’m going to drop it out of there so now, it’s just a straight content.

Activate the Custom Template on our Landing Page

I think we’re pretty close, I’m going to save this and then I’m going to come over to the page I’ve created for this purpose which is the Landing Page. And now, I’m going to choose the custom template which it’s going to be the Landing Page Custom Template. We’ll update this.

Notice what I have here is essentially the same thing we had before. We’ve got a secondary headline, we’ve got a block of text, we’ve got unordered list, we’ve got the call to action, “DO IT NOW! click here!”. We’ve got that now and let’s see how close we are to this when we look at this page, so let’s view the page.

0 Comments… add one
0 comments… add one

Leave a Comment