Build Your Own Business Website header image

Part 15 – Breakdown the Layout of the Page

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.

Just to refresh your memory, this is the static HTML site that we are converting into WordPress and Thesis. It benefits us to have a good understanding of the layout that we are attempting to create and the tools that we’re going to use to facilitate that layout.

We’re going to start off by taking a look at the front page layout. I have a I have a handout here in the handout section on your dashboard entitled hypnoresolvelayout.pdf. That’s what this is here.

The pdf is essentially a visual aid for understanding what I’m talking about here so I encourage you to download that. If you’re watching this after the session this is going to be on the webpage itself so you can download it from the main case study page.

Two Page Styles for Templates

We have essentially two page styles. We’ve got one style on the front page. Let’s take a look at that. This is the front page and it has a fairly complicated layout. Then we have our clinic locations page which has a very simple layout relative to the other. Those are really the two types of template styles we’ll be creating here today.

When you think about the layout of a page, I think it makes the most sense to divide the layout of a page into horizontal elements and then into vertical elements inside of each of those horizontal elements.

Front Page Layout

I almost always start off with this question of “what are my main horizontal elements?” On the front page we have a handful of main horizontal elements. In fact, I’ll give you the big overview here first. We’ve got one, two, three, four big horizontal elements.

We have the header, which is really just this header section. We have this featured area, which is that section that was above the fold like we talked about earlier. We have the content area which is where all the rest of the content is and then we have this footer area. So those are our main areas on the front page.

Header Area

Let’s start by taking a look at just the top section, our header area. So that header area is one big horizontal section and it only has one column in it. There’s no there’s no vertical division inside the header area. The tool that we’re going to use to put this header together is the Thesis header image.

Featured Content Area

When we come down to this featured content area the horizontal division has really three vertical divisions. It’s got the left-hand column which has the menu in it. It has the right hand column which has the widgets that we’ve created.

Then it has the center column which has the big title “help solve your problems with hypnotherapy”. Then there’s this page content that we created earlier which was that front page section and we’re going to use a query box for that.

The left-hand column is going to be just a word press menu. The right-hand column is going to be that series of widgets, so it’s going to be one big widget area. The top part is going to be the post title out of the standard Thesis post box and then this is just going to be a query box with just the content in it. So it has these three vertical divisions and we’ll be using those tools.

Content Area

Let’s come back down here to the content area. This area doesn’t have any vertical divisions in it. It’s just the full width all the way across. In the first part of that content area we’re going to use a widget area and then the second part is going to be the page content or the post box. So that’s all in one column.

Footer Area

Then we come down to this footer section which is our last section and it also doesn’t have any vertical divisions. It just has really what I would think of as two horizontal divisions into which we’re going to add a widget area and then the Thesis attribution.

Let’s come back and again look at that in the big view, height. The header horizontal division has no vertical divisions, the feature area has three vertical divisions, the content area has no vertical divisions and the footer area has no vertical division. So it’s one column, one column, one column up at the top and then three columns here in this section.

Typical Page Layout

The typical page is a bit different. It doesn’t have that one column content section it. So the typical page has a header just like the front page and its content area is going to have three columns. It will have the menu on this side, it’ll have content from that page on this side and it’ll have the widget area on this side. Then it’s going to have that default footer.

This little illustration is missing one thing here. I’m going to create this little bit of content right here with a widget area. This section here is going to be a widget area, then the page titles right there and then the page content is down below it. So that is the layout that we’re looking for on the typical page.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment