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.

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.

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”.)

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.

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.

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!

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

The post How to Build Responsive 3 Column Boxes in Thesis first appeared on DFW Website Designers - 817.247.6003.