---
sourceDocument: Xanadu Employee Service Management
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/xanadu/employee-service-management

 Release :

    - xanadu

ft:locale :

    - en-US

ft:publication_title :

    - Xanadu Employee Service Management

ft:clusterId :

    - emplsm

bundleId :

    - emplsm

workflow :

    - Employee


---

# Add columns with the Rich Content Editor

# Add columns with the Rich Content Editor {#ariaid-title1}

* Release version: Xanadu
* 
* Updated August 1, 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 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](https://servicenow-prod.fluidtopics.net/fPoBD05JJqCXyI~GMzY7KQ "Use the Rich Content Editor to build long form content with an easy to use web styled tool.")) 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.

   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.

3. Select a row or cell to edit.
4. Navigate to Settings tab.
5. Use any of the following styling settings:  
   {#ec-rich-content-canvas__table_zx2_tgw_jyb__entry__2}

   | 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](https://htmlcolorcodes.com/color-picker/). |
   | 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 {#ec-rich-content-canvas__ul_z1t_33z_z5b} |
   | Height | Specify the value by entering a number or dragging the bottom of the row. Select the unit of measure: * px: pixel * %: percentage {#ec-rich-content-canvas__ul_dkg_mhw_jyb} |
   | 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. |
   [Table 1. Styling settings]

   {#ec-rich-content-canvas__table_zx2_tgw_jyb}
6. 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:

* [Add Tabs with Rich Content Editor](https://servicenow-prod.fluidtopics.net/Yu~3UbjTeOt39JtvIzXMAA "Add tabs to your rich content to help your users navigate efficiently by allowing them to select the various tabs to reveal the associated content within them.")
* [Add a Divider with the Rich Content Editor](https://servicenow-prod.fluidtopics.net/jarthLiMfEdjYs5soBgcbg "Add a horizontal Divider into your canvas to visually separate elements or highlight important sections.")
* [Add an Image with the Rich Content Editor](https://servicenow-prod.fluidtopics.net/f9ReNUFXJ9vSxPz3Fg_wfw "Use the Rich Content Editor canvas to add images in your content.")
* [Add a Video with the Rich Content Editor](https://servicenow-prod.fluidtopics.net/m8RaCjV0HhMhBKfyF0ZjFg "Use the Rich Content Editor canvas to add videos in your content.")
* [Add Text or a Text section with the Rich Content Editor](https://servicenow-prod.fluidtopics.net/~0uWlh8RJKpNn0tQpir_eQ "Use the Rich Content Editor canvas to add Text or a Text section in your content.")
* [Add a Link or Link block with the Rich Content Editor](https://servicenow-prod.fluidtopics.net/geO54H33RkeYffcfplPQog "Use the Rich Content Editor canvas to add a link or a link block to redirect users to different content or a web page. A Link provides a textbox and a Link block allows you to add an image that acts as a link.")
* [Add a Button with the Rich Content Editor](https://servicenow-prod.fluidtopics.net/OEFQqzQd3kkA~2T5Z6ezcQ "Add a Button to trigger actions or redirect users to different content.")
{#ec-rich-content-canvas__ul_ab5_2kw_jyb}