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.
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"]