Rich text field overview

Rich text fields are used for long-form content you can format from the CMS panel in the Designer or the Editor.

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

While a plain text field is used for creating short-form, unformatted text, a rich text field is used for long-form content that you can format from the Collections panel in the Designer or the Editor. The rich text field gives your collaborators freedom to create and format their content. The rich text field can be displayed in Collection lists and on Collection pages. You can also use the rich text field to filter a Collection list or set conditional visibility on elements on Collection pages and in lists.

Common uses
  • Most long-form content with links
  • Blog posts
  • Articles
  • Team member bios
  • Product description
  • Event details
On the left a custom field for rich text is filled out with text and an image. On the right is the result of a rich text block element in the designer with the same text and image entered in the Collection settings.
Pro tip
Rich text comes in handy when you want to give collaborators the ability to further style text. If you don’t want collaborators to have this ability, the plain text field will be the better choice.
In this lesson
  • Creating a rich text field
  • Creating rich text content
  • Displaying dynamic rich text in your design
  • Styling elements nested in a rich text field
  • Filtering a Collection list using the rich text field
  • Conditional visibility using the rich text field

Creating a rich text field

A rich text field can be added to a new or existing Collection. In Collection settings, click on New Field and then choose the Rich Text field.

The Rich text is highlighted in the New field select menu.

Before saving the field, you can set a minimum character count and/or a maximum character count that is allowed for this field. And as with any field, you can add a Help text and specify if the field is required or not.

Creating rich text content

You and your collaborators can create rich text content for each Collection item.

  1. Open a Collection item in the CMS
  2. Type or paste in your rich text content
  3. Format it further or add media
  4. Save your Collection item
A preview of a collection page called Lessons" being edited in the Editor.

In a rich text field, you can add:

  • Multiple paragraphs
  • Images
  • Videos
  • Rich media
  • Bulleted lists
  • Numbered lists
  • Bold text
  • Italicized text
  • Link
  • Headings
  • Block quotes
Recommended reading
Learn more about rich content and how to add, format, and style rich text elements.

Displaying dynamic rich text in your design

To show the content of the rich text field in Collection list or Collection pages, you can add a rich text element and connect it to this field:

  1. Add a rich text element in a Collection list or on a Collection page
  2. Check the Get text from checkbox in the Inner Text Settings that appears
  3. Connect it to the relevant rich text field from the field dropdown
The Inner Text Settings of a Rich Text element is shown. The check box is checked to Get text from a collection called Blog Posts with the drop down menu expanded to connect to the Featured Blog Post field.

You can also access the Inner Text Settings by selecting the text element and either clicking on the settings icon next to the element label on the canvas or by going to the Settings panel (D).

Styling elements nested in a rich text field

You can set specific styles for each element nested in a rich text, like headings, lists, links, etc. You can do this before you connect your rich text element to a rich text field. Learn more about styling elements nested in a rich text element.

You cannot style elements nested in a rich text element when it’s connected to a rich text field. First, you need to remove the connection, style its elements, then, connect it again to the rich text field. You can remove the connection by unchecking the “Get text from” under Inner Text Settings.

Filtering a Collection list using the rich text field

To filter your Collection list using a rich text field:

  1. Select the Collection list you want to filter
  2. Go to the Settings panel (D)
  3. Add a Filter under Collection List Settings
  4. Select the relevant rich text field in the first dropdown
  5. Choose a rule in the second field
  6. Specify the value if needed
  7. Click Save

The filter rules that you can use with the rich text field and values are:

  • Is Set - looks for Collection items that have content for this rich text field
  • Is Not Set - looks for Collection items that don’t have any content in this rich text field
Learn more about filtering Collection lists.

Conditional visibility using the rich text field

You can set conditional formatting to show rich text content in specific conditions. You can also set conditional formatting, for example, on headings to show them only when a specific rich text field has content:

  1. Select the heading
  2. Go to the Settings panel (D)
  3. Add a Condition (when this element is visible) under Conditional visibility
  4. Select your rich text field in the first dropdown
  5. Choose Is set in the second dropdown
  6. Click Save

Learn more about conditional visibility.

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