Text Spans in CMS Text Elements in Webflow

This Webflow cloneable demonstrates the creation of text spans in CMS text elements in Webflow using some custom code and a marker in the CMS text. The full how-to post can be found on the Milk Moon Studio Blog. Clone the project here.

Below you can see the text spans in both the heading and paragraph text in a collection list, but this works the same for CMS Collection Pages. Check the project custom head and before body section for the code.

Some test copy with the span applied in the example. Just changing the color here, Click Here to see size etc. for folks asking in the comments of the post.

Dolor delectus %%vel eligendi%% occaecat

Unde repudiandae ea nihil sint amet dolor vel neque. Autem earum corporis consequatur. Aut qui inventore qui rerum hi

Button

Ut %%repudiandae%% qui quidem aut

Quae est omnis saepe eveniet. Est hic deleniti et. %%Et sed iusto assumenda. Dicta ut autem et animi%%

Button

Temporibus %%perferendis%% m

Sed earum fugiat ratione ut. %%Animi alias amet nihil ut nihil magni sint.%% Ad maxime possimus amet qui exercitat

Button

Ipsam est quod %%rerum%%

Neque eum sint sed illo. %%Consequatur%% illo est vero commodi omnis aut. Non corporis temporibus ut vero volup

Button

Ea quaerat vero %%eum quod rerum quia%%

%%Aut%% eius praesentium natus deleniti. Harum est qui molestiae. Consequatur ea fugit aut officiis p

Button

<!-- Adds jquery for text spans on page head -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Add before the body -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Select all elements with the class 'product_heading and text-size-medium'
  const headings = document.querySelectorAll('.product_heading, .text-size-medium');

  // Iterate over each heading element
  headings.forEach(function(heading) {
    // Get the heading content
    const headingContent = heading.innerHTML;

    // Replace the marker (e.g., '%%') with a span with the 'text-color-green' class
    const wrappedContent = headingContent.replace(/%%(.*?)%%/gi, function(_, match) {
      return `<span class="text-color-green">${match}</span>`;
    });

    // Replace the original content with the wrapped content
    heading.innerHTML = wrappedContent;
  });
});
</script>