Gestión del color del tema Blocksy: paleta de colores global y ajustes de color personalizados

En el diseño de sitios web, los colores no sólo realzan el atractivo visual, sino que también ayudan a transmitir mensajes de marca.Blocksy El tema ofrece a los diseñadores y desarrolladores web una forma sencilla y potente de gestionar y aplicar los colores a través de su sistema de paleta de colores global. Tanto si quieres alinear los colores con el estilo de tu marca como garantizar la coherencia de la página, Blocksy te lo pone fácil. En este artículo, analizaremos en profundidad las funciones de gestión del color del tema Blocksy, incluida la paleta de colores global, el selector de colores y cómo añadir colores personalizados para crear un diseño web único.

Acceso a la configuración global del color

Blocksy Se puede acceder a la configuración global de colores del tema a través de la siguiente ruta:Personalizador → Opciones generales → Colores. Esta configuración permite a los usuarios gestionar y aplicar los colores de forma coherente en todo el sitio, garantizando la coherencia del diseño.

Gestión de la paleta de colores

Blocksy Se ofrecen quince paletas de colores predefinidas que pueden aplicarse directamente al sitio web. Los usuarios también pueden crear sus propias paletas de colores si estos colores predefinidos no satisfacen plenamente los requisitos de diseño, o ampliar las paletas existentes añadiendo más colores para que se ajusten mejor a la identidad de la marca.

Para gestionar las paletas de colores, haga clic en el menú de tres puntos y seleccione "Paletas de colores", lo que abrirá la pantalla de gestión de paletas. Los usuarios pueden seleccionar una paleta existente o crear una completamente nueva definiendo colores personalizados.

Al guardar una nueva paleta, defina primero los colores que deben incluirse y, cuando haya terminado, vuelva a hacer clic en los tres puntosmenúy seleccione "Guardar paleta". La nueva paleta aparecerá en la pestaña Personalizada del Gestor de paletas, lo que facilitará su selección y modificación posterior.

Estructura de uso del color sugerida

Para mantener la coherencia cromática en su sitio web, aquí tiene algunas sugerencias para estructurar el uso del color:

Color 1El color primario de una marca, a menudo utilizado para resaltar elementos clave.
Color 2Color alternativo, normalmente utilizado para efectos hover.
Color 3Color del cuerpo del texto, aplicado a los párrafos.
Color 4Color de los títulos, subtítulos y títulos principales.
Color 5Color de los bordes y separadores.
Color 6Color de fondo para la cabecera y el pie de página.
Color 7: Color de fondo del sitio principal.
Color 8: Un color alternativo más claro, normalmente utilizado para fondos de cabecera.

El uso de estos colores estructurados garantiza que el diseño general del sitio web sea estilísticamente coherente y acorde con la marca.

selector de color

El selector de color de Blocksy ofrece al usuario una flexibilidad total para seleccionar fácilmente los colores adecuados. El selector incluye un regulador HWB para la saturación y el brillo del color, además de controles deslizantes de tono para ajustar con precisión el color seleccionado. Los usuarios pueden asignar nombres personalizados a los colores de la paleta poniéndolos a su disposición en el personalizador y en los creadores de páginas compatibles como Gutenberg responder cantando Elementor) son fácilmente reconocibles.

Además, el usuario puede copiar directamente el valor HEX de un color u obtener su CSS que es útil para configuraciones de estilo más avanzadas.

Añadir nuevo color

Si las 8 muestras de color predeterminadas no son suficientes, Blocksy facilita la adición de más. Solo tienes que abrir el menú de tres puntos y seleccionar "Añadir nuevo color" para ampliar la paleta con nuevos colores que se ajusten a tus necesidades de marca y diseño.

Estos colores adicionales serán Gutenberg El editor lo reconoce automáticamente para garantizar la coherencia del contenido del sitio.

Control adicional del color

color globalColores Globales : La sección Colores Globales permite a los usuarios definir un conjunto de categorías de colores predefinidos que se aplicarán automáticamente en todo el sitio, garantizando un diseño coherente. Incluye:

texto básico: Establece el color de fuente por defecto para todos los párrafos y el cuerpo del texto.

enlace (en una página web): Define el color inicial del enlace y el color del estado hover.

selección de texto: Establece el estilo de color del texto cuando es seleccionado por el usuario.

Todos los títulos (H1 - H6): Establece uniformemente el color de todas las etiquetas de título.

Ajuste individual del título: Establezca colores individuales para niveles de encabezamiento específicos (por ejemplo, H1, H2, etc.).

AntecedentesControla el color o la imagen de fondo de todo el sitio web; el fondo de todas las páginas se modificará en consecuencia.

advertencia

Los usuarios no están limitados a utilizar sólo los colores de la paleta. Cada color puede ajustarse más a través de las pestañas de diseño, que ofrecen opciones de control más preciso para garantizar que el sitio tenga el aspecto deseado.

Recursos para desarrolladores

El selector de colores del tema Blocksy también permite definir colores personalizados. CSS Variables. Los usuarios pueden definir variables de color CSS en el panel CSS adicional y reutilizarlas en diversas partes del personalizador, lo que mejora la coherencia y la capacidad de mantenimiento del diseño.

observaciones finales

Blocksy El sistema de gestión del color del tema proporciona a los diseñadores web una potente herramienta para garantizar la coherencia del color y la presentación de la marca en su sitio web sin perder creatividad. Desde paletas de colores preestablecidas hasta la adición de colores personalizados, Blocksy hace que la gestión del color sea fácil y eficaz. Tanto si es un diseñador principiante como experimentado, Blocksy puede ayudarle a crear diseños web atractivos y profesionales.

Actualizaciones recientes

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres