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 atrevidas, puedes utilizar el panel Diseño y los estilos de sección para cambiar los colores del texto, las líneas y las áreas de fondo 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 realizados en el panel Diseño se aplican a todo el sitio. Al cambiar un elemento de una página, como el texto del botón, se 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 una sección específica del texto, por ejemplo una sola palabra de una oración, usa 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 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. En el Menú de Inicio, pulsa Diseño y, luego, Colores.
  2. Haz clic en Editar junto a Paleta para elegir una paleta de colores. 
  3. Haz clic en Guardar en la parte superior del panel.

color_palette_-_click_edit.png

Elige entre algunos tipos de paletas de colores:

  • Paletas de diseñador: elige entre un conjunto de paletas predefinidas en colores complementarios.
  • Desde imagen...: sube una imagen para crear una paleta basada en los colores más destacados de la imagen. 
  • Desde Color...: elige un color principal para la paleta utilizando el selector de color.
  • Colores personalizados: Elige un color para cada parte de la paleta utilizando el selector de color

La paleta de colores crea los diferentes temas de color para las secciones de la página. Para ver qué tema está usando una sección: 

  1. En el Menú de Inicio, pulsa Diseño y, luego, Colores.
  2. Haz clic en Temas de sección.
  3. Desplázate por la vista previa del sitio y revisa las etiquetas del tema de la sección en cada sección. 

Cambiar los colores de la sección

Después de configurar los colores de todo el sitio, puedes cambiar cualquier tema de color de la sección para darle un aspecto distinto: 

  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, selecciona un tema. 
  5. Desplaza el cursor sobre Listo en el editor de páginas y haz clic en Guardar.

section_editor.png

Elige un tema:

  • Mínimo: el texto y los encabezados son de color blanco o negro, y otros colores se aplican al fondo y a los elementos más pequeños del sitio.
  • Negrita: el color del lado izquierdo de la paleta se aplica a todo el texto y los encabezados, y otros colores se aplican al fondo y a los elementos más pequeños del sitio.
  • Acento: el color del lado izquierdo de la paleta se aplica al fondo (Oscuro ) o al texto (Claro), 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 realizados en los colores de un tema se aplicarán a todas las áreas del sitio que utilicen ese tema. 

Para editar un tema: 

  1. En el Menú de Inicio, pulsa Diseño y, luego, Colores.
  2. Haz clic en Temas de sección
  3. Haz clic en el ícono de lápiz situado junto al tema que desees editar. 
  4. Haz clic en el retoque 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 color. Es probable que tengas que desplazar el cursor para ver todos los retoques. 
  5. Utiliza el control deslizante de opacidad para cambiar la transparencia
  6. 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.
  7. Haz clic en Guardar.

Selector de color

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

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

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, el lado izquierdo es un tono muy claro, mientras que el lado derecho agrega un tono más oscuro. Solo es posible cambiar la transparencia de los colores de la paleta. 
  • En la versión 7.0, el lado izquierdo es completamente transparente, mientras que el lado derecho es completamente liso. 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. En el Menú de Inicio, pulsa Diseño y, luego, Colores.
  2. Desplaza el cursor sobre el tema y haz clic en el ícono de lápiz.
  3. En Todo el sitio, haz clic en Borde del recuadro y elige un color.
  4. Haz clic en la flecha Colores de la parte superior para volver al panel Colores y, a continuación, haz clic en Guardar para guardar los cambios.

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 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 retoques disponibles en la página que estás visualizando. Haz clic en el retoque 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

Las opciones de color de fondo varían según la plantilla:

  • Todas las plantillas: Puedes seleccionar el color del área principal de contenido.
  • Algunas plantillas: Puedes seleccionar colores diferentes para el encabezado, el pie de página y el espacio alrededor de tu contenido.

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
  • 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: 74 de 270