Skip to main content

UniversityMarketing and Communications

Content Layouts

You can choose where your content is positioned on the page

For many of your users, the fun and engaging parts of the site will come from reusable content elements – like photo galleries, videos, quotes, events, or news lists. But there will also be plenty of pages that need to convey a lot of information. Content layouts provide containers for all of these elements.

The simplest of content layouts is the two-column page. This layout has a body area on the left side, under the page title, and a single right-side column for subnavigation, with additional editable space below. The body area is wide enough to accommodate a lot of text, especially text with bulleted lists or block quotes.

The two-column content types fit perfectly into this body area to create a large and eye-catching first impression. This is also the content layout that works best with collapsible accordion panels.

The next inside page template is the three-column page. This layout splits the left-side body area into two columns, after the intro paragraph - creating side-by-side areas for multiple content types. 

This layout is ideal for pages that need to speak quickly to multiple audiences, for example, a column of “Sophomore Year Deadlines” next to a column of “Junior Year Major Declaration Forms”. Note that on a mobile phone, the columns will stack vertically in order from left to right – so refrain from using location-based language like, “Find forms at left”.

Static text will not flow from one column into the next, the way that it does on desktop publishing software. Instead, the column will just get taller to accommodate the text input. For this reason, don’t use these two columns to convey a lot of narrative information, as users may get confused when they reach the bottom of the first column and need to scroll back up.

Content Layout Areas

The areas shaded in blue are available for positioning content. Once positioned, you can easily edit the content type and change to another position on the page.

Page header
Main
Main - Left
Main - Right
Navigation Menu
Right Sidebar
Page footer