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

À 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 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 ou vídeo, use o ajuste Sobreposição de Fundo para definir a opacidade da cor de sobreposição. Se a seção usar uma cor de fundo em vez de uma imagem ou vídeo, use Fundo da seção para definir a cor.

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 ao adicionar uma string de letras ao final do seu domínio, como /xyz. A partir daí, abra o menu 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 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 para cores de sobreposição, que são exibidas sobre 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 entrada e 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 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 modelos 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 um vídeo (versão 7.0)

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

Este artigo foi útil?
Utilizadores que acharam útil: 79 de 291