Using the Layout Constructor to Build and Tweak a 1, 2, or 3-column Design

With an out-of-the-box Thesis installation, you can select a 1, 2, or 3-column layout, and then you can take that a step further by modifying your resulting column widths. You can do all this with the Thesis layout constructor, a handy tool that is conveniently located on the Design Options panel, which is accessible from the Design tab on your WordPress dashboard.

To get started, you should choose either a 1, 2, or 3-column layout from the Columns and Widths section of the Design Options panel. After you’ve selected a layout for your site, you may also wish to tinker with the various widths of your columns. For example, in the image at right, I’ve chosen a 2-column layout. On top of that, I’ve also tweaked my layout so that the content column is 500px wide and the sidebar is 260px wide.

If you like, you can refer to the sections below for further details on the available layout options. Be sure to play around with the options for a bit, though, because the layout constructor is best understood through firsthand experience!

3-column Layout Information

By default, Thesis sports a 3-column layout with a content column that is 480 pixels wide. If you like, you can expand the width of the content column up to 560 pixels, which is wide enough to accommodate large images while still maintaining a typographical scale that falls within the ideal range for easy reading.

It’s worth noting here that you cannot change the width of the sidebars in the 3-column layout (at least not directly). In order to ensure that the theme renders properly across the most popular screen resolutions, I’ve constrained the 3-column layout to a maximum width of 959 pixels (not including the padded #page div). As a result, when you attempt to select a content width for your 3-column layout, you’ll notice that the associated sidebar width is given in parentheses.

Keep the sidebar width in mind when constructing your sidebars—if you place elements in them that are wider than the sidebars themselves, your site will end up looking wonky in Internet Explorer 6 and 7.

2-column Layout Information

For a closer look at the 2-column Thesis layout, which happens to be my favorite setup for the theme, click here or check out the thumbnail to the right. You can select a content column width between 480 and 600 pixels, and you can also select a sidebar width from a range of 160 to 300 pixels. The 2-column Thesis is a solid, dynamic little layout that varies in total width from 697 to 957 pixels (not including the padded #page div).

For most sites, 2-column layouts are ideal for a couple of key reasons:

• There is a very obvious visual distinction between primary and secondary content. The Web is all about snap decisions by users, and anything you can do to help them focus their attention faster is a huge bonus.
• Real estate in the sidebar is somewhat limited, so you are forced to make intelligent decisions about the way you use it. Typically, this type of decision-making process results in leaner sites that are easier for users to navigate, simply because there ends up being less visual clutter.

A byproduct of any 3-column layout is an increase in visual density (above the fold, at least), and because of this, you should only opt for a 3-column layout if your site absolutely demands it. Of course, there’s some room for “artistic interpretation” here, but for the most sites, this is a pretty good rule of thumb.

For example, when Brian and I originally came up with a layout for Copyblogger back in the day, we chose a 2-column layout that placed a heavy emphasis on both content and subscriptions. The reasoning behind this was simple—Brian was just starting out, and his content was the most valuable vehicle he had for growing the site and acquiring (and catering to) an audience.

Subscriptions are a great way to facilitate audience growth, and knowing this, Brian smartly demanded that I place a set of very obvious subscription options above the fold in the sidebar.

As you probably know, the site grew like crazy, and over time, Brian’s demand increased to the point that he had to accommodate a set of 125×125 pixel ads. This doesn’t sound like a problem, but there was a catch—these ads had to be mostly visible above the fold.

Accommodating these ads would’ve meant moving the subscription options to a less desirable location, something Brian obviously wasn’t willing to do. The answer? A new 3-column layout that could showcase both the subscription options and the new ad units above the fold, all while maintaining a laser focus on great content.

The moral of the story is simply that a 3-column design should be the result of a concrete decision making process—don’t do it just to be doing it, ya know?

1-column Layout Information

The 1-column Thesis layout is ideal for any site where you want a distinct focus on content to define the user experience (like a photographer’s site, perhaps). You can choose a content width between 540 and 700 pixels, and all 1-column layouts will render perfectly on monitor resolutions as low as 800×600. Also, the total width of the available 1-column layouts varies from 562 to 722 pixels (not including the padded #page div).

In version 1.1, the multimedia box is not compatible with the 1-column layout, but a forthcoming version will feature a slew of options for multimedia box integration.

Optimal Header Image Widths by Layout

For all 3-column Thesis layouts, the optimal header image width is 959px.

For 1 and 2-column layouts, the optimal header image width varies depending on the widths of your content and sidebars. There are a lot of possible combinations, so please refer to the tables below to determine the optimal size for your header image.