Adding columns to a page or post is done with either html snippets of code or shortcodes (if provided for the existing theme). The Zen Theme does offer this ability by copy and pasting the shortcode into the HTML editor view in your page, post, or text widget. I am providing both the shortcode method and the HTML Snippet method. If you use images that are full width for each column, I’ve applied the aligncenter style, but you can use any style you want or make.

One Column – Shortcode

Image size for this column: 940px when using the aligncenter image style. Adding an image is done with:
<img src=”path-to-image” class=”aligncenter” alt=”image description” >

<div class="cwrapper clearfix">
[one]
<h2>Your Heading Here</h2>
<p>Add your content here</p>
[/one]
</div>

One Column – HTML

<div class="cwrapper clearfix">
<div class="one">
<h2>Your Heading Here</h2>
<p>Add your content here</p>
</div>
</div>

Two Columns – Shortcode

Image size for this column set: 460px when using the aligncenter image style. Adding an image is done with:
<img src=”path-to-image” class=”aligncenter” alt=”image description” >

<div class="cwrapper clearfix">
[two] <h2>Your Heading Here</h2> <p>Add your content here</p> [/two] [two] <h2>Your Heading Here</h2> <p>Add your content here</p> [/two]
</div>

Two Columns – HTML

<div class="cwrapper clearfix">
<div class="two">
<h2>Your Heading Here</h2>
<p>Add your content here</p>
</div>
<div class="two">
<h2>Your Heading Here</h2>
<p>Add your content here</p>
</div> </div>

Three Columns – Shortcode

Image size for this column set: 288px when using the aligncenter image style. Adding an image is done with:
<img src=”path-to-image” class=”aligncenter” alt=”image description” >

<div class="cwrapper clearfix">
[three] <h2>Your Heading Here</h2> <p>Add your content here</p> [/three] [three] <h2>Your Heading Here</h2> <p>Add your content here</p> [/three] [three] <h2>Your Heading Here</h2> <p>Add your content here</p> [/three]
</div>

Three Columns – HTML

<div class="cwrapper clearfix">
<div class="three">
<h2>Your Heading Here</h2>
<p>Add your content here</p>
</div>
<div class="three">
<h2>Your Heading Here</h2>
<p>Add your content here</p>
</div>
<div class="three">
<h2>Your Heading Here</h2>
<p>Add your content here</p>
</div>
</div>

Four Columns – Shortcode

Image size for this column set: 205px when using the aligncenter image style. Adding an image is done with:
<img src=”path-to-image” class=”aligncenter” alt=”image description” >

<div class="cwrapper clearfix">
[four] <h2>Your Heading Here</h2> <p>Add your content here</p> [/four] [four] <h2>Your Heading Here</h2> <p>Add your content here</p> [/four] [four] <h2>Your Heading Here</h2> <p>Add your content here</p> [/four] [four] <h2>Your Heading Here</h2> <p>Add your content here</p> [/four]
</div>

Four Columns – HTML

<div class="cwrapper clearfix">
<div class="four">
<h2>Your Heading Here</h2>
<p>Add your content here</p>
</div>
<div class="four">  
<h2>Your Heading Here</h2>
<p>Add your content here</p>
</div>
<div class="four">  
<h2>Your Heading Here</h2>
<p>Add your content here</p>
</div>
<div class="four">
<h2>Your Heading Here</h2>
<p>Add your content here</p>
</div> </div>
By |2011-01-17T08:00:20+00:00January 17th, 2011|Blog|