Rich text element overview - Webflow help

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

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

Slash commands

When you’re editing content inside an RTE, you can use slash commands to quickly generate copy using the Webflow AI Assistant or add new content elements. To use slash commands, press / (forward slash) on your keyboard and click Generate more copy to add contextually-relevant text using the AI Assistant, select the desired element from the Add menu, or begin typing to filter the list of elements:

• Heading (H1–H6)
• Numbered list
• Bulleted list
• Paragraph
• Block quote
• Image
• Video
• Rich content
• HTML embed
• Code block

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, superscript or subscript text, and links.

Generate text content using the Webflow AI Assistant

To quickly add contextually-relevant copy to an RTE using the AI Assistant:

1. Right-click the RTE
2. Choose Modify copy from the context menu
3. (Optional) Enter a prompt describing the copy you’d like to generate
4. Click the "Submit prompt" icon
5. Click Done to accept the generated copy

Learn more about using the Webflow AI Assistant to generate and edit content.

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. You can also use the Webflow AI Assistant to add and refine text for you.

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 quickly format rich text content:

• Insert a non-breaking space: Shift + Space
• Insert a line break: 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)

While editing in the RTE, you can use the slash command shortcut (“/**”) to quickly add content elements. You can also use Markdown shortcuts:

• Italicize text: *text* or _text_
• Bold text: **text** or __text__
• Bold & italic: ***text*** or ___text___
• Insert hyperlink: [hyperlink text](https://www.url.com)
• Heading 1: # + Space
• Heading 2: ## + Space
• Heading 3: ### + Space
• Heading 4: #### + Space
• Heading 5: ##### + Space
• Heading 6: ###### + Space
• Blockquote: > + Space
• Unordered list: - + Space
• Ordered 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 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 set 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 images, select the image, click the “wrench” icon, 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 content with CSS, expand your site’s functionality with JavaScript, and embed third-party content.

Steps:

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

How to add lists

The insert menu offers options to add unordered (bullet) and ordered (numbered) lists. You can also nest or unnest lists.

• Bulleted list: use the insert menu or type a dash - followed by a space.
• Numbered list: use the insert menu or type an integer followed by a period and a space.
• Nest a list: select item and press Tab. Unnest: select and press Shift + Tab.

How to add rich text content from other sources

You can paste rich text from other sites or word processors (like Google Docs). Formatting, links, and images will be maintained if pasted in the Designer or CMS rich text field.

How to rearrange and delete elements

Elements in a Rich text element can be rearranged via drag and drop onto the canvas or Navigator, or via keyboard shortcuts. Elements can be deleted by selecting and pressing Backspace or Command + X (Control + X on Windows).

How to style RTE content

Styling individual elements inside a Rich text element

Style elements within the Rich text element like any Webflow element: select on the canvas, go to Style panel, apply or create a class, and style.

Styling elements inside a Rich text element with HTML tags

RTE elements inherit styles from HTML tags. You can style via nested selectors, limiting default styles to RTEs with the same class.

Steps:

1. Select RTE on canvas
2. Give RTE a class
3. Select element in RTE
4. Go to Style panel (S)
5. Click into Selector field
6. Select HTML tag
7. Click Nest selector inside “class name”
8. Style as desired

How to style dynamic rich text

Rich text elements can bind to rich text fields in a Collection. Styling is best done by disconnecting, styling, and re-binding—or by applying a class, styling, and keeping it connected. Learn more about dynamic rich text.

---

Back to webflow help