Seguro que en algún momento has escrito una entrada en tu blog, directorio, portfolio utilizando el CMS de Webflow y te has dado cuenta de que ¡no puedes modificar el estilo de un campo Rich Text directamente! No te preocupes, en este artículo te vamos a contar cómo hacerlo en 5 minutos.
Lo primero que tienes que saber es que esto es una de las mayores frustraciones de cómo está hecho Webflow. Únicamente sucede cuando quieres cambiar un Rich Text dentro de una Collection Page - Páginas generadas automáticamente cada vez que creas una collection.
👀 Si por ejemplo tienes una colección para los posts de tu blog, la plantilla de cada entrada será una de estas páginas.
En realidad, la solución es sencilla, solo tienes que dar 3 pasos:
Lo primero que debes hacer es asegurarte de que tienes un elemento Rich Text dentro de tu Collection Template.
Ahora, dale una clase, por ejemplo Rich Text Blog.
Este paso sólo es necesario si tu elemento Rich Text ya lo has vinculado a un campo del CMS.
Sabrás que lo has hecho porque aparece el elemento con un borde morado. Para eliminar esta vinculación haz click en Get Text from Posts y desmárcalo.
Una vez que lo hayas desvinculado, ya podrás ir dando estilos a cada uno de los elementos. Esta es una de las partes más complicadas, porque tendrás que ir elemento por elemento haciendo los cambios correspondientes.
Te explico. Como funciona un Rich Text es que se compone de distintos elementos que puedes ir incorporando, como por ejemplo Headings, Paragraphs, Bullet Lists, Images...
Cada uno de estos elementos los puedes personalizar de distinta manera. Es decir que puedes tener distintos tipos de Headings dentro de una misma página, haciendo que por ejemplo el H5 esté subrayado y tenga 36px de tamaño.
A la clase general, le puedes modificar aspectos como el tamaño de fuente o el color - que afectarán de manera general a todos los elementos, pero podrán ser sobreescritos por las propiedades de cada uno.
¿Lo positivo? Que una vez lo configures no tendrás que volver a hacerlo.
Por ejemplo, para configurar cómo se ve un Heading 2, tendríamos que hacer lo siguiente.
Primero, vete al elemento Rich Text y selecciona en el navigator (la parte izquierda) el Heading que quieres modificar. Verás que te aparece en la parte superior - donde debería estar la clase, la opción de Seleccionar una Etiqueta.
Haz click en este elemento y te permitirá seleccionar la etiqueta HTML (en rosa) de All Headings 2.
👀 ¡Ojo! Si modificas este elemento se modificarán todos los elementos de tu página, así que ten mucho cuidado a la hora de hacerlo.
Verás que aparece una nueva opción cuando haces click en esa etiqueta, que es la opción de “nesting”.
Si la activas, los cambios únicamente se aplicarán a los Headings 2 que estén dentro de este elemento Rich Text en concreto. No en otros Rich Text ni en ningún otro sitio de tu web.
Haz click y verás como ahora puedes dar todos los estilos que necesites. Por ejemplo, vamos a hacer que los Heading 2 sean morados:
Tendrás que repetir esta operación para todos los elementos que quieras modificar. Los más habituales son:
¡Ahora ya podrás darle los estilos que quieras a tus elementos Rich Text!
Una vez termines, simplemente vuelve a vincular el elemento al campo de tu CMS y estará todo correctamente configurado.
¡Y esto es todo! Es algo que no es intuitivo y que una vez lo sabes es una tontería, pero que da verdaderos quebraderos de cabeza.
Si te ha ayudado, nada nos alegra más que ver como lo compartes entre tus conocidos.
Descubre el mundo del no-code en 1 hora
Conoce proyectos creados en No-code y descubre las mejores herramientas.
Aprende Gratis
Crea 5 proyectos reales en 6 semanas
Descubre cómo utilizar las mejores herramientas No-code en esta formación práctica.
Empieza a aprender
Academia de herramientas no-code y low–code
.svg){kind=icon}
