How can I use different colors within a paragraph in Webflow?
TL;DR
- Highlight specific text in a Paragraph element, apply a span using the inline style tooltip, and change its color in the Style panel.
- Assign classes to spans to reuse styles across other text or repeat the process for different colors.
To apply different colors within a paragraph in Webflow, you'll need to use inline text styling or span elements. Webflow lets you style specific words or phrases directly inside a Paragraph element.
1. Add a Paragraph and Enter Your Text
- Drag a Paragraph element from the Add panel into your canvas.
- Type or paste your paragraph content into the element.
2. Highlight and Style Specific Text
- Double-click the Paragraph to enter edit mode.
- Highlight the word or phrase you want to style.
- Click the paintbrush icon ("Style") in the inline tooltip that appears.
- A Span will be automatically created around the highlighted text. This lets you apply styles to just that portion.
- In the right-hand Style panel, change the Text Color or other styles as needed.
3. Reuse or Add New Span Styles
- To reuse the same color/style across other paragraphs:
- Give your span a class name in the Style panel (e.g., "highlight-red").
- You can then apply the same class to other spans elsewhere.
- To apply different colors throughout:
- Repeat the highlight and style process for each word or phrase.
Summary
To use different colors within a paragraph in Webflow, highlight the text you want to change, create a span using inline styling, and apply different colors through the Style panel. This gives you full control over text styling within a single Paragraph element.