How can the styling of the unordered list in the CMS rich text field be edited in Webflow?
TL;DR
- Add a Rich Text element, connect it to the CMS field, and assign it a custom class.
- Use the Style panel’s nested selectors to style
ulandlielements within that class for full control over list appearance.
To style an unordered list in a CMS Rich Text field in Webflow, you need to use a Rich Text element with a custom class and apply styles via the Rich Text nested elements panel.
1. Add the Rich Text and Connect the CMS Field
- Drag a Rich Text element into your page inside a Collection List or bound to a CMS Collection Page.
- Connect it to your CMS Rich Text field via the Get text from option.
2. Add a Custom Class to the Rich Text Element
- Select the Rich Text element and give it a unique class (e.g.,
article-body). - This class will allow you to target and style nested elements inside the rich text block.
3. Style the Nested Unordered List
- With the Rich Text element still selected, open the Selector dropdown (top of the Style panel).
- Choose "All Unordered Lists nested inside article-body" (you’ll see it written like:
ul inside article-body). - Apply styles such as:
- Margin/padding adjustments
- List-style-type (e.g., disc, circle, none)
- Font size, color, spacing, etc.
4. Style Nested List Items Individually (Optional)
- From the same selector dropdown, choose "All List Items inside article-body" (
li inside article-body). - Here, you can adjust individual list item spacing, bullet alignment, text color, and more.
5. Use the Rich Text Settings Panel (If Needed)
- You can also limit which elements are allowed in the Rich Text via the Settings panel, though this is primarily for content restrictions.
Summary
To style unordered lists from a CMS Rich Text field, give the Rich Text element a custom class, then use Webflow’s nested selectors to style the ul and li elements inside that class. This allows full control over bullet styles, spacing, and typography.