Web Guide: Rows & Columns

Rows

The Row element gives structure to the page. The main function is to determine page layout.

Start with one of many preset page layouts: full width; 2 columns; 3 columns; 2/3 – 1/3, etc. Any selected element [text box, callout box, separator…] will generate a row with the element.

Columns

Columns separate rows into sections. Using rows and columns, any number of elements can be placed into your layout.

In mobile view, the content cascades from the first row, then to its columns starting from the left side. And, then to the second row and so on.

You can also make columns the same height, which is useful when adding parallel information across the row (go to the row edit icon, where you will find a checkbox).

Note: if there is not an element placed in a row it will act as a “row space” on the page and will add an extra line space — best practice is to remove all unused row elements before publish.

ROW element with three columns with text block:

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

LIVE SITE EXAMPLES:

Six column template use for videos; three column template use for remaining content: http://graduation.wharton.upenn.edu/
Three column template use for image categories: http://standards.wharton.upenn.edu/photography/