Columns

Formatting Text & ImagesColumns

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 does not include a dedicated Columns tool, but you can use the Snippets tool to insert columns into a page. 

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 two columns of equal width are added to the page.  Multiple rows can be added to a single columns container, with all rows 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 as well as 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:
  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 as well as 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