Badge Webflow Award Winner 2023

Text Span in Weflow: customize the style of one or more words

Published on 
22/2/2023
-
Amended on 
5/3/2024
Reading time: 5 min
text span functionality in the webflow tool
Written by
Icon digidop

The team Digidop

Web Agency

Customizing the style of a word or group of words is a great way to highlight key elements of your content. Find out how to use Text Span!

Key points to remember

Text Span allows users to style a specific part of a paragraph. This can be especially useful when you want to highlight a word or phrase in a paragraph.

In this article we will see the different steps to give a different style to any part of a text differently from the rest of the text thanks to the Text Span.

How to use the Text Span in Webflow?

  • Select and double-click on the paragraph or heading in which you want to customize the text
  • Select the text to be modified (a word or group of words)
  • A text formatting bar will appear above the selected text.

Several options are offered by the formatting bar, such as: Bold, Italic, Superscript, Subscript,

Insert Link, Wrap with span, Clear formatting

text span customization options

Click on one or more formatting options in the text formatting bar to apply it to your selected text

If you choose Wrap with span: the selected word or group of words will appear as Text Span

  • Give it a class > you will be able to reuse it on another selection
class of a selection wrap with text or text span
  • Add other styles to your text using the styles panel (on the right of the designer)
customize the text span in webflow

If you want to add a second Span Text, repeat the steps above.

Don't forget to save your changes and publish.

To clear any custom formatting:

  • Double-click on the text element
  • Select the formatted text
  • Click on Clear formatting

Using Text Span in Webflow, you now have the ability to customize the style of a specific word or group of words within a single text box. This will allow you to highlight key elements of your content, reinforce your message and create a more effective and visually appealing text design for your users.

Don't wait any longer to test the Text Span and don't hesitate to complete your learning with the video tutorial proposed by Florian on our Youtube channel

Flomodia by Digidop
Coudac project by Digidop
project Heka by DigidopFlaw by project DigidopMorfo project by Digidop