How can I use different colors within a paragraph in Webflow?
TL;DR
- Use a Text Block or Rich Text element to enable inline styling.
- Highlight text, wrap it in a span via the mini-toolbar, and assign custom classes or styles to change colors.
- Repeat the process for each colored section within the same paragraph.
To use different colors within a paragraph in Webflow, you’ll need to apply custom span styles to specific text sections. Webflow doesn’t allow multiple colors in the same paragraph via the default Paragraph element styling alone.
1. Use Rich Text or Text Block Elements
- Drag in a Text Block or Rich Text instead of a Paragraph element.
- These allow more flexibility when adding inline formatting.
2. Highlight Text and Convert to a Span
- Double-click into the text to enter edit mode.
- Highlight the portion of text you want to color.
- In the top mini-toolbar, click wrap in span (the ‘+’ icon).
- This converts the selected text into a span that you can style independently.
3. Apply a Custom Class or Style to the Span
- With the span selected, go to the Style panel.
- Click “+ Class” to create a new class for that span (e.g.,
red-text,blue-text). - Change the Text Color under Typography to the desired color.
4. Repeat for Additional Colors
- Repeat the above steps for other words or phrases within the same paragraph.
- You can reuse span classes (e.g., all blue phrases use
blue-text), or create new ones if needed.
5. Use a Rich Text Element with Custom Styling (Optional)
- If you're using CMS content, a Rich Text element gives more flexibility.
- Use the Rich Text Editor in the CMS to apply bold/italic styles.
- For colored text, you’ll need to create custom Rich Text span styles using Webflow’s “All Spans” styling option in the Style panel.
Summary
To apply multiple text colors within a single paragraph in Webflow, use span elements within a Text Block or Rich Text element, then style each span individually with custom classes or color properties.