Colores

Puedes cambiar la paleta activa en la herramienta Personalizar, pero ten en cuenta que esto sólo intercambia los 9 colores predefinidos. Su orden importa. Por lo general, es mejor seguir la secuencia original proporcionada por el tema, ya que está diseñada para mantener la armonía visual.

La paleta está dividida en tres secciones clave:

• Colores de acento (los dos primeros colores)
  Se utilizan para elementos destacados como botones, enlaces y otros elementos que llaman la atención.
• Colores de contraste (los cuatro colores siguientes)
  Estos colores crean una jerarquía sutil, especialmente en la tipografía, para mejorar la legibilidad y la estructura de tu contenido.
• Colores de fondo (tres últimos colores)
  Definen diferencias visuales suaves entre las secciones de una página o entrada, ayudando a organizar el contenido y mejorar la fluidez.

El panel Colores

Los colores de tu paleta ya están integrados en todo tu sitio, dando forma a su estética sutil y a su aspecto. Forman la «piel» de tu sitio. Cuando ajustas la paleta de colores, no sólo estás cambiando elementos aislados, sino el diseño base de tu sitio, ya que estos colores se utilizan sistemáticamente en varios componentes para mantener la coherencia visual y garantizar que tu sitio se mantiene alineado con el estilo elegido.

Para crear un sistema de diseño cohesivo y flexible, la paleta de colores está estructurada en 9 funciones intencionadas:

1. Acento – El color primario utilizado para los resaltes clave y los elementos interactivos.
2. Acento (Alt) – Una variación del color de acento, a menudo utilizado para los estados hover o activo (piensa en lo que ocurre cuando pasas el ratón por encima del color de acento).
3. Texto más fuerte – Se utiliza para texto con mucho énfasis, como los titulares.
4. Texto fuerte – Se utiliza para el texto principal del cuerpo.
5. Texto medio – Para contenido secundario o texto menos destacado.
6. Texto sutil/Bordes – Ideal para pies de foto, texto de ayuda o líneas divisorias.
7. Fondo sutil – Un fondo claro que garantiza que el texto fuerte siga siendo legible (lo suficientemente claro como para que el texto fuerte sea legible).
8. Fondo más claro – Aún más claro que el anterior, adecuado para zonas con texto medio (lo suficientemente claro como para que el texto medio sea legible).
9. Blanco – El fondo más claro para un contraste máximo (o muy cercano al blanco).

Al aplicar de forma coherente estas funciones de color en todo tu sitio, mantienes un lenguaje visual unificado y haces que sea muy fácil ajustar el sistema más adelante. Si necesitas colores adicionales o independientes más allá de esta paleta, puedes añadirlos a través de los Controles de Bloques de Kadence. Allí puedes definir un número ilimitado de colores personalizados de fácil acceso directamente dentro del editor de bloques.

Botones

Puedes cambiar la apariencia de los botones en todo tu sitio. Cada vez que añadas un nuevo botón a una página, utilizará por defecto la configuración establecida en el Personalizador , a menos que se especifique lo contrario en la Configuración del bloque.

El Panel de Botones

Estos son los parámetros disponibles:

• Colores del texto: Te permite establecer un color inicial y un color hover para el texto de tu botón.
• Colores de fondo: Te permite establecer un color inicial y un color hover para el fondo de tu botón.
• Colores del borde: Te permite establecer un color inicial y un color hover para el borde de tu botón.
• Borde: Te permite establecer y utilizar un borde en tus botones.
• Radio del borde: Te permite establecer el radio del borde de tus botones.
• Fuente: Te permite especificar una fuente, un estilo y un tamaño de fuente para tu botón.
• Relleno: Te permite añadir relleno a tu botón para escritorio, tableta y dispositivos móviles.
• Sombra del botón: Te permite establecer una sombra alrededor de tu botón.
• Estado Hover dela Sombra del Botón: Te permite establecer una sombra flotante alrededor de tu botón.

Tipografía

La Configuración tipográfica controla el aspecto general del texto en todo tu sitio web, incluyendo familias de fuentes, colores de fuentes, tamaños de fuentes y estilos de fuentes adicionales.

El Panel de Tipografía

Fuente base
Define la fuente por defecto utilizada en todo tu sitio, incluyendo elementos comunes como el texto de los párrafos y los menús de navegación.

Familia de fuentes de los encabezados
Este ajuste aplica una fuente específica a todos los encabezados (H1-H6) de tu sitio. Por defecto, los encabezados individuales están configurados para heredar (inherit) esta fuente global. Sin embargo, puedes anular cualquier encabezado seleccionando manualmente una fuente diferente para ese elemento específico.

Para afinar tu tipografía:

• Utiliza el Selector de Color para elegir un color de fuente.
• Utiliza el Selector de fuentes para aplicar una familia de fuentes concreta.
• Ajusta el Peso de la fuente para controlar el grosor (por ejemplo, claro, normal, negrita).
• Por último, puedes definir un Tamaño de fuente y ajustar otras opciones de fuente.