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

Tanto si prefieres un tema en blanco y negro como combinaciones de colores atrevidas, puedes utilizar Estilos del sitio y estilos de sección para cambiar los colores del texto, las áreas de fondo y otros elementos del sitio.

Esta guía proporciona información general de cómo cambiar los colores de los diferentes elementos del sitio.

Mira el video

Antes de comenzar

  • Los cambios de color que realices en Estilos del sitio se aplican a todo el sitio. Cambiar un elemento de una página, como el texto del botón, lo cambiará en todas las áreas que utilicen ese tema (versión 7.1) o en todas las páginas (versión 7.0).
  • Para cambiar el color de un fragmento de texto específico, como una palabra de una oración, utiliza un bloque de Markdown.
  • Si tienes experiencia en codificación, puedes intentar realizar cambios de color dirigidos con CSS. Ten en cuenta que el código personalizado queda fuera del alcance de nuestro soporte técnico.
  • Si tu sitio está en la versión 7.0, el proceso para cambiar los colores funciona de otra manera diferente. Consulta la siguiente sección para ver los pasos específicos.

Cambiar los colores de todo el sitio

Para cambiar todos los colores del sitio, elige una paleta de colores:

  1. Mientras editas una página, haz clic en el ícono de pincel situado en la esquina superior derecha y, a continuación, haz clic en Colores.
  2. Haz clic en Editar paleta para elegir una nueva paleta de colores. Puedes elegir entre estos tipos:
    • Ajustes preestablecidos: elige entre un conjunto de paletas predefinidas en colores selectos.
    • Desde Imagen: sube una imagen para generar una paleta basada en los colores más destacados de la imagen.
    • Desde Color: elige un color primario utilizando el selector de color y genera paletas para complementar ese color.
  3. Para guardar los cambios, posiciona el cursor sobre Listo en la esquina superior izquierda del editor de páginas y haz clic en Guardar.

colors_-_edit_palette.png

Ten en cuenta lo siguiente:

  • Todas las paletas siempre incluyen blanco y negro, que generalmente se utilizan para texto.
  • Cuando se genera una paleta a partir de una imagen, los colores se extraen de los tres colores más dominantes de la imagen.
  • En cualquier paleta, puedes utilizar el Editor de paletas para personalizar cada color.

Cambiar los colores de la sección

La paleta de colores genera diferentes temas de color para las secciones de la página. Después de configurar los colores de todo el sitio, puedes cambiar el tema de color de cualquier sección para darle un aspecto distinto. 

Para ver qué tema está usando una sección:

  1. Mientras edites una página, haz clic en el ícono del pincel y, a continuación, en Colores.
  2. Desplázate por la vista previa de la página y revisa las etiquetas del tema de la sección en cada sección.
Nota: si ves un cuadro en blanco en una sección en lugar de una etiqueta de tema, el color del Encabezado (grande) probablemente esté configurado en el mismo color que el del Fondo de la sección. Para ver la etiqueta del tema, haz clic en el tema que también aparece en blanco en el menú Colores y, a continuación, cambia Encabezado (grande) a otro color. Consulta la siguiente sección para ver los pasos detallados. 

section_themes_on_preview.png

Para cambiar el tema de color de una sección:

  1. En el Menú de Inicio, haz clic en Páginas.
  2. Selecciona la página que deseas editar y presiona Editar en la esquina superior izquierda.
  3. Haz clic en el ícono del lápiz de la sección.
  4. En la pestaña Colores, haz clic en un tema para aplicarlo a esa sección.
  5. Los cambios se mantendrán mientras editas el contenido de otra página. Para guardar los cambios, posiciona el cursor sobre Listo en la esquina superior izquierda del editor de páginas y haz clic en Guardar.

section_theme_editor.png

El tipo de tema (1 o 2) controla qué color se aplica al texto principal de una sección y qué color se aplica a otros elementos:

  • El más claro 1, Claro 1, Oscuro 1 y El más oscuro 1: el texto y los encabezados son negros o blancos, y otros colores se aplican al fondo y a los elementos más pequeños del sitio.
  • El más claro 2, Claro 2, Oscuro 2 y El más oscuro 2: el color del lado izquierdo de la paleta se aplica a todo el texto y encabezado, y otros colores se aplican al fondo y a los elementos más pequeños del sitio.
  • Brillante: el color del lado izquierdo de la paleta se aplica al texto (Brillante 1) o al fondo (Brillante 2) y otros colores se aplican al fondo y a los elementos más pequeños del sitio.

