Comparando los recolectores de color de Divi 4 y Divi 5

El color establece el tono antes de leer una sola palabra, pero los recolectores de color tradicionales hacen que sea difícil lograr una verdadera consistencia de marca. En lugar de precisión, a menudo obtienes conjeturas y aproximaciones de suficiencia cercana.

Es por eso que Divi 5 reinventó por completo su sistema de color. En esta publicación, lo compararemos directamente con el selector de color de Divi 4 y mostraremos cuánto más potente y flexible se ha vuelto.

Los recolectores de color comparados

Póngalos uno al lado del otro, e inmediatamente verá cuán poderosa es la nueva interfaz. El selector de color de Divi 4 nos sirvió bien con su familiar espectro Rainbow y un enfoque de arrastre para seleccionar.

Arrascarías ese círculo blanco para elegir colores, trabajar con códigos hexadecimales y organizar cosas a través de las pestañas guardadas, globales y recientes. Esos pequeños triángulos blancos en muestras de color le dijeron cuáles eran colores globales.

Más allá de la apariencia, el selector de color de Divi 4 tenía una gran base. La herramienta Magic Color era bastante inteligente, saliendo de los colores de su página y selecciones recientes para sugerir paletas que realmente funcionaron juntas. Este ritmo comienza desde cero cada vez.

Donde Divi 4 se limitó

Sin embargo, no todo fue perfecto. Todo usó códigos hexadecimales o RGBA solamente. Obtener una versión más ligera de su azul significaba adivinar o usar otra aplicación para resolverla. Si su marca a menudo necesita un 20% más oscuro o 40% más claro que el color principal de la marca, Divi 4 no podría hacer esto por usted.

Cada color vivía solo. No podías construir sistemas de color inteligentes donde los colores estén relacionados entre sí dentro de Divi. La construcción de proporciones de contraste adecuadas tomaron trabajos manuales fuera de Divi.

¿Cuáles son los 5 cambios visuales de Divi?

Divi 5 mantiene el selector de color visual pero agrega controles deslizantes precisos con muchas más opciones (discutiremos esto más a fondo). La pestaña Global se convirtió en un icono de variable dinámica que se conecta directamente al sistema variable de Divi, que incluye colores.

Las muestras de color se volvieron más inteligentes; En realidad, le muestran con qué tipo de color está trabajando y cómo se conecta a su sistema.

Lo que estás viendo es que Divi se mueve de la recolección de color individual a un sistema de color. Divi 4 fue construido para "Necesito este azul específico". Divi 5 fue construido para "necesito un azul que sea un 20% más claro que mi color principal y actualizaciones automáticamente cuando cambio los colores de mi marca por completo".

La interfaz tuvo que cambiar porque lo que hace cambió.

Nuevo seleccionador de color de Divi 5

Nuestro equipo reconstruyó el sistema de color porque el antiguo enfoque no podía manejar los flujos de trabajo de diseño modernos. Este nuevo selector se centra en el tono, la saturación y la ligereza (HSL), las relaciones de color relativas e integración profunda con el sistema variable de Divi 5.

En lugar de trabajar con códigos hexadecimales aislados, ahora puede construir familias de color conectadas donde cambiar un color actualiza automáticamente todas las variaciones relacionadas. Hay controles deslizantes separados para el tono, la saturación, la ligereza y la opacidad, que le permiten hacer ajustes precisos. La interfaz le muestra exactamente con qué tipo de color está trabajando a través de indicadores visuales.

Las muestras de color ahora muestran información sobre ellos mismos. Puede ver si un color es un valor estático, una variable o un color relativo con modificaciones HSL aplicadas. El sistema muestra todos los detalles del color que necesita saber.

Cómo funciona realmente el nuevo sistema

Los colores relativos comienzan con una variable de color base y le permiten aplicar variaciones. Elija su variable azul primaria, reduzca la ligereza en un 20%y guárdela como la variable de "azul profundo real".

Picker de color HSL de Divi 5 vs Divi 4's Color Picker

Ambos sistemas lo ayudan a administrar los colores en su sitio, pero funcionan de maneras completamente diferentes. Comprender esta diferencia explica por qué la interfaz tuvo que cambiar tan dramáticamente y por qué el nuevo enfoque acelera la construcción.

Cómo funcionan los colores globales de Divi 4

Los colores globales de Divi 4 funcionaron como un sistema de paleta básica. Guarde su marca Azul una vez, luego haga clic cuando necesite ese tono exacto. Más tarde, cambie ese azul por uno diferente y vea cada botón, encabezado y actualización de fondo en todo su sitio.

La mayoría de las personas establecen tres o cuatro colores de la marca principal de esta manera. Valienta la caza a través de códigos hexadecimales o intenta recordar si usaste #2E86C1 o #3498DB para tus enlaces.

El problema llegó más tarde cuando tenía ocho colores globales y no podía recordar por qué guardó ese tono particular de gris. ¿Fue por texto? Bordes? ¿Superposiciones de fondo? Los colores globales no tenían etiquetas ni descripciones para correr su memoria.

Por qué Divi 5 se movió a variables de diseño

Las variables de diseño ahora manejan más que solo colores. Las fuentes, los números de espacio, las imágenes y las cadenas de texto reciben el mismo tratamiento. Todo vive en un gerente variable en lugar de flotar alrededor de diferentes paneles.

Cada variable obtiene un nombre y una descripción propio. En lugar de "Global Color 3", puede llamarlo "Texto de encabezado Grey" o "Sutil Background Superlay". Seis meses después, sabrás exactamente para qué es.

Pero aquí es donde las cosas se ponen interesantes. Las variables pueden referirse entre sí y formar relaciones. Establezca su verde primario como base. Cree un "musgo quemado" que tome ese verde y reduce su brillo. Luego, construya una "sombra (musgo quemada)" que trae este color de musgo quemado y deja caer la opacidad al 15%.

Y, por supuesto, las tres variaciones se actualizan automáticamente si cambia su verde primario a naranja. La versión quemada se mantiene menos brillante que cualquier color que elija, y la sombra se adapta en consecuencia. Las relaciones se mantienen.

La diferencia clave en la práctica

Los colores globales significaban tener el mismo color en múltiples puntos. Las variables significan tener relaciones de color que se adaptan juntas. Los estados de desplazamiento permanecen conectados a los colores base. Los colores de la sombra se relacionan con la paleta de su marca en lugar de vivir como grises al azar. El sistema mantiene estas conexiones sin que tenga que hacer un trabajo adicional.

Configuración de su sistema de color en Divi 4 vs Divi 5

La creación de un sistema de color adecuado determina si su sitio web se ve profesional o como un mosaico de opciones aleatorias. Ambas versiones Divi ofrecen formas de organizar sus colores, pero sus enfoques no podrían ser más diferentes. Aquí le mostramos cómo construir sistemas de color en cada versión y por qué el proceso es importante para su flujo de trabajo de diseño:

Configuración de colores en Divi 4

Sus opciones de color dan forma a cómo los visitantes experimentan su sitio web. Eche un vistazo al enfoque de la gestión del color Divi 4 toma:

1. Agregue sus colores globales

La configuración de color de Divi 4 se basó en el sistema de color global y la organización manual. Comenzará navegando a las opciones de color de cualquier elemento, luego creará colores globales navegando a la pestaña "Global", haciendo clic en el icono más al lado del selector de color o editando un color global existente haciendo clic en él. La interfaz le permite ingresar códigos hexadecimales directamente o usar el selector visual para seleccionar colores.

¿Ya tienes un color aplicado que quieres convertir? Haga clic derecho en él y elija "Convertir a Global". Esto agrega ese color exacto a su paleta global y cambia el módulo para usar la versión global. Es muy útil cuando te das cuenta de que deberías haber hecho algo global desde el principio.

Sugerencias de color mágico

La función de color mágico de Divi 4 construye paletas coordinadas a partir de sus opciones de diseño existentes. En lugar de adivinar qué colores funcionan juntos, esta herramienta crea sugerencias basadas en lo que ya ha usado.

Busque los tres puntos (elipses) debajo de los ojos de su color activo. Haga clic en esos puntos para obtener un montón de sugerencias de paleta de colores. Divi analiza los colores que ya ha usado en su página y en proyectos recientes y le muestra combinaciones que deberían funcionar juntas.

2. Aplicando sus colores globales

Usarlos es bastante sencillo una vez que hayas configurado algunos colores globales. Haga clic en cualquier módulo donde desee aplicar un color. Luego, diríjase a la pestaña de diseño y encuentre la configuración de color que desea cambiar.

Haga clic en Global para ver su paleta de colores global. Haga clic en cualquier muestra de color global y se aplica a su módulo de inmediato.

3. Modificación de sus colores globales

Aquí es donde las cosas se ponen interesantes. Cuando desea cambiar un color global, no necesita cazar a través de cada módulo que lo use. Simplemente vaya a cualquier configuración de color, haga clic en la pestaña Global y busque el color que desea editar.

Configuración de sus colores en Divi 5

Construir un sistema de color adecuado en Divi 5 toma cuatro pasos. Seguir este enfoque supera el viejo método de adivinar códigos de color siempre que necesite un tono ligeramente diferente:

1. Cree su variable de color base

Abra el Administrador de variables de diseño y agregue los colores de su marca primarios como variables de color primarias y secundarias existentes. También puede agregar más colores, como colores terciarios o de acento. Estos se convierten en los colores de su base. Sus colores base deben representar su paleta de marca principal, que define su identidad visual.

2. Construya colores relativos desde su base

Ahora puede crear variaciones de color vinculadas a sus colores base. Agregue un nuevo color en el Administrador de variables de diseño y elija su color base.

Use los controles deslizantes HSL para ajustarlo: menor ligereza en un 25% para el texto de encabezado, 20% para el texto del cuerpo; Aumente la ligereza en un 20% para los estados desplazados, o cambie la saturación para fondos apagados. Dé estas variaciones nombres claros como "naranja profunda" y "brillante carmesí" o "estado flotante (color primario)", "fondo apagado (color secundario)".

Todas las variables de diseño se pueden apilar, por lo que puede construir más colores a partir de los creados. Todos permanecen conectados al sistema.

Si cambia su color base más adelante, estos colores relacionados se actualizan automáticamente, manteniendo las relaciones intactas.

3. Aplicar variables a sus elementos

Use el icono de contenido dinámico en cualquier campo de color para acceder a sus variables. La interfaz muestra si cada color es estático, una variable o un color relativo con modificaciones HSL.

Elija entre su sistema de color organizado en lugar de crear colores únicos aleatorios que rompan la consistencia.

Cuando cambia las propiedades de cualquiera de sus colores base o construidos, todo heredado de ellos se adaptará automáticamente a los nuevos cambios. No es necesario fregar y reemplazar los colores manualmente cuando decida una actualización de una marca.

4. Edificio presets que hacen referencia a las variables de color HSL

Cree su estrategia utilizando preajustes de grupos de opciones para piezas de diseño específicas. Estos preajustes difieren de los presets de elementos. Agrupo de opciones preestablecidos grupos de estilo objetivo como fondo, borde o colores de texto utilizando sus variables.

Guarde una sombra como un grupo de opciones preestablecido usando una variable de color de sombra basada en su color primario.

Use este preajuste en columnas, secciones, filas y módulos.

Cree preajustes de grupos de opciones separados para diferentes colores: uno para bordes con su color de acento, otro para texto con su color secundario, etc. Mezcle estos presets en los elementos sin cambiar otros estilos.

Los presets de elementos guardan configuraciones de módulos completos, incluidos el contenido y todos los estilos. Hacer un elemento preestablecido para un botón de estilo bloqueado en el grupo de opciones preestablecidos y variables de color utilizadas. Aplicarlo instantáneamente le da exactamente el mismo botón.

5. Rolando los colores en su sitio

La función Extend Attributes lleva esto más lejos al permitirle copiar propiedades de diseño entre elementos. Cuando haya perfeccionado el esquema de color de un icono utilizando sus variables, puede extender esos atributos a otros íconos en su fila, página o sitio completo.

Esto mantiene sus relaciones de color mientras se extiende un estilo constante sin trabajo manual.

La función Buscar y reemplazar la función de Divi 5 aumenta el proceso de conversión para sitios existentes con colores estáticos dispersos. Haga clic derecho en cualquier campo de color y seleccione "Buscar y reemplazar".

Establezca su alcance para dirigir elementos específicos, secciones completas o toda la página. En "Reemplace con", elija su nueva variable de la pestaña Global. Verifique "Reemplace todos los valores encontrados" para cambiar cada instancia de ese color con su variable.

Esto funciona perfectamente cuando migra diseños más antiguos al nuevo sistema de color. Puede reemplazar docenas de naranjas similares pero no idénticas en segundos con una variable consistente.

Todos los aspectos funcionan juntos: Establezca sus variables de color, use Buscar y reemplazar para limpiar las inconsistencias existentes, luego use atributos de extensión para mantener los estándares de diseño a medida que construye nuevas secciones. Luego, construya páginas normalmente, ya que los estilos se pueden aplicar fácilmente utilizando el grupo de opciones y los presets de elementos.

El nuevo selector de color se ajustará a su flujo de trabajo

El sistema de color de Divi 5 soluciona los problemas de flujo de trabajo que han ralentizado proyectos durante años. Ya no tiene que usar herramientas externas para encontrar el tono correcto. Los controles deslizantes HSL le dan un control preciso sin dejar al constructor.

Sus decisiones de color permanecen conectadas a través de variables de diseño. Cuando cambia el color de su marca principal, los colores relacionados se actualizan automáticamente mientras mantienen sus relaciones. Esto supera a cazar manualmente cada variación azul que creaste a los ojos.

¡Pruebe el nuevo sistema de color en Divi 5 hoy!