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 prefere um tema em preto e branco ou combinações de cores ousadas, você pode usar estilos de site e estilos de seção para alterar as cores 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 nos estilos do site se aplicam em todo o site. Alterar um elemento de uma página, como o texto do botão, o altera em todas as áreas usando esse tema (versão 7.1) ou em todas as páginas (versão 7.0).
  • Nos blocos de texto da versão 7.1, você pode alterar a cor de um texto específico, como uma única letra ou palavra em uma frase. Para fazer isso na versão 7.0 ou em outras áreas de texto, use um 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.
  • Na versão 7.0, o processo de alteração de cores funciona de outra maneira. A seção abaixo mostra as etapas específicas.
  • A sessão Escolhendo as fontes e cores certas dá dicas para escolher as melhores cores para o seu site,.

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 um destes tipos:
    • 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 que mais destacam na imagem.
    • Da cor - use o seletor de cores para escolher uma cor primária 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 na paleta.

Alterar as cores da seção

A 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 uma seção para dar um visual distinto.

Para confirmar qual tema uma seção está usando:

  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 aparecer, em uma seção, uma caixa vazia em vez da etiqueta do tema, talvez a cor do Título (Grande) esteja como igual à cor do Fundo da seção. Para ver a etiqueta do tema, clique no tema que também aparece vazio no menu "Cores" e altere a cor do Título (Grande). A próxima seção dá os detalhes.

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 alterações permanecerão no lugar enquanto você edita outro conteúdo da página. Para salvar as alterações, passe o cursor do mouse sobre Concluído no canto superior esquerdo do editor de páginas e clique em Salvar.
Observação: alterar o tema de cores de uma seção redefine todas as cores dessa seção, incluindo quaisquer alterações de cor de texto feitas na barra de ferramentas do bloco de texto.

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 afeta todos os textos e títulos; e outras cores aferam o fundo e os 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 retornarão ao branco ou ao preto para dar mais contraste com a cor do fundo.

Temas para outras áreas do site

Siga as etapas abaixo para encontrar os temas de cores para essas áreas do site:

  • Barra de notificações - a barra de notificações sempre tem o mesmo tema de cores do cabeçalho.
  • Página de pesquisa integrada - Feche a visualização da página e abra sua página de pesquisa adicionando /search ao final do seu domínio, depois abra o painel Cores e procure o rótulo do tema.
  • Página 404 padrão - Feche a visualização e navegue até uma página que não existe adicionando uma sequência de letras ao final do seu domínio, como /xyz. A partir daí, abra o painel Cores e procure o rótulo do tema.
  • Botão do menu de sobreposição móvel - As cores de sobreposição móvel são definidas no cabeçalho.
  • Plano de fundo da seção - Abra o painel Cores e procure o rótulo do tema e clique nesse tema para abrir todas as cores. Procure a cor ao lado do plano de fundo da Seção.
  • Carrinho de compras - Abra a página do carrinho de compras adicionando /cart ao final do seu domínio, abra o painel Cores e procure o rótulo do tema.

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 aferam todas as áreas do que usam esse tema no site.

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.

As alterações permanecerão no lugar enquanto você edita outro conteúdo da página. Para salvar as 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 cores possíveis para o seu site, mesmo que a página que você está editando no momento não inclua esses itens. Por exemplo, todas as opções de cores do blog aparecerão mesmo se você estiver 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.

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

Se você souber o valor da cor desejada, também poderá clicar no campo de valor para editá-lo. O campo value aceita qualquer um desses 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 mostrar a imagem sem margens ou com inserção.

  • Sem margens, a imagem cobre o browser de uma borda 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 no tema de cores da seção que você deseja alterar.
  3. Em Geral do site, clique em Borda da inserção e escolha uma cor.
  4. As alterações permanecerão no lugar enquanto você edita outro conteúdo da página. Para salvar as 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, primeiro navegue até uma página na qual você deseja fazer alterações. Alguns ajustes só são exibidos quando você está na página que eles afetam; portanto, navegar até a página que você está editando ajudará os ajustes corretos a aparecer. Você também pode visualizar suas edições de estilo na página selecionada enquanto as faz.

Para achar os ajustes específicos de um elemento na página, clique no elemento durante a prévia. Os estilos do site mostram somente os ajustes de estilo desse elemento e ocultam 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 revisar todos os ajustes disponíveis na página que você está visualizando. Clique no ajuste que você deseja alterar e escolha uma nova 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 exibe uma cor branca ao carregar uma página, independentemente da cor selecionada nos estilos do site. Isso não é 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: 111 de 389