A rich text element 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 just double click into a rich text element and create these different content elements directly there.

It also provides a way for collaborators (e.g. team members or clients) to easily edit rich content within the Editor.

In this lesson
  • Adding a Rich Text element
  • Adding and formatting text content
  • Adding media content and lists
  • Styling content

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

 
Elements you can create inside of a rich text:
  • Paragraphs
  • Headings (H1-H6)
  • Images
  • Image Captions
  • Image alt attributes
  • Block quotes
  • Unordered Lists (bulleted)
  • Ordered Lists (numbered)
  • Videos (Youtube, Vimeo)
  • Rich media (Google maps, SoundCloud, Imgur, Giphy, Codepen, and more)

For any of the text elements you can add additional formatting:

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

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

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

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

 

Formatting 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

Adding media content and lists

When your text cursor is on a new line, a plus button appears. Clicking this button will show options to add images, videos, other rich media, and bulleted or numbered lists.

Adding images, videos, and rich media

All media elements in the RTE are responsive and will respect the aspect ratio of the content. 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
  • Giphy
  • SoundCloud
  • And others...
Good to know
YouTube, Vimeo, and Dailymotion video support has been enhanced to allow custom start times.

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 alt text to images in Rich texts in Webflow

Adding lists

You can also add lists from the plus button as well. 

Pro tip
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 followed by a period and a space.

Pasting 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.
Text and images being pasted into the Editor from a Google doc.
Must know
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+CHIFT+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.

Need to know
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.

Must know
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.  
 
Need to know
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.