Rich text element overview

Use a Rich Text Element (RTE) to create long-form content.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

A Rich text element (RTE) is the perfect element for creating long-form content like blog posts, about pages, biographies, etc. Instead of adding individual heading, paragraph, list, or image elements, you can double-click into a Rich text element to create and format text, custom code, and media elements.

In this lesson, you’ll learn: 

  1. How to add a Rich text element to your site
  2. How to add and format text content
  3. How to add media content, custom code, and lists
  4. How to rearrange and delete elements
  5. How to style RTE content

How to add a Rich text element to your site

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: 

  • 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)

You can also add additional formatting to text elements:

  • Links (URL, page, email, etc.)
  • Bold text
  • Italic text
  • Superscript and subscript text
  • Code

How to add and format 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.

Pro tip: You can quickly format text (e.g., bold, italicize, add a hyperlink) and block elements (e.g., headings, lists) using Markdown.

How to add paragraphs

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.

How to add headings and block quotes

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.

How to format text and add links

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.

Keyboard shortcuts

These keyboard shortcuts can help you create your content a bit faster:

  • Insert a non-breaking space ( ): Shift + Space 
  • Insert a line break (<br>): Shift + Enter 
  • Bold text: Command + B (Control + B on Windows)
  • Italicize text: Command + I (Control + I on Windows) 
  • Insert hyperlink: Command + K (Control + K on Windows)

You can also use Markdown shortcuts to quickly format text (e.g., bold, italicize, add a hyperlink) and block elements (e.g., headings, lists) as you type: 

  • Italicize text: *text* or _text_
  • Bold text: **text** or __text__
  • Italicize and bold text: ***text*** or ___text___
  • Insert hyperlink: [hyperlink text](https://www.url.com)
  • Insert Heading 1: # + Space
  • Insert Heading 2: ## + Space
  • Insert Heading 3: ### + Space
  • Insert Heading 4: #### + Space
  • Insert Heading 5: ##### + Space
  • Insert Heading 6: ###### + Space
  • Insert Blockquote: > + Space
  • Insert unordered (i.e., bulleted) list: - + Space
  • Insert ordered (i.e., numbered) list: 1. + Space

How to 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 more!

Media settings

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.

Alt text

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.

How to add custom code

The insert menu includes a button to add custom code. You can use custom code to create tables and dividers with HTML, style parts of your rich text content with targeted CSS, expand your site’s functionality with JavaScript (like customized Google Maps or Google AdSense ads), and engage your audience with interactive third-party content (like embeds from Twitter, Soundcloud, Airtable, etc.).

Here’s how:

  1. Place your cursor where you’d like to add your custom code
  2. Click the “plus” icon to open the insert menu and click the custom code button
  3. Add your code 

How to add lists

The insert menu includes options to add unordered (bullet) and ordered (numbered) lists. You can also nest or unnest 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.

To nest a list, choose the list item you want to nest, then press Tab. To unnest a list, choose the item you want to unnest and press Shift + Tab.

How to add rich text content from other sources

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 in the CMS.

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 + Option + 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.

How to rearrange and delete elements 

You can rearrange the elements inside a Rich text element by clicking and dragging them onto the canvas or into the Navigator, or by using keyboard shortcuts. Note that you can’t drag and drop elements into or out of the Rich text element. 

You can delete child elements from Rich text elements without impacting the other elements inside. Select the element on the canvas and press Backspace on your keyboard or use Command + X (Control + X on Windows).

How to style RTE content

Note: Content editors or team members with the Can edit role can format text (e.g., bold, italics, etc.) and create and delete text and media elements within RTEs, but can’t style elements within RTEs.

Styling individual elements inside a Rich text element

You can style individual elements within a Rich text element just as you style other elements in Webflow — select the element on the canvas, then go to the Style panel, give it a class, and style it however you want. If the selected element doesn’t already have a class applied, a class will be created when you add a style.

Note: You can also set conditional visibility on individual elements within Rich text elements. 

Styling elements inside a Rich text element with HTML tags

RTE elements inherit their styling from their respective HTML tags. You can style elements within RTEs with their HTML tags to set the default styling for entire batches of elements. Note that styles created on HTML tags will apply to all elements on your site with those HTML tags. 

However, when you add a class to your Rich text element, you can use HTML tags with a nested selector to set the default styling for elements within RTEs that share the RTE’s class. This is useful for limiting default styles to RTEs with the same class so the styles don’t cascade to the rest of the elements on your site. 

To set styles on HTML tags within RTEs: 

  1. Select the RTE on the canvas
  2. Give the RTE a class 
  3. Select any element in the RTE
  4. Go to the Style panel (S) 
  5. Click into the Selector field
  6. Select the HTML tag (e.g., All paragraphs) from the menu
  7. Click Nest selector inside of “class name”
  8. Style the element however you’d like 
Note: Styling nested tags will affect any elements within elements with the same class applied, not just RTEs with the same class applied. If you’d like to create styles only for nested tags within RTEs with a specific class, we’d recommend creating a class specifically for RTEs, or using combo classes

How to style dynamic rich text

Rich text elements can be connected to rich text fields in a Collection. When an RTE is bound (i.e., 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 unbind (i.e., disconnect) it from the rich text field, style the nested elements, and then re-bind it. You can apply a class on a connected RTE without unbinding. Learn more about dynamic rich text.

Pro tip: You can create a Rich text element in a Style guide page to style elements within the RTE without the need to connect and disconnect it from the CMS each time you’d like to make design changes. To do this, 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 the elements within the Rich text element on a Collection page, you can go to the Style guide page and style those elements in the corresponding RTE. 

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top