Back to all blogs

How to create a text span within Webflow CMS

Portrait picture of Mislav Repinac
By Mislav Repinac
January 22, 2025

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.

Portrait picture of Mislav Repinac smiling

Need help with Webflow?

I’m always ready to work on your next big thing, let’s talk!

Book a free call

Related posts

6 Min Read

The Ultimate Guide to Webflow Maintenance

Discover everything you need to know about Webflow maintenance in this ultimate guide. Learn essential tips, best practices, and strategies to keep your Webflow site running smoothly and efficiently.

Read more
6 Min Read

Top 7 Webflow Integrations for SaaS Companies

Discover the top 7 Webflow integrations for SaaS: streamline workflows, automate tasks, and enhance user engagement to boost productivity and growth.

Read more
3 Min Read

How to Style Select Field Dropdown in Webflow

Learn how to style and customize select dropdowns in Webflow forms effortlessly. This guide covers Webflow dropdown styling, CSS tips, and form design tricks to enhance UX and create visually stunning forms for your website.

Read more
Trusted by 50+ businesses like yours

Your search for Webflow developer ends here

To ensure highest quality of my service, I only work with limited amount of clients every month!

Book a free call