[M]y favorite WordPress theme by far is Thesis. I absolutely love, love, love building websites in Thesis. The next several posts will be dedicated to Thesis tricks and how-to to make some fun responsive designs. Today I am going to show you how to build 3 column boxes in Thesis theme.

An Example of 3 Column Boxes in Thesis

You could want to highlight three areas of your website page, perhaps create a custom three column footer, or even a header. The steps below will walk you through creating three column responsive boxes in Thesis theme. But first, let’s take a look at the end results. In this website, I am creating three clickable image boxes, before the footer.

Click to See the 3 Column Boxes in Thesis

1. With Thesis Theme Loaded, Go into the Skin Editor & Add Your Boxes.

Using the drop down on the right, create four HTML Containers. In the example below, I am creating, “Front Bottom Box”, “Front Bottom1”, “Front Bottom2”, and “Front Bottom3”. Then go back and create you three Text Boxes.

Examples of HTML Containers in Thesis Theme

2. Next, Label and Nest Your HTML Containers & Text Boxes.

Click the star/asterisk and label the containers as outlined above. Then holding the key drag them into your HTML Body of your page on the left. Make sure to nest your “Front Bottom1” box etc. into your “Front Bottom Box” as seen below. Finally label and nest each of your Text Boxes as well. (My Text Boxes are labeled “Front Bottom Resource Box”, “Front Bottom Appointment Box”, and “Front Bottom Contact Us Box”.)

An Example of Nested Thesis HTML Containers

3. Edit the Container Properties & Add CSS References

Click the star/asterisk again and add into your HTML Containers a HTML class. “frontbottombox” for the “Front Bottom Box” HTML Container and “frontbottom3” for the “Front Bottom1”, “Front Bottom2” and “Front Bottom3” containers. This will allow us to add custom CSS for your newly created HTML Container boxes. NOTE: No CSS is needed for the nested Text Boxes. Click the “Save Template” button to save your template in the Skin Editor, as we are done with this section.

Example of Properties of the Thesis HTML Container

4. Add Your Images Into the Thesis Skin Content Section

Add square images into your media library that are all the same size. NOTE: They need to be a perfect square in order to effectively create a balanced 3 column. The copy the media link and insert it into the appropriate place inside each item of the “Skin Content Section”. You are just about done. If you looked at your site, you would see your three images, but they are not organized appropriately without some CSS.

Example of Editing Your Thesis Skin Content

5. Go to Thesis Custom CSS Section to Add CSS

Go to the Thesis|Custom CSS section. It’s time to add custom CSS code. NOTE: I prefer to add it in this section verse the Thesis Skin CSS tab, so that it doesn’t interfere should you do any upgrades in Thesis later on. Add the code below and then I’ll explain each piece.
.frontbottombox {
width : 100%;
}
.frontbottom3 {
width: 33.33%;
float: left;
}
@media all and (max-width: 650px) {
.frontbottom3 {
width: 100%;
float: left;
}
}
The CSS code in the .Frontbottombox makes the master box full-width. The code in the first .frontbottom3 makes it 1/3 size and stakes them left on the screen. The .frontbottom3 css in the @media make it full width on smaller smart phones so that it formats correctly.

Your Three Column Boxes in Thesis

You have now created three column boxes in Thesis for your page! I love Thesis for its boxes which allow you to create just about any style you can dream up. Next time, we’ll add some more CSS to this lesson to jazz up our boxes even more. Stay tuned!

Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

How do you use Thesis boxes? Show me some examples of your Thesis box work.