Column layouts

The UT WordPress theme, built on the Genesis Framework, gives content builders the option to easily build custom column layouts. Out of the box, Genesis columns are fully responsive and allow users to create from two to six equal width column layouts, or users can choose from  52 pre-formatted variable width column layouts.

Getting Started

From the page editor toolbar select the Insert Columns icon (shown in the image below). It can also be discovered by hovering over the various icons. Hovering over the icon also reveals a drop down menu displaying a variety of column layouts and useful tools.

We recommend using the basic equal width columns, but if you are interested in playing with varied width column layouts, these can be selected from the drop down under Advanced Layouts.

Working with Column Shortcodes

Regardless of the format you select, you will be working with shortcodes like the three column layout below. You will place your column content, images, headers, copy, etc. where indicated in the shortcode.

We recommend wrapping your columns in a columns-container which can be found in the Utilities section of the Insert Columns drop down. 

[columns-container]
[one-third-first]Place your content for the first column here.[/one-third-first]
[one-third]Place your content for the second column here.[/one-third]
[one-third]Place your content for the second column here.[/one-third]
[/columns-container]

Clearfixes and Vertical-Spacers

Because we are dealing with content that uses floats to organize your column content, we recommend adding a clearfix before and after column content to avoid the effects of floats on other page content. As the name indicates the clearfix shortcode clears the effects of a float outside of it.

[clearfix]
[columns-container class=""]Place your columns in this container.
[one-half-first]Place your content for the first column here.[/one-half-first]
[one-half]Place your content for the second column here.[/one-half]
[/columns-container]
[/clearfix]

Vertical-Spacers can be found in the same utilities menu. These are completely optional but they can be used to add a little space between columns or between column content and non-column content. Check out this demo page for examples of how clearfixes and vertical-spacers can be used with your content. 

Adding Classes

In HTML, we generally add classes to target certain parts of our code with specific CSS styles but there are other reasons to add classes.

You can see how the Genesis Framework’s column’s naming convention of “one-third-first,” “one-third,” “one-third,” could make it difficult to keep track of your column content.

Adding simple unique classes to your columns (see demo below) can help you solve some of the ambiguity and aid in keeping your content organized. This is entirely optional and is not necessary for the basic functioning of your column layout.

[clearfix]
[columns-container class="desert-scenes"]
[one-third-first class="desert-column-one"]Place your content for the first column here.[/one-third-first]
[one-third class="desert-column-two"]Place your content for the second column here.[/one-third]
[one-third class="desert-column-three"]Place your content for the second column here.[/one-third]
[/columns-container]
[/clearfix]

THREE COLUMNS NO ADDITIONAL CSS DEMO

Here is our three column layout, now with content added. Other than adding elements like headings, you’ll notice how the Genesis framework does most of the formatting work. Also, resize your browser to see how wonderfully responsive Genesis columns are!

Styling your column layout with additional CSS

You may want to make stylistic changes to the standard formatting for your Genesis columns either to make them stand out or match overall website styles. If you’d like to add a specific style to your column layout, contact the College of Fine Arts Web Team to discuss your goals. We are always here to help!

Where can I find more info?

This informative YouTube video is a few years old, but it does give a more detailed version of the workflow and process for creating columns in the Genesis Framework.