To help enhance your layout options, this theme includes a few HTML snippets of code to give you “nested” page layouts:

  • 2 Columns – Equal width columns
  • 3 Columns
  • 4 Columns

You can see the columns in action here on the theme’s online demo website.

IMPORTANT: Every time you insert any of the groups of columns (see previously) whether 2, 3, or 4, the last one must have the “end” style class added, see below:

<div class="four end">
<h2>With Number Drop Cap</h2>
<p><span class="dropcap">1</span>This solution can be used to provide a visitor with a numbered
column which can be used for a variety of ways that requires a number or even a letter for a
drop cap.</p>
</div>

This will remove a margin from the right side of the last column and will help line up the last column as well.

Your columns must be inside a container called “columnwrapper” to hold them in place; you will notice this in the code snippets you see below.

Setup 2-Columns

To setup a 2 columns, copy and paste the following code into your Content Editor within your page or post. The h2 is the main heading and the h3 is for a sub heading which is displayed on the theme’s online demo. You don’t have to use headings or even both so it’s your choice how you setup your nested columns:

<div class="columnwrapper">
<div class="two">
<h2>Heading</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Aliquam nisi orci, porta et volutpat quis, pellent esque semper sapien. Phasellus nibh velit,
semper eu sagittis et, rhoncus a lectus. Ut lobortis, metus sit amet aliquam.</p
</div>
<div class="two end">
<h2>Heading</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Aliquam nisi orci, porta et volutpat quis, pellent esque semper sapien. Phasellus nibh velit, semper
eu sagittis et, rhoncus a lectus. Ut lobortis, metus sit amet aliquam.</p>
</div>
</div>

Setup 3-Columns

To setup a 3 columns, copy and paste the following code into your Content Editor within your page or post. The h2 is the main heading and the h3 is for a sub heading which is displayed on the theme’s online demo. You don’t have to use headings or even both so it’s your choice how you setup your nested columns:

<div class="columnwrapper">
<div class="three">
<h2>Heading</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Aliquam nisi orci, porta et volutpat quis, pellent esque semper sapien. Phasellus nibh velit,
semper eu sagittis et, rhoncus a lectus. Ut lobortis, metus sit amet aliquam.</p>
</div>
<div class="three">
<h2>Heading</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Aliquam nisi orci, porta et volutpat quis, pellent esque semper sapien. Phasellus nibh velit,
semper eu sagittis et, rhoncus a lectus. Ut lobortis, metus sit amet aliquam.</p>
</div>
<div class="three end">
<h2>Heading</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Aliquam nisi orci, porta et volutpat quis, pellent esque semper sapien. Phasellus nibh velit,
semper eu sagittis et, rhoncus a lectus. Ut lobortis, metus sit amet aliquam.</p>
</div>
</div>

Setup 4-Columns

To setup a 4 columns, copy and paste the following code into your Content Editor within your page or post. The h2 is the main heading and the h3 is for a sub heading which is displayed on the theme’s online demo. You don’t have to use headings or even both so it’s your choice how you setup your nested columns:

<div class="columnwrapper">
<div class="four">
<h2>Heading</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Aliquam nisi orci, porta et volutpat quis, pellent esque semper sapien. Phasellus
nibh velit, semper eu sagittis et, rhoncus a lectus. Ut lobortis, metus sit amet aliquam.</p>
</div><div class="four">
<h2>Heading</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Aliquam nisi orci, porta et volutpat quis, pellent esque semper sapien. Phasellus
nibh velit, semper eu sagittis et, rhoncus a lectus. Ut lobortis, metus sit amet aliquam.</p>
</div>
<div class="four">
<h2>Heading</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Aliquam nisi orci, porta et volutpat quis, pellent esque semper sapien. Phasellus
nibh velit, semper eu sagittis et, rhoncus a lectus. Ut lobortis, metus sit amet aliquam.</p>
</div>
<div class="four end">
<h2>Heading</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Aliquam nisi orci, porta et volutpat quis, pellent esque semper sapien. Phasellus
nibh velit, semper eu sagittis et, rhoncus a lectus. Ut lobortis, metus sit amet aliquam.</p>
</div>
</div>

Setup a Column with a Drop Cap Like the Online Demo

This HTML Snippet gives you a single column so depending on if you are inserting a 2, 3, or 4 column layout in your page or post, you will need to change the container highlighted below to either:

2-columns = two
3-columns = three
4-columns = four

<div class="four">
<h2>With Number Drop Cap</h2>
<p><span class="dropcap">1</span>This solution can be used to provide a visitor with a numbered
column which can be used for a variety of ways that requires a number or even a letter for a
drop cap.</p>
</div>

Setup a Column with an Image Like the Online Demo

This HTML Snippet gives you a single column with an image, just like the online demo for this theme:

<div class="four end">  <h2>With Image</h2>  <p><img class="centered" src="link-to-your-image.jpg" 
alt=""><br> This solution lets you add an image to your column at the top or bottom
By |2010-09-25T01:37:39+00:00September 25th, 2010|Blog|