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

Ya sea que prefieras un tema en blanco y negro o combinaciones de colores audaces, puedes usar estilos del sitio y estilos de sección para cambiar los colores de tu 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

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 de paletas de colores:
    • Ajustes preestablecidos: elige entre un conjunto de paletas predefinidas en colores selectos.
    • De imagen: Sube una imagen para generar una paleta basada en los colores más destacados de la imagen.
    • De color: Elige un color primario utilizando el selector de color y genera paletas que complementen 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 distintos temas de color para las secciones de tu 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 especial.

Para confirmar qué tema utiliza 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. Tus cambios se mantienen mientras editas el contenido de otra página. Para guardar tus cambios, posiciona el cursor sobre Listo en la esquina superior izquierda del editor de páginas y haz clic en Guardar.
Nota: Al cambiar el tema de color de una sección, se restablecen todos los colores de esa sección, incluidos los cambios de color del texto realizados en la barra de herramientas del bloque de texto.

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.
  • Muy claro 2, Claro 2, Oscuro 2 y Muy oscuro 2: El color en el lado izquierdo de la paleta se aplica a todo el texto y encabezados, 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 de texto y de botones son blanco o negro por defecto para proporcionar un mejor contraste con el color de fondo.

Temas para otras áreas del sitio

Sigue los pasos que se indican a continuación para encontrar los temas de color de estas áreas de tu sitio:

  • Barra de anuncios: siempre coincide con el tema de color del encabezado.
  • Página de búsqueda integrada: cierra la vista previa de la página y abre la página de búsqueda agregando /search al final de tu dominio, luego abre el panel Colores y busca la etiqueta del tema.
  • Página 404 predeterminada: cierra la vista previa y navega a una página que no existe agregando una cadena de caracteres al final de tu dominio, como /xyz. Desde allí, abre el panel Colores y busca la etiqueta del tema.
  • Botón de menú de superposición móvil: los colores de superposición móvil se configuran en el encabezado.
  • Fondo de sección: abre el panel Colores y busca la etiqueta del tema y, a continuación, haz clic en ese tema para abrir todos los colores. Busca el color junto a Fondo de sección.
  • Carrito de compras: abre la página de tu carrito de compras agregando /cart al final de tu dominio, luego abre el panel Colores y busca la etiqueta del tema.

Personalizar colores del tema

Puedes personalizar aún más cualquier tema estableciendo colores específicos para diferentes elementos del sitio. Los cambios hechos a los colores de un tema se aplican a todas las áreas de tu 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 desplazarte para revisar 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.

Tus cambios se mantienen mientras editas el contenido de otra página. Para guardar tus 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 actualmente no incluye esos elementos. Por ejemplo, todas las opciones de color del blog aparecerán 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.

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

Si conoces el valor del color que deseas, también puedes hacer clic en el campo de valor para editarlo. Este campo acepta cualquiera de los siguientes 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.

  • Imagen sin bordes extiende la imagen de un borde de la ventana del navegador al otro, abarcando el ancho de tu 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. Tus cambios se mantienen mientras editas el contenido de otra página. Para guardar tus 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 de la versión 7.0, primero navega hasta la página en la que desees realizar cambios. Algunos ajustes solo se muestran cuando estás en la página a la que afectan, por lo que navegar a la página que estás editando ayudará a que aparezcan los ajustes correctos. También puedes obtener una vista previa de tus 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 en la vista previa. En Estilos del sitio solo aparecen los ajustes de estilo correspondientes a dicho elemento y el resto queda oculto. Este atajo está disponible en la mayoría de las plantillas y para la mayoría de las áreas de 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 revisar todos los ajustes disponibles en la página que estás viendo. Haz clic en el ajuste que quieras cambiar y, a continuación, elige un color nuevo.
  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.
  • Al iniciar sesión, el fondo muestra un color blanco al cargar una página, independientemente del color seleccionado en los estilos del sitio. Esto no es visible para los visitantes.

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: 112 de 396