How to Create a Text Span Within Webflow CMS

What is a text span in Webflow?

Text span elements in Webflow are a powerful tool for designers and developers looking to fine-tune their web content. These elements allow you to apply specific styles or functionality to smaller portions of text within larger blocks, giving you granular control over your design.

One annoying thing about text span in Webflow is that you can't really create and manipulate them within Webflow CMS. However, there are workarounds as always! 

Text span in Webflow CMS step-by-step:

1. Create a custom class for rich text element
2. Style our bold text within that rich text element
3. Apply bold style to text we want to emphasize within Webflow CMS

Step 1. Create a custom class for rich text element

We need to give the default rich text element a class in order to style text within it! This is important step and won't work otherwise.

Let's do this by following these steps:

1. Drag a rich text element onto the canvas
2. Give it a class (e.g span-rte)

That's it! Since rich text element always comes with all the headings and different text inside of it, we don't have to add anything manually. We're ready for step 2.

Step 2. Styling within rich text element

You will notice that 'bold text' element comes with rich text out of the box. That's very good for us because we don't have to think about how to add that ourselves, especially if you're just a beginner at Webflow.

1. Select the 'bold text' element within rich text
2. Click on style selector -> All Bolds -> Nest selector inside of span-rte
3. Style your bold text according to your needs

What we did here is basically made sure that this bold text styling is only going to apply to rich text element that uses the class of .span-rte

Step 3. Apply bold text within CMS

Our last step is to simply apply bold style to any text we want to emphasize within our article. This is done from within Webflow CMS by selecting the text and clicking on B icon.

IMPORTANT: If you want this to work properly, make sure that you give the rich text element a class of .span-rte after connecting it with Webflow CMS field.

Conclusion

There you have it - simple and efficient solution without using any code! Webflow can sometimes be tricky, but if you know ins and outs, there is nothing that can take you by surprise! If you want to learn how to create a complex Webflow CMS filter, make sure to visit my resource page.