Shortcodes – Columns

Adding columns to a page or post is done with either html snippets of code or shortcodes (if provided for the existing theme). The Visionary 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: 946px when using the aligncenter image style which adds 7px to each side. 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: 446px when using the aligncenter image style which adds 7px to each side. 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: 280px when using the aligncenter image style which adds 7px to each side. 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: 196px when using the aligncenter image style which adds 7px to each side. 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 | 2010-11-01T20:41:20+00:00 November 1st, 2010|Blog|0 Comments

About the Author:

Leave a Reply