Elige una paleta de colores para tu sitio y luego aplica colores específicos a diferentes secciones de página.
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
- Los cambios de color que realices en estilos del sitio se aplican a todo el sitio. Al cambiar un elemento de una página, como el texto de botón, se cambia en todas las áreas que utilicen ese tema (versión 7.1) o en todas las páginas (versión 7.0).
- En los bloques de texto de la versión 7.1, puedes cambiar el color de un fragmento de texto específico, como una sola letra o palabra en una oración. Para hacer esto en la versión 7.0, o en otras áreas de texto, 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 forma diferente. Consulta la siguiente sección para ver los pasos específicos.
- Para obtener consejos sobre cómo elegir los mejores colores para tu sitio, consulta Cómo elegir las fuentes y los colores adecuados.
- Para revisar las prácticas recomendadas de accesibilidad, visita Cómo crear contenidos accesibles para tu sitio.
Cambiar los colores de todo el sitio
Para cambiar todos los colores del sitio, elige una paleta de colores:
- 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.
- 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.
- Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.
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:
- Mientras edites una página, haz clic en el ícono del pincel y, a continuación, en Colores.
- 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.
Para cambiar el tema de color de una sección:
- Abre el panel Páginas.
- Selecciona la página que deseas editar y presiona Editar en la esquina superior izquierda.
- Haz clic en Editar sección o en el ícono de lápiz en la sección que quieres cambiar.
- En la pestaña Colores, haz clic en un tema para aplicarlo a esa sección.
- Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.
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.
Tipos de temas
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.
- 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.
- Páginas integradas: La página de error 404 predeterminada, la página de carrito de compras, la página de confirmación del pedido y la página de búsqueda integrada utilizan el tema cromático predeterminado de tu plantilla.
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:
- Mientras edites una página, haz clic en el ícono del pincel y, a continuación, en Colores.
- Haz clic en el tema que desees editar.
- 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.
- Utiliza el control deslizante de opacidad para cambiar la transparencia.
- 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. Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.
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.
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.
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.
Consejo: Si utilizas el control deslizante de opacidad para hacer que el color de fondo de una sección sea transparente, el color de fondo del tema de color predeterminado de la plantilla puede mostrarse a través de esta.
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:
- Mientras edites una página, haz clic en el ícono del pincel y, a continuación, en Colores.
- Haz clic en el tema de color de la sección que quieres cambiar.
- En Todo el sitio, haz clic en Borde del recuadro y elige un color.
- Tus cambios se mantienen mientras editas el contenido de otra página. Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.
Cambiar los colores de fondo del bloque
Los colores de fondo del bloque solo se admiten en los sitios de la versión 7.1.
Algunos bloques incluyen una función de color de fondo. Esta es una excelente manera de hacer que un bloque se destaque o de ayudar a que los bloques con solapamiento sean más visibles en el Editor dinámico. Agrega colores de fondo a los siguientes bloques activando la opción Fondo en la pestaña Diseño del bloque:
- Bloques de acordeón
- Bloques de formulario
- Bloques de newsletter
- Bloques de Cita
- Bloques de resumen
También puedes habilitar los colores de fondo en los bloques de texto haciendo clic en el icono de fondo de bloque en la barra de herramientas de texto.
Después de habilitar el fondo, haz clic en Color para seleccionar un color de la paleta de colores de tu sitio web o un color personalizado. Haz bloques con colores de fondo coincidentes o dale a cada bloque su propio color único.
Temas de colores predeterminados
Cada plantilla de la versión 7.1 tiene una combinación de colores predeterminada. Este tema se aplica automáticamente a las siguientes páginas y áreas integradas en tu sitio:
- Pantalla de acceso denegado
- Barra de anuncios
- Página de búsqueda integrada
- Página 404 predeterminada
- Encabezado dinámico sobre una imagen o video de fondo
- Página de confirmación del pedido
- Página de vista rápida del producto
- Secciones con una imagen de fondo o video
- Página del carrito de compras
No puedes asignar un tema diferente a estas áreas de tu sitio, pero puedes hacer cambios en el tema predeterminado para personalizar estas páginas. Para encontrar el tema predeterminado de la plantilla, abre la página 404 predeterminada:
- Cierra la vista previa del sitio.
- Navega a una página que no existe agregando una cadena de caracteres al final de tu dominio, como /xyz.
- Abre el panel Estilos del sitio.
- Haz clic en Colores y busca la etiqueta del tema.
- Haz cambios en los colores del tema, luego haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.
- Actualiza la página de error 404 para revisar tus cambios.
Espacio entre la sección y el pie de página
En páginas con una sola sección o páginas muy cortas, puede aparecer un espacio entre la última sección y el pie de página. El espacio hereda el color de fondo de la sección del tema predeterminado.
Cuando el espacio es de un color diferente, como cuando la sección y el pie de página usan temas de color diferentes a los predeterminados, es posible que se note más.
Para solucionarlo, establece el color de fondo de la sección de tu tema predeterminado para que coincida con el color de fondo de la sección de tu página o con el tema del pie de página.
Consejo: Si combinas el color de fondo de sección del tema predeterminado y el color de fondo de la página, esta se verá coherente a medida que se cargue. Los colores de fondo se cargan antes que las imágenes.
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.
Abre el panel Diseño y haz clic en Estilos del sitio para configurar manualmente los colores de tu sitio con ajustes de estilo.Los ajustes específicos dependen de la plantilla de tu sitio.Revisa las guías de tu plantilla para obtener ayuda más amplia sobre cómo cambiar los colores de tu sitio.
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.
Para modificar los colores de tu sitio:
- Abre el panel de Páginas y haz clic en la página que quieres cambiar.
- Cuando la vista previa de tu sitio muestre la página correcta, regresa al panel de Sitio web.
- Haz clic en Diseño, y, luego, en Estilos del sitio.
- 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.
- Utiliza el control deslizante de opacidad para cambiar la transparencia.
- 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.
- 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 |
|
| Avenue |
|
| Aviator |
|
| Bedford |
|
| Brine |
|
| Farro |
|
| Five |
|
| Flatiron |
|
| Forte |
|
| Galapagos |
|
| Ishimoto |
|
| Momentum |
|
| Montauk |
|
| Native |
|
| Pacific |
|
| Skye |
|
| Supply |
|
| Tremont |
|
| Wells |
|
| Wexley |
|
| York |
|
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.