How can I create lists in rich text elements using Webflow?
TL;DR
- Drag a Rich Text element onto your page and click inside to edit.
- Press Enter to start a new line, then select Bulleted List or Numbered List from the formatting menu.
- Press Enter for new list items, Tab to indent, and Shift + Tab to outdent.
- Use the Style panel to customize text size, spacing, colors, and bullet styles.
- Highlight existing text and click the list formatting button to convert it into a list.
You can create lists in Webflow’s Rich Text element using either the Webflow Designer or the Editor. Here’s how to do it:
1. Add a Rich Text Element
- Drag a Rich Text element onto your page from the Add panel.
- Click inside the Rich Text element to start editing content.
2. Insert an Ordered or Unordered List
- Inside the Rich Text element, press Enter to start a new line.
- Click the “+” button or right-click to open the formatting menu.
- Select either:
- Bulleted List (unordered list)
- Numbered List (ordered list)
3. Adding List Items
- Each time you press Enter, a new list item is created.
- To create a sub-item, press Tab to indent it.
- Press Shift + Tab to move an indented item back to the main level.
4. Applying Custom Styling
- Select the Rich Text element and go to the Style panel in Webflow.
- Adjust global styles for lists like:
- Text size, spacing, and color.
- Custom bullet icons using CSS pseudo-elements.
- Margin and padding for indentation control.
5. Converting Text into a List
- Highlight existing text inside the Rich Text element.
- Click the list formatting button in the toolbar to convert it to a list.
Summary
To create lists in Webflow’s Rich Text element, use the built-in toolbar to insert ordered (numbered) or unordered (bulleted) lists. Customize list styles through the Style panel for global adjustments. Press Tab/Shift + Tab to create or remove indents.