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.

Lesson 5 – Part 1 – Layout the Front Page Template

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

Good morning everybody and welcome to Lesson 5 of our How to Create a Responsive Skin for Thesis 2. I’d like to take a moment to remind everybody that this is not a beginner’s class and this is not one of those classes where you learn how to do something without using code.

This is an intermediate class and today in fact, is going to be a relatively technical day because we’re going to spend most of our time talking about how to create custom boxes in Thesis 2 that can be attached to the skins. But the main subject for today is creating that front page template so that’s what we’re going to go ahead and get start with here this morning.

Review the Finished Template Layout

Just to remind you, this is what that front page template is going to look like when we’re finished. It’ll have the same header as what we’re using now, it’ll have the slider in the middle, it will have the single content area, it will have these 3 widget areas and that same contrast to the standard page which is this and which we have pretty much completed. This is the site, this is the site that we’ll be working on.

Changes to be Made to the Current Layout

Right now, the front page looks just like all the rest of the pages but that’s about to change. It’s obviously what we’re going to have to do is create some kind of a container for this slider, take that sidebar that was in the content area out and add some new widgets down here below the content. Then we’ll be customizing this content area so that it takes up the full width rather than just taking up part of the width.

Create the Front Page Template

Let’s just dive right into this and click on over here to the front page. The very first thing we’re going to do is create a front page template. Somebody noticed that sometimes I’ve been working on the front page rather than on the Page page and that’s just an accident on my part, that wasn’t really my intention. My intention in lessons 1 through 4 was to create the standard page template.

Now, from that page template, we’re going to create the front page and sometimes, I ended up working in the front page inadvertently. But what we’re going to do now is just erase all the work I did in the front page by selecting the front page then coming over and copying from a template. We’re going to copy from the page into this which is just going to clean up this front page, get rid of all of the changes I inadvertently placed in there and make the front page look exactly like the page page.

Adding a Feature Box Area

Now that we’re there, we’re going to start off by adding a feature box area which is going to sit directly below the header area and it’s going to have the same kind of HTML layout so it’s going to have a box called Feature Box Area, add that box then we’ll have another container box called Feature Box Page. In the Feature Box Area, we’ll give that an ID of feature_box_area, we’re not going to give it a class.

Feature Box Page

In Feature Box Page, we’ll do the same thing we’ve done with all the rest of these which is give it a class of page_wrapper then we’ll drag and drop Page into Page Area then Page Area into Body and down below the Header Area. Now, we’ve got our HTML structure that we’ll use to add our content.

The other thing we want to do is continue to emulate the way this lays out. Emulate the HTML that we’re using elsewhere and just like we have columns here inside of Header Area Page, we’re going to do the equivalent of that here.

Now, it’s not going to be a column package, it’s just going to be a content container but we’ll go ahead and do that container called Feature Box and this container, we’re going to give the class of full_width.

We’ll be using this class and a couple of other instances here as we work our way through this series. We’re going to give it a class of full_width and we’ll drag it into Feature Box Page. That’s one way that you can handle this.

Now to put that slider in here, we’re just going to use a slider like Meteor Slides that can take a widget so you could create a widget area for this feature box then you can use a slide widget in order to make that work.

We’re not going to do that here because I want to teach how to create a box but that is one of the ways you could handle this. You could just take a widget box, add it to that and use that system for adding your slider but it’s inside of this Feature Box that we’re going to add our Orbit Content Slider as we work our way through the class. That’s the first part of the HTML system.

Create a Front Content Column

The next thing we want to do is take our content area and get rid of the sidebar. What we’re really going to do is get rid of content columns and the sidebar because our content columns, remember has this class of columns_321, that’s not really going to work for us very well here.

We’re going to create a front content container so that’ll be Front Content Column and let’s give it a class of columns_1. We’ll follow the exact same system that we’ve been following all along so that would be columns_1 for this column container. We’ll shift drag that into our Content Area Page then we’re going to shift drag Main Content out of the Front Content Column and shift drag Content Columns up here into the toolbox and drop it.

Let’s save our template and take a look at our current template. Now you can see all the colors that were in the background are gone and the content box is gone. Then we’ve got a full width thing here. It’s not finished but that’s what’s going on here.

Add Attention Boxes

