Add custom HTML or CSS columns to the page content. This is a powerful tool when a page or post has a large amount of content and/or media.  


Grid Columns


To start using columns, first a row must be created.

Each new row or column should be entered on it's own line in the editor to avoid confusion while editing.

To make a full row of multiple columns, each group of columns must be contained in a row and must equal 100%.

The example below outlines the row in orange, then two columns in blue.



Open a Grid Row


1. Open a new row by clicking Open Grid Row.
2. Enter a custom CSS class if needed.
3. The result is a shortcode that opens the row.


Open Column


4. Open Grid Column.

5. Enter a custom CSS class if needed.

6. Enter a width for all three device widths: Palm, Tablet, and Desktop.

7. If a column width narrower than 100% is selected and the content should be centered, select 'Center On' for any of the devices. Learn more»

8. The result is a shortcode that opens column 1


Close Column


9. Close Grid Column 1

10. The result is a shortcode that closes column 1


Open Column (as needed)

Repeat the steps1 & 2 from 'Open Column 1' again to open other columns.  Remember, use widths that add to 100% on all devices.


Close Column (as needed)

Repeat step 9 from 'Close Column 1' to close columns.


Close Row


11. Close the row

12. The result is a shortcode that closes the row



The result of example outline above would be something like:

[grid_row_open class=""]

[grid_col_open class="" palm="100%" tablet="66%" desktop="66%" center=""]

 

 

 Column 1 Content

 

[grid_col_close]

[grid_col_open class="" palm="100%" tablet="33%" desktop="33%" center=""]

 

Column 2 Content


 

[grid_col_close]

[grid_row_close]

 



Centering a Single Column

If the goal is to make content fit in one single column that is narrower than the container, use the 'Center on' feature highlighted in step 7 above.


This option will allow the column to be set to a width less than 100% and centered as the only column in the row. In this situation, only one column is needed in the row.





Fluid CSS Columns

CSS columns, on the other hand, do not need to be contained in a row.  These columns allow content to be displayed in flowing, vertical columns, much like a newspaper or magazine.  Each section of columnized content has settings for desktop, tablet, and palm-sized mobile devices, as shown in the example below. The top is a typical desktop display, where the content is split into three column. Next is a tablet, with content set to only two columns. Finally, a palm-sized devcie like a phone, with a single column.


uxi-wysiwyg-css-column-result.jpg


To start using fluid columns

Click above the content that will be broken into columns


Open Column Wrapper


1. Click Open a column wrapper

2. Enter a custom CSS class if needed

3. Enter the number of columns to display on Palm, Tablet, and Desktop displays

4. The result is a single shortcode that will create the columns.


Close Column Wrapper

5. Click Close Columns Wrapper

6. The result is a shortcode that will close the column wrapper