En algunos casos, los colores del texto y del botón serán blanco o negro por defecto para proporcionar un mejor contraste con el color de fondo.

Personalizar colores del tema

Puedes personalizar aún más cualquier tema estableciendo colores específicos para diferentes elementos del sitio. Los cambios en los colores de un tema se aplicarán a todas las áreas del sitio que utilicen ese tema.

Para editar un tema:

  1. Mientras edites una página, haz clic en el ícono del pincel y, a continuación, en Colores.
  2. Haz clic en el tema que desees editar.
  3. Haz clic en el ajuste que deseas cambiar y, a continuación, elige un nuevo color. Puedes utilizar un color preestablecido en la pestaña Paleta o hacer clic en Personalizado para utilizar el selector de colores. Es probable que tengas que desplazar el cursor para ver todos los ajustes.
  4. Utiliza el control deslizante de opacidad para cambiar la transparencia.
  5. 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.

Los cambios se mantendrán mientras editas el contenido de otra página. Para guardar los cambios, posiciona el cursor sobre Listo en la esquina superior izquierda del editor de páginas y haz clic en Guardar.

A medida que cambies los colores del tema, ten en cuenta estos consejos:

  • Si no sabes qué tema tienes que editar, busca la etiqueta del tema cromático en el área de la página que deseas cambiar.
  • El menú Editar tema muestra todos los ajustes de color posibles para tu sitio, incluso si la página que estás editando no incluye esos elementos. Por ejemplo, verás todas las opciones de color de la página de blog incluso si estás editando una Página de diseño.
  • Si una sección tiene una imagen de fondo, utiliza el ajuste Superposición de fondo para establecer la opacidad del color de superposición. Si la sección utiliza un color o video de fondo, utiliza Fondo de sección para establecer dicho color.

Estas áreas del sitio tienen reglas de tema de sección ligeramente diferentes:

  • Para encontrar el tema de color de tu página de búsqueda integrada, cierra la vista previa de la página y abre la página de búsqueda, abre el panel Colores y busca la etiqueta del tema.
  • Para encontrar el tema cromático de la página 404, cierra la vista previa e ingresa a una página que no exista agregando un string de letras al final del dominio, como /xyz. Desde allí, abre el panel de Colores y busca la etiqueta del tema.
  • La barra de anuncios de tu sitio siempre coincide con el tema cromático de tu encabezado. Cuando el encabezado es transparente, coincide con el tema de la siguiente sección.

Selector de color

Utiliza el selector de color para elegir un color personalizado para un elemento de tu sitio. Cada ajuste de color tiene un círculo junto a su etiqueta que muestra el color actual de ese elemento.

Para elegir un nuevo color, haz clic en el círculo de colores junto al ajuste que quieres cambiar. Haz clic en el control deslizante inferior para seleccionar un color y, a continuación, haz clic en el cuadrado de arriba para elegir un tono.

pick_a_color.png

Alternativamente, si conoces el valor del color que deseas, puedes hacer clic en el campo de valor para editarlo. Este acepta cualquiera de estos formatos:

  • HEX; p. ej.: #FFFFFF
  • RGB o RGBA; p. ej.: rgba(255, 0, 149, 1)
  • HSL/HSLA; p. ej.: hsla(325, 100%, 50%, 1)
  • HTML (debe estar en minúscula); p. ej.: 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 se utiliza el control deslizante de color para buscar un color. Puedes copiar y pegar este código para agregar el mismo color a otros retoques en el tema.

custom_color_value.png

Transparencia

Para cambiar la transparencia de un color, usa el control deslizante de opacidad arrastrando el círculo debajo del selector de colores. El control deslizante de opacidad es especialmente útil para los colores de la superposición, que aparecen encima de las imágenes.

  • En la versión 7.1, solo es posible cambiar la transparencia de los colores de la paleta.
  • En la versión 7.0, algunos retoques de color no incluyen un control deslizante de opacidad.

adjust_the_opacity.png

Cambiar el color del borde del recuadro

Cuando una sección tiene una imagen de fondo, puedes visualizarla como imagen sin bordes o recuadro.

  • La imagen sin bordes extiende la imagen de un borde de la ventana del navegador a otro, abarcando el ancho del sitio.
  • El recuadro aplica una ligera sangría a la imagen y crea un borde alrededor de ella.

Cuando la imagen se establece en recuadro, puedes cambiar el color del borde:

  1. Mientras edites una página, haz clic en el ícono del pincel y, a continuación, en Colores.
  2. Haz clic en el tema de color de la sección que quieres cambiar.
  3. En Todo el sitio, haz clic en Borde del recuadro y elige un color.
  4. Los cambios se mantendrán mientras editas el contenido de otra página. Para guardar los cambios, posiciona el cursor sobre Listo en la esquina superior izquierda del editor de páginas y haz clic en Guardar.

Cambiar colores en la versión 7.0

Si el sitio está en la versión 7.0, el proceso para cambiar los colores funciona de otra manera diferente.

Consejo: Las páginas de portada tienen sus propias opciones de estilo.

En el panel Diseño, utiliza los retoques de Estilos del sitio para establecer manualmente los colores del sitio. Los retoques de estilo específicos dependen de la plantilla de tu sitio web. Revisa las guías de tu plantilla para obtener ayuda más detallada sobre cómo cambiar los colores de tu sitio web.

Para cambiar los colores en un sitio versión 7.0, primero navega a una página en la que desees ver los cambios. Algunos retoques solo se muestran cuando estás en la página que afectan, por lo que navegar a la página que estás editando te ayudará a ver los retoques correctos. También puedes obtener una vista previa de las ediciones de estilo en la página seleccionada a medida que las realizas.

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.

site_styles_-_show_all.png

Para modificar los colores de tu sitio:

  1. En el menú de Inicio, haz clic en Páginas y, a continuación, en la página que desees cambiar.
  2. Cuando la vista previa del sitio muestre la página correcta, vuelve al Menú de inicio.
  3. Haz clic en Diseño, y, luego, en Estilos del sitio.
  4. Desplázate hacia abajo para ver todos los ajustes disponibles en la página que estás visualizando. Haz clic en el ajuste que deseas cambiar y, a continuación, elige un nuevo color.
  5. Utiliza el control deslizante de opacidad para cambiar la transparencia.
  6. Haz clic en cualquier parte fuera de la ventana de color para cerrar el selector de colores.
  7. 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.
  8. Haz clic en Guardar en la parte superior del panel.

Cambiar los colores de fondo

Estas familias de plantillas tienen zonas con fondo personalizable:

Familia de plantillas Áreas de fondo
Adirondack
  • Sitio
  • Lienzo
  • Barras de navegación
  • Encabezado
Avenue
  • Sitio
  • Lienzo
Aviator
  • Sitio
  • Lienzo
  • Encabezado/Pie de página
Bedford
  • Sitio
  • Encabezado
  • Pre-pie de página
  • Pie de página
Brine
  • Sitio
  • Lienzo
  • Borde
  • Encabezado superior
  • Pie de página
  • Barras móviles
Farro
  • Sitio
  • Borde
  • Encabezado
  • Pie de página
  • Barra móvil
Five
  • Sitio
  • Lienzo
  • Borde del lienzo
  • Encabezado
  • Navegación
Flatiron
  • Sitio
  • Encabezado/Pie de página
Forte
  • Sitio
Galapagos
  • Sitio
  • Encabezado
Ishimoto
  • Sitio
  • Borde de página
Momentum
  • Sitio
  • Lienzo
  • Navegación
Montauk
  • Sitio
  • Lienzo
Native
  • Sitio
Pacific
  • Sitio
  • Encabezado
  • Sección alternante del índice
  • Pre-pie de página
  • Pie de página
Skye
  • Sitio
Supply
  • Sitio
  • Navegación en el encabezado/la barra lateral
Tremont
  • Sitio
  • Superposición de navegación
  • Índice
Wells
  • Sitio
Wexley
  • Sitio
  • Navegación en dispositivos móviles
York
  • Sitio
  • Banner

Ten en cuenta lo siguiente:

  • Los colores de fondo no se transfieren cuando cambias de plantilla.
  • Algunas plantillas también admiten imágenes de fondo.
  • En algunas plantillas, se puede mostrar un banner detrás del encabezado.
  • Cuando has iniciado sesión, el fondo aparecerá de color blanco cuando se carga una página, independientemente del color seleccionado en Estilos del sitio. Los que visiten el sitio no lo verán.

Para obtener más ayuda, visita la guía de tu plantilla.

Mira el video

Este video corresponde a la versión 7.0.

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