The next thing we want to do is add our attention boxes, that’s what I’m calling these things. It’s 3 widget areas but it’s attention boxes and we are now going to use the fairly familiar system that is going to go inside the Front Content Column under the Main Content.

We’re going to create a container, we’ll call it Attention Boxes then we’re going to give that a class of columns_3 because each one of those things is going to be 1/3 wide so columns_3. Then we’ll create those 3 columns so Front Widget Column 1, add the box, another container, Column 2, add the box, another container, Column 3, add the box.

Each of these is going to receive the class of third, following what we’ve been doing all along so each have the same class of third. We may as well just create our widgets here really quickly so we’ll call it Home Widget 1.

I’m calling it “Home” here not for your benefit but for the users benefit. The user is probably not going to really wrestle very much with the concept of front page and home page so when they look at their widgets panel, I want them to understand what these widget areas are. So we’re just going to call them Home Widgets, so Home Widget 1 then Home Widget 2 and Home Widget 3 and these widget areas are going to get the class of front_widgets.

That way we can reference them separately and style them separately. Then we’ll just shift drag Home Widget 3 into Footer Widgets Columns 3, 2 to 2, 1 to 1 and Footer Widget Column 3 into Attention Boxes, 2 into Attention Boxes and 1 into Attention Boxes. We’ll drag Attention Boxes over to there, under the Front Content Column not inside of it so we’ll drag that down and save that template.

Create the Packages for the Columns

Now, if we come take a look at our template now, we’ve got these widgets that stack like this because of course, we haven’t created our columns widget yet. We’re going to create a couple of packages for that. Come over here to CSS and the first package we’re going to create is our one-column package and we’ll just select the single element style rather than a columns package for that.

Single Elements Style, add the package and we’ll call it Columns 1 to keep our system going and that’s what the selector will be, is .columns_1. Because this is not a column package, we need to choose our box sizing so we’re going to choose border box here so that they behave just like the columns do.

The content box sizing will add padding and margin to the size whereas, the border box sizing will take the whole size then subtract padding and margin from it so we’re going to use the border box sizing.

Set Padding, Typography and Width

Under padding, we’re going to use our variable for right padding of 100 here. We want to give ourselves a bit extra padding on the sides so we’re going to say, $p100, that’s our variable that we created last week for left and right padding.

For typography, that is about 980 pixels wide although that doesn’t really matter here, we’re not going to bother with that here, we’re going to do that in our post box.

Our width, we’re going to say is column 100% or $c100, that’s the variable that we created last week for the width of the column then we just need to add the reference to it.

Create Columns Packages

Now if we come over and take a look at this, we’ve got a bit more padding here but otherwise, it looks pretty much the same as you would expect. We are going to now create our columns 3 which should move our widgets into place properly.

We’re going to choose a columns package, call it Columns 3, the reference will be columns_3, the CSS selector will be .columns_3. The option will be 3 columns, column 1 is going to have a selector of .third in fact, all of them will have that.

For the column width, we’ll use again our variable which was $c33 for 33%, they’ll all have that width, they’ll all be left aligned, they’ll all have right padding of a half of our padding in it which would be p50 so $p50.

If you just watched the footer videos, this is going to look extremely familiar. Column 2 alignment will be left, column 2 padding, we’ll do the same, $p50 and $p50 and column 1 left and right padding, column 1 alignment and I think that’s pretty much it for that.

Let’s see how it turned out. We’ve got our 3 widget areas and that’s working fine though I have a suspicion I miss something in Columns 1. I did, I called that Columns 1 but I called the other thing Full Width. That’s right, sorry about that.

Because this is not a columns package, we don’t need to designate the column number here but we do need to get the same CSS selector. Since I want to use that Full Width as the selector, I’m going to say, save now and I think we’re going to see it slightly different here. It’s hard to say that it’s any different but let’s just make sure we actually made it different.

Front Content Column, okay I did say Columns 1. Let’s keep this up because what I really want to do is just move WP Loop into this. There, then take my Main Content and move it up here so my Front Content Column now has WP Loop in it and that is Columns 1 but I’m going to say Full Width instead so Full Width there.

Our Feature Box should have Full Width and if we come over to our CSS, our Columns 1 should have Full Width. Now, everything should be synced up. Okay, it is. That’s the layout of the front page and that’s the end of the really easy stuff.

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