Add columns with the Rich Content Editor

  • Release version: Australia
  • Updated March 12, 2026
  • 3 minutes to read

    • Use the Rich Content Editor canvas to create columns to help define and organize your layout for your page.

    Before you begin

    Role required: sn_cd.content_manager

    After you have completed the New content form (see Create rich content) and navigated to the Rich content canvas, you can create rich content.

    You can add 1, 2, or 3 columns. Each column acts as a container for other components. Each column component can also be edited by selecting the component and updating the properties under settings.
    Note:
    The minimum height for a cell within a column is 75px. If you set the cell height smaller, the cell overflows the row.

    Procedure

    1. Navigate to the canvas by selecting the Open editor button from the Design tab of the New content form.
    2. From the Rich Content Editor canvas, you can use a drag-and-drop method to add columns.
      Columns act as containers for the content you are creating.
      Figure 1. Rich Content Editor
      Rich Content Editor - Canvas and columns

      After you drop a 1 Column, 2 Column, or 3 Column into the Rich Content Editor canvas, there are two separators that appear. The outside separator is labelled Row. The inside separator is labelled Cell.

    Add styling to the row or cells, such as background color, maximum width, or padding. If you do not want to add styling, you can proceed to the links at the bottom of this page.
    1. Select a row or cell to edit.
    2. Navigate to Settings tab.
    3. Use any of the following styling settings:
      Note:
      Content Managers and Admins have the option to apply background colors to selected canvas elements, including images. Available features include the use of solid and gradient colors, as well as adjustments for color opacity. These settings can be accessed in the right-hand panel under the Settings Styling tab when adding rich content to a canvas element.
      Table 1. Styling settings
      Settings field Description
      Styling
      Background Color Use the color picker (grey square) to select a color or enter the color code that represents the background color you want to appear.
      All HTML colors are supported. For more information, see HTML color names.
      Note:
      Background color to canvas element shows the background options for gradient, color and image. Toggle on and then select background options.
      Advanced styling
      Width Specify the value by entering a number or dragging the right side of the cell.
      Select the unit of measure:
      • px: pixel
      • %: percentage
      Height Specify the value by entering a number or dragging the bottom of the row.
      Select the unit of measure:
      • px: pixel
      • %: percentage
      Padding Padding is the space between content and the border of an element. Specify the value for top, bottom, right, or left padding by entering a number.
      Margin (for rows only) Margin is the space between a row and another element/the canvas boundary. Specify the value for top, bottom, right, or left padding by entering a number.
      Border (for cells only) Define the width, border style, and color.
      Border radius (for cells only) Radius setting rounds the border corner.
      Properties
      ID A unique ID that identifies the HTML element.
      Title A tool tip or information that appears when a user hovers over the component.
    4. Select Save.

    What to do next

    Add and style more columns to create a layout for all the content on the page.

    Then, add components such as images, videos, text boxes, and buttons: