Add a Divider with the Rich Content Editor
Add a horizontal Divider into your canvas to visually separate elements or highlight important sections.
Before you begin
Role required: sn_cd.content_manager
Fill in the New content form fields. See Create rich content
Create the page layout using modules or columns.
- Modules are predefined content layouts comprised of header, paragraph text, and images. See Add predefined content layouts with the Rich Content Editor
- Columns are containers that enable you to define a custom layout. See Add columns with the Rich Content Editor
Procedure
-
Navigate to the canvas by selecting the Open editor button from the Design tab of the New content form.
-
From the Rich Content Editor canvas, you can use a drag-and-drop method to add dividers.
-
Navigate to Settings tab.
-
Use any of the following 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. |
|
Advanced styling | |
|
Width |
Specify the value by entering a number.Select the unit of measure:
|
|
Height |
Specify the value by entering a number.Select the unit of measure:
|
|
Margin |
Margin is the space between the divider and another element/the canvas boundary. Specify the value for top, bottom, right, or left padding by entering a number. |
|
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. |
Selecting **Save** saves your content and you remain on the **Rich Content Editor** canvas. Selecting **Save and Finish** saves your record and returns you to the **New content** form.
What to do next
-
(Optional) Translate your content.
Request language translation for your content. For more information, see Multilingual support in the Content Library.
Note: Only translate content after you are done modifying the content. For best results, we do not recommend that you add or remove components or change the formatting after translation.
To create rich content that is formatted differently in different languages, duplicate the content and modify the formatting as needed. Then, use Audiences to target the content to users by language. See Audiences
-
Preview your content from the Publish tab.
Note: Content Preview is designed to provide a general idea of how your content looks. Content may look different once published due to variations in device resolution, theme difference, or mobile app style configuration.
-
Configure a publish plan to control where the content is delivered, the audience, and the period of time it is available: Create a publish plan for your content.
---
title: Add a Divider with the Rich Content Editor
description: Add a horizontal Divider into your canvas to visually separate elements or highlight important sections.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/employee-service-management/employee-experience-foundation/ec-rich-content-divider.html
release: brazil
product: Employee Experience Foundation
classification: employee-experience-foundation
topic_type: task
last_updated: "2026-09-10"
reading_time_minutes: 2
breadcrumb: [Microsites, Creating employee communications, Authoring and managing employee communications, Employee Center Pro, EmployeeWorks, Employee Service Management]
---
# Add a Divider with the Rich Content Editor
Add a horizontal Divider into your canvas to visually separate elements or highlight important sections.
## Before you begin
Role required: sn\_cd.content\_manager
Fill in the New content form fields. See [Create rich content](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/employee-service-management/employee-experience-foundation/ec-content-library-portal-rich-content.md)
Create the page layout using modules or columns.
- Modules are predefined content layouts comprised of header, paragraph text, and images. See [Add predefined content layouts with the Rich Content Editor](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/employee-service-management/employee-experience-foundation/add-modules-rich-content-editor.md)
- Columns are containers that enable you to define a custom layout. See [Add columns with the Rich Content Editor](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/employee-service-management/employee-experience-foundation/ec-rich-content-canvas.md)
## 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 dividers.
3. Navigate to **Settings** tab.
4. Use any of the following styling settings:
<table id="table_zx2_tgw_jyb"><thead><tr><th>
Settings field
</th><th>
Description
</th></tr></thead><tbody><tr><td colspan="2">
Styling
</td></tr><tr><td>
Background Color
</td><td>
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/).
</td></tr><tr><td colspan="2">
Advanced styling
</td></tr><tr><td>
Width
</td><td>
Specify the value by entering a number.Select the unit of measure:
- px: pixel
- %: percentage
</td></tr><tr><td>
Height
</td><td>
Specify the value by entering a number.Select the unit of measure:
- px: pixel
- %: percentage
</td></tr><tr><td>
Margin
</td><td>
Margin is the space between the divider and another element/the canvas boundary. Specify the value for top, bottom, right, or left padding by entering a number.
</td></tr><tr><td colspan="2">
Properties
</td></tr><tr><td>
ID
</td><td>
A unique ID that identifies the HTML element.
</td></tr><tr><td>
Title
</td><td>
A tool tip or information that appears when a user hovers over the component.
</td></tr></tbody>
</table>5. Select **Save** or **Save and Finish**.
Selecting **Save** saves your content and you remain on the **Rich Content Editor** canvas. Selecting **Save and Finish** saves your record and returns you to the **New content** form.
## What to do next
- \(Optional\) Translate your content.
Request language translation for your content. For more information, see [Multilingual support in the Content Library](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/employee-service-management/employee-experience-foundation/ec-switch-language.md).
**Note:** Only translate content after you are done modifying the content. For best results, we do not recommend that you add or remove components or change the formatting after translation.
To create rich content that is formatted differently in different languages, duplicate the content and modify the formatting as needed. Then, use Audiences to target the content to users by language. See [Audiences](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/employee-service-management/employee-experience-foundation/ecpro-audience.md)
- Preview your content from the **Publish** tab.
**Note:** Content Preview is designed to provide a general idea of how your content looks. Content may look different once published due to variations in device resolution, theme difference, or mobile app style configuration.
- Configure a publish plan to control where the content is delivered, the audience, and the period of time it is available: [Create a publish plan for your content](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/employee-service-management/employee-experience-foundation/ec-content-library-publish2.md).
| title | Add a Divider with the Rich Content Editor |
| description | Add a horizontal Divider into your canvas to visually separate elements or highlight important sections. |
| locale | en-US |
| canonical_url | https://www.servicenow.com/docs/r/employee-service-management/employee-experience-foundation/ec-rich-content-divider.html |
| release | brazil |
| product | Employee Experience Foundation |
| classification | employee-experience-foundation |
| topic_type | task |
| last_updated | 2026-09-10 |
| reading_time_minutes | 2 |
| breadcrumb | MicrositesCreating employee communicationsAuthoring and managing employee communicationsEmployee Center ProEmployeeWorksEmployee Service Management |