Span en texto del CMS de Webflow: cómo añadir spans al texto dinámico

Cómo crear spans de texto en elementos de texto dinámico del CMS en Webflow

Es una función que muchos usuarios de Webflow esperan desde que se introdujeron las Collection Lists en Webflow. Lograrlo sin código es casi imposible, a menos que combines un montón de campos, algo que solo funciona bien para los encabezados (los campos de texto enriquecido suelen quedar fuera) y que resulta muy poco flexible. Si alguna vez buscaste cómo añadir un span en Webflow, o cómo dar estilo solo a una parte de un encabezado o de un campo de texto que viene del CMS, esta es la solución que usamos nosotros.

En este caso usaremos un poco de código personalizado y un marcador que puedes colocar en tus campos del CMS, en el Designer o en el Editor, antes y después del texto al que quieres aplicar el span. Como un pequeño estudio de Webflow, Milk Moon Studio está formado por diseñadores de Webflow que prefieren soluciones low-code cuando no hay opciones no-code. No hace falta ser un experto en Webflow para esto: básicamente es copiar y pegar. Además, hemos creado un práctico Webflow Cloneable que puedes descargar al final del artículo.

En nuestro caso, solo queríamos cambiar el color del texto y hacer que el cliente pudiera gestionarlo con total facilidad, añadiendo simplemente un marcador en el CMS. Al menos al principio; más adelante veremos casos de uso más complejos.

Crear los estilos

Empezamos creando el estilo de texto que usaremos en el span. En este caso elegimos un color de texto verde y lo llamamos text-color-green. Recuerda respetar las reglas de apilamiento de estilos CSS y sobrescribir solo lo que quieres que aplique el span. (Si el apilamiento te resulta confuso, nuestra guía sobre la especificidad CSS en Webflow lo explica.)

Crea el estilo de span de Webflow para el elemento de texto dinámico

Integrar jQuery

A continuación, tendrás que añadir este script al código del <head> del proyecto.

Añadir código personalizado a la página

El siguiente paso es añadir el script personalizado a las páginas que necesitan los spans del CMS. Debe ir en la sección “Before </body> tag”, ya que el texto tiene que cargarse antes de que se ejecute el script.

Si miras el código, verás que en mi caso quería todos los h1, todos los h2 y el texto con el estilo .services-hero_h1. Lo que buscas es la línea 4:

‍const headings = document.querySelectorAll('h1, h2, .services-hero_h1');

Aquí solo tienes que añadir tus propios estilos o etiquetas.

Marcar el texto en el CMS

Por último, añade el marcador alrededor del texto en el CMS. Nosotros usamos %% como marcador. Se puede cambiar en la sección de código anterior, pero a nosotros nos funcionó bien así.

Añade el marcador alrededor del texto al que quieres aplicarlo; se verá en Webflow una vez publicado

Como es lógico, no verás el span en el Designer, pero una vez que publiques funcionará a la perfección cuando se ejecute el código. El script busca los elementos de texto indicados, comprueba si hay marcador %% y luego añade el span alrededor del texto que queda entre los marcadores.

Marcador de span de texto en el Designer

Span de texto con marcadores visibles en el campo de texto dinámico del Webflow Designer

Span de texto del CMS de Webflow en el sitio publicado

Span de texto en texto dinámico del proyecto de Webflow publicado

¡Dos spans!

Si prefieres mantenerlo simple, con esto ya está. Sin embargo, nos dimos cuenta de que el verde tenía muy poco contraste sobre un fondo blanco, así que creamos otro span con un tono de verde más oscuro y añadimos dos estilos que podíamos aplicar a los elementos de texto: uno para texto verde sobre fondo oscuro y otro para texto verde sobre fondo blanco. Así, teníamos dos estilos de texto adicionales que el script debía comprobar y dos spans con estilo que había que aplicar según el texto estuviera sobre un fondo claro u oscuro. Para ayudar al script a identificar el texto sobre blanco añadimos .text-is-on-white como estilo, y para el texto sobre fondo oscuro, el llamado .text-is-on-dark.

Para el texto sobre blanco creamos un nuevo estilo de verde más oscuro: .text-color-green-on-white

Lo sabemos, tenemos que mejorar bastante al nombrar los estilos.

En fin, hubo que actualizar el código para que recorriera todo y añadiera también el nuevo span, así que este es el código nuevo:

Este código simplemente sustituyó al anterior antes de la etiqueta </body>. Y ya está: un poco de código adicional para que te hagas una idea de lo que puedes hacer cuando las cosas se complican.

Ocultar el texto si la página muestra %% al cargar

Por último, si tu página es grande o tiene mucho contenido, quizá notes que el marcador %% aparece un instante y luego se sustituye cuando carga el script. Una solución sencilla es añadir una clase que oculte el texto hasta que se ejecute el script y hacerlo visible después.

Tendrás que añadir el nuevo estilo en el <head> y luego aplicar la clase a los elementos que quieres ocultar y mostrar (en nuestro caso fueron los h1, h2 y .services-hero_h1); después, actualiza tu script con la parte que vuelve a mostrar el texto.

Preguntas frecuentes sobre los spans de texto en Webflow

¿Cómo añado un span al texto del CMS en Webflow?

Webflow no permite envolver parte de un elemento de texto dinámico en un span desde el Designer. La solución alternativa es poner un marcador (nosotros usamos %%) alrededor de las palabras en el campo del CMS y añadir un pequeño script que encuentre el marcador y envuelva esas palabras en un span con tu clase de estilo.

¿Por qué no veo el span en el Designer?

El span lo añade el script en el navegador, así que en el Designer y en el Editor solo ves los marcadores %%. El texto con estilo aparece una vez que el sitio se publica y se ejecuta el código.

¿Puedo usar un marcador distinto de %%?

Sí. El marcador se define en el script, así que cámbialo ahí y usa los mismos caracteres en tus campos del CMS. Nos quedamos con %% porque nos funcionó bien.

¿Por qué se ve %% un instante antes de que cambie el texto?

El script se ejecuta después de que carga la página, así que en una página grande o con mucho contenido el marcador puede verse un momento. Oculta el texto con una clase hasta que se ejecute el script, como se describe en la sección anterior sobre cómo ocultar el texto.

Si buscas más trucos con el CMS, echa un vistazo a degradados de fondo controlados desde el CMS, una cinta de noticias (ticker) nativa controlada desde el CMS, cómo romper la cuadrícula del CMS con flexbox y cómo crear un resumen del blog sin un campo de resumen. Hay más recursos gratuitos en nuestra página de Webflow cloneables.

Esta guía debería ayudarte a implementar una función que se echaba en falta desde hace mucho. Si tienes alguna pregunta, déjala en los comentarios. Quizá también creemos un tutorial en vídeo, así que estate atento. Puedes descargar aquí el Webflow Cloneable para ver cómo está implementado. Si te interesan más tutoriales, echa un vistazo a la sección del blog.