Text Spans in CMS Text Elements in Webflow

In the previous example we just did the color, we got some questions about size on the blog post, so though it just a bit easier to add to the cloneable so you can see it in action. Here we have size, letter spacing and italics, underline, we've even used custom properties to add a wavy line and set the offset on the underline. Looks terrible, but just to show you can.

Some test copy with the span applied. Changing color and size in this example.

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

Ea quaerat vero %%eum quod rerum quia%%

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

Button

Ipsam est quod %%rerum%%

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

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>