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:
- Create a custom class for rich text element
- Style our bold text within that rich text element
- 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:
- Drag a rich text element onto the canvas
- 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.
- Select the 'bold text' element within rich text
- Click on style selector -> All Bolds -> Nest selector inside of span-rte
- 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.
Related posts
How to play background video on hover in Webflow
Learn how to play video on hover in Webflow using simple Javascript code. No embed video, this works with native background video element in Webflow.
Create link to specific tab in Webflow (with slide)
Learn how to make a link or button slide to section and open a specific tab in Webflow on same page or another page.
How to create a Webflow CMS filter system
Read this tutorial on how to leverage Finsweet CMS Filter attribute to successfully create a Webflow CMS filter for your next client project.
Your search for Webflow developer ends here
To ensure highest quality of my service, I only work with limited amount of clients every month!