Build Your Own Business Website header image

Customizing Templates in the Carta Skin for Thesis – Part 4 – Make the Front Page 2 Columns in Carta

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.

So far you’ve seen how to create a 3 Column Header and a 2 Column Feature Box in the Carta Skin for Thesis 2 and now I’m going to show you how to make the Front Page 2 Columns wide instead of 1 Column wide.

Review Existing Configuration in Skin Editor

The way we do that, first is to come over and take a look at the existing configuration in the Skin Editor. Then come over to our Front Page and you can see we’ve got our Page and inside that we have a Feature Box and a box called Full Width Content which is a column wrapper that says it’s taking a single column. Then the column inside that wrapper is the Main Full Width Content and it’s set to Full width.

Create a Custom Template for New Layout

So, the first thing that we’re going to do is create a custom template to save this. We’re going to call this front page single column template. Then we’ll copy the Front Page template to it so that we have a copy that we can come back to.

Copy Existing Boxes and Widgets from an Existing Template

I think it would be instructive to look at a regular page first. Because we are essentially building it like the regular page. Inside of this page container, the regular page has two columns. A Carta Column Wrapper called Main Content that’s set up as 2 columns and it has a Content Column that’s set up as two thirds, and it has a sidebar column that is set up as one third.

Rearrange the New Template

What we’re going to do is find these boxes that are over here in the library and move them into that template. We don’t need to build new boxes because those boxes, the two-column layout already exists. So, what we will do here is come over and look for those things. We are looking for the Main Content and that’s our column wrapper and then we are going to look for our Content Column and then our Sidebar Column.

Actually while we are at it we may as well grab that sidebar widget area, so the Main Widget Area. Then we’ll shift+drag the Main Widget Area into the Sidebar Column. Shift+drag Sidebar into Main Content and then Content Column into the Main Content. Then Main Content down into Page and then Feature Box up above that and then we’ll open up Main Content, Full Width Content.

Now what we’re going to do is we’re just going to take the Full Width Page Post Box and we’re going to drop it into the Content Column. Actually, what we are going to do is take the WP Loop and drop it into the Content Column. And now our Full Width Content is empty so we’ll just going to shift+drag that and drop it up here in to the Library. Don’t drop it into the trash because that will just delete it from everything.

And then we should have WP Loop, Full Page Post Box, all the rest of that stuff. And there shouldn’t be anything else we need to do. Let’s save our template here, come back over and refresh the template. And there we have it. Now, we have our 2 Column Feature Box and our 2 Column Content and they matched perfectly. If we look at them in a smaller view they stack nicely. Okay, perfect.

0 Comments… add one
0 comments… add one

Leave a Comment