• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
UT Shield

College of Fine Arts WordPress Instruction

College of Fine Arts WordPress Instruction

University of Texas At Austin

  • Home
  • Quick Start
  • Get Started
    • Log in
    • Dashboard Workspace
      • Dashboard Menu
      • Screen Options Tab
      • Other Tools and Areas of the Dashboard
    • Create & Edit Pages
      • Using the Editor
        • Text Editor
      • Page Editing Screen Details
      • Password Protecting Website Content
    • Delete a Page or Post
    • Blog & News Posts
      • Using the Editor
        • Text Editor
      • Post Editing Screen Details
      • Post Category as a Menu Item
    • Images, Multimedia & Attachments
      • Add Images
      • Thumbnail Image Gallery
      • Video & Audio
      • Slideshow Carousel
        • RoyalSlider Instructions
      • Add Media from External Services
      • Documents & Attachments
      • Floated Images
    • Navigation & Links
      • Menu Navigation
        • Post Category as a Menu Item
      • Non-Visible Link Context
      • URL Web Address
    • Manage Comments
    • Social Media & Networks
  • Advanced
    • Manage Editors & Contributors
    • Page Layout Options & Custom Features
      • Available WordPress Themes
        • UT WordPress Theme
      • Column Layouts
      • Custom Features
        • Tabular Data
        • Team or Category Grids
      • Header Images
  • General Web Instruction

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.

On this page:

  • Getting Started
    • Column Short Code
  • Demo
  • Advanced & Complex Layouts
    • Adding Classes
  • Styled Demo
  • Learn More

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.

Column layout button can be found in the page editor dashboard dashboard

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.
Display of interface for choosing the 52 pre formatted column 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.

Column One

Big Bend national park Ocotillo plants in the summer light

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar, mauris sit amet interdum feugiat, nibh eros elementum turpis, ut lobortis lorem neque nec dui.

Mount Davis range cacti

Column Two

Sunset on the west Texas hills

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar, mauris sit amet interdum feugiat, nibh eros elementum turpis, ut lobortis lorem neque nec dui.

Mount Davis range vista

Column Three

Big Bend national park at sunset

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar, mauris sit amet interdum feugiat, nibh eros elementum turpis, ut lobortis lorem neque nec dui.

Texas Cacti closeup

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!

operatizing opertor

Butler Opera Center: Fall Opera Scenes

Dec. 1 – 2, 2021

Undergraduate and graduate students in the Butler Opera Center perform scenes from operas, directed by opera directing students.

Undergraduate and graduate students in the Butler Opera Center perform scenes from operas

Butler Opera Center: Spring Opera Scenes

May. 5 – 6, 2022

Undergraduate and graduate students in the Butler Opera Center perform scenes from operas, directed by opera directing students.

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.

Primary Sidebar

Open Office / Co-Working Sessions

Second Monday of the month:

11 a.m. – 12:30 p.m.

Fourth Thursday of the month:

2 p.m. – 3:30 p.m.

Email us for the Zoom link.

College of Fine Arts Web Instruction
Subscribe to our email list to receive periodic tips and resources for generating great digital content

Contact Us

The COFA Web team can be reached by emailing us at cofawebmaster@austin.utexas.edu

UT Home | Emergency Information | Site Policies | Web Accessibility | Web Privacy | Adobe Reader

© The University of Texas at Austin 2025