Cómo crear un sistema de color con Divi 5

Las opciones de color aleatorias rara vez conducen a un diseño cohesivo. Si está creando sitios web profesionalmente, necesita un sistema intencional. Puede construir un sistema de color real dentro de Divi 5 utilizando variables de gestión de color y diseño. Estos son colores que establece directamente en el editor visual, puede acceder en cualquier campo de color y vienen con muchas otras comodidades (que le mostraremos a continuación).

Esta publicación le mostrará cómo configurar un sistema de color flexible y escalable en Divi 5.

¿Qué es un sistema de color?

Un sistema de color es básicamente una paleta de colores planificada previamente utilizada constantemente en su sitio. Ayuda a que todo se vea de estilo intencional en lugar de tirar al azar. Para un buen sistema, generalmente necesita:

• Color primario : color de marca principal.
• Color secundario : soporta y contrasta con el primario.
• Color de texto : claro y legible para encabezados y párrafos.
• Acento : otros colores para alertas, avisos y otras cosas importantes (opcional).
• Colores de fondo : típicamente neutros o tintes sutiles.

La regla 60-30-10 se aplica al color en el diseño web. En general, los colores neutros (como los fondos de la sección y el espacio negativo) se usarían para el 60%del diseño, un color primario para el 30%y los colores secundarios/acentos para el 10%restante.

Cómo elegir los colores del sitio web

Los colores de la marca y los colores utilizados en su sitio web no son decisiones a tomar a la ligera. Crear una paleta de colores decidida depende de la habilidad, psicología del color, industria y diferenciación de marca de su diseñador. Pero una vez que tenga sus colores base y sus activos de marca (como las variaciones del logotipo), puede comenzar a crear un sistema de diseño.

Puede hacer algunas tareas rápidas para prepararse para la construcción de su sitio web si tiene recursos de diseño limitados. Primero, haga una lectura superficial de la psicología del color. Busque qué valores de marca desea transmitir (confianza, juventud, innovación, etc.) e intente hacer coincidir los colores en función de esos valores. Luego, mire algunas marcas reconocidas por el hogar que cree que se ajustan a los valores de su marca. ¿Qué colores usan? ¿Cómo los usan en su sitio web, comerciales y publicaciones sociales?

Los valores de su empresa pueden incluso estar determinados por el tipo de trabajo que realiza. Los cerrajeros y los fontaneros deben ser confiables, por lo que el azul es una excelente manera de transmitir eso. Los planificadores y paisajistas financieros se ocupan de crecimiento y sostenibilidad (en sus respectivos campos), por lo que Green es un buen ancla allí. Los agricultores de flores, los centros de cuidado infantil y los restaurantes pueden apoyarse en los rojos y amarillos para conectar la energía y la vitalidad con sus marcas. Una vez que tenga una idea general, use algo como Coolors para crear una paleta simple.

Construyendo su sistema de color en Divi 5

Divi 5 viene con el Manager de la variable de diseño, que es la forma más fácil de manejar los colores globales. En él, tiene cuatro colores globales previamente asignados para que trabaje fuera de la caja. Ellos son:

1. Color primario
2. Color secundario
3. Color de texto de encabezado
4. Color de texto del cuerpo

Paso 1: Defina sus colores base como variables

En la barra lateral izquierda de Divi, abra el Administrador de variables de diseño. Encuentre la sección de colores y debería ver estos cuatro valores predeterminados diferentes.

Estas cuatro etiquetas no se pueden eliminar, pero puede elegir qué color establecer cada una. Además de estos cuatro, puede agregar tantos colores como desee haciendo clic en el botón Agregar color global . Continúe y ingrese los valores hexadecimales de los colores del generador de color.

Estas variables están disponibles instantáneamente en todas partes en Visual Builder de Divi, que es muy útil. ¡Pero asegúrate de guardarlos!

Paso 2: Crear tonos y tintes con colores HSL

Usando los filtros HSL de Divi, podemos crear tintes (versiones más claras de nuestros colores) y tonos (versiones más oscuras de nuestros colores). Para este proyecto, solo haremos variaciones para los colores primarios y secundarios. Puede usar un generador de paleta de colores para crear estas variaciones de color.

El primer paso aquí es crear otro color global. Sin embargo, en lugar de pegar un valor hexadecimal, seleccione un color existente para crear variaciones (tonos y tintes).

Ahora, necesitamos aplicar un filtro a ese color base para crear una variación. Haga clic en el chip de color y luego seleccione "Color de filtro" o haga clic en la muestra de color para su nueva variable de color relativo.

Haga esto para cada una de sus variaciones de color. Asegúrese de dar sus variaciones de color nombres reconocibles y guardar.

Por ejemplo, dado que el color primario es bastante oscuro, podemos agregar algunos tintes más claros y un par de tonos más oscuros. Eso debería darme muchas opciones cuando aplicamos mi sistema de color al diseño de una página.

Repita los pasos anteriores para sus colores secundarios y/o acentos. Al crear estas variaciones, siempre seleccione un color base y luego aplique filtros encima. De esa manera, si alguna vez cambia su color principal, estas variaciones seguirán su ejemplo.

Aplicando sus colores en diseños con divi

Tus variables existen ahora. Es hora de usarlos. Comenzaremos con una página Divi en blanco y trabajaremos secuencialmente hacia un diseño bien diseñado.

Paso 1. Cree una estructura alámbrica de su página

Puede comenzar desde una estructura de alambre en lugar de una página en blanco, lo que puede ayudarlo a comprender mejor su sistema de color. Una vez que comprenda la estructura y el flujo general de una página, puede comenzar a tomar sus elecciones de diseño. También puede usar uno de los muchos paquetes de diseño prefabricados de Divi o sitios de inicio. No importa si ya tienen colores definidos; Podemos cambiar fácilmente estos.

Para este ejemplo, elegimos modificar el paquete de diseño de consultoría y usar su diseño de página de inicio. Si hace algo similar, puede importar los presets. Sin embargo, querrá editar los colores en esos preajustes. En aras de la simplicidad, modificaremos estilos directamente a nivel de módulo/elemento.

Paso 2. Tipografía y color

Por defecto, DIVI utiliza los colores de su encabezado global y texto del cuerpo, haciendo que su texto sea limpio y legible. Siempre puede anular estas opciones de color predeterminadas cambiando el color de texto en módulos o preajustes, pero no debería tener que hacerlo con demasiada frecuencia.

Observe cómo el color de encabezado no está en el módulo. Divi asigna automáticamente el color global a los encabezados y el texto del cuerpo para usted. Por supuesto, puede anularlo seleccionando un color diferente.

Puede personalizar el color que los enlaces pueden hacerlos más notables y atraer clics.

Puede haber otros módulos (además del encabezado y los módulos de texto) con el texto que desea peinar. Los módulos como el formulario de contacto, el temporizador de cuenta regresiva y el módulo de blog pueden requerir que los colores se apliquen de manera única.

Paso 3. Botones de estilo

Los botones de Divi son simples de forma predeterminada y toman su color principal. Pero no te obligan a esta decisión si quieres algo diferente. Abra el panel de configuración del módulo, navegue a la pestaña de diseño y seleccione el botón . Configuración del botón, habilite "Use estilos personalizados para el botón". Establezca su fondo en su color global de elección y el texto de su botón en un color legible, como el blanco.

Si tiene dos botones uno al lado del otro o múltiples botones en la página, puede crear un botón Preset separado para un estilo de botón secundario usando su color secundario u otro acento.

Crear estados de desplazamiento con tintes y/o tonos

Los estados de desplazamiento agregan interacción y un sentido de propósito. Use sus tintes y tonos anteriores con los estilos de cierre. Es obvio implementar en botones, pero también se puede usar sutilmente en otro lugar.

Haga clic en el icono del cursor junto a la opción Color de fondo para habilitar los estados de ciervo. Establezca el color de fondo de su flota. Cuando los usuarios se ciernen sobre el botón, responde visualmente, guiando la interacción naturalmente.

Paso 4. Creación de secciones con preajustes de color y gradientes

Las secciones en Divi tienen fondos transparentes de forma predeterminada. Esto significa que si se deja no establecido, generalmente se mostrarán como blancos. Puede agregar algo de intriga creando variaciones de color neutro basadas en el tono de uno de sus colores principales.

Este color de fondo está cerca del negro, pero comparte el mismo tono base que el color principal para darle sutil cohesión 'sobre el tema'.

También puede experimentar con gradientes usando sus variantes de color. El truco aquí no es usar demasiadas combinaciones de colores. Desea un diseño disciplinado y cohesivo basado en emparejamientos de colores y jerarquía.

Un recordatorio está en orden en este punto. Desea guardar la mayoría de estos emparejamientos de colores y decisiones en preajustes (ya sea grupo de opciones o presets de elementos). Una vez que haya creado e implementado sus variables de diseño en su diseño a través de presets, puede usar su sistema de diseño para crear páginas posteriores mucho más rápidas. Esto también garantiza que trabaje con patrones de diseño consistentes en todo su sitio.

Y si luego determina que un color está ligeramente apagado, puede ajustar los valores HSL del color base, y todas las instancias de ese color (y todos los colores relativamente creados en función de ese color) cambiarán por usted.

Envolviendo su sistema de color Divi 5

Un sistema de color reflexivo es una de las victorias más fáciles en el diseño web, y Divi 5 le brinda las herramientas para que funcione para usted. Con solo unos pocos pasos, puedes:

• Defina los colores de su marca central como variables de diseño reutilizables
• Extíquelos en tonos y tintes útiles con filtros HSL
• Aplíquelos consistentemente a través de texto, botones, formularios y secciones
• Guarde sus opciones como preajustes para que cada nueva página siga las mismas reglas

La recompensa es más grande que la estética. Un sistema de color sólido crea claridad, dirige a los visitantes hacia la acción y hace que su marca se sienta cohesiva en cada rincón de su sitio. Y debido a que todo en Divi está impulsado por variable, un ajuste a un color base puede ondularse instantáneamente a través de un sitio completo. Eso significa menos retoques y más confianza que su diseño mantendrá unido a medida que se escala.