Build Your Own Business Website header image

Customizing Templates in the Carta Skin for Thesis – Part 5 – Create a 3 Column Template 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.

Now that you’ve seen how to make the Front Page go from 1 column wide to 2 columns wide the next thing we’re going to do is create a 3 column template in the Carta Skin for Thesis 2.

Column Layout

The way that it’ll be laid out is to have one column on the left, one column on the right and a big column in the middle. We’re just going to do that in a custom template as well. Let’s go back over to our Skin Editor and we’ll create a new custom template.

Create New Custom Template

We’ll call it 3 Column Template. Create the template. As you can see we already have this template that we called 3 Column Header Page but we’ll call this 3 Column Template. And into that template we will paste the regular Page template which is a two-column configuration.

Create Structure for the 3 Column Layout

We don’t actually have a wrapper for the 3 column layout that we want to use. Instead what we are going to do is create that structure ourselves. We’re going to create a new wrapper and that wrapper is going to be called 3 Column Content Area. And it’s going to be three columns. One quarter – one-half – and one quarter.

Then we’re going to create our 3 columns and really we could just about use our Header Columns for this but we‘re not going to. Instead we are just going to create 3 new columns. So, 3 Column Left Sidebar Column and that’s going to be one quarter width and then we’re just going to say the same thing. Create another one of those columns and we’ll call it 3 Column Right Sidebar Column. It’ll be also one quarter width. Then we’ll have a 3 Column Content Column we are going to call it Middle Content Column and it’s going to be half of the width.

Add Widget Areas

Let’s use our main sidebar for the right sidebar so we are going to create a secondary sidebar or widget area I mean. Come down here to widgets and add the box and we’ll call it Secondary Widget Area. And then we will shift+drag the Secondary Widget Area into the Left Sidebar, shift+drag the Right Sidebar into the 3 Column Content, the Middle into the 3 Column Content, the Left into the 3 Column Content and then the 3 Column Content into Page.

We’ll open up the Sidebar Column and we’re going to shift+drag the Main Widget Area into the Right Sidebar. Open up the Content Column and we’re going to shift+drag WP Loop and drop it into the Middle Content. Then we’re going to shift+drag Main Content out.

Actually, before we do that I think this has an ID of main_content and I want to use that ID. So, we’ll shift+drag that out here then we’ll come into our 3 Column Content Area and add that ID main_content. And, and now we can use that main content background area to style this section here.

Assign the Template to a Page

Now, as this is a custom template we need to assign this template to something. Let’s assign it to the About page. So, we come down here and we say 3 Column Template to our About page. Let’s view that page and we got a sidebar here, we got our main content and we’ve got another sidebar. Now, obviously our sidebar content isn’t designed to fit in a narrow sidebar especially this map and in that heading. So, let’s go over to the widgets and fix that.

Adjust Sidebar Content Sizes

First off, we’re going to get rid of style-1 here that will help. Then our Secondary widget area, we’re going to just drag it in there and then we’ll drag our search into here. Let’s just go into our map and change it so that the width is 231 pixels. Save the map and then we’ll refresh this. Now we have a sidebar here, we have our main content down here in the middle and we have our sidebar over there.

Check Responsiveness

Then if we shrink it down you can see it drops into two columns here for a moment with the right column off and then it keeps on coming and then it drops into a single column and stays that way.

You’ll notice though that what happens is that the right hand sidebar shows up before the content and you probably don’t want that to happen especially in a mobile device because this area is of secondary importance. So, instead of this we are going to use that reverse column wrapper.

Using a Reverse Column Wrapper

We come back over here to our Skin Editor and let’s open up the 3 Column Template. Now, the way the reverse column wrapper works is that on the desktop view it reverses the order of the 2 columns that are contained inside of it.

Change the Order of the Columns

So, what we have to do is re-configure our 3 Column Content Area first. Now what we want is, we want to set this up the way it works in a mobile device. So, we want to set it up as Three columns with one half – one quarter – and one quarter and then we’re going to take the left column and drop it there.

Review Responsiveness

Now, if we save this template and come over and look at it, it lays out like this with content and then a sidebar and sidebar. And if we reduce it down, the content is at the top and the sidebar content is below. But in this case we still want this view though where the sidebar is on the left.

And so, in order for us to accomplish that now what we’ll use the reverse Column Wrapper. We’ll come down here and we go down to Carta Column Reverse Wrapper and you know we don’t really need to give it a name because it only does one job.

Set the Views for Each Device

We’ll shift+drag it into our 3 Column Content Area so then what you do here is you set this the way you want it to display in the desktop view. Three columns, one quarter – one half – one quarter, that’s the way you want it to display in the desktop view .

Then drag the Left Sidebar Column and the Middle Column into the reverse wrapper and place them in the way you want them to display in the mobile view. So, you want the middle content first and the left sidebar second.

What this does is in html terms it makes the middle content show up first but in the desktop it reverses the direction of these 2 columns so that this one shows up first. So, the way it works is it’s set this the way you want it to display on your desktop view, put the reverse wrapper in and then put the 2 columns in, in reverse order from the way you want them to display in the desktop view which is the way you want it to display on the phone, okay?

Let’s save that template. Come back over here and refresh the template and there you have it. You’ve got the one column on the left, the content in the middle and this one out right. But if you squeeze it in you end up with the content column on the top and then the sidebars below that which is the way we want it in a mobile device or on the smaller screen. Okay, so that’s the way you make a 3 column template in Carta.

0 Comments… add one
0 comments… add one

Leave a Comment