Cómo crear un degradado de fondo dinámico con el CMS en Webflow: define los colores de inicio y fin desde un campo de color del CMS con un HTML Embed y tu equipo solo tendrá que elegir un color.
Esto parece muy sencillo en una página del CMS: basta con elegir los colores de inicio, de fin y los intermedios de un degradado en los ajustes de color de fondo de un elemento del CMS. Pero, como se aprende por las malas al empezar con Webflow, eso convierte tu degradado predefinido en un fondo de color sólido, en lugar de cambiar solo los colores por los definidos en el CMS.
Por suerte, hay una solución muy fácil (un fondo con degradado dinámico controlado por un campo de color del CMS), pero antes te cuento un poco de contexto para explicar de dónde salió este artículo.
Bueno, pues hace poco un cliente nos pidió páginas de servicios con el CMS para todos los servicios que ofrecía, con un color concreto asignado a cada servicio que determinaría el color del texto del H1, el color de un fondo con grano y ruido donde tenían un texto en movimiento y, por último, un degradado en el pie de página que también cambiaría al mismo color que el H1 y el fondo granulado.
Hay varias formas de abordarlo, pero queríamos mantenerlo simple para que el personal de la clínica, que era quien iba a usarlo, pudiera gestionar todos los servicios desde el Editor simplemente eligiendo un color, y nada más. Además, tenemos un pie de página como símbolo, así que lo ideal era no desvincular nada: que las páginas del CMS usaran el pie de página normal, pero que en lugar de su degradado con el color principal cambiara a los colores secundarios de los servicios.
En fin, después de darle unas vueltas, resulta que solo necesitas un HTML Embed y un poco de código.
¿Qué tenemos entonces? Tenemos nuestro pie de página, que es un símbolo con un degradado aplicado al fondo (no es obligatorio, pero teníamos un símbolo que ya llevaba un degradado y queríamos sobrescribirlo en la plantilla de la página del CMS):
Un ítem del CMS que tenga al menos un selector de color. Nuestro pie de página solo necesitaba un color, pero puedes tener más y adaptar el código a lo que necesites.
Por último, necesitamos un HTML Embed en la página con el siguiente código (lo mejor es colocarlo cerca de la parte superior):
También puedes ver el código en nuestro CodePen de este artículo.
Cambia el nombre del elemento por el de aquel al que quieras aplicar el degradado de fondo; en nuestro caso el estilo era simplemente .footer. Después configura tu degradado: nosotros lo necesitábamos a 180 grados y de transparente al color seleccionado. Puedes definir un color de inicio, uno de fin y otros intermedios, como prefieras. Añade tus colores desde el desplegable + Add Field. En el Designer actual, haz clic en el punto morado que aparece junto a la línea en Edit code y elige tu campo de color. Añadimos un !important para asegurarnos de que sobrescriba el estilo predeterminado.
Al guardar, verás el cambio en el elemento que seleccionaste:
Y ya está, no hay más. Si tienes alguna pregunta, cuéntanosla en los comentarios. Estamos preparando un vídeo rápido sobre esto, así que dale a me gusta y suscríbete para no perderte los contenidos nuevos.
Preguntas frecuentes
¿Por qué al elegir un color del CMS mi degradado se convierte en un fondo sólido?
Según nuestra experiencia, al elegir un color del CMS para el fondo obtienes un fondo sólido en lugar de que se cambien los colores dentro de tu degradado. Por eso definimos el degradado en un pequeño HTML Embed, donde el color del CMS va dentro del código del degradado.
¿Puedo añadir un degradado superpuesto dinámico a las imágenes de fondo del CMS?
Sí, debería funcionar, porque el embed simplemente da estilo a la clase a la que lo apuntes. Coloca el degradado en un elemento de superposición propio que quede encima de la imagen y haz que vaya de transparente al color elegido en el CMS. Nosotros construimos este artículo en torno a un pie de página, así que prueba primero en tu propio diseño.
¿Puedo usar más de un color en el degradado?
Sí. Añade a tu colección un campo de color por cada punto que quieras y luego coloca cada uno en el código del degradado del embed, incluidos los colores de inicio, de fin y los intermedios.
¿Tengo que tocar el símbolo del pie de página?
No. Dejamos el símbolo como estaba y sobrescribimos su degradado en la plantilla de la página del CMS con el embed, y por eso el código lleva un !important.
Si te gustan los trucos de CMS como este, echa un vistazo a nuestros artículos sobre cómo crear text spans en elementos de texto dinámico del CMS, vídeos de fondo controlados por el CMS en Webflow, cómo crear un scroller o ticker tape controlado por el CMS y cómo romper la cuadrícula del CMS con un patrón flexbox. También puedes explorar nuestros cloneables de Webflow.
