Pixel Theme Studio

Shortcode - Columns in Posts or Pages

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.

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 shadow940 " 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 shadow460" 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 shadow288" 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 shadow205" 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>