Skip to content
Microsites › Creating employee communications › Authoring and managing employee communications › Employee Center Pro › Unified Employee Experience › Employee Service Management
Release: Australia · Updated: 2026-03-12 · Official documentation · View source

Add columns with the Rich Content Editor

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.

Image omitted: ec-rich-content-columns.png
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**.
  1. 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.

  2. Select a row or cell to edit.

  3. Navigate to Settings tab.

  4. 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.

Settings fieldDescription
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
WidthSpecify the value by entering a number or dragging the right side of the cell.Select the unit of measure: - px: pixel - %: percentage
HeightSpecify the value by entering a number or dragging the bottom of the row.Select the unit of measure: - px: pixel - %: percentage
PaddingPadding 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
IDA unique ID that identifies the HTML element.
TitleA tool tip or information that appears when a user hovers over the component.
  1. 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: