Cómo reemplazar los estilos estáticos con variables de diseño de Divi 5

Si alguna vez ha modificado colores, relleno o fuentes un módulo a la vez, probablemente se haya dado cuenta de cuán lentos, propensos a errores y aburridos pueden ser los cambios de estilo manual.

Divi 5 presenta una forma más inteligente de manejarlo. Con variables de diseño y encontrar y reemplazar, puede actualizar estilos estáticos en su diseño y construir un sistema de diseño reutilizable en minutos. Veamos cómo.

Divi 5 está listo para ser utilizado en nuevos sitios web.

¿Qué son los "estilos estáticos"?

Cuando importa un diseño Divi o usa una sección prediseñada, todo, como fuentes, colores, espaciado y bordes, ya viene. Si un diseño no usa presets, notará que estos valores se aplican en un nivel de elemento.

Un encabezado puede tener su tamaño de fuente escrito manualmente, un botón puede usar un código de color específico, y el acolchado o el espacio pueden usar números fijos. Estos valores aplicados directamente se denominan estilos estáticos.

Y aunque parecen inofensivos al principio, pueden convertirse rápidamente en un problema cuando quieres hacer cambios. El problema con los estilos estáticos es que tardan más en administrar. Si desea cambiar el color de todos sus botones o ajustar el espacio en las secciones, debe editar cada uno manualmente. Eso es lento y frustrante.

Ahora, imagine que está actualizando una marca de sitio web completa manualmente o trabajando en un diseño complejo lleno de estilos repetidos. Muchos diseñadores han compartido lo frustrante que puede ser este proceso. Pero durante años, no había una forma confiable de arreglarlo. Es por eso que construimos una solución más inteligente en Divi 5.

Cómo Divi 5 facilita el reemplazo de los estilos estáticos

Uno de nuestros objetivos con Divi 5 es hacer que su flujo de trabajo de diseño sea más rápido y menos repetitivo. Para ayudar con eso, hemos agregado dos características poderosas: variables de diseño , que le permiten centralizar sus estilos y encontrar y reemplazar , lo que le permite actualizarlas instantáneamente a través de su diseño. Entendamos en detalle.

Las variables de diseño le permiten definir sus estilos globales

Con Divi 5, finalmente puede construir su propio marco de diseño visualmente y usarlo para modificar los estilos de su marca rápidamente.

En lugar de aplicar manualmente el mismo color, fuente o espacio en cada módulo, Divi 5 ahora le permite guardar esos valores como variables de diseño. Estos son valores reutilizables a los que puede hacer referencia en todo su sitio para que su diseño sea más consistente y más fácil de mantener.

Dentro del Visual Builder, el Administrador de variables le permite crear y organizar variables en seis tipos diferentes: colores, fuentes, números (como espacios o tamaños), texto, imágenes y enlaces.

Puede guardar cada variable con un nombre claro, como el relleno de sección, por lo que es más fácil encontrarla y reutilizarla. A diferencia de escribir variables CSS manualmente, la interfaz de Divi le permite administrar estos valores visualmente sin tocar el código.

Aplicar estas variables guardadas también es más fácil. Al personalizar un módulo, vaya a Configuración, ubique el icono de Variable Manager y elija su variable de la lista.

Verá la verdadera ventaja cuando sea hora de hacer cambios. Digamos que quieres cambiar el relleno en todas partes. En lugar de editar docenas de módulos, simplemente actualiza los valores una vez en el administrador de variables , y se actualiza en su sitio.

¿Observe los valores que cambian en tiempo real en los campos de configuración aplicados? Ese es el poder de un sistema de diseño global.

Y esto tampoco se limita a los estilos de diseño. Para administrar el contenido repetido de manera efectiva, también puede guardar texto, imágenes y enlaces, como una dirección, correo electrónico o eslogan de la empresa, como una variable de contenido. Ya no hay necesidad de copiar pasta, solo inserte como contenido dinámico y se mantendrá consistente en su sitio.

Aprenda todo sobre variables de diseño

Buscar y reemplazar le permite cambiar de estática a estilos globales

La función de búsqueda y reemplazo de Divi 5 le permite actualizar rápidamente los valores de estilo en su diseño sin editar cada módulo individualmente. Está diseñado para ayudarlo a cambiar los valores estáticos como colores, fuentes, espaciado o cualquier otra configuración que se repita en las secciones desde un solo punto de partida con solo unos pocos clics.

Para usarlo, haga clic con el botón derecho en cualquier campo de estilo dentro del Visual Builder o se desplace y haga clic en los tres puntos. Verá la opción Buscar y reemplazar en el menú desplegable.

Esto abre un nuevo panel de búsqueda y reemplazo . Aquí, puede hacer los cambios deseados y aplicarlos a granel.

• (1.) Elemento de origen: la configuración a la que se dirige (por ejemplo, texto, color o espacio). Abra el menú desplegable y notará que en realidad es la jerarquía de capas.
• (2.) Encuentre valor: el valor exacto que desea reemplazar, como una fuente o código de color específico.
• (3.) Reemplace el valor: el nuevo valor o variable que desea aplicar en su lugar.
• (4.) Busque y reemplace en la ubicación: elija dónde aplicar el cambio. Este módulo, la sección o la página completa.
• (5.) Busque y reemplace en el tipo de elemento: decida si el cambio debe aplicarse a todos los elementos o solo tipos de módulos específicos.
• (6.) Solo reemplace los campos idénticos: cuando está habilitado, los reemplazos ocurren solo si tanto la configuración como el valor coinciden exactamente.

Así es como funciona. Supongamos que desea cambiar la fuente de encabezado utilizada en la página. En lugar de ir al módulo por módulo, usaremos el panel Buscar y reemplazar.

Cuando lo abre desde la configuración de un encabezado, el elemento de origen se selecciona automáticamente, por lo que no siempre tiene que elegirlo manualmente.

(También puede hacer clic en diferentes elementos, y las opciones del panel se ajustarán automáticamente).

En el valor de búsqueda, ingrese el valor que se reemplazará. Para nuestro ejemplo, es Medula Uno, la fuente aplicada actual. En el valor de reemplazo , elija el nuevo valor que desea aplicar. Seleccionemos Aclonica.

Luego, seleccione si desea actualizar todas las instancias en toda la página o solo la columna, la fila o la sección en la ubicación Buscar y reemplazar. Mantenga el tipo de búsqueda y reemplace en el tipo de elemento como todos los elementos, ya que queremos apuntar a todos los módulos de encabezado.

Y eso es todo. Simplemente presione Buscar y reemplazar, y en segundos, se actualizan 20 instancias de encabezado. ¿Observe el texto del cuerpo y las fuentes de los botones permanecen intactos? Eso es porque usan valores diferentes. Y así de preciso es el sistema.

Divi solo aplica cambios donde encuentra una coincidencia exacta. Esto significa que puede limpiar los estilos estáticos con confianza, sin estropear diseños que no necesitan cambiar. Pero, ¿cómo encajan las variables de diseño aquí?

Son como la guinda del pastel. También puede usar variables de diseño en el campo Valor Reemplazar . Coloque sobre él, haga clic en el icono del Administrador de variables e inserte una variable guardada.

Esto vincula sus estilos a un sistema reutilizable a nivel mundial que es mucho más fácil y más eficiente de actualizar. Así es exactamente como reemplazaremos todos nuestros valores estáticos con variables de diseño a nuestro sitio web a prueba de futuro para obtener actualizaciones más fáciles.

Aprenda todo sobre buscar y reemplazar

Ambas características (y muchas más) están disponibles dentro de Divi 5. El constructor se ha reinventado para ofrecer un rendimiento más rápido, flujos de trabajo más inteligentes y más control. Honestamente, leer sobre ellos es emocionante, pero notará el cambio real cuando experimente estas características para usted.

Cómo reemplazar los estilos estáticos con variables guardadas

Ahora que sabes qué herramientas usaremos, es hora de verlas en acción.

Para guiarlo a través del proceso, he importado el diseño de la página de destino del taller de pastel como ejemplo. Los detalles de diseño de este diseño, como fuentes, colores y espacios, se aplicaron como estilos estáticos. La forma tradicional requiere que personalice el módulo de TI por módulo. Pero en este tutorial, los reemplazaremos paso a paso usando el flujo de trabajo que acabamos de cubrir.

Pero antes de sumergirse, tómese un momento para escanear su diseño en busca de patrones. Busque estilos repetidos, como el mismo color utilizado en los botones, tamaños de fuente similares en encabezados, espaciado consistente entre secciones o configuraciones de borde idénticas. Estos valores repetidos son sus mejores candidatos para las variables de diseño, especialmente si es probable que los cambie más tarde.

1. Guarde sus variables de diseño

Después de analizar el diseño del taller de pastel, he identificado algunos valores que aparecen constantemente en la página y me gustaría actualizarlos con mis estilos preferidos. Estos incluyen:

• Ancho de borde de fila
• Relleno de botón
• Texto de encabezado
• Texto del cuerpo
• Color de texto del cuerpo

En este momento, se aplican como estilos estáticos. Entonces, en lugar de repetir la misma configuración manualmente, las convertiré en variables de diseño. Esto me da un marco simple y reutilizable para actualizar los estilos de página con solo unos pocos clics.

Comencemos con el ancho de la frontera en las filas. Para crear y guardar una variable, abra el Administrador de variables y elija el tipo. Para el ancho de borde de una fila, elegiré una variable de número . A continuación, nombra tu variable y asigna un valor. Haga clic en Guardar variables.

