Columns

Formatting Text & Media Columns

Normally, content added to a Canvas page or content item expands to use the full width of the content area of the page. Adding flexible columns to the page allows you to lay out similar or different types of content side by side. In this section of the current page, for example, the left column is used for the main text, and the right is used for the Tips box. 

The DesignPLUS sidebar now includes a dedicated Columns tool, so Snippets no longer need to be used to create columns. 

Tips  for Columns

  • Review your content at different screen sizes to make sure the columns work well in different views.
  • Keep content in columns short enough that users will not have to scroll back up the page to view content in other columns.
  • Keep a logical flow to the content so learners can easily navigate the page.

Instructions

Add columns

  1. Place your cursor in the editor where you want the columns to go.
  2. Open the Add New Elements ( ) tab in the sidebar.
  3. Select the  Columns  tool. The Edit Current Element  ( ) tab opens with Columns selected as the active tool.
    Columns tool

    By default, a single row of two columns of equal width is added to the page. Multiple rows can be added to a single columns container, with each row using identical or different column layouts.
  4. Use the controls in the Content panel to adjust the number, size, and layout of the columns, as well as the number of rows.  
    Content panel for Columns tool
    1. Select the Container tab to select the text alignment and layout for all rows. You can also add, delete, and duplicate rows.
    2. To control a specific row, place your cursor in the desired row and select the Row tab. From here, you can add, remove, and rearrange the columns in the row, as well as set the alignment and layout for the row.
    3. To control a specific column within a specific row, place your cursor in the desired column and select the Column tab.  From here, you can add or duplicate columns in the row and control the size and text alignment for each column.
  5. Add your content to each column, taking care not to delete the HTML that defines the beginning or end of the column container, column row(s), or the columns themselves. 
  6. Save the page to view your work.

Edit columns

  1. Select the  Edit Current Element  ( ) tab in the sidebar.
  2. Select or place your cursor within the column container, row, or column you wish to modify.
  3. Confirm or select Columns as the active tool:
    Columns tool
  4. To edit the content in any column, simply use the Canvas content editor, taking care not to delete the HTML that defines the beginning or end of the column container, column row(s), or the columns themselves. 
  5. Use the controls in the Content panel to adjust the number, size, and layout of the columns, as well as the number of rows.  
    Content panel for Columns tool
    1. Select the Container tab to select the text alignment and layout for all rows. You can also add, delete, and duplicate rows.
    2. To control a specific row, place your cursor in the desired row and select the Row tab. From here, you can add, remove, and rearrange the columns in the row, as well as set the alignment and layout for the row.
    3. To control a specific column within a specific row, place your cursor in the desired column and select the Column tab.  From here, you can add or duplicate columns in the row and control the size and text alignment for each column.
  6. Save the page to view your work.

Learn More

Cidi Labs DesignPLUS User Guide: Columns