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
Ipsam est quod %%rerum%%
Neque eum sint sed illo. %%Consequatur%% illo est vero commodi omnis aut. Non corporis temporibus ut vero volup
Ea quaerat vero %%eum quod rerum quia%%
%%Aut%% eius praesentium natus deleniti. Harum est qui molestiae. Consequatur ea fugit aut officiis p
Ut %%repudiandae%% qui quidem aut
Quae est omnis saepe eveniet. Est hic deleniti et. %%Et sed iusto assumenda. Dicta ut autem et animi%%
Temporibus %%perferendis%% m
Sed earum fugiat ratione ut. %%Animi alias amet nihil ut nihil magni sint.%% Ad maxime possimus amet qui exercitat
<!-- 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>