Los colores que elijas representan la mayor parte del diseño de tu sitio. Esta guía te enseñará a gestionar las paletas de colores de tu sitio.
En esta guía
Si tu sitio utiliza un tema compatible con el editor del sitio, puedes cambiar los colores de tu sitio utilizando los Estilos. Una forma rápida de saber si tu sitio utiliza el editor del sitio es comprobarlo en la sección Apariencia del escritorio. Si ves Editor aquí, puedes cambiar los colores de tu sitio siguiendo estos pasos:
- En el escritorio, ve a Apariencia → Editor.
- Haz clic en Estilos a la izquierda o selecciona el icono Estilos, como se muestra aquí. El icono parece un círculo en blanco y negro.
- Selecciona Colores.
- Selecciona Paleta para elegir los colores por defecto de tu sitio o elige uno de los siguientes elementos:
- Texto
- Fondo
- Enlace
- Descripciones
- Botón
- Encabezado
En el resto de esta guía, se explican cada una de ellos con más detalle.
La paleta de colores de tu sitio establece los colores por defecto que se utilizan en todo el sitio. Aunque todavía puedes controlar el color de cualquier elemento específico, la definición de la paleta de colores garantiza una combinación de colores coherente en todo tu sitio web.
Aquí puedes editar los colores de Tema, Por defecto y Personalizado:
- Tema: los colores definidos por los diseñadores del tema al crear el tema, utilizados en todo el diseño de tu tema.
- Por defecto: los colores que se muestran en los ajustes de color del bloque al editar tus páginas y entradas.
- Personalizado: define y nombra colores adicionales para usar en tu paleta de colores.
Para actualizar los colores del Tema, sigue estas instrucciones:
- Haz clic en cualquier lugar dentro del cuadro que hay debajo de Paleta.
- Haz clic en los tres puntos situados junto a Tema y, a continuación, elige Mostrar detalles para ampliar la lista de áreas de color de la paleta.
- Cada tema define sus propias áreas de color. En nuestro ejemplo, podemos elegir entre Principal, Secundario, Primer plano, Fondo o Terciario para editar ese color:
- Utiliza el selector de color que aparece para elegir el color que quieras.
- Haz clic en Hecho para definir el color que has elegido.
- Haz clic en Guardar que aparece en la esquina superior derecha para guardar los cambios.
También puedes añadir varios colores personalizados a la paleta de tu sitio. Estos se guardarán y estarán disponibles para que los elijas en los ajustes de color de tus bloques.
Para añadir colores personalizados, sigue estos pasos adicionales:
- En Personalizado, haz clic en el botón +.
- Elige el color en el selector de color o introduce un valor de color HEX, RGB o HSL.
- Haz clic en el nombre del color (por defecto será «Color 1») y escribe un nombre para el nuevo color.
- Haz clic en Hecho.
Estos pasos se muestran en el siguiente vídeo:
En los ajustes de color, justo debajo de Paleta, verás la opción de editar el color de varios elementos de tu sitio. Esos elementos son:
- Texto: elige un color para el texto base normal de tu sitio, sin incluir enlaces, descripciones, texto de botones ni encabezados.
- Fondo: elige un color sólido o degradado para el fondo de tu sitio. Obtén más información en nuestra guía para personalizar el fondo de tu sitio.
- Enlace: elige un color para todos los enlaces de tu sitio. Aquí, puedes elegir el color por defecto que se muestra para todos los enlaces, así como el color que se muestra al mantener (el ratón) encima de un enlace:
- Descripciones: elige el color del texto utilizado en las descripción del bloque de imágenes.
- Botones: establece el color utilizado en los bloques de botones. Puedes elegir el color del texto y establecer un color sólido o degradado para el fondo de los botones.
- En este momento, no está disponible el control del color de los botones al mantener (el ratón) encima. Es posible usar código CSS para aplicar un color al mantener (el ratón) encima de un botón.
- Encabezados: establece un color para los bloques de encabezado en el sitio. Puedes elegir el color del texto y establecer un color sólido o degradado para el fondo de los encabezados.
- Para elegir un color diferente para cada uno de los niveles de encabezado (de H1 a H6), haz clic en los tres puntos situados junto a Color para ampliar las opciones y haz clic en el nivel de encabezado que quieras. Aparecerá una marca de verificación junto al nivel de encabezado y, a continuación, podrás cerrar las opciones para acceder a los ajustes de color de ese nivel de encabezado.
Si quieres anular el color de un solo texto concreto (en lugar de todos los elementos), puedes establecer un color diferente en los ajustes de color de cada bloque en esa entrada o página concreta.
