Cómo utilizar el nuevo sistema Global Colors de Divi

Con este tutorial completo, te mostraremos cómo usar el nuevo sistema de Divi Global Colors y tendrás algunos consejos profesionales que te ayudarán a entenderlo.

Índice

Nueva actualización de Divi Global Colors

Elegant Themes ha lanzado una nueva actualización en Divi donde la característica principal de esta actualización es el nuevo sistema de gestión de Global del colores en Divi. Esta nueva actualización incluye además algunas formas interesantes de editar la tradicional paleta de colores en Divi, así como llevar las cosas a un nuevo nivel al cambiar rápidamente los colores de todo tu sitio web, con la posibilidad de hacerlo desde cualquier sección, fila o módulo.

En otras palabras, en esta publicación te explicaremos por qué se necesita esta función, cómo se relaciona con algunas otras funciones de Divi y, lo más importante, ¡cómo usar el nuevo sistema de Global Colors de Divi! 

Comprensión de Global Colors de Divi

¿Qué son?

Global Colors de Divi es una nueva forma de cambiar rápida y eficazmente los colores de cualquier elemento con Divi en cualquier lugar de tu sitio web. Es decir, que son como ajustes preestablecidos para los colores, pero en lugar de tener que configurar el mismo color cientos de veces en todo tipo de configuraciones diferentes, podrás hacerlo una vez desde cualquier lugar y el cual se cambiará instantáneamente.

¿Por qué los necesitamos?

Global Colors en Divi te permite cambiar el color del esquema de tu sitio web al instante. Su propósito es hacer que el diseño de tus sitios web sea más rápido y eficiente. No solo sirven para cambiar, sino que también son perfectos para explorar tu marca. Es decir, que si estás comenzando en un sitio nuevo y no estás muy seguro todavía, de si te gustan los colores que elegiste, puedes usar Global Colors y ajustar el tono a medida que avanzas, o si quieres cambiar de opinión por completo más adelante.

En el pasado, habrías tenido que ir a cada módulo y cambiar cada configuración de color, pero ahora eso ya quedó atrás y puedes realizar el cambio sin esfuerzo desde cualquier campo del selector de color, de forma muy fácil.

La nueva característica de Global Colors de Divi vs. Configuraciones predeterminadas

Mis primeras impresiones de esta nueva función fueron confusas, ya que tenía muchas preguntas, las cuales trataré de presentarlas aquí y trabajar junto con ellas con el objetivo de que les traiga algún beneficio o ventaja. 

Colores Guardados frente a Global Colors

Los colores que encontramos en la paleta de colores que configuramos en Divi Theme Options y que usamos en todo el constructor se denominan colores guardados o estáticos. Es importante señalar que los nuevos Global Colors, son totalmente diferentes y están de estos. Curiosamente, en lugar de simplemente reemplazar los colores guardados con el Global Colors, éstos los separaron. 

Además ahora también puedes editar los colores estáticos directamente en el constructor, lo que anteriormente tenía que suceder en Opciones de tema. Realmente esto es interesante y beneficioso, porque ahora puedes establecer el color donde quieras que estés trabajando en lugar de tener que agregarlo a Opciones de tema y actualizar tu sesión de creación. También puedes convertir cualquiera de los colores estáticos guardados en Global Colors si así lo deseas.

Así que es importante que recuerdes, que con Global Colors no reemplazas los colores guardados como esperarías, sino que son opciones adicionales que aparecen en cualquier lugar donde haya una configuración de selector de color en Divi Builder.

Ajustes preestablecidos frente a Global Colors

Genera un poco de confusión, porque cuando pensamos que teníamos el sistema de Presets por la misma razón de hacer cambios que fuesen globales. Se podía asumir que los ajustes preestablecidos serían lo más importante y que se mejorarían con el tiempo. 

En cambio, ahora obtenemos esta nueva característica aparentemente separada. Y suponemos que con Global Colors de Divi vienen siendo como ajustes preestablecidos de colores, pero con una interfaz separada. Los ajustes preestablecidos te permiten reemplazar los colores globalmente, pero su principal limitación es que se aplican por módulo.

Es decir, que con los ajustes preestablecidos puedes cambiar los colores o estilos de cualquier módulo en particular de manera global en todo el sitio, pero la limitación es que sólo puedes hacerlo dentro de ese tipo exacto de sección, fila o módulo, en lugar de afectar todo el sitio web. Entonces, pienso que existe la necesidad de un mayor control sobre los colores, ya que lo que esperaba era que se integrara más estrechamente los colores en los ajustes preestablecidos de alguna manera, pero por los momentos funciona bien.

Buscar y Reemplazar frente a Global Colors

Otra opción interesante en la que hemos llegado a confiar mucho es la herramienta Buscar y reemplazar en Divi Builder. Esto ha funcionado maravillosamente para reemplazar los colores dentro de cualquier módulo de la página. Lo cual resulta esencial para cambiar los colores de guardados a globales. Entonces, si tienes un sitio existente o un nuevo diseño, primero deberás cambiar manualmente los colores de estático a global para poder usar la nueva función de Global Colors. Así que esa es una advertencia interesante que debe mencionarse. 

¿Cómo utilizar los nuevos Global Colors de Divi?

Una vez hecho todos estos comentarios y establecido diferencias de este tema, ahora es necesario que aprendamos a usar el sistema de Global Colors de Divi.

Aprende a crear un directorio de bienes raíces con Divi con nuestro curso avanzando.

Editar colores estáticos desde el Generador

La primera característica nueva que nos gustaría señalar es la capacidad de configurar y editar la paleta de colores predeterminada directamente desde cualquier sección, fila o módulo. Anteriormente, la única forma de cambiar los colores era ir a Divi> Opciones de tema y ajustar la paleta de colores allí mismo.

Luego regresamos al constructor y finalmente actualizamos. ¡Pero sorpresa ahora puedes quedarte en el constructor! Esta es exactamente la visión de Divi, muchas de las características en Opciones de tema y el Personalizador se están depreciando, de forma lenta pero seguramente.

Así es como se veían los selectores de color antes de la actualización 4.9:

En esta sección se encuentra ahora una nueva opción, junto con un nuevo icono de engranaje. El icono de engranaje abre la función de edición para los colores estáticos (guardados) o los colores globales (Global Colors).

Así es como se ve cuando haces clic para editar los colores estáticos. Si haces clic en cualquiera de ellos, puedes ajustar el color como desees. Cuando hayas terminado, simplemente haz clic en Finalizar edición de colores guardados y listo.

Ahora bien, una vez que edites cualquiera de los colores, se actualizarán a través del constructor y también en la sección Opciones de tema. Esto es totalmente nuevo, ya que antes no podías hacer esto, porque sólo funcionaba de manera opuesta, pero ahora puedes editar los colores sobre la marcha en el constructor. Realmente es una funcionalidad interesante y nos gusta, incluso si esta fuera la única parte de la actualización. ¡Pero hay más!

Agregar y Editar Global Colors

Ahora vamos a dar un vistazo a la nueva función. De forma predeterminada, la paleta de colores está siempre en la pestaña / enlace “Guardado”. Pero si haces clic en “Global”, verá una nueva interfaz como esta:

Puedes ver que estos colores globales están representados por una forma de lágrima.

Puedes agregar nuevos colores haciendo clic en el botón más. Luego usa el selector de color para ajustar el color exacto que deseas y haz clic en la marca de verificación junto al siguiente color. Esto guarda el color como un Global Color.

Si haces clic en el icono de rueda dentada, esta entra en modo de edición. Así que puedes ajustar los colores o eliminarlos aquí. Una vez que hayas terminado, haz clic en Finalizar edición de Global Colors y listo. 

Convertir colores estáticos en Global Colors

Con esta nueva actualización, esta función está muy limitada, ya que no existe una forma rápida de convertir los colores existentes en Global Colors. El mejor método que se puede encontrar para convertir colores dentro de módulos en Global Colors fue el de ir a cada página y usar la herramienta Buscar y reemplazar. Ya que esto es bastante útil, porque te permite reemplazar ese color dentro de cualquier elemento de esa página. Entonces, lo que debes hacer es asegurarte de que el color con el que lo estás reemplazando sea global. Es por ello, que luego en la configuración, asegúrate de hacer clic en “Global” y luego continuar.

Ahora para finalizar, espero que hayas disfrutado aprendiendo a utilizar el nuevo sistema de Global Colors de Divi. ¡Muchas gracias! ¡No olvides compartir este contenido en tus redes sociales!