Using nested content columns for articles

Nested columns are columns that you can add within your article page rather than using modules. There may be times when you want columns within your page but the template being used does not have modules in that area or in a relative location closest to that area. So the usage of HTML Snippets is a nice quick way of doing columns, simply by pasting a precoded html template into your page. The way you do this is to copy the snippet of code and change your content editor to source mode, then paste it into that. Once done, you change the headings and content to your own.

Setting Up Columns

This template offers 2, 3, and 4 column snippets, but for the purpose of this setup tutorial, I will post the code for you to copy and save on your computer. Here is an example of a 4-column snippet where I added a drop cap for each with a number (also included in this template as a typography style). Ultimately, this is what the end result will be like:

4columns

 

IMPORTANT: Make sure that the div structure is kept as you see it in the code snippets below, but make sure that the last column has the “end” style added as you see in red in the code snippet below.

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 class="clearboth"></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 class="clearboth"></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 class="clearboth"></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.

What Can you Use this Code For?

To give you an example of what you can do with these snippets, you can check out the Online Demo for this template.

By | 2010-09-25T03:32:14+00:00 September 25th, 2010|Blog|0 Comments

About the Author:

Leave a Reply