Escolha um esquema de cores para o site; depois, aplique cores específicas em diferentes seções na página.
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,.
- Confira as recomendações de acessibilidade em "Criação de conteúdo acessível para o site".
Alterar cores em todo o site
Para alterar todas as cores do seu site, escolha uma paleta de cores:
- Ao editar uma página, clique no ícone do pincel no canto superior direito e depois em Cores.
- 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.
- Clique em Salvar para salvar as alterações e continuar editando; ou em Sair e depois Salvar para fechar o editor.
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:
- Ao editar uma página, clique no ícone do pincel e depois em Cores.
- 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.
Para alterar o tema de cores de uma seção:
- Abra o painel "Páginas".
- Selecione a página que você quer editar e clique em Editar no canto superior esquerdo.
- Clique em Editar seção ou no ícone de lápis na seção a ser alterada.
- Na guia Cores, clique em um tema para aplicá-lo a essa seção.
- Clique em Salvar para salvar as alterações e continuar editando; ou em Sair e depois Salvar para fechar o editor.
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.
Tipos de temas
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.
- 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.
- Páginas incorporadas - a página 404 padrão, a página do carrinho de compras, a página de confirmação de pedido e a página de busca integrada usam o tema de cores padrão do template.
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:
- Ao editar uma página, clique no ícone do pincel e depois em Cores.
- Clique no tema que deseja editar.
- 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.
- Use o controle deslizante de opacidade para alterar a transparência.
- 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 permanecem enquanto você edita outro conteúdo da página. Clique em Salvar para salvar as alterações e continuar editando; ou em Sair e depois Salvar para fechar o editor.
À 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.
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.
<blockquote><strong>Dica</strong>: o texto vai aqui</blockquote>
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.
Dica: se você usar o controle deslizante de opacidade para tornar a cor de fundo de uma seção transparente, a cor de fundo do tema de cores padrão do seu template poderá aparecer.
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:
- Ao editar uma página, clique no ícone do pincel e depois em Cores.
- Clique no tema de cores da seção que você deseja alterar.
- Em Geral do site, clique em Borda da inserção e escolha uma cor.
- As alterações permanecem enquanto você edita outro conteúdo da página. Clique em Salvar para salvar as alterações e continuar editando; ou em Sair e depois Salvar para fechar o editor.
Altere cores de fundo do bloco
As cores de fundo dos blocos só aparecem em sites da versão 7.1.
Alguns blocos incluem um recurso de cor de fundo, perfeito para destacar um bloco ou deixar os blocos sobrepostos mais visíveis no Editor Intuitivo. Para adicionar cores de fundo aos seguintes blocos, ative a opção Fundo na aba Design do bloco:
- Blocos em acordeão
- Blocos de Formulários
- Blocos de Newsletter
- Blocos de Citações
- Blocos de Sumário
Você também pode ativar cores no fundo do bloco de texto; para isso, clique no ícone do bloco de fundo na barra de ferramentas de texto.
Ativado o fundo, clique em Cor para selecionar uma cor da paleta de cores do seu site ou uma cor personalizada. Crie blocos com cores de fundo correspondentes; ou dê a cada bloco uma cor exclusiva.
Temas de cores padrão
Na versão 7.1, cada template vem com um tema padrão de cores. Esse tema é aplicado automaticamente às seguintes páginas e áreas integradas do site:
- Tela de acesso negado
- Barra de Notificações
- Página de pesquisa integrada
- Página 404 padrão
- Cabeçalho dinâmico sobre uma imagem ou vídeo de fundo
- Página de confirmação do pedido
- Página de visualização rápida do produto
- Seções com uma imagem ou vídeo de fundo
- Página do carrinho de compras
Você não pode usar outro tema nessas áreas do site, mas pode alterar o tema padrão para personalizar as páginas. Para encontrar o tema padrão do seu template:
- Adicione uma seção vazia a uma página.
- Abra o painel "Estilos do site".
- Clique em Cores e procure a etiqueta do tema. Novas seções vêm com o tema padrão de cores.
Dica: Outra forma de determinar o tema padrão das cores é abrir uma das páginas do sistema, pressionar / e procurar "Estilos de Site. Você pode acessar o painel "Cores" e conferir o indicador do tema ali.
Espaço entre a seção da página e o rodapé
Em páginas com apenas uma seção ou em páginas muito curtas, uma lacuna pode aparecer entre a última seção da página e o rodapé da página. A lacuna herda a cor de fundo da seção do seu tema padrão.
Quando a lacuna é de uma cor diferente, como quando a seção e o rodapé usam temas de cores diferentes do padrão, pode ser mais perceptível.
Para corrigir, deixe a cor do fundo da seção do seu tema padrão igual à cor do fundo da seção da página ou do tema do rodapé.
Dica: se você combinar a cor do fundo da seção do tema padrão com a cor do fundo da página, a página manterá o visual à medida que for carregada. As cores do fundo carregam antes das imagens.
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.
Abra o painel Design e clique em Estilos do site para definir manualmente as cores do seu site com ajustes no estilo. Os ajustes específicos dependem do template do site. Revise os guias de template para obter ajuda mais detalhada sobre como alterar as 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.
Para alterar as cores do site:
- Abra o painel "Páginas" e clique na página a ser alterada.
- Quando a prévia do site mostrar a página correta, retorne ao painel Site.
- Clique em Design e depois em Estilos do Site.
- 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.
- Use o controle deslizante de opacidade para alterar a transparência.
- Clique em qualquer lugar fora da janela de cores para fechar o seletor de cores.
- 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.
- 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 |
|
| Avenue |
|
| Aviator |
|
| Bedford |
|
| Brine |
|
| Farro |
|
| Five |
|
| Flatiron |
|
| Forte |
|
| Galapagos |
|
| Ishimoto |
|
| Momentum |
|
| Montauk |
|
| Native |
|
| Pacific |
|
| Skye |
|
| Supply |
|
| Tremont |
|
| Wells |
|
| Wexley |
|
| York |
|
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.