Cómo aplicar paletas de colores a su sitio web Divi

Hay pocas cosas peores en Internet que un sitio web insípido. Claro, algunos sitios web optan por el aspecto brutalista o minimalista a propósito (mirándote Craigslist), pero incluso esos no son insulsos . Tener una paleta de color sólido es una manera segura de hacer que su sitio web se destacan de las masas de color beige, esas tiendas online monocromáticas sin inspiración que de prensa más im prensa. Afortunadamente, Divi lo tiene cubierto con una combinación de nuestro sistema Magic Color y la función Global Colors. Puede aplicar paletas de colores a su sitio web Divi con facilidad. Los resultados seguramente impresionarán a sus visitantes.

Consejos generales sobre paletas de colores

Independientemente de lo fácil que sea agregar una paleta de colores a su sitio web Divi, es imperativo que utilice el tipo de paleta adecuado para su industria y marca. Si ya tiene colores de marca, esa es la opción obvia para ingresar. Aparte de profundizar en la teoría del color (que es muy interesante, por cierto), tenemos algunos consejos que pueden ayudarlo a descubrir por dónde comenzar con su nueva paleta de colores.

1. Decidir sobre un sitio web de color oscuro o de color claro

En la paleta de colores que usarás, sin duda tendrás colores claros y oscuros. El contraste es obligatorio en una paleta de colores para que el contenido escrito no se pierda.

Ahora, eso nos lleva de inmediato a la primera pregunta que debes hacerte cuando quieras aplicar una paleta de colores a tu sitio web; ¿Quieres crear un sitio web de color oscuro o de color claro? El hecho de que elija uno no significa que no pueda combinarlos, pero hacer una elección lo ayuda a elegir su paleta de colores más fácilmente.

2. Elección de color

En teoría, puede determinar por sí mismo cuántos colores le gustaría que tuviera su paleta de colores. No existe una forma estándar de aplicar o determinar paletas de colores. Sin embargo, para crear un buen equilibrio de colores con Divi, recomendamos utilizar cinco colores.

Para ayudarlo a aplicar las paletas de colores con cinco colores en su sitio web, elegimos un tipo de método que aplicaremos de manera consistente al mismo diseño al mostrar las diferentes paletas de colores. Pero antes de sumergirnos en eso, echemos un vistazo a los diferentes tipos de colores que debe tener en su paleta de colores si desea seguir nuestro método.

Colores de fondo

Asegúrese de que los colores de fondo que elija coincidan entre sí. Utilizará estos colores de fondo uno cerca del otro y obtendrá hermosos resultados; deben tener cierta armonía.

Color de fuente

Lo siguiente que deberá elegir es el color de la fuente. Lógicamente, el color de la fuente depende de los colores de fondo que elija. Si ha elegido colores de fondo de colores claros, asegúrese de que el color de la fuente sea oscuro y viceversa.

Hipervínculo y color de CTA

El color de hipervínculo que elija es uno de los colores que dan vida a su sitio web. Asegúrese de que este color se destaque de los otros colores en su paleta, ya que lo usará para las llamadas a la acción que incluya en su sitio web.

Color para los toques finales

Por último, pero no menos importante, puede elegir otro color listo para usar que aporte color a su sitio web. Aunque este color no es tan importante como el color del hipervínculo, le ayudará a completar el equilibrio de color en su sitio web.

3.Asegúrate de que haya suficiente contraste

Como se mencionó anteriormente, es esencial proporcionar contraste entre algunos de los colores de su paleta de colores. Si está utilizando una paleta de colores para un sitio web, este contraste lo ayudará principalmente a hacer legible el contenido escrito que comparte. Porque, si su contenido no es fácil de leer, ¿cuál es su propósito después de todo?

4. Encuentre el equilibrio de uso de color correcto

Hay diferentes formas de determinar la frecuencia con la que desea utilizar un color en particular en su paleta de colores. Es necesario crear un buen equilibrio de color si no quieres que se sientan abrumados por los colores que estás usando en tu sitio web.

Asegúrese de usar los colores más neutros en su paleta de colores la mayor parte del tiempo y use los otros colores para acentuar el contenido que está proporcionando.

Cómo agregar una paleta de colores a su sitio web Divi

Con todo eso en mente, ¡es hora de profundizar en Divi y aplicar la nueva paleta de colores de su sitio!

La paleta Divi predeterminada

En primer lugar, diríjase a su panel de WordPress y vaya a Divi - Opciones de tema . En la pestaña General , verá una entrada titulada Paleta predeterminada de Selectores de color . Lo que esto hace es permitirle seleccionar los 8 colores a los que desee acceder rápidamente cada vez que abra las opciones de color en el generador Divi. Por defecto, estos son colores vibrantes que muchas personas usan, pero no son una paleta completa que deba usarse en un solo sitio web.

Tenga en cuenta que esto no aplica los colores a su sitio en sí. Solo los presenta como opciones rápidas en el constructor.

Ingrese al Divi Builder

Ya sea que establezca la paleta en la configuración de Divi o no, aún tendrá la opción de aplicar varios colores a los elementos de su sitio. Para hacerlo, ingrese al Divi Builder e ingrese la configuración de cualquier módulo que desee ajustar en su nueva paleta.

Debajo del color elegido actualmente para cualquier elemento, verá el icono de puntos suspensivos (tres puntos) . Cuando haces clic en eso, abres la herramienta Color mágico de Divi. El constructor tiene en cuenta los colores que ha utilizado recientemente y los colores de la propia página para ofrecerle una serie de paletas múltiples compuestas por colores complementarios que deberían funcionar bastante bien juntos.

Establecer colores como globales

Una vez que haya decidido qué colores desea usar, es hora de establecerlos como globales. Los colores globales se pueden configurar para que cambien en toda la página, independientemente del módulo o elemento . Lo que significa que si desea intercambiar 5 colores diferentes, no tendrá que hacerlo más de 100 veces, individualmente sobre instancias de ese color. Lo harás 5 veces.

Para comenzar, ingrese a cualquier módulo con un selector de color. Debajo, verá un enlace llamado Global . Haga clic en él y la paleta general desaparecerá. Desde aquí, establecerá qué colores desea que estén disponibles globalmente haciendo clic en el ícono más + .

Cuando aparezca el nuevo selector, haga clic en la marca de verificación verde para agregar el color actual como una opción global.

No importa dónde esté el círculo blanco. El valor hexadecimal es lo que se agrega a los colores globales. Ahora verá el color predeterminado agregado al lado del ícono más. Y puede ver que el color se ha aplicado al sitio debido al icono de forma de gota en el color en lugar del círculo habitual.

Además, puede hacer clic con el botón derecho en un color elegido y seleccionar "Convertir a global" para agregarlo a la lista.

Repita este proceso para cada color en su paleta elegida para que eventualmente toda su paleta se guarde en el enlace Global. Esto es muy importante a medida que avanza en la aplicación de la nueva paleta a todos los elementos de una página.

Aplicar colores globales

A continuación, desea reemplazar todas las instancias del mismo color en su página y se puede ajustar globalmente. Lo que quieres hacer es ir al elemento con el color que quieres cambiar y hacer clic derecho en él. Luego, elegirá Buscar y reemplazar en el menú contextual. No convierta este color a global aquí . Eso es parte del siguiente paso.

La siguiente pantalla será donde elija reemplazar ese color con el global. Asegúrese de que en Reemplazar con haga clic en Global y luego elija el color global que desea extender a lo largo de la página. Asegúrese de marcar la casilla que dice "Reemplazar todos los valores encontrados dentro de cada tipo de opción, sin limitarse a [insertar el tipo de elemento actual]". Esto asegurará que pase lo que pase, ese color será reemplazado.

Ahora, puede editar ese color global en particular y, cuando lo haga, cada instancia cambiará. Tenga en cuenta que no elige un nuevo color de la paleta. Eso solo cambiará el color actual. Edita el color para cambiarlo en todos los lugares porque ha marcado cada instancia de ese color como global.

Puede editarlo como colectivo usando el selector de color. Simplemente haga clic en la gota para elegir una nueva.

Después de eso, es solo repetir ese proceso para cada color en su nueva paleta. Solo un cambio para cada color de tu paleta. No es un intercambio de cada elemento particular de un color determinado.

Terminando

Elegir y aplicar una paleta de colores global a su sitio web Divi nunca ha sido tan fácil. Puede usar nuestra función Magic Color para ayudarlo a elegir una paleta, y luego puede configurarlos como colores globales para su sitio. Una vez hecho esto, simplemente elija el color que está intercambiando y use la función de búsqueda y reemplazo incorporada de Divi para reemplazar esos colores en la página. Con este flujo de trabajo, seguramente ahorrará mucho tiempo al rediseñar varios sitios web y modificar algunos de nuestros paquetes de diseño gratuitos.

¡Disfrutar!

Imagen destacada del artículo por ART.ICON / shutterstock.com