Cómo crear espacios de texto en elementos de texto dinámicos de Webflow CMS

February 22, 2024

· 4 min

Este tutorial lo guiará a través del proceso de creación de espacios de texto en elementos de texto dinámico en Webflow utilizando un código personalizado y un marcador en el campo CMS de Webflow.

Creación de espacios de texto en elementos de texto dinámicos de CMS en Webflow

Esta es una función que muchos usuarios de Webflow han estado esperando desde Las listas de colecciones se introdujeron en Webflow. Lograr esto sin programar es casi imposible a menos que se unan multitud de campos, lo que solo funciona eficazmente para los encabezados (los campos de texto enriquecido suelen omitir) y carece de flexibilidad.

En este caso, utilizaremos una pequeña cantidad de código personalizado y un marcador que podrás colocar en los campos de tu CMS, en el Diseñador o en el Editor, antes y después del texto para el que necesitas el espacio. Como un pequeño Flujo web Milk Moon Studio está compuesto por diseñadores de Webflow que prefieren soluciones con poco código cuando las opciones sin código no están disponibles. Definitivamente no necesitas ser un Experto en webflow para esto, es esencialmente un trabajo de copiar y pegar. También hemos creado un práctico flujo web que puedes clonar al final de la publicación.

Para nuestro caso de uso, simplemente queríamos modificar el color del texto y facilitar al cliente su administración con solo añadir un marcador al CMS. De todos modos, inicialmente veremos casos de uso más complejos más adelante.

Elaboración de los estilos

Empezamos creando el estilo de texto para usar en el espacio. En este caso, elegimos un color de texto verde y lo llamamos text-color-green. Recuerda seguir las reglas de apilamiento de estilos CSS y anular únicamente lo que quieras que se aplique al intervalo.

Create your Webflow Span Style for the Dynamic Text Element

Cree su estilo de intervalo de flujo web para el elemento de texto dinámico

Integración de jQuery

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

Agregar código personalizado a la página

El siguiente paso es añadir el script personalizado a las páginas que requieren los intervalos del CMS. Es necesario añadirlo a la sección «Antes</body> de  etiquetar», 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 h2 y el texto con el estilo de .services-hero_h1. Estás buscando la línea 4:

‍encabezados constantes = document.querySelectorAll ('h1, h2, .servicios-hero_h1');

Así que aquí, solo tienes que añadir tus estilos o etiquetas.

Marcar el texto en el CMS

Por último, añada el marcador alrededor del texto en el CMS. Usamos%% como marcador. Este marcador se puede cambiar en la sección de código anterior, pero descubrimos que nos funcionó bien.

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

Agregue el marcador alrededor de la copia a la que desea que se aplique en Webflow una vez publicada.

Naturalmente, no verás el intervalo en el Diseñador, pero después de publicarlo, funcionará perfectamente cuando se ejecute el código. El script busca los elementos de texto especificados, comprueba el marcador%% y, a continuación, añade el espacio alrededor del texto dentro del marcador.

Marcador de espacio de texto en el diseñador

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

Extensión de texto con marcadores que se muestran en el campo de texto dinámico del Diseñador de flujo web

Webflow CMS Text Span en el sitio publicado

Text Span for Dynamic text on the Published Webflow Project

Intervalo de texto para texto dinámico en el proyecto Webflow publicado

¡Dos tramos!

Si mantienes las cosas simples, eso es todo. Sin embargo, nos dimos cuenta de que el contraste del verde era demasiado claro si lo teníamos sobre un fondo blanco, así que creamos otro tramo con un tono verde más oscuro y añadimos dos estilos que podíamos aplicar a los elementos del texto, uno para el texto verde sobre un fondo oscuro y otro para el texto verde sobre un fondo blanco. Así que ahora teníamos dos estilos de texto adicionales que el script tenía que comprobar y dos tramos de texto con estilos que había que aplicar si el texto tenía un fondo claro u oscuro. Para ayudar al script a identificar el texto en blanco, agregamos: .text-is-on-white como estilo, y para el texto en negro, la aplicación denominada: .text-is-on-dark.

Para el texto en blanco, hemos creado un nuevo estilo verde más oscuro: .text-color-green-on-white

Lo sabemos, realmente necesitamos mejorar a la hora de nombrar estilos.

De todos modos, el código tuvo que actualizarse para recorrerlo todo y agregar también el nuevo intervalo, así que este es el nuevo código:

Esto acaba de reemplazar el código anterior antes de la</body> etiqueta. Y ahí lo tienes, un código adicional para hacerte una idea de lo que puedes hacer si las cosas se vuelven más complejas.

Ocultar el texto si la página parpadea un%% al cargarse

Por último, si su página es grande o está ocupada, es posible que observe que el marcador%% parpadea y, a continuación, se reemplaza a medida que se carga el script. Una solución sencilla es añadir una clase que oculte el texto hasta que se ejecute el script y, a continuación, hacer que el texto esté visible.

Tendrás que añadir el nuevo estilo en la <head>clase y, a continuación, aplicarla a los elementos que quieres ocultar y mostrar (en nuestro caso, ese era el  h1, h2 y.services-hero_h1) y, a continuación, actualice el script con la parte que muestra el texto.

Esta guía debería ayudarlo a implementar lo que durante mucho tiempo ha sido una función muy solicitada. Si tiene alguna pregunta, no dude en dejarla en los comentarios. También podemos crear un videotutorial, ¡así que estad atentos! ¡Puedes coge el Webflow Cloneable aquí para ver cómo se implementa. Si está interesado en obtener más instrucciones, echa un vistazo a la sección del blog.