Una vez guardada, esta variable está lista para reutilizarse con un clic. Aparecerá en cualquier lugar donde se pueda establecer el ancho de la frontera. Seguiré el mismo proceso para el texto de encabezado, la fuente del cuerpo, el color de texto y el relleno de botones. Estas variables guardadas ahora forman la base del lenguaje de diseño de mi diseño. Haces lo mismo.

De esta manera, si decide ajustar el espacio de su botón o cambiar la fuente más tarde, no tendrá que actualizar cada módulo uno por uno. Simplemente actualice la variable, y el resto se actualizará.

2. Use buscar y reemplazar para cambiar los estilos estáticos a variables

Con nuestras variables de diseño listas, el siguiente paso es reemplazar los valores estáticos a través del diseño usando Buscar y Reemplazar. Comencemos con el relleno de botones.

En este momento, cada botón usa relleno de entrada manual: 6px para arriba e inferior, y 1px para izquierda y derecha. Para traer consistencia y facilitar las actualizaciones, he creado dos variables:

• Button-T = 12px para el relleno superior e inferior.
• Botón-L = 32px para relleno izquierdo y derecho.

Para aplicarlos, abriré la configuración de cualquier botón, iré al diseño> espaciado> relleno , haga clic con el botón derecho en el valor de acolchado y elegiré Buscar y reemplazar las opciones.

En el panel Buscar y Reemplazar, reemplazaré el valor estático existente con la variable guardada del Administrador de variables.

Después de hacer clic en Buscar y reemplazar , las cinco instancias de botones en la actualización de la página se actualizan instantáneamente para usar los nuevos valores de relleno.

Puede seguir los mismos pasos para cualquier otro estilos estáticos que identificamos anteriormente. Use Buscar y reemplazar para intercambiar cada una con sus variables guardadas, y terminará con un diseño que está completamente conectado a su sistema de diseño global.

3. Convierta sus estilos preferidos en preajustes (opcionales)

Este paso es opcional para el alcance de este artículo, pero es una forma poderosa de extender su sistema de diseño.

Una vez que haya reemplazado los estilos estáticos con variables, puede guardar esos módulos como preajustes del grupo de opciones. Por ejemplo, después de asignar una variable guardada para el ancho de la frontera a una fila, guardé esa fila como una fila de borde preestablecida.

El uso de variables dentro de los preajustes significa cualquier actualización futura de su sistema de diseño, como cambiar el valor de una variable, se reflejará automáticamente en todos los módulos utilizando ese preajuste. No hay necesidad de volver a aplicar o actualizar nada manualmente.

Por lo tanto, no solo actualizamos la página completa con una nueva marca en solo unos pocos clics, sino que también creamos un sistema flexible que hace que las actualizaciones futuras sean más rápidas, más fáciles y totalmente conectadas. ¿Cómo funciona eso en un diseño real? Es hora de verlo en acción.

Actualizar los estilos de su página es más fácil que nunca

La razón por la que cambiamos de estilos estáticos a variables de diseño es simple: facilitan las actualizaciones. Con variables de diseño en su lugar, la edición de su diseño se vuelve increíblemente simple.

Si alguna vez desea cambiar la fuente de encabezado en su sitio web, no tiene que editar cada módulo uno por uno. Simplemente abra el Administrador de variables, actualice el valor de fuente que guardó anteriormente, y el cambio se aplica en todas partes que se utiliza la variable.

Los preajustes de su grupo de opciones también se actualizarán automáticamente si están utilizando variables de diseño. Esto mantiene sus estilos conectados, por lo que no tiene que repetir las mismas ediciones en diferentes módulos o páginas.

Cuando personalicé el diseño del taller de pastel antes, no ajusté manualmente cada botón o encabezado. Simplemente edité mis variables guardadas. La fuente, el acolchado y los colores que definí anteriormente se aplicaron en la página automáticamente. El diseño siguió el sistema que ya había construido.

Claro, ajustar el relleno o cambiar un color en un módulo no es difícil. Pero cuando actualiza docenas de estilos en un sitio completo, la diferencia es enorme. No es solo más rápido, es más limpio, más confiable y mucho menos propenso al error.

Este es el valor real de cambiar a variables: todo su diseño se vuelve más fácil de administrar. ¿Y cuando su cliente solicita un cambio rápido de marca el próximo mes? Tendrás terminado antes de que termine su café.

Facilita las ediciones a granel con encontrar y reemplazar

No tiene que comenzar desde cero cada vez que cambia su diseño. Con el sistema de Divi 5, las actualizaciones se sienten menos como una tarea y más como un simple paso adelante.

Este flujo de trabajo no solo es útil durante la configuración. Es lo que facilita las actualizaciones futuras. Ya sea que su cliente solicite una fuente nueva o si desea probar un color de marca diferente, puede hacer el cambio una vez y verlo reflejado en todas partes.

Divi 5 está diseñado para respaldar cómo las personas reales diseñan sitios web. Y ahora, su sistema de diseño puede ser tan flexible como sus ideas.