How to use In-line Columns

December 23, 2013|

In-line columns allow you to create more layouts than the theme has built-in. They are simple HTML snippets that are like a small mini-template of code that you copy & paste into your content editor (HTML text view) and then replace the sample content with your own. They are also dynamic which means they will resize based on the browser width. 

The Demo Website shows how various in-line columns are used, but it really depends on how you plan to use them. They are a little more hands on with code than simply typing into a post or page editor, but they do have their advantages. 

Here is an example 2-column in-line set:

inline-columns-span6

To get this in your page, the HTML snippet would be this:

 

<div class="row-fluid">
<div class="span6"> <h3><strong>One</strong> Half</h3>
<p>Add your own content here.</p> </div>
<div class="span6"> <h3><strong>One</strong> Half</h3>
<p>Add your own content here.</p> </div>
</div>

The demo site will offer the other column snippets:

In-Line Columns

 

Categories: Setup Tutorials for Celestial Lite

Leave a Reply