How To

Creating Text Spans in Dynamic CMS Text Elements in Webflow

Creating Text Spans in Dynamic CMS Text Elements in Webflow
May 19, 2024

  · 4 min

This tutorial will guide you through the process of creating text spans in dynamic text elements in Webflow using some custom code and a marker in the Webflow CMS field.

Crafting Text Spans in Dynamic CMS Text Elements in Webflow

This is a feature that many Webflow users have been waiting for since Collection Lists were introduced in Webflow. Achieving this without coding is nearly impossible unless you stitch together a multitude of fields, which only works effectively for headings (rich text fields are usually left out) and lacks flexibility.

In this instance, we'll employ a small amount of custom code and a marker that you can place in your CMS fields, in the Designer or Editor, before and after the text for which you need the span. As a small Webflow studio, Milk Moon Studio is composed of Webflow designers who prefer low-code solutions when no-code options aren't available. You definitely don't need to be a Webflow expert for this—it's essentially a copy and paste job. We’ve also create a handy Webflow Cloneable for you to grab at the end of the post.

For our use case, we simply wanted to alter the text colour and make it extremely easy for the client to manage by just adding a marker to the CMS. Initially anyway, we’ll get to more complex use-cases later.

Crafting the Styles

We started by creating the text style to use in the span. In this case, we chose a green text colour, and called it text-color-green. Remember to adhere to CSS style stacking rules and only override what you want the span to apply.

Create your Webflow Span Style for the Dynamic Text Element
Create your Webflow Span Style for the Dynamic Text Element

Integrating jQuery

Next you’re going to need to add this script to the <!-- fs-richtext-ignore --><head> code of the project.

<iframe height="300" style="width: 100%;" scrolling="no" title="Adds jquery to create text spans on CMS pages" src="https://codepen.io/milkmoonstudio/embed/yLxxzKV?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/yLxxzKV">
Adds jquery to create text spans on CMS pages</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

Adding Custom Code to the Page

The next step is to add the custom script to the pages requiring the CMS spans. This needs to be added to the “Before <!-- fs-richtext-ignore --></body> tag” section, as the text needs to load before the script runs.

<iframe height="300" style="width: 100%;" scrolling="no" title="Add Text Span to CMS Text Elements (h1, h2, .services-hero_h1)" src="https://codepen.io/milkmoonstudio/embed/PoddJeM?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/PoddJeM">
Add Text Span to CMS Text Elements (h1, h2, .services-hero_h1)</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

If you look at the code you’ll see that in my case I wanted all h1’s all h2 and text styled as <!-- fs-richtext-ignore -->.services-hero_h1. You’re looking for line 4:

<!-- fs-richtext-ignore -->const headings = document.querySelectorAll('h1, h2, .services-hero_h1');

So over here, just add your styles or tags.

Marking the Text in the CMS

Finally, add the marker around the text in the CMS. We used %% as the marker. This marker can be changed in the previous code section, but we found that this worked well for us.

Add the marker around the copy you want it to apply to in Webflow once published
Add the marker around the copy you want it to apply to in Webflow once published

Naturally, you won't see the span in the Designer, but after you publish, it'll function perfectly when the code runs. The script looks for the specified text elements, checks for the marker %%, and then adds the span around the text within the marker.

Text Span Marker in the Designer

Text Span with Markers showing in the Dynamic Text Field in the Webflow Designer
Text Span with Markers showing in the Dynamic Text Field in the Webflow Designer

Webflow CMS Text Span on the published site

Text Span for Dynamic text on the Published Webflow Project
Text Span for Dynamic text on the Published Webflow Project

Two Spans!

If you’re keeping things simple, that’s about it. We did however realise that the contrast on the green was way to light if we had it on a white background, so we created another span with a darker shade of green and added two styles we could apply to the text elements, one for green text on a dark background and one for green text on a white background. So now we had two additional text styles the script had to check for and two styled text spans that needed to be applied if the text was either in a light or dark background. To help the script identify text on white we added: .text-is-on-white as a style, and for text on dark, the apply named: .text-is-on-dark.

For text on white we created a new darker green style: .text-color-green-on-white

We know, we really need to get better at naming styles.

Anyhow, the code had to be updated to cycle through everything and add the new span as well, so here’s the new code:

This just replaced the previous code before the </body> tag. And there you have it, some additional code to give you an idea of what you can do if things get more complex.

<iframe height="300" style="width: 100%;" scrolling="no" title="Add Different Text Span to CMS Text Elements" src="https://codepen.io/milkmoonstudio/embed/wvEEPWz?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/wvEEPWz">
Add Different Text Span to CMS Text Elements</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

Concealing the Text if the Page Flashes %% on Load

Lastly, if your page is large or busy, you might notice the %% marker flashing and then being replaced as the script loads. A simple solution is to add a class that hides the text until the script runs, and then make the text visible.

<iframe height="300" style="width: 100%;" scrolling="no" title="Hide CMS Spanned Text Until Loaded" src="https://codepen.io/milkmoonstudio/embed/rNZZYmr?default-tab=css&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/rNZZYmr">
Hide CMS Spanned Text Until Loaded</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

You’ll need to add the new style in the <head> and then apply the class to the elements you want to hide and show (in our case that was the <!-- fs-richtext-ignore -->h1, h2 and .services-hero_h1), then update you script with the bit that unhides the text.

<iframe height="300" style="width: 100%;" scrolling="no" title="Hide CMS Spanned Text Until Loaded" src="https://codepen.io/milkmoonstudio/embed/rNZZYmr?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/rNZZYmr">
Hide CMS Spanned Text Until Loaded</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

This guide should assist you in implementing what has long been a sought-after feature. If you have any questions, feel free to leave them in the comments. We might also create a video tutorial, so stay tuned! You can grab the Webflow Cloneable here to see how it’s implemented. If you're interested in more how-tos, check out the section on the blog.

Share

All Posts

Gradient Background