Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Cambiar los colores

Independientemente de que prefieras un motivo en blanco y negro o combinaciones osadas de colores, puedes usar el panel de Estilos del sitio para ajustar los colores del texto, las lineas y los fondos de tus sitios.

Esta guía ofrece información general sobre cómo ajustar los colores de los diferentes elementos de tu sitio.

Nota: Las Páginas de Portada tienen sus propias opciones de estilo.
Estos pasos corresponden a la versión 7.0. Si tu sitio emplea la versión 7.1, consulta las opciones de estilo y diseño de la versión 7.1 para obtener ayuda.

Mira el video

Antes de comenzar

  • Los cambios de colores se aplican a todo el sitio. Por ello, si se cambia el color de un elemento de una página, como el cuerpo del texto, este se modificará en todas las páginas.
  • Para cambiar el color de una sección específica del texto, por ejemplo una sola palabra de una oración, usa un bloque de Markdown.
  • Cada retoque de color debe configurarse por separado.
  • Los cambios de color no se transfieren cuando cambias de plantilla. Vuelven a aparecer si regresas a la plantilla anterior.
  • No hay un modo dentro de Estilos del sitio para ajustar los colores de una página o un bloque individual. Si tienes experiencia con el uso de códigos, podrías intentar hacer el cambio con CSS. Ten presente que no brindamos soporte para una modificación avanzada de este tipo.

Paso 1: Seleccionar una página

Primero, navega a una página en la que te gustaría ver los cambios. En el Menú de Inicio, presiona Páginas. A continuación, haz clic en la página cuyos colores quieras ajustar.

Hay dos motivos para abrir una página en primer lugar:

  1. Algunos retoques solo aparecen cuando estás en una página en la que se aplican. Por ejemplo, tu Página de Blog puede tener retoques específicos para el título que solo aparecen en el panel de Estilos del sitio cuando estás en la vista previa de una Página de Blog.
  2. Si bien los cambios que haces se aplican a todo el sitio, puedes tener una vista previa de las ediciones de estilo en la página seleccionada a medida que los hagas.

Después de seleccionar la página correcta en el panel de Páginas, regresa al Menú de Inicio. Desde allí, haz clic en Diseño y, a continuación, en Estilos del sitio.

Paso 2: Encontrar un retoque de color

Los retoques de estilo específicos dependen de tu plantilla. Desplázate hacia abajo dentro de Estilos del sitio para ver todos los retoques disponibles en la página que estás viendo.

Cada retoque de color tiene un círculo al lado de su rótulo. Este círculo muestra el color actual del elemento.

Nota: No aparecerá el círculo si el color es transparente o si es el mismo gris que el fondo del panel de Estilos del sitio.

 

Para encontrar los ajustes específicos para un elemento de la página, haz clic en dicho elemento de la vista previa. En Estilos del sitio aparecerán solo los ajustes de estilo correspondientes a dicho elemento; el resto quedará oculto. Este atajo está disponible en la mayoría de las plantillas y para la mayoría de las áreas en tu sitio. Haz clic en Mostrar todos para volver a ver todos los ajustes de la página.

Una vez que hayas encontrado el retoque, presiónalo para abrir el seleccionador de colores.

Paso 3: Escoger un color

Usa el selector de color que se abre para encontrar el color que te gusta. Haz clic en el control deslizante de la parte inferior para seleccionar el color y ajustar el tono (claro/oscuro) con un clic en el cuadrado del centro.

color-sliders.png

Alternativamente, si conoces el valor del color que deseas, puedes ingresarlo en el campo de valores. El campo de valores acepta únicamente estos formatos:

  • HEX: #FFFFFF
  • RGB o RGBa: rgba (255, 0, 149, 1)
  • HSL/HSLA: hsla (325, 100 %, 50 %, 1)
  • HTML (debe estar en minúsculas): blanco

Si necesitas ayuda para encontrar el valor de un color específico, puedes consultar sitios externos, como color-hex.com o imagecolorpicker.com.

Consejo: El campo de valor se rellena automáticamente cuando usas el control deslizante de colores para buscar un color. Puedes copiar y pegar este código para agregar el mismo color a otros retoques en Estilos del sitio.

value-field.png

Paso 4: Cambiar la transparencia

Para ajustar la transparencia de un color, usa el control deslizante de opacidad arrastrando el círculo debajo del selector de colores. El lado izquierdo es completamente transparente, mientras que el lado derecho es totalmente sólido.

change-the-opacity.png

Nota: Algunos retoques de color no incluyen un control deslizante de opacidad.

El control deslizante de opacidad es especialmente útil para los colores de la superposición, que aparecen encima de las imágenes.

overlay-opacity.png

Si tienes un color o una imagen que se superpone a otro, hacer que la capa superior sea transparente mantiene visible a la capa inferior.

opacity-overlap.png

Paso 5: Terminar y guardar

Haz clic en cualquier parte fuera de la ventana de color para cerrar el selector de colores.
 
Para deshacer los cambios antes de guardar, en la parte superior del panel, haz clic en el icono de deshacer o presiona el punto al lado de un ajuste en particular.  Lee Hacer cambios de estilo para informarte mejor.

undo_and_dot_icons.jpg

Cuando hayas terminado de hacer los cambios, presiona Guardar.

click_save.jpg

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 55 de 155