Rich text element overview

A rich text element (RTE) is the perfect element for creating long-form content for 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.

RTE also makes it easy for collaborators (e.g. team members or clients) to edit rich content within the Editor.

In this lesson

• Add a rich text element
• Add and formatting text content
• Add media content, custom code (NEW!), and lists
• Style content

Add a rich text element

First, you can add a rich text element by dragging it from the Add elements panel (A) onto your page. To edit the content, double-click into the RTE or select the element and press enter.

With rich text elements you can add:

• Paragraphs
• Headings (H1-H6)
• Images
• Image Captions
• Image alt attributes
• Custom code
• Block quotes
• Unordered Lists (bulleted)
• Ordered Lists (numbered)
• Videos (Youtube, Vimeo)
• Rich media (Google maps, SoundCloud, Imgur, Giphy, Codepen, and more)

For any text elements, you can add additional formatting:

• Links (URL, page, email, etc)
• Bold text
• Italic text

Add and formatting text content

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.

Add paragraphs

Just like any other text editor, pressing enter will create a new paragraph on a new line where you can continue to type. To add multiple paragraphs, simply press enter at the end of a paragraph.

Add headings and block quotes

To create a heading, you just select any text inside of a paragraph and choose a heading (H1-H6) option.

Same goes for creating block quotes.

Format text and adding links

Any part of any text element (e.g. headings, paragraphs, captions, etc) can be formatted with bold, italics and links. Just select part of the text and apply one or more formatting options.

When a link is added to some text, you have the option to choose a URL, page, page section, email, or phone number.

Keyboard shortcuts

These keyboard shortcuts let you add a few special characters or design a bit faster:

• SHIFT+SPACE inserts a non-breaking space ( )
• SHIFT+ENTER inserts a line break (<br>)
• CMD+B (CTRL+B on Windows) makes text bold
• CMD+i (CTRL+i on Windows) italicizes text
• CMD+K (CTRL+K on Windows) lets you insert a hyperlink

Add media content, custom code, and lists

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.

Add images, videos, and rich media

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:

• YouTube
• Vimeo
• Instagram post
• Facebook post
• DailyMotion
• Kickstarter
• TED
• Wistia
• Livestream
• Twitch
• Hulu
• Imgur albums
• Google maps
• JSFiddle
• Codepen
• Scribd
• SlideShare
• Spotify playlists and charts
• Giphy
• SoundCloud
• And others...

Media settings

Each media element can be sized using the presets or can be sized to a specific pixel or percentage value in the settings. An optional caption can also be added below images.

Alt attributes

To add alt attributes to these images, select the image you want to add alt text to, click the wrench icon in the toolbar, then type in your alt tag.

‍

Add custom code

The insert menu now includes a button to add custom code.

Use it to plug code right into your rich text content to maximize long-form content with third-party embeds, HTML, CSS or even JavaScript.

Engage your audience with more interactive embeds

From embeddable Tweets to Google charts, you can create more interactive experiences with third-party content.

You can use the embed element with embeds from: 

• Twitter
• Instagram
• Google Sheets
• Airtable
• Mailchimp
• SurveyMonkey
• Gleam.io
• and many more 

‍

Create tables, dividers and more with simple HTML

Use HTML to better format and display your content. For the first time, you’ll have the ability to create tables, divider lines or even properly format (and highlight!) snippets of code. You can do this in 3 steps:

1. Place your cursor where you'd like to add the table, divider, etc.
2. Click the plus sign to open the insert menu and click the custom code button < >
3. Add your code
   

‍

Get precise with your CSS

Style specific parts of your rich text content with targeted CSS. Reference any styles that are already featured across your site. 

Here's how:

1. Place your cursor where you'd like to add the CSS
2. Click the plus sign to open the insert menu and click the custom code button < >
3. Add your CSS

‍

Expand functionality with JavaScript

Add custom JavaScript snippets, like Google Adsense ads, an AddThis widget, or a customized Google Map. 

Here's how:

1. Place your cursor where you'd like to add the JavaScript snippet
2. Click the plus sign to open the insert menu and click the custom code button < >
3. Add your snippet

Add lists

The insert menu includes options to add lists. 

The quickest way to add a bullet list is by simply typing in a dash (-) followed by a space.

The quickest way to add a numbered list is by typing an integer followed by a period (eg. 1. , 3. or 10.) followed by a space. This is useful especially when you want to continue a numbered list after you've added some media in between the list items. Just type the next number (eg. 4.) followed by a period and a space.

Paste in rich content

You can paste in rich 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). 

At the moment, images won't be imported when rich content is pasted in a rich text in the Editor on the live site.

Pasting unformatted text

Pasting rich content from other sources may bring along unwanted formatting like background color which may look weird on your site. So, be mindful when pasting rich text from other sources. To ensure that no unwanted formatting is pasted, use the keyboard shortcut to paste unformatted text (CMS+SHIFT+V on mac — CTRL+SHIFT+V on windows). This will strip the text of all formatting including bold and italics. Be careful though, it also removes links.

Styling content

Styling the elements inside of the RTE works differently—that’s because text and media elements inside an RTE can be created or deleted by collaborators at any time.

Basic styling

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, you won't be able to select the individual elements inside. To deactivate the RTE, press ESC. Now, you'll be able to select the elements nested within the RTE to style them. Here’s how to style an element nested in an RTE:

1. Select the element within the RTE
2. Click into the selector field in the Style panel or Press CMD + Enter (Control + Enter on Windows)
3. Select the tag (e.g. All Paragraphs) from the menu
4. Style the tag

For example, to style the caption element. Select a caption, then select the All Figure Captions tag and style it.

This way you're editing the default styles for that element across the entire project. If you don’t want to style all elements in your projects, check out advanced styling below.  

Deleting any element nested in an RTE 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.

Advanced styling

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:

1. Select the RTE and give it a class
2. Select any element inside of the RTE
3. Go to the Style Panel (S)
4. Click into the selector field
5. Select the tag (e.g. All Paragraphs) from the menu
6. Click on Nest selector inside of “class name”
7. Style the element

Styling dynamic rich text

Rich text elements can be connected to rich text fields in a Collection. When a RTE is connected, it’s no longer possible to select or edit text elements, except for in the CMS. That's because the content is pulled from the CMS itself.

To style a connected RTE, it’s recommended to disconnect (unbind) it from the 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.

Pro tip
Create the RTE in a "style guide" page where you can style it without the need to connect and disconnect it each time you want to make a change to the design of the RTE elements. Just set the same class on the RTE in the Style guide as you have set on your Collection page. Now, whenever you need to update the style of elements within the RTE of a Collection page, go to the Style guide page and style those elements in the corresponding RTE.

‍