Build Your Own Business Website header image

Part 11 – The Structure & Layout of the Pages

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.

Let’s take a look at what the site looks like now that we have WordPress installed and Thesis installed on the subdomain. We don’t have any of this website’s content in yet and that’s what we’re going to spend today doing.

However, before we do that, we really need to take a look at the structure and the layout of the pages that we have. That’s going to help us decide where we put various pieces of the content.

Horizontal Layout

When I talk about the structure of a site I generally suggest that when you’re looking at it, you divide it up first into the horizontal sections. In this case, the webpage has this top horizontal section of the header.

The second horizontal section I’m going to call the above the fold section. Here we’ve got this menu, this content, this sidebar stuff. And then we scroll down here and once we get below the fold we’re down into what I’m calling the content section. That includes these little logos and the some bio information and then the bulk of the actual content here. And that continues all the way down here till we get to the bottom.

And we’ve got this final horizontal section which is really the footer. So that’s what this is down here is the footer.

We’ve got four sections on this page. We got the header section, we’ve got that above-the-fold section, we have the content section and then we finally we have the footer section.

Vertical Layout

Having identified the horizontal structure of this page we then start talking about our vertical divisions. Now, the header division, the horizontal section right there, only has one vertical division. It’s one big column with this header image and that text in it. So it doesn’t have any vertical divisions in it, it’s just as wide as the page.

The above the fold section which is down here really has three vertical divisions. We’ve got this sidebar here, we’ve got our content here and we’ve got another sidebar. So we have essentially, three columns in this layout above the fold.

Then once we get down here to our main content section, it’s really one big section. There are no sidebars or anything like that. It’s the page width wide all the way down here to the bottom. So there are no vertical divisions in that section. Then we get down to our footer and that’s the same thing. We have one footer piece. We might change that but in any case, it’s just one column wide.

Existing Front Page Layout

Just imagine this is our webpage and we’ve got one horizontal division which is our content. On our header we have another horizontal division with three vertical divisions, which is our above-the-fold. We have another horizontal division, which is our content and we have the final horizontal division, which is the footer. So header, above the fold content and footer. That is the typical layout of the front page.

Existing Second Page Layout

Now let’s go to our other page. There really are only two pages on the site. Let’s take a look at it. Again, our header looks just like this. We’ve got the one horizontal division all the way across and now this above the fold is really all we have. We don’t really have anything below the fold except for the footer.

It lays out very much like the front page except it doesn’t have this main content section. We’ve got our header section, we’ve got our typical or the rest of the content section and then we have one column, another column and this column on the right is actually empty.

I don’t think there’s any reason for this column to be empty so I believe we will probably put the same content from the front page into this. It doesn’t really do any good for this to be empty.

If we really wanted it to be empty, then we would probably make this a two-column section. However, I really think that this three-column layout where the two side columns are the same on all pages and the middle content section is the unique section.

So the template for this page looks like this where you’ve got your header, you’ve got your footer and then you’ve got the main content section separated into three columns like that.

Break Up Existing Content to Fit WordPress Structure

Having said that let’s go back to our front page. This really looks like our content, the regular post or page content. And we can’t put all of that in one column and have all the rest of this text in three columns if this is part of that page content. WordPress just doesn’t work that way.

So we’re going to make this section right here, this above-the-fold content section, a separate page and we’ll use a query box to bring it into the template. Then this will be our standard content. This will be one sidebar and these will be widgets in another sidebar.

In this sidebar you’ve got the bio, essentially the bio widget, an audio guided hypnosis widget and then we’ve got a video or widget.

So this is going to go into a menu. This is going to go into a separate page that will use a query box to bring it into and these are going to go into widgets. This area probably will go into a widget too but we’re not going to deal with that today because that’s more making Thesis behave the way you want rather than simply transferring content. Finally, this will be our main content.

Add a New Page to the Site

Before we begin to change placement of the content, we need to add a new page. I’m going to call this front page above the fold. Now when we do this we’re not going to actually display the title on that page. You won’t have the title, you just have this content in it so I can just name it something that I’m going to understand.

In fact, I may as well come here and make it a child of the homepage so it doesn’t get lost once there are lots of other pages.

Now if we come over and look at our pages we have our homepage and the front page. While we’re here we’re going to get rid of the sample page. We’re going to move it to the trash or rather the bin in UK english.

Now we’ve got these three pages here and we’re going to start off by working with the main content.

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