Use a Rich Text Element (RTE) to create long-form content.
A rich text element (RTE) is the perfect element for creating long-form content like blog posts, about pages, biographies — you name it. Instead of adding individual heading, paragraph, list, or image elements, you can double-click into a rich text element to create these different content elements directly.
Rich text elements also make it easy for guest editors to edit rich content within the Editor.
In this lesson, you’ll learn:
You can add a Rich text element by dragging it from the Add panel (A) to the Designer canvas. To add or edit the content within, double-click the Rich text element or select the element and press Enter or Return on your keyboard.
You can add the following elements within Rich text elements:
You can also add additional formatting to text elements:
You can start typing inside the RTE and then add formatting to the text to create headings, block quotes, bold or italic text, and links.
Just like any other text editor, pressing Enter on your keyboard will create a new paragraph on a new line where you can continue to type. To add multiple paragraphs, press Enter at the end of a paragraph.
To create a heading, select any text inside of a paragraph and choose a heading (H1-H6) option.
The same goes for creating block quotes.
Any part of any text element (e.g., headings, paragraphs, captions, etc.) can be formatted with bold, italics, superscript, subscript, and links by selecting part of the text and applying your desired formatting options. Learn more about inline text formatting.
When you create a link within an RTE, you have the option to choose a URL, page, page section, email, or phone number.
These keyboard shortcuts can help you create your content a bit faster:
When your text cursor is on a new line, a “plus” button appears. Clicking this button reveals an insert menu with options to add images, videos, other rich media, custom code, and bulleted or numbered lists.
All media elements in the RTE are responsive and will respect the aspect ratio of the content. YouTube, Vimeo, and Dailymotion video support has been enhanced to allow custom start times. Here’s a list of some of the supported rich media types:
Each media element can be sized using the presets in the image settings or sized to a specific pixel or percentage value by clicking the “wrench” icon in the toolbar. An optional caption can also be added below images.
To add alt text to your images, select the image you want to add alt text to, click the “wrench” icon in the toolbar, then type in your alt text. Learn more about writing descriptive alt text.
The insert menu includes a button to add custom code.
The insert menu includes options to add unordered (bullet) and ordered (numbered) lists.
You can add a bullet list from the insert menu or by typing in a dash (-) followed by a space.
To create numbered lists, you can use the insert menu or type an integer followed by a period and a space (e.g., 1. , 3. , 10. ). This is especially useful when you want to continue a numbered list after you’ve added some media between the list items – you can type the next number in the sequence, followed by a period and a space.
You can paste in rich text content from other sites or from a word processor like Google Docs. All formatting and links will be pasted within the rich text element. Images will also be imported on paste when pasting in a rich text element in the Designer or in a rich text field of a CMS item in the Collection manager detail view (both in the Designer and the Editor).
Important: Images won’t be imported from rich content pasted in a rich text element in the Editor.
It’s important to keep in mind that pasting rich text content from other sources may also bring along unwanted formatting, like background color or hidden characters – so you may want to be mindful when pasting rich text from other sources.
To ensure no unwanted formatting is pasted, you can first paste the rich text content into a plain text editor, then copy and paste into the Rich text element, or use the keyboard shortcut to paste unformatted text (Command + Shift + V on Mac, or Control + Shift + V on Windows). Keep in mind that this keyboard shortcut will strip the text of all formatting including bold, italics, and hyperlinks.
Styling the elements inside of a Rich text element works differently than styling other standalone elements, because text and media elements inside a Rich text element can be created or deleted by guest editors at any time.
RTE elements inherit their styling from their respective HTML tags. The simplest way of styling elements in an RTE is by selecting the nested element and styling its tag.
If the RTE is activated — i.e., you’re typing or adding content inside the RTE –– you won’t be able to select the individual elements inside. To deactivate the RTE, press Escape. Then, you’ll be able to select the elements nested within the RTE to style them.
To style an element nested in an RTE:
This way, you’re editing the default styles for that element across the entire site. If you don’t want to style all elements on your site, check out Advanced styling below. Learn more about styling HTML tags.
Important: Deleting any element nested in a Rich text element will delete the whole Rich text element. To delete any of the RTE contents, activate the RTE by clicking inside the element, then select and delete the content.
Adding a class to the Rich Text element will allow you to create unique text styles for just that RTE instance. Styling these nested tags will make sure that only elements in an RTE with the same class applied will be affected. Follow these steps:
Rich text elements can be connected to rich text fields in a Collection. When an RTE is connected, it’s no longer possible to select or edit text elements, except for in the CMS, which serves as the source for the content in the RTE.
To style a connected RTE, it’s recommended to disconnect (unbind) it from the rich text field, style the nested elements, and then re-connect (bind) it. If you just want to apply a class on a connected RTE, you can do that without disconnecting it. Learn more about dynamic rich texts.