Column Styles

Overview

Overview

You can create a multi-column layout in the content area of pages, sections or anywhere that has the standard content editor with the toolbar (see screenshot below) by using custom classes and div tags.  We have created a grid generator to make this process easier to use.

  1. The grid generator is located at /grid-generator/ (simply add that to the end of the URL for your homepage)
  2. Select the number of rows you want within the grid.
  3. On the next page, select the number of columns you want for each row (each row can have a different number of columns).
  4. Finally, you will see the produced a code snippet that you can place into the editor of your page or content section
  5. Copy the code snippet and go to the page/section/etc in the CMS in which you want to use a grid. You will need to use the Source Code (HTML) view option in the toolbar of the content editor.
  6. Once the Source Code view is open, paste in the code to the desired location within the page/section/etc. and then press OK.
  7. You will now be back at the edit view and you can update the example content as needed (the grid generator will place a dummy image and text as a placeholder).

*See the screenshot below for where to find the Source Code view in the toolbar of the Content Editor.

NOTE - The Style Guide page has an example for review.

http://mk031.monkpreview.com/grid-generator/ (substitute your url for http://mk031.monkpreview.com).