Column Layouts

The UT WordPress theme gives content builders the ability to add from two to six equal width columns or choose from 52 pre-formatted variable width column page layouts, all of which are responsive. Alternately, the Team or Category Grid plugin can be enabled. Remember that data tables should never be used for layout.

Getting Started

Place your cursor in the Body field where you want the layout to begin. In the editor toolbar, select the Insert Columns icon (shown in the image below) where a drop-down will reveal a menu with a variety of column layouts and tools.

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

Column Short Code

After you’ve selected the layout you want, code (called “shortcode”) will be added to the Body field indicating where to place your content for each column. You can insert images, headers, copy, etc. into each column.

Responsive Layout Issues

The output generated after you save uses floats to organize your column content. In order to mitigate content wrapping issues in different window sizes with responsive layouts, we recommend adding column containers and clear fix shortcode (see below).

Column Container

In the Utilities section of the Insert Columns drop-down, you’ll find a columns-container to wrap your columns.

Clear Fix

You should add a clearfix before and after your column content so the floats don’t affect other page content. As the name indicates, the clearfix shortcode clears the effects of a float outside of it.

Example

[clearfix]
[columns-container]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

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. This demo page has examples of how clearfixes and vertical-spacers can be used with your content.

Demo

Here is our three column layout with content added. Be sure to resize your browser window to see how it responds.

Advanced & Complex Layouts

Adding Classes

If the shortcode column naming convention makes it difficult to keep track of your column content, you can add simple unique classes to your columns to help you keep organized. This is entirely optional and isn’t necessary for the basic functioning of your column layout.

[one-half-first class="unique_identifier"]Place your content for the first column here.

Styled Demo

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

Learn More

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.