Dual Column Content

Description

The "Dual Column Content" content type will display your Zone A content in two equal-width columns. You can see an example further down on this page, as well as several other examples elsewhere on the Seattle U website listed below.

Available in zones:

• Zone A

Permissions:

• Available to all content editors

When to use it

If you are ever tempted to use a table in order to control the layout of your page and put your content into two separate columns (which is not good practice) then you should use the "Dual Column Content" content type instead.

How to use it

Navigate to the section where you wish to add the dual column content item. Click "Create content" then select the "Dual Column Content" content type.

Required fields

There are only three required fields in this content type:

• Name
  • The text in this field is for internal, informational purposes only, and appears in the list of 'content in this section.'
• Left column
  • The content in this column becomes the content that displays on the left hand column (or when in a small screen width, this column will display on the top). This field has a WYSIWYG text editor so you can format the content in this column using HTML; it can contain images, links, headings, lists, etc.
• Right column
  • The content in this column becomes the content that displays on the right hand column (or when in a small screen width, this column will display on the bottom). This field has a WYSIWYG text editor so you can format the content in this column using HTML; it can contain images, links, headings, lists, etc.

Additional things to consider

This content type is responsive, which means that it changes size based on the width of the browser or screen that is displaying it.

The two columns will be side-by-side only when users view the page on a wide screen (768 pixels or more).

On a browser or device less than 767 pixels (like a mobile device), the columns become stacked on top of each other so that the content in left column content is on top, and the right column is on bottom.

So keep this in mind when you are planning what content goes in which column.

Examples

• https://www.seattleu.edu/artsci/arts/calendar-of-events/
  • The ARTS at Seattle U Calendar of Upcoming Events uses multiple "Dual Column Content" content items to display a picture or graphic next to a heading, date, time, location and description of an arts-related event.