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

Se preferir um tema em preto e branco ou combinações de cores ousadas, você pode usar Estilos do Site e estilos de seção para alterar as cores do texto do seu site, áreas de fundo e outros elementos.

Este guia fornece 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 em Estilos do Site 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 parte específica de texto, como uma 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. Ao editar uma página, clique no ícone do pincel no canto superior direito e depois em Cores.
  2. Clique em Editar paleta para escolher uma nova paleta de cores. Você pode escolher entre estes tipos de paletas de cores:
    • Predefinições - Escolha entre um conjunto de paletas predefinidas em cores selecionadas.
    • Da imagem – Carregue uma imagem para gerar uma paleta com base nas cores mais proeminentes da imagem.
    • De Cor – Escolha uma cor primária usando o seletor de cores e gere paletas para complementar essa cor.
  3. Para salvar suas alterações, mova o cursor do mouse sobre Concluído no canto superior esquerdo do editor de páginas e clique em Salvar.

colors_-_edit_palette.png

Lembre-se:

  • Todas as paletas sempre incluem preto e branco, que geralmente são usados para texto.
  • Quando você gera uma paleta a partir de uma imagem, as cores são retiradas das três cores mais dominantes da imagem.
  • É possível usar o Editor de paletas para personalizar cada cor em qualquer paleta.

Alterar as cores da seção

Sua paleta de cores gera diferentes temas de cores para as seções da página. Após definir as cores do site, é possível alterar o tema de cores de qualquer seção para ter uma aparência diferenciada. 

Para ver qual tema uma seção está utilizando:

  1. Ao editar uma página, clique no ícone do pincel e depois em Cores.
  2. Percorra a visualização da página e revise as etiquetas do tema da seção em cada seção.
Atenção: se você vir uma caixa em branco em uma seção em vez de uma etiqueta do tema, a cor do Título (Grande) provavelmente estará definida como igual à cor de Fundo da Seção. Para ver a etiqueta do tema, clique no tema que também aparece em branco no menu Cores e altere o Título (Grande) para uma nova cor. Consulte a próxima seção para obter etapas detalhadas. 

section_themes_on_preview.png

Para alterar o tema de cores de uma seção:

  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, clique em um tema para aplicá-lo a essa seção.
  5. Suas edições permanecerão em vigor enquanto você edita outro conteúdo da página. Para salvar suas alterações, mova o cursor do mouse sobre Concluído no canto superior esquerdo do editor de páginas e clique em Salvar.

section_theme_editor.png

O tipo de tema (1 ou2) controla qual cor se aplica ao texto principal de uma seção e qual se aplica a outros elementos:

  • Mais claro 1, Claro 1, Escuro 1 e Mais escuro 1 – Texto e títulos são preto ou branco e outras cores se aplicam ao fundo e aos elementos menores do site.
  • Mais claro 2, Claro 2, Escuro 2 e Mais escuro 2 – A cor no lado esquerdo da paleta se aplica a todos os textos e títulos e outras cores se aplicam ao fundo e aos elementos menores do site.
  • Brilhante – A cor no lado esquerdo da paleta se aplica ao texto (Brilhante 1) ou ao fundo (Brilhante 2) e outras cores se aplicam 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. Ao editar uma página, clique no ícone do pincel e depois em Cores.
  2. Clique no tema que deseja editar.
  3. Clique no ajuste a ser alterado e escolha uma nova cor. Você pode usar uma cor predefinida na aba Paleta ou clicar em Personalizar para usar o seletor de cores. Talvez seja necessário rolar para ver todos os ajustes.
  4. Use o controle deslizante de opacidade para alterar a transparência.
  5. 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.

Suas alterações permanecerão no lugar enquanto você edita outro conteúdo da página. Para salvar suas alterações, passe o cursor do mouse sobre Concluído no canto superior esquerdo do editor de páginas e clique em Salvar.

À medida que você muda as cores do tema, lembre-se destas dicas:

  • Se você não tiver certeza de qual tema precisa editar, procure a etiqueta do tema de cor na área da página que deseja alterar.
  • O menu Editar Tema mostra todos os ajustes de cor possíveis para o site, mesmo que a página que você está editando no momento não inclua esses itens. Por exemplo, você verá todas as opções de cores de blog mesmo que esteja editando uma Página de Layout.
  • Se uma seção tiver uma imagem de fundo, use o ajuste Sobreposição de plano de fundo para definir a opacidade da cor de sobreposição. Se a seção usar uma cor de fundo ou um vídeo, use Plano de fundo da seção para definir a cor de fundo.

Essas áreas do seu site têm regras de tema de seção ligeiramente diferentes:

  • Para encontrar o tema de cores da sua página de pesquisa integrada, feche a visualização da página e abra a página de pesquisa, em seguida, abra o painel Temas de seção e procure a etiqueta do tema.
  • Para encontrar o tema de cores da sua página 404, feche a visualização e navegue até uma página que não existe adicionando uma string de letras ao final do seu domínio, como /xyz. A partir daí, abra o painel Temas de Seção e procure a etiqueta do tema.
  • A barra de notificações do seu site sempre corresponde ao tema de cores do cabeçalho. Quando o cabeçalho é transparente, ele corresponde ao tema da seção a seguir.

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 sua etiqueta mostrando a cor atual desse elemento.

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

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 para cores de sobreposição, que são exibidas sobre imagens.

  • Na versão 7.1, só é possível alterar a transparência das cores da paleta.
  • Na versão 7.0, alguns ajustes de cor não incluem 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. Ao editar uma página, clique no ícone do pincel e depois em Cores.
  2. Clique em Temas de Seção e depois no tema de cores da seção que você deseja alterar.
  3. Em Sitewide, clique em Borda de entrada e escolha uma cor.
  4. Suas alterações permanecerão no lugar enquanto você edita outro conteúdo da página. Para salvar suas alterações, passe o cursor do mouse sobre Concluído no canto superior esquerdo do editor de páginas e clique em Salvar.

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 Inicial.
  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

Estas famílias de templates têm áreas de fundo personalizáveis:

Família de template Áreas de fundo
Adirondack
  • Site
  • Tela de trabalho
  • Barras de navegação
  • Cabeçalho
Avenue
  • Site
  • Tela de trabalho
Aviator
  • Site
  • Tela de trabalho
  • Cabeçalho/rodapé
Bedford
  • Site
  • Cabeçalho
  • Pré-rodapé
  • Rodapé
Brine
  • Site
  • Tela de trabalho
  • Borda
  • Cabeçalho superior
  • Rodapé
  • Barras móveis
Farro
  • Site
  • Borda
  • Cabeçalho
  • Rodapé
  • Barra móvel
Five
  • Site
  • Tela de trabalho
  • Borda da tela de trabalho
  • Cabeçalho
  • Navegação
Flatiron
  • Site
  • Cabeçalho/rodapé
Forte
  • Site
Galapagos
  • Site
  • Cabeçalho
Ishimoto
  • Site
  • Borda da página
Momentum
  • Site
  • Tela de trabalho
  • Navegação
Montauk
  • Site
  • Tela de trabalho
Native
  • Site
Pacific
  • Site
  • Cabeçalho
  • Seções alternadas do Índice
  • Pré-rodapé
  • Rodapé
Skye
  • Site
Supply
  • Site
  • Navegação do cabeçalho/barra lateral
Tremont
  • Site
  • Sobreposição de navegação
  • Índice
Wells
  • Site
Wexley
  • Site
  • Nav móvel
York
  • Site
  • Banner

Lembre-se:

  • As cores do plano de fundo não são transferidas quando você muda de template.
  • Alguns templates também suportam imagens de fundo.
  • Em alguns templates, um banner pode ser exibido atrás do cabeçalho.
  • 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: 108 de 372