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

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.

This guide provides an overview of how to adjust colors for the different elements on your site.

Note: Cover Pages have their own style options.

Mira el video

Antes de comenzar

  • Color changes apply site-wide, so changing the color for one element of a page, such as the Body Text, will change it on all pages.
  • To change the color of a specific section of text, like one individual word in a sentence, use a Markdown Block.
  • Each color tweak must be adjusted individually.
  • Color changes don’t transfer when you switch templates. They reappear if you switch back to the template.
  • 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.

Step 1 - Select a page

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.

There are two reasons for opening a page first:

  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. Even if your changes will apply site-wide, you can preview your style edits on the selected page as you make them.

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.

Step 2 - Find a color tweak

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.

Every color tweak has a circle next to its label. This circle shows the current color for that element.

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.

Step 3 - Pick a 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 - Example: #FFFFFF
  • RGB or RGBa - Example: rgba(255, 0, 149, 1)
  • HSL/HSLA - Example: hsla(325, 100%, 50%, 1)
  • HTML (must be lower case) - Example: white

For help finding a specific color value, you can visit external sites like color-hex.com or 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

Step 4 - Change the transparency

To adjust a color’s transparency, use the opacity slider by dragging the circle below the color picker. The left side is completely transparent, while the right side is completely solid.

change-the-opacity.png

Note: Some color tweaks don't include an opacity slider.

The opacity slider is particularly useful for overlay colors, which display over images.

overlay-opacity.png

If you have one color or image that overlays another, making the top layer transparent keeps the bottom layer visible.

opacity-overlap.png

Step 5 - Finish and save

Click anywhere outside the color window to close the color picker.
 
To undo any changes before saving, click the undo icon at the top of the panel, or click the dot next to a specific tweak. See Making style changes for more information.  

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: 51 de 144