How can I use different colors within a paragraph in Webflow?
TL;DR
- Wrap specific text in spans within the paragraph.
- Assign each span a class in the Style panel and set different text colors as desired.
To use different colors within a single paragraph in Webflow, you need to wrap specific text segments in spans and apply styles to them individually.
1. Add a Paragraph Element
- Drag a Paragraph element from the Add panel into your page.
- Type or paste the full paragraph text.
2. Highlight and Span Target Text
- Double-click the paragraph to enter text editing mode.
- Select the portion of text you want to color differently.
- Click the + button in the floating toolbar and choose Span.
3. Style the Span
- With the span selected, go to the Selector field in the Style panel.
- Click into the selector and choose Create a class (e.g.,
highlight-color). - Set a Text Color in the Typography section.
- Repeat for other segments and assign different classes if different colors are needed.
4. Reuse Span Styles
- Once a span class is created, you can reuse it across the site.
- Simply wrap new text in a span and assign the pre-made span class for consistent styling.
Summary
Wrap inner text segments in spans, assign each a class, and apply different text colors using the Style panel. This gives you full control over colors within a paragraph in Webflow.