Dividing pages into columns

By default, the main content on the page is presented as one column with additional content or navigation in the widget areas of the page. If you wish to use a multiple column layout for the content (as seen below), you can easily achieve this by using the grid shortcode system.

Example of the column shortcode on the CMS Features page

Dividing Into 2 Equal Columns

The [column] shortcode divides the page into two columns by default. Therefore, if there are four pieces of content, each enveloped by the column shortcode, then that content will be divided into two columns and 2 rows.

Example:

[column] This content will be in row 1 and column 1 [/column]
[column] This content will be in row 1 and column 2 [/column]
[column] This content will be in row 2 and column 1 [/column]
[column] This content will be in row 2 and column 2 [/column]

IMPORTANT: The content is enveloped by the opening [column] tag and closing [/column] tag. Please ensure that you always enclose your content in both tags or else your page will display undesirable results.

Dividing Into Multiple Equal Columns

The column shortcode also features a "size" parameter that allows the user to create more than two equally sized columns or columns of differing sizes (the next section covers columns of differing sizes).

The "size" parameter can be seen as dividing the content area into 12 twelfths. Giving a single column a size of '1' would result in that column taking up 1/12th of the page.

Therefore, to create a three equal columns layout, you need to do the following:

[column size=4] 1st column's content goes here [/column]
[column size=4] 2nd column's content goes here [/column]
[column size=4] 3rd column's content goes here [/column]

Likewise, for four equal columns you can do:

[column size=3] 1st column's content goes here [/column]
[column size=3] 2nd column's content goes here [/column]
[column size=3] 3rd column's content goes here [/column]
[column size=3] 4th column's content goes here [/column]

Dividing Into Columns of Differing Sizes

Any combination of column sizes is allowed. However, if you wish to ensure that there are no formatting issues, you have to remember that the column sizes have to add up to 12.

Examples:

4+8=12;

[column size=4] 1st column's content goes here (smaller content area) [/column]
[column size=8] 2nd column's content goes here (larger content area) [/column]

3+3+6=12;

[column size=3] 1st column's content goes here (smaller content area) [/column]
[column size=3] 2nd column's content goes here (smaller content area) [/column]
[column size=6] 3rd column's content goes here (larger content area) [/column]

PLEASE NOTE: Using sizes lower than 3 is not advised as they offer little spacing for content.

Development Notes

  • Don't mix [Column] short codes with Gravity Form short codes. Forms will not display this way. CTLT's statement: "It's not designed for that. Don't use the gravity form with the [column] shortcode; try to create a table instead."
  • For the most consistent results, leave a line before and after the [Column] and the closing tag [/Column]. An example is shown below:
[column size="4"]

//stuff here

[/column]

[column size="4"]
source: https://wiki.ubc.ca/Documentation:UBC_Content_Management_System/Shortcodes/Column

One response to “Dividing pages into columns”

  1. meditsd

    The WordPress editor tends to create extra paragraphy tags between [column] tags if they are not on the same line. This results in the columns descending diagonally across the page. To get around that eliminate the whitespace in your page ex:

    [column] some stuff [/column]
    [column] other things [/column]

    should be
    [column] some stuff [/column][column] other things [/column]

Leave a Reply

You must be logged in to post a comment.