Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o espanhol, outros guias estão disponíveis apenas em inglês.

Alterando as cores

Seja para temas preto e branco ou combinações ousadas de cores, use o painel Estilos do Site para ajustar as cores, textos, linhas e áreas de fundo do site.

Este guia oferece uma visão geral de como ajustar as cores dos elementos variados do seu site.

Obs.: páginas de Entrada têm suas próprias opções de estilo.
Estas instruções servem para a versão 7.0. Se o seu site estiver na versão 7.1, acesse Opções de estilo e design para a versão 7.1 para ver mais informações.

Assistir a um vídeo

Antes de começar

  • As alterações de cores são aplicadas em todo o site, portanto, alterar a cor em um elemento de uma página, como o corpo de texto, irá alterá-la em todas as páginas.
  • Para alterar a cor de uma seção específica de texto, como uma única palavra em uma frase, use o Bloco de Markdown.
  • Cada ajuste de cor deve ser ajustado individualmente.
  • As alterações de cores não são transferidas quando você troca de template. Elas reaparecem se você voltar ao template.
  • Não é possível ajustar as cores de uma página ou bloco individual pelo painel Estilos do Site. Se você tiver experiência em programação, faça a alteração em CSS. Não oferecemos suporte para alterações avançadas como essa.

Step 1 - Selecione uma página

Primeiro, navegue até uma página que você deseja alterar. Para isso, clique em Páginas no Menu Inicial. Clique em uma página cujas cores você quer ajustar.

Existem dois motivos para abrir uma página primeiro:

  1. Alguns ajustes são exibidos somente quando você estiver nas páginas afetadas por eles. Por exemplo, sua Página do Blog pode ter ajustes específicos para o título que só aparecem no painel Estilos do Site quando estiver visualizando uma Página do Blog.
  2. Mesmo que suas alterações sejam aplicadas em todo o site, você pode visualizar as alterações de estilo na página selecionada conforme as faz.

Após selecionar a página correta no painel Páginas, retorne ao Menu Inicial. Clique em Design e depois em Estilos do Site.

Step 2 - Encontre um ajuste de cor

Os ajustes de estilo específicos dependem do seu template. Role para baixo no painel Estilos do Site para ver todos os ajustes disponíveis na página que você está visualizando.

Todo ajuste de cor tem um círculo ao lado de sua etiqueta. Esse círculo mostra a cor atual do elemento.

Observação: o círculo não será exibido se a cor for transparente ou se for o mesmo cinza do fundo do painel Estilos do Site.

 

Para achar os ajustes específicos de um elemento na página, clique no elemento durante a prévia. O painel Estilos do Site mostra somente os ajustes de estilo desse elemento e oculta o resto. Esse atalho está disponível na maioria dos templates e na maioria das áreas do seu site. Clique em Mostrar tudo para mostrar novamente todos os ajustes na página.

Encontre o ajuste e clique nele para abrir o seletor de cores.

Step 3 - Escolha uma cor

Use o seletor de cores que se abre para achar a cor desejada. Clique no controle deslizante para escolher a cor; para ajustar a tonalidade (claro/escuro), clique no quadrado do meio.

color-sliders.png

Se já souber o valor da cor desejada, informe no campo de valor. O campo de valor aceita qualquer um destes formatos:

  • HEX - Exemplo: #FFFFFF
  • RGB ou RGBa - Exemplo: rgba(255, 0, 149, 1)
  • HSL/HSLA - Exemplo: hsla(325, 100%, 50%, 1)
  • HTML (deve estar em letra minúscula) - Exemplo: branco

Para ver ajuda sobre como encontrar um valor específico de cor, visite sites externos como color-hex.com ou imagecolorpicker.com.

Dica: o campo do valor é automaticamente preenchido quando você usa o controle deslizante de cores para achar uma cor. É possível copiar e colar esse código para adicionar a mesma cor a outros ajustes no painel Estilos do Site.

value-field.png

Step 4 - Altere a transparência

Para ajustar a transparência de uma cor, use o controle deslizante de opacidade e arraste o círculo abaixo do seletor de cores. O lado esquerdo é completamente transparente, enquanto o lado direito é completamente sólido.

change-the-opacity.png

Obs.: alguns ajustes de cor não incluem um controle deslizante de opacidade.

O controle deslizante de opacidade é bastante útil para cores de sobreposição, que são exibidas sobre imagens.

overlay-opacity.png

Se você tem uma cor ou imagem que se sobrepõe a outra, deixar a camada superior transparente mantém a camada inferior visível.

opacity-overlap.png

Step 5 - Finalize e salve

Clique em qualquer lugar fora da janela de cores para fechar o seletor de cores.
 
Para desfazer qualquer mudança antes de salvar, clique no ícone de desfazer na parte superior do painel ou clique no ponto ao lado de um ajuste específico. Para saber mais, acesse Fazer mudanças de estilo.

undo_and_dot_icons.jpg

Ao terminar as alterações, clique em Salvar.

click_save.jpg

Esse artigo foi útil?
Usuários que acharam isso útil: 60 de 175