Setting up a nested group of columns is as simple as copy and pasting some html code into your article editor’s html view. The best part here is that I’ve already provided you with the code snippets (see below) for you to copy and paste into your page. This is not part of the functionality of this template because most people probably won’t use these but they are there and available should you decide to use it. The bottom modules in the following positions gives you this type of layout already except they always exist at the bottom of your page content:

  • User 1 + User 2 + User 3 (gives you 3 modules in column format)
  • User 4 + User 5 + User 6 + User 7 (gives you 4 modules in column format)

The nested columns works similar to the modules with the difference being the allowance that you can use this layout within your page if you don’t want them in the module positions at the bottom. Once you copy and paste the code into your page, all you have to do is replace the sample code with your own content, whether it’s text only or combination of images with text (see the front page of the demo site for this template) for an example. For the actual snippets of columns, the demo site also has samples which have an added <h3> heading: View Demo

Setup a 4 Column Snippet

To give you a starting point, this is what the code looks like for a 4-column snippet:

<div class="columnwrapper">
<div class="four">
<h2>Furniture</h2>
<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>Fixtures</h2>
<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>Decor Elements</h2>
<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>Ambience</h2>
<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>

The code above is based on what you see from the screenshot and without a drop cap.

Setup a 3-Column Snippet

this is what the code looks like for a 3-column snippet:

<div class="columnwrapper">
<div class="three">
<h2>Furniture</h2>
<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>Fixtures</h2>
<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>Ambience</h2>
<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 2-Column Snippet

this is what the code looks like for a 2-column snippet:

<div class="columnwrapper">
<div class="two">
<h2>Furniture</h2>
<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>Ambience</h2>
<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>

Keep a Back-up of This Code

Most users of this template may not even use the snippets here, but for those who plan to take advantage of them, I recommend you copy & paste each one into notepad as a text file (or even as html) and save it for future use.

By |2010-09-25T03:34:33+00:00September 25th, 2010|Blog|