El sistema de gestión de colores de Divi
Cómo usar las opciones avanzadas de color de Divi.
El sistema de gestión de colores de Divi ha evolucionado a lo largo de los años para convertirse en uno de los sistemas de color más robustos en el universo de WordPress.
El sistema de colores de Divi, combinado con la capacidad de editar y crear paletas de colores guardadas, globales y recientes basadas en la interacción del usuario, es realmente incomparable.
Entendiendo el sistema de gestión de colores de Divi
El administrador de colores de Divi tiene tres paletas de colores que siempre están disponibles sin importar dónde accedas a las opciones de color dentro del constructor visual de Divi:
-
Colores guardados
-
Colores globales
-
Colores recientes
Colores guardados
Guardar colores se puede lograr configurando una paleta de colores predeterminada en las opciones del tema de Divi.
Navega a Divi → Opciones del tema → General → Paleta predeterminada del selector de colores para establecer tus colores.
- Haz clic en el icono de engranaje junto a las opciones de la paleta de colores.
- Haz clic en el icono de editar para cambiar el color.
Colores globales
Cuando accedes a las opciones de color en el Constructor Visual, la paleta junto a Guardados se llama Global.
Los colores globales en Divi están diseñados para que puedas asignar y editar colores fácilmente en todo tu sitio.
Cuando cambias un color global, cualquier elemento en tu sitio que use ese color global cambiará también. Esto permite hacer cambios amplios y consistentes desde cualquier lugar donde accedas a las opciones de color en Divi.
Construyendo una paleta global (dinámica)
Crear una paleta global dinámica es una función excelente del sistema de gestión de colores de Divi.
Haz clic en la pestaña Global en las configuraciones de color de tu módulo para acceder a los colores globales.
Asignar un color global a elementos es una forma sencilla de mantener la consistencia y cambiar el diseño si eliges otro esquema de color.
- Entra al módulo y dirígete a la pestaña diseño.
- Abre las configuraciones de color del elemento haciendo clic en la pestaña global.
- Haz clic en el ícono + justo encima de la pestaña global.
- Aparecerá el selector de color de Divi, donde puedes ingresar un código hexadecimal para tu nuevo color global o seleccionar uno con el selector.
- Haz clic en el botón verde de confirmación junto al código hex para guardarlo.
Puedes agregar tantos colores globales como desees. Una vez guardados, los colores globales aparecen bajo el selector de color. El triángulo blanco en la esquina inferior derecha de la muestra de color los identifica.
Luego puedes elegir cualquier color global y asignarlo a tu elemento. Cuando un color global es aplicado, puedes cambiarlo fácilmente a otro color que elijas.
Como se mencionó antes, los elementos con colores globales aplicados cambiarán dinámicamente cuando edites un color global.
Colores recientes
La tercera paleta de colores siempre disponible en el sistema de gestión de colores de Divi es la paleta de colores recientes.
- Haz clic en cualquier opción de color dentro de un módulo, columna, fila o sección.
- Haz clic en la pestaña Recientes. Allí encontrarás los colores usados recientemente durante el proceso de diseño.
Sugerencias Mágicas de Color
Usando el algoritmo propio de Divi, los colores recientes y guardados se transforman mágicamente en extensiones dinámicas de paletas de colores llenas de colores armoniosos.
Este sistema de color único mejora el proceso de diseño y fomenta la creatividad al ofrecer sugerencias de colores basadas en los colores que ya usas.
Cada fila de color es única y está basada en un color reciente o guardado. Las posibilidades infinitas pueden usarse para muchas situaciones, como desarrollar una nueva paleta de colores o editar una ya existente. Acceder al sistema mágico de colores es fácil.
- Expande la paleta de colores haciendo clic en las elipsis o el menú de 3 puntos debajo del cuentagotas que contiene el color activo.
- Una vez expandida, cada color se muestra en su fila basado en colores similares o compatibles. Cada fila es única y ofrece acceso rápido a casi ilimitadas sugerencias de colores para tu diseño.
Uso del Sistema de Gestión de Color de Divi
Esto es una gran función durante el proceso de diseño, especialmente si cambias de opinión sobre tu paleta de colores.
A diferencia de la paleta predeterminada, no necesitas salir del constructor visual para hacer cambios. Puedes seleccionar, editar y aplicar cambios de color al instante.
Cómo Cambiar Colores Estáticos a Colores Globales
Una vez que eliges una paleta, los colores estáticos pueden convertirse en globales.
Ejemplo: Esto puede hacerse con cualquier diseño de los paquetes de Divi. Selecciona cualquier módulo, columna, fila o sección en la página para convertir un color estático en global.
- Selecciona la pestaña global junto a los colores guardados y recientes.
- Para establecer un color como global, haz clic derecho y elige convertir a global.
Alternativamente:
Haz clic en la pestaña Global
-
Haz clic en el ícono + junto al último color listado
-
Haz clic en la marca verde junto al código hexadecimal para guardarlo
Esto añadirá el color activo como un color global.
Cómo Encontrar y Reemplazar Colores
Esto ahorra tiempo y te permite probar diferentes opciones de color en tu sitio. Usa la herramienta de buscar y reemplazar de Divi para encontrar un color que quieras cambiar.
Ejemplo: Puedes cambiar el color de fondo de tus botones en una sección.
Haz clic derecho en la opción de color de fondo
Haz clic en Buscar y Reemplazar
En "dentro de", selecciona si deseas reemplazar el color en la sección, fila, columna o configuración de elemento.
Para este ejemplo, elegiremos todos los ajustes de botón. Luego, elige cambiar el color en toda la sección, fila o columna.
Seleccionamos esta sección. Luego, clic en la pestaña global y selecciona un color. Marca la casilla “reemplazar todo” y haz clic en reemplazar.
Cómo Editar Colores Guardados y Globales
Para editar un color guardado:
Navega a Divi → Opciones del Tema → Paleta Predeterminada de Selección de Colores.
Haz clic en el color para editar el código hexadecimal.
Haz clic en Guardar Cambios.
Para editar un color global:
Abre las opciones de fondo de cualquier elemento con opciones de color
-
Haz clic en la pestaña Global y selecciona el color a cambiar
-
Con el color activo, haz clic en el cuentagotas para editar la configuración del color
-
Introduce un nuevo código hexadecimal o usa el selector de color de Divi
-
Haz clic en la marca para guardar
Aparecerá un aviso para confirmar los cambios.
Cómo Añadir Colores Globales a Gradientes
Haz clic en las opciones de fondo
-
Selecciona la pestaña de gradientes de fondo
- Haz clic en + para añadir un gradiente
Haz clic en la primera parada de color para agregar un color global.
- Haz clic en la pestaña Global para seleccionar tu color.
Paradas de degradado de color global
- Haz clic en la segunda parada de color.
Selecciona el color para la parada.
Cómo Rebrandear un Diseño Premade con el Sistema de Gestión de Color de Divi
- Carga la página de destino del paquete Chocolatier y publícala.
- Abre la configuración del módulo de botón en el encabezado de la página.
- Haz clic en la pestaña Diseño.
- Desplázate hasta la sección del fondo del botón.
- Con el color actual seleccionado, haz clic en la pestaña Global.
- Haz clic en el ícono +.
- Haz clic en la marca verde para guardar.
Usaremos Buscar y Reemplazar para editar todas las instancias de ese color estático en el sitio.
- Haz clic en cualquier sección de tu página.
- Selecciona una instancia del color.
- Haz clic derecho y elige Buscar y Reemplazar.
- Deja el color del texto del botón tal cual.
- Selecciona todos los módulos dentro.
- Elige esta sección para todo el reemplazo.
- Selecciona tu nuevo color global en la pestaña Global.
- Marca la casilla Reemplazar todo.
- Haz clic en Reemplazar para convertir todas las instancias al color global.
Consejos y Buenas Prácticas para la Gestión de Color en Divi
-
Crea primero tu paleta de colores guardada
Cuando crees un sitio nuevo o rediseñes uno, es útil definir los bloques estandarizados del sitio.
Recomendamos comenzar creando una guía de estilo usando Divi. Lo primero y más importante es definir la paleta de colores del sitio.
Una vez creada, guárdala como paleta predeterminada. Luego usa esos colores al diseñar los elementos de tu guía de estilo, incluyendo variaciones.
Los elementos creados pueden guardarse en la Biblioteca Divi para acceder fácilmente en cualquier lugar.
-
Convierte colores estáticos a globales cuando sea posible
Si usas el mismo color en varias secciones o páginas, asigna la versión global para facilitar cambios futuros.
Esto ahorra mucho tiempo y es una de las mejores características del sistema de gestión de color.
-
Limita la paleta de colores (mantén la simplicidad)
La paleta predeterminada usa máximo 8 colores. Esto es buena práctica de diseño para mantener armonía y balance visual.
Demasiados colores dificultan lograr un diseño equilibrado y atractivo.
Elige 3 colores y usa variaciones de esos tonos para una paleta visualmente impactante.
Sigue aprendiendo
Para más información sobre el Sistema de Gestión de Color y cómo crear diseños increíbles, revisa estos posts relacionados:
-
Cómo aplicar paletas de color a tu sitio Divi
-
Gestiona el esquema de color completo desde el constructor visual
-
Vista previa de función Divi: un poderoso nuevo gestor de colores
Popular Articles
Guía de Negocio para Resellers y Partners
En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...Ver una Demo de Scoreapps para Resellers
En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:Proporciona acceso a tus Aplicaciones
Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...Cómo Crear una App de Tienda
El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...Cómo diseñar la pantalla de inicio o portada de una App
En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
Related Articles
Presets Globales de Divi
Aprende cómo crear presets de Divi y aplicarlos a módulos en todo tu sitio web. <br> Una visión general de la función de presets globales de Divi Un reemplazo poderoso para los valores predeterminados globales Los presets globales de ...El Bloque de Diseño Divi
El Bloque de Diseño Divi te permite cargar diseños de Divi directamente dentro del editor Gutenberg. El Bloque de Diseño Divi El bloque de diseño Divi es un bloque de Gutenberg que te permite insertar o crear diseños de Divi desde cero directamente ...Uso de las Opciones de Sombra de Caja en Divi
Las opciones de sombra de caja en Divi te permiten darle a cualquier elemento de la página la ilusión de profundidad. Las sombras proyectadas son una forma creativa de dar vida a los elementos de diseño de tu sitio web. Pueden resaltar elementos e ...Uso de las Opciones de Borde en Divi
Las opciones de borde de Divi permiten añadir y estilizar fácilmente bordes en cualquier elemento de la página. Con las Opciones de Borde de Divi, es posible crear diseños verdaderamente únicos para tu sitio web. ¡Puedes aplicar bordes personalizados ...Uso de los ajustes predefinidos de Divi
Los ajustes predefinidos de Divi aceleran enormemente tu proceso de diseño al permitirte tomar el diseño de cualquier elemento y aplicarlo a otros módulos. Divi es altamente personalizable, permitiéndote hacer que los módulos y otros elementos de ...