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

Alterando as cores

Quer prefira um tema em preto e branco ou combinações de cores ousadas, você pode usar o painel Design e os estilos de seção para alterar as cores do texto, linhas e áreas de plano de fundo do seu site. 

Este guia dá uma visão geral de como alterar as cores nos diversos elementos do site. 

Assista a este vídeo

Antes de começar

  • As alterações de cor feitas no painel Design aplicam-se a todo o site. Alterações em um elemento de uma página, como o Texto do Botão, afetam todas as áreas que usam esse tema (versão 7.1) ou todas as páginas (versão 7.0).
  • Para alterar a cor de uma seção específica de texto, como uma única palavra em uma frase, use o Bloco de Markdown.
  • Se você tiver experiência em programação, poderá tentar fazer alterações de cor direcionadas com CSS. Lembre-se de que o código personalizado está fora do escopo do nosso suporte.
  • Se o seu site estiver na versão 7.0, o processo de alteração de cores funcionará de outra maneira. Consulte a seção abaixo para ver as etapas específicas. 

Alterar cores em todo o site

Para alterar todas as cores do seu site, escolha uma paleta de cores:

  1. No Menu Inicial, clique em Design e depois em Cores.
  2. Clique em Editar ao lado de Paleta para escolher uma paleta de cores. 
  3. Clique em Salvar na parte superior do painel.

color_palette_-_click_edit.png

Escolha entre alguns tipos de paletas de cores:

  • Paletas de designer - Escolha a partir de um conjunto de paletas predefinidas em cores complementares.
  • Da imagem... - Carregue uma imagem para criar uma paleta com base nas cores mais proeminentes da imagem. 
  • Da cor... - Escolha uma cor primária para a paleta com o seletor de cores.
  • Cores personalizadas - escolha uma cor para cada parte da paleta com o seletor de cores.  

A paleta de cores cria os diversos temas de cores para as seções da página. Para ver qual tema uma seção está utilizando: 

  1. No Menu Inicial, clique em Design e depois em Cores.
  2. Clique em Temas de Seção.
  3. Percorra a visualização do site e revise os rótulos do tema da seção em cada seção. 

Alterar as cores da seção

Depois de definir cores em todo o site, você pode alterar o tema de cor de qualquer seção, para dar uma aparência distinta: 

  1. No Menu Inicial, clique em Páginas
  2. Selecione a página que você quer editar e clique em Editar no canto superior esquerdo.
  3. Clique no ícone de lápis da seção.
  4. Na guia Cores , selecione um tema. 
  5. Passe o mouse sobre Concluído no editor de página e clique em Salvar .

section_editor.png

Escolha um tema:

  • Mínimo - Texto e cabeçalhos são pretos ou brancos e outras cores se aplicam ao fundo e aos elementos menores do site.
  • Negrito - A cor no lado esquerdo da paleta se aplica a todos os textos e cabeçalhos e outras cores se aplicam ao fundo e aos elementos menores do site.
  • Acento - a cor no lado esquerdo da paleta se refere ao fundo (Escuro ) ou ao texto (Claro ), e as outras cores se referem ao fundo e aos elementos menores do site. 

Em alguns casos, as cores do texto e dos botões assumirão como padrão o branco ou o preto para proporcionar maior contraste com a cor do plano de fundo. 

Personalizar as cores do tema

Você pode personalizar ainda mais qualquer tema, definindo cores específicas para diversos elementos do site. Quaisquer alterações feitas nas cores de um tema serão aplicadas a todas as áreas do seu site usando esse tema. 

Para editar um tema: 

  1. No Menu Inicial, clique em Design e depois em Cores.
  2. Clique em Temas da Seção
  3. Clique no ícone do lápis ao lado do tema que deseja editar. 
  4. Clique no ajuste que deseja alterar e escolha uma nova cor. Você pode usar uma cor predefinida na guia Paleta ou clicar em Personalizar para usar o seletor de cores. Talvez seja necessário rolar para ver todos os ajustes. 
  5. Use o controle deslizante de opacidade para alterar a transparência
  6. Para desfazer uma mudança antes de salvar, clique no ícone de desfazer no topo do painel ou clique no ponto ao lado de um ajuste específico.
  7. Clique em Salvar.

O seletor de cores

Use o seletor de cores para escolher uma cor personalizada para um elemento do seu site. Cada ajuste de cor tem um círculo ao lado de seu rótulo mostrando a cor atual desse elemento. 

Para escolher uma nova cor, clique no círculo de cores ao lado do ajuste que deseja alterar. Clique no controle deslizante inferior para selecionar uma cor e, em seguida, escolha uma sombra clicando no quadrado acima.

pick_a_color.png

Como alternativa, se souber o valor da cor desejada, clique no campo de valor para editá-la. 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 ser em 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 de valor é preenchido automaticamente quando você usa o controle deslizante de cores para localizar uma cor. Você pode copiar e colar esse código para adicionar a mesma cor a outros ajustes no tema.

custom_color_value.png

Transparência

Para mudar a transparência de uma cor, use o controle deslizante de opacidade e arraste o círculo abaixo do seletor de cores. O controle deslizante de opacidade é bastante útil nas cores de sobreposição, que aparecem sobre as imagens. 

  • Na versão 7.1, o lado esquerdo é um tom muito claro, enquanto o lado direito adiciona uma tonalidade mais escura. Só é possível alterar a transparência das cores da paleta. 
  • Na versão 7.0, o lado esquerdo é completamente transparente, enquanto o lado direito é completamente sólido. Alguns ajustes de cor não têm um controle deslizante de opacidade. 

adjust_the_opacity.png

Alterar a cor da borda de entrada

Quando uma seção tem uma imagem de fundo, você pode exibir a imagem em Sangria total ou Inserção

  • A sangria total estende a imagem de uma borda da janela do navegador para a outra, abrangendo toda a largura do site.
  • A inserção endenta ligeiramente a imagem e cria uma borda ao redor da imagem.

Quando a imagem é definida como Inserção, altere a cor da borda:

  1. No Menu Inicial, clique em Design e depois em Cores.
  2. Passe o mouse sobre o tema e clique no ícone do lápis.
  3. Em Sitewide, clique em Borda de entradae escolha uma cor.
  4. Clique na seta Cores no topo para retornar ao painel Cores e clique em Salvar para salvar as alterações.

Alterando cores na versão 7.0

Se o seu site estiver na versão 7.0, o processo para alterar as cores do site funcionarão de forma diferente. 

Dica: As páginas de rosto têm suas próprias opções de estilo.

No painel Design , use os ajustes em Estilos de site para definir manualmente as cores do site. Os ajustes de estilo específicos dependem do modelo do site. Consulte os guias do seu modelo para obter ajuda mais detalhada sobre a alteração das cores do seu site.

Para alterar as cores em um site da versão 7.0, navegue primeiro até uma página onde você deseja ver as alterações. Alguns ajustes somente serão exibidos se você estiver na página que eles afetam. Então, navegar até a página que você está editando o ajudará a ver os ajustes corretos. Você poderá também visualizar suas edições de estilo na página selecionada à medida que as fizer.

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.

site_styles_-_show_all.png

Para alterar as cores do site:

  1. No Menu Home, clique em Páginase, em seguida, clique na página que quiser alterar.
  2. Se a prévia do site exibir a página correta, retorne aoMenu Home
  3. Clique em Design e depois em Estilos do Site.
  4. Role para baixo para ver todos os ajustes disponíveis na página que você estiver vendo. Clique no ajuste que quiser alterar e escolha outra cor
  5. Use o controle deslizante de opacidade para alterar a transparência
  6. Clique em qualquer lugar fora da janela de cores para fechar o seletor de cores.
  7. Para desfazer uma mudança antes de salvar, clique no ícone de desfazer no topo do painel ou clique no ponto ao lado de um ajuste específico.
  8. Clique em Salvar na parte superior do painel.

Alterar cores de fundo

As opções de cores de fundo variam de acordo com o template:

  • Todos os templates - você pode definir a cor da área de conteúdo principal.
  • Alguns templates - você pode definir diferentes cores para o cabeçalho, rodapé e espaço ao redor do conteúdo.

Lembre-se:

  • As cores do plano de fundo não são transferidas quando você muda de template.
  • Alguns modelos também suportam imagens de fundo
  • Quando você está logado, o plano de fundo mostra uma cor branca ao carregar uma página, independentemente da cor selecionada nos Estilos do Site. Esse fundo não fica visível para os visitantes.

Para obter mais ajuda, acesse o guia do seu modelo.

Assista a este vídeo

Este vídeo é sobre a versão 7.0.

Este artigo foi útil?
Utilizadores que acharam útil: 73 de 245