How can I create lists in rich text elements using Webflow?
TL;DR
- Add a Rich Text element, then use the built-in editor to insert bullet or numbered lists manually or via CMS Rich Text fields.
- Style list elements by assigning a class to the Rich Text Block and targeting list tags (ul, ol, li) in the Style panel.
To create lists inside a Rich Text element in Webflow, you need to use either the CMS or static content and format the text directly using the built-in Rich Text Editor.
1. Add a Rich Text Element
- Drag a Rich Text element from the Add panel into your desired section or container on the canvas.
- This element supports paragraph text, headings, blockquotes, lists, images, and more.
2. Create a List (Bullet or Numbered)
- Click inside the Rich Text element if editing static content manually.
- Use the WYSIWYG Editor (visible when you click inside the element) to:
- Click the "Bullet list" icon to start an unordered list.
- Click the "Numbered list" icon to start an ordered list.
- Press Enter to add new items to the list.
- Press Enter twice to exit the list and return to paragraph formatting.
3. Use Lists in CMS Rich Text Fields
- In your CMS Collection, add a Rich Text field.
- When editing an item, use the formatting toolbar in the CMS Editor to:
- Create lists the same way as static Rich Text (bullet or numbered).
- On your page, connect a Rich Text element to the CMS Rich Text field using Bindings.
4. Style List Elements Using a Rich Text Block
- Add a "Rich Text Block" inside your project.
- Add a class to the Rich Text Block, not individual elements.
- In the Style panel, you can then target and style:
- All list items (li) inside that block
- Ordered (ol) or unordered (ul) lists separately
Summary
To create lists in Webflow Rich Text elements, use the Rich Text Editor to insert bullet or numbered lists, either manually or through CMS content. Lists can be styled by applying a class to the Rich Text Block and targeting list elements in the Style panel.