Convertir los colores de la marca de su cliente en un sistema de color Divi 5

Los colores de la marca generalmente comienzan con códigos hexadecimales que se aplican a través de encabezados, botones y fondos. Es bastante simple inicialmente, pero a medida que el diseño crece, a menudo necesita variaciones de color más claras, estados de desplazamiento o acentos complementarios. Gestionar eso manualmente puede ponerse desordenado.

El nuevo sistema de color en Divi 5 facilita esto al permitirle definir una paleta una vez y construir tonos conectados a partir de su paleta de colores inicial. Cada color permanece sincronizado, incluso cuando el diseño evoluciona. En esta guía, aprenderá cómo crear un sistema de color flexible y escalable que mantenga todo consistente en el sitio de su cliente.

Comprender el sistema de color de Divi 5

Si ha trabajado con colores globales en Divi 4, ya sabe lo útil que es definir un color una vez y aplicarlo en su sitio. Divi 5 se basa en esa misma idea, pero esta vez, convierte el color en un sistema completo que escala con usted.

Suscríbete a nuestro canal de YouTube

Aquí están las tres actualizaciones principales:

Comienza con variables de diseño. Defina su paleta de marca dentro de la pestaña Colors en Variable Manager, y estos valores se convierten en su base. Una vez definido, están listos para su uso en cualquier módulo o sección. Y cuando la marca evoluciona en el futuro, solo necesita actualizar las variables en un solo lugar. Todo vinculado a ellos se ajusta por sí solo.

La segunda actualización es el filtro de color HSL. Los controles deslizantes le permiten ajustar el tono, la saturación y la ligereza, lo que le brinda más control al trabajar con tono y contraste.

Si su verde primario se siente demasiado duro para un fondo, puede suavizarlo ligeramente, ajustar el brillo y guardar esa versión como su variable. Este será un color nuevo, pero todavía está vinculado al color original.

Esto también abre espacio para pensar en las relaciones en lugar de valores aislados. Puede unir variables juntas para que uno siempre permanezca una cierta distancia de otra, como más oscura, más clara, ligeramente más cálida o más sometida. Estos se llaman colores relativos, que es la tercera mejora.

Un color flotante, por ejemplo, puede definirse como un 20% más oscuro que el primario. Si el color principal cambia, el estado flotante mantiene su relación sin necesidad de ajustes manuales.

Este sistema de tres partes crea un sistema de color de trabajo flexible y en tierra. No solo estás aplicando colores un módulo a la vez; Estás construyendo una paleta que puede cambiar según sea necesario mientras mantiene su diseño consistente y limpio.

Aprenda todo sobre el nuevo sistema de color de Divi

Si ha confiado en los códigos hexadecimales hasta ahora, este es el punto en el que ese flujo de trabajo comienza a sentirse limitado. Y esa es tu señal para cambiar a un sistema de color listo para el futuro.

Convertir los colores de la marca de su cliente en un sistema de color Divi 5

Ahora que sabe cómo funciona el sistema de color de Divi 5, caminemos por lo que se ve en un proyecto real. Para este ejemplo, hemos importado el diseño de la página de inicio de la realidad aumentada de la Biblioteca Divi.

Construyamos un escenario. Supongamos que un cliente desea agregar un color complementario para equilibrar el verde audaz utilizado en todo el sitio. En lugar de agregarlo manualmente en algunos puntos, tomemos esto como una oportunidad para cambiar el diseño al sistema de color de Divi 5 para que no tengamos que hacer cambios manuales en el futuro si se le solicita nuevamente.

Si mira a través del diseño, notará que el mismo verde aparece en varios lugares, como encabezados, botones y elementos de acento. Cada uno usa un código hexagonal fijo. Nuestro objetivo es reemplazar aquellos con variables de color y construir una paleta que pueda adaptarse a los cambios más adelante.

Normalmente, actualizar un diseño como este significaría editar cada módulo a mano. Pero en los próximos pasos, usaremos variables de color, filtros HSL y lógica de color conectada para construir algo más estable. Puede seguir el mismo diseño o usar su proyecto como base.

1. Guarde el color principal de su cliente como variable de diseño

Si su cliente ha compartido un nuevo código hexadecimal, o se queda con un color de marca existente, el primer paso es agregarlo al Administrador de variables de diseño. Este se convierte en su color base y será la base de las variaciones de color que construye a su alrededor.

Agregar un color primario

Para comenzar, abra el administrador de variables y cambie a la pestaña Colors .

El panel ya puede incluir valores predeterminados para texto primario, secundario, de encabezado y corporal. En el campo de color primario, ingrese el código hexadecimal para el color de la marca principal y haga clic en Guardar variables.

Agregar un color secundario

A continuación, crearemos una versión relativa de este color secundario utilizando el primario como base. De esa manera, cualquier cambio futuro en el color base se transferirá automáticamente.

En este ejemplo, dado que estamos agregando un color complementario para equilibrar el verde existente, lo asignaremos como el color secundario. El fondo del diseño es negro, por lo que este emparejamiento se destaca claramente.

Si solo está trabajando con un color por ahora, siéntase libre de dejar la ranura secundaria establecida en negro.

Haga clic en la muestra de color secundaria para abrir la ventana de color. Todos sus valores guardados se enumerarán en colores globales, con el color primario enumerado primero.

Seleccionarlo. Esto trae el color base como punto de partida.

Ahora, haga clic en la muestra nuevamente para volver a abrir la ventana, luego abra el menú desplegable de filtros de color . Esto revela los controles deslizantes HSL, donde puede ajustar el tono, la saturación y la ligereza.

Use estos controles deslizantes para dar forma al nuevo color. Una vez que estés contento con eso, salva. Y así, tienes un color secundario conectado a la primaria.

Si desea mantener el color secundario en negro pero aún así vincularlo a lo primario, gire tanto la ligereza como los controles deslizantes de saturación hasta -100.

En su lugar, para crear un tono más oscuro, deje el tono y la saturación como es y reduzca solo la ligereza.

En este punto, puedes experimentar libremente. Ajuste los valores hasta que el tono se sienta bien para su diseño. Ya sea que el nuevo color se mezcle suavemente con la paleta de marca o se destaque como un contraste, permanecerá vinculado a lo primario y evolucionará con ella.

2. Cree colores de soporte utilizando ajustes HSL

Con sus colores primarios y secundarios en su lugar, el siguiente paso es expandir la paleta. Estos colores de apoyo le dan a su sala de diseño para respirar. Agregan flexibilidad, contraste sutil y ritmo visual en todo el diseño.

Para crear estas variaciones, abra el panel HSL y ajuste los controles deslizantes:

• Cree tonos más claros para secciones o fondos que necesiten contraste sin llamar la atención.
• Use tonos ligeramente más oscuros para botones, estados de desplazamiento o titulares audaces que necesitan destacarse.
• Cambie el tono o la saturación ligeramente para formar colores de acento. Este color es ideal para divisores, iconos u otros pequeños aspectos visuales.

Le mostraremos cómo hacerlo una vez, y puede seguir el mismo enfoque para definir todos los nuevos colores que desee. Digamos que queremos hacer una versión flotante del color secundario. Crearemos una nueva variable de color , le daremos un nombre claro, ajustaremos los controles deslizantes para obtener el tono correcto y guardarlo.

Ahora que la variable se guarda, podemos aplicarla al estado de desplazamiento de un botón, como cualquier otro color.

A medida que agrega colores de apoyo, trate de pensar en ellos como expresiones tonales de la marca, variaciones que reflejan diferentes niveles de énfasis, contraste o estado de ánimo. Por ejemplo, los tonos blandos funcionan bien para los fondos, los negros llaman la atención a las llamadas a la acción, y los tonos apagados son útiles para superposiciones o texto secundario.

Técnicamente, podría crear todos estos utilizando códigos hexadecimales. Y si solo está construyendo un sitio de una página, eso podría estar bien. Pero en el momento en que su cliente quiere cambiar un color central, cada atajo comienza a mostrar sus límites. Lo que queremos decir es que no rastrearía cuántos lugares usó un tono de fondo en un sitio web. En ese escenario, construir estas variaciones como variables conectadas lleva un poco más de tiempo por adelantado, pero una vez que estén en su lugar, mantendrán su diseño consistente sin importar con qué frecuencia las cosas cambien.

3. Reemplace los colores estáticos existentes con variables

Con sus nuevas variables de color guardadas, es hora de reemplazar los valores hexadecimales codificados utilizados en todo el diseño. Aquí es donde pasar de la estática a la dinámica comienza a hacer una diferencia real, no solo en consistencia, sino en lo fácil que es mantener el diseño con el tiempo.

Comience escaneando el diseño para cualquier elemento que todavía use valores de color fijos. Esto puede incluir botones, encabezados, fondos, iconos o divisores de sección. En cualquier lugar del color de la marca se aplicó manualmente es una oportunidad para conectarlo a su nuevo sistema.

Para hacer eso, Divi le ofrece dos opciones: extender los atributos y encontrar y reemplazar. Ambos le permiten actualizar múltiples elementos rápidamente, pero cada uno brilla en una situación ligeramente diferente.

• Use los atributos Extend cuando ya haya aplicado la variable correcta a un elemento y desee coincidir con el resto.
• Use Buscar y reemplazar cuando desee intercambiar un valor hexadecimal específico donde aparezca, incluso si se aplica en diferentes elementos.

Comencemos con los atributos de extensión.

Usando atributos de extensión

En este ejemplo, queremos asignar el nuevo color secundario a todos los H2S en el diseño. Comenzaremos aplicándolo a solo uno de ellos.

Una vez hecho esto, haremos clic con el botón derecho en el elemento y seleccionaremos extender los atributos. En el panel que aparece, estableceremos el alcance en la página completa y el tipo de elemento en el texto.

Con un clic, cada H2 en la página adopta el mismo color secundario, que permanecerá sincronizado porque está vinculado a su color principal si ese color base alguna vez cambia.

Usando buscar y reemplazar

Ahora intentemos encontrar y reemplazar, que funciona especialmente bien cuando desea intercambiar un valor de color específico en todo el sitio.

En este caso, queremos actualizar el color del texto del cuerpo. Para hacerlo, iremos a Configuración> Diseño> Color de texto del cuerpo , haga clic con el botón derecho y elija Buscar y reemplazar. Luego , pasaremos sobre el campo Valor Reemplazar y seleccionaremos nuestra nueva variable.

Eso es todo lo que se necesita. Cada instancia de ese color antiguo ahora se actualiza con su nueva variable.

No hay un solo método que deba seguir aquí. Extender los atributos es la forma más rápida de llevar ese cambio en elementos similares si ya ha actualizado un módulo manualmente. Si todavía está trabajando con códigos hexadecimales estáticos y desea cambiarlos a granel, encontrar y reemplazar lo ayudará a moverse rápidamente.

Elija el enfoque que facilite la limpieza. Una vez hecho esto, verá el beneficio real de este sistema: cómo responde su diseño cuando cambia solo un color.

Probar su nuevo esquema de color

Todo lo que has hecho ha sido sobre la configuración. Ahora es cuando toda la configuración comienza a mostrar su valor.

Con su sistema en su lugar, intente cambiar el color primario. Todo el diseño responderá en segundos: fondos, botones, efectos de desplazamiento y cualquier otro elemento conectado se actualizará al instante.

Las actualizaciones futuras también son más fáciles que nunca. Suponga que su cliente quiere pasar de neón verde a un amarillo más cálido, lo que significa actualizar todo el sitio web, cada página y cada módulo manualmente.

Suena doloroso, pero no para ti. Simplemente actualiza el color principal, y el resto del sitio sigue.

O tal vez es el Black Friday y han pedido un esquema de color rojo dorado-negro. Usted actualiza el primario a un tono dorado, luego modifica el secundario en un rojo más profundo. El diseño se adapta al instante, hasta el último detalle.

En algunos casos, el color de la marca puede permanecer igual, pero el secundario necesita una actualización. Eso es solo cuestión de ajustar los controles deslizantes HSL. No es necesario tocar cada botón o fondo individualmente.

Gran parte del trabajo de color se trata de mantener el equilibrio. Mantiene las variaciones alineadas incluso cuando cambia el color del núcleo. Este sistema le brinda una forma de controlar el tono, el contraste y el énfasis en su diseño sin necesidad de volver sobre sus pasos.

Y recuerde, lo que hemos hecho aquí es solo una página. Debido a que las variables de diseño son globales, esta configuración se extiende a todo su sitio, incluidos encabezados, pies de página, publicaciones de blog, páginas de destino y cualquier otra cosa conectada a su paleta.

Eso significa que cada actualización futura, ya sea una campaña estacional, actualización de marca o una nueva dirección de color, comienza desde un solo lugar. Usted actualiza algunas variables y mira todo coincide con su nuevo esquema de color.

Divi hace que su color flujo de trabajo a prueba de futuro

No es difícil elegir un tono azul. Lo difícil es mantener ese azul consistente en docenas de módulos, diseños, páginas y campañas, y actualizarlo más tarde sin romper algo en el proceso.

Divi 5 simplifica eso por completo. Con herramientas como el nuevo sistema de color, los filtros HSL y las variables de diseño, puede administrar toda su identidad visual desde un solo lugar. Saber que cada color, en cada diseño, se mantendrá consistente y fácil de actualizar es lo que promete Divi 5.

Y ese es solo uno de los muchos que hemos hecho en los últimos meses, incluido Loop Builder, Flexbox Decleut y una interfaz completamente reinventada para los diseñadores web modernos. Si aún no los has explorado, ahora es el momento perfecto.