Build Your Own Business Website header image

Setup the Content Area

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 have the header for our Agility Skin landing page set up, we have to move on to our content area. We are going to create it using the Agility Easy Responsive Column Section.

Agility Easy Responsive Columns

Come back over to the Skin Editor and back to the Video Landing Page and then choose Easy Responsive Column Section. Here we’ll enter the title and choose how we want to configure the columns and HTML.

Configure the Columns and HTML

We’ll call this Video Landing Page Content Section. It’s not going to be a single column, it will be two columns equally sized. The HTML for this I’m going to make main because this really is the main section. We’re not going to use an ID for the column wrapper but we will use a class for the column wrapper. We won’t add the class yet. Once we we start doing the styling you’ll see why I’m leaving that out.

We are going to add the area wrapper which is what makes the page width. We are not going to add an ID to the area wrapper. We’re not going to add an overlay. We’re not going to remove the page wrapper. We’re not going to remove typical padding.

Add a Section Heading

We are going to add a section heading. The section heading is this part right here and that section heading is going to sit on top of our two columns. So we are going to add that and put it outside the page wrapper so it… no it doesn’t have to be outside the page wrapper in this case. We’ll leave that inside the page wrapper. Add Fix It!

Save the template and now when we reload the page there’s “Fix It!” right up there at the top.

Add Content to the Two Columns

Then we can come down to our content and now we can start adding content to it. In the first column I’m going to add a widget area.

Add a Widget to Column 1

So we’ll come down to adding a new widget and we’ll call this Video Landing Widget Area. We’re not going to wrap the element with HTML elements. We’re not going to worry about the title so we can just leave it at p and we can just let it go exactly like that. We’re going to drag that into our first column. So column one has the widget area.

Set Up Content Area in Column 2

Column 2 is going to have our content and in order for us to put the page content in there we need to use the WP loop. We’ll scroll through here until we find the original WP loop and we’re going to drag that into column two. Then inside the WP Loop we need to add the content post box. We’ll find the content post box, page post box. That’s why we use the page postmarks and we’ll drop that in a WP loop.

Let’s open up Page Post Box. In this case we’re not using a featured image so we can drop that out. We’re going to use headline and content. We’re not using the bottom social sharing links so we can drag that down to the tray also. So all we’ve got is our headline in our content.

Add a Call to Action Button

And then the other thing we’re going to do is add a call to action button. Let’s scroll down to the Agility Call to Action. We’ll call this 10b Video Landing Call to Action. Now we’re going to take that and drop that not inside the loop but outside the loop. We’re going to drag and drop it down below the loop.

Now we’ve got our content and we’ve got our call to action and we’ve got this widget area. I’m going to save the template. Before we take a look at that let’s address the layout. I don’t want this to be a full-width layout here.

Adjust Widths to Accommodate Content

Based on her design she’s using the entire page. We don’t we don’t want this landing page to take up the entire page like that so we’re going to need a little bit of custom CSS to make sure that this doesn’t go together like that.

So the first thing for us to do is to add a body class in this template. Come over to the template options menu which is this little icon right here. And we’re go to our body class, that’s the first one. The template body class in this case is video-landing, so that’s our body class.

I’m going to simplify this a little bit and instead of using CSS I’m going to switch her design back to a typical configuration. Go to Thesis and skin design. For the typical desktop width we’re going to take it to 1140. Typical content width will be half. Typical sidebar width we’ll say half and this is a more typical layout without having to write any custom CSS.

Now that we’ve done that you can see that half is not enough space for this. Let’s fix that. Come back over to skin content and I’m going to come down to Video Landing Page Header. Instead of two columns equally sized I’m going to say Two columns, one-third – two-thirds.

Let’s make sure we did not lose our menu, we did not. Let’s reload this and now there’s enough room. We’ve got a place now for the video in the widget area and places for the all the rest of content here.

Next we are going to set up the Call to Action Link in this landing page.

0 Comments… add one
0 comments… add one

Leave a Comment