Content Columns

Our theme features layouts with columns, which you can use in any page or article. To insert columns you need to switch into the HTML viewer when editing a page.

When you switch the the HTML viewer you should see a code representation of your content (or nothing if you're just starting). To add columns, you'll have to add some special HTML tags and write your content within them.

Here's a basic example of how a three columns layout looks like:

<div class="krown-column-row">
   <div class="krown-column-container span4 first">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </div>  
   <div class="krown-column-container span4">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </div>   
   <div class="krown-column-container span4">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </div>
</div>

If you insert the code above and save your page, you should see a simple three columns layout. Now here's the code breakdown:

<div class="krown-column-row"> .... </div>

This represents a row. Each row should start with this tag and inside it you will put your column tags. Do not forget to close any <div> that you open!

<div class="krown-column-container span4 first"> .... </div>

This is an inner column which needs to be placed inside a row. The span4 class represents the actual width. Possible values are:

• span12 - full width (1/1)
• span8 - two thirds (2/3)
• span6 - two halves (1/2)
• span4 - one third (1/3)
• span3 - one quarter (1/4)

The first class needs to be written in columns that are first in their row. Make sure that you put full layouts in each row, not more (for example 1/2 + 1/2 or 1/3 + 2/3 or 1/3 + 1/3 + 1/3, etc.)

After you have your structure defined, you can go back to the normal edit and edit your content with the pretty viewer. You should go back to the HTML view from time to time (when editing) in order to make sure that the columns structure remains intact.

There's one last tip here, if you want to have a certain text alignment in the entire column. The text is left aligned by default, but you can change the alignment of an entire column if you add one of the following classes to that column: align-center or align-right. This is how a centered column which is first in it's row should look like:

<div class="krown-column-container span4 first align-center"> .... </div>

Good luck!