Alterar as cores do site usando estilos

As cores que você escolhe representam uma parte importante do design do seu site. Neste guia, você vai ver como gerenciar as paletas de cores do seu site.

Neste guia

1. Visão geral em vídeo
2. Encontrar as configurações de cor
3. Definir uma paleta de cores
   1. Cores do tema
   2. Cores personalizadas
4. Personalizar as cores dos elementos

Visão geral em vídeo

Encontrar as configurações de cor

Se o seu site usa um tema compatível com o editor de sites, você pode alterar as cores do site usando os estilos. Uma maneira rápida de descobrir se seu site usa o editor de sites é conferir a opção Aparência em seu painel. Se aparecer Editor, siga estas etapas para alterar as cores do seu site.

1. No painel, acesse Aparência → Editor.
2. Clique em Estilos, à esquerda, ou selecione o ícone Estilos, como mostrado aqui. O ícone parece um círculo em preto e branco.
3. Selecione Cores.
4. Selecione Paleta para escolher as cores padrão do seu site ou escolha um dos seguintes elementos no seu site:
   • Texto
   • Plano de fundo
   • Link
   • Legendas
   • Botão
   • Título

Ao longo deste guia, você encontra explicações detalhadas sobre cada um desses elementos.

Definir uma paleta de cores

A paleta de cores estabelece as cores padrão usadas no seu site. Embora você possa controlar as cores de qualquer elemento específico, definir uma paleta garante a consistência do esquema de cores em todo o site.

Aqui, você pode editar as cores do tema, padrão e personalizadas:

• Tema: cores definidas pelos designers durante a criação do tema e usadas em todo o design.
• Padrão: as cores mostradas nas configurações de cor do bloco ao editar suas páginas e posts.
• Personalizadas: defina e nomeie cores adicionais para usar na paleta de cores.

Cores do tema

Para atualizar as cores do tema, siga as instruções abaixo:

1. Clique em qualquer lugar na caixa abaixo de Paleta.

2. Clique nos três pontos ao lado de Tema e selecione Mostrar detalhes para expandir a lista de áreas de cores na paleta.
3. Cada tema define as próprias áreas de cores. Em nosso exemplo, podemos escolher Principal, Secundária, Primeiro plano, Plano de fundo ou Terciária para editar a cor:

Etapas para atualizar as cores do tema e padrão na seção Estilos do editor de sites.

4. Use o seletor de cores que aparece para selecionar a cor desejada.
5. Clique em Concluído para definir a cor escolhida.
6. Clique em Salvar no canto superior direito para salvar suas alterações.

Cores personalizadas

Você também pode adicionar várias cores personalizadas à paleta do site. Elas vão ficar salvas e disponíveis para você escolher nas configurações de cores dos seus blocos.

Para adicionar cores personalizadas, siga estas etapas adicionais:

1. Em Personalizadas, clique no botão +.
2. Escolha sua cor no seletor de cores ou insira um valor Hex, RGB ou HSL.
3. Clique no nome da cor (o padrão é “Cor 1”) e digite um nome para ela.
4. Clique em Concluído.

Essas etapas são demonstradas no vídeo a seguir:

Personalizar as cores dos elementos

Nas configurações de cores, abaixo de Paleta, você vai ver a opção para editar a cor de vários elementos do site. Esses elementos são:

• Texto: escolha uma cor a ser usada para o texto-base regular em todo o site, sem incluir links, legendas, textos de botão ou títulos.
• Plano de fundo: escolha uma cor sólida ou gradiente para o plano de fundo do seu site. Saiba mais em nosso guia para personalizar o plano de fundo do seu site.
• Link: escolha uma cor para todos os links no seu site. Aqui, você pode escolher a cor padrão que aparece para todos os links, bem como a cor da dica, que é exibida quando alguém posiciona o cursor sobre um link:

• Legendas: escolha a cor do texto usado nas legendas do bloco de imagem.
• Botões: defina a cor usada nos blocos de botões. Você pode escolher a cor do texto e definir uma cor sólida ou gradiente para o fundo dos botões.
  • O controle da cor da dica dos botões não está disponível no momento. É possível usar código CSS para aplicar uma cor de dica sobre um botão.
• Cabeçalhos: defina uma cor para os blocos de título no site. Você pode escolher a cor do texto e definir uma cor sólida ou gradiente para o fundo dos títulos.
  • Para escolher uma cor diferente para cada um dos níveis de título (H1 a H6), clique nos três pontos ao lado de Cor para expandir as opções e clique no nível de título desejado. Uma marca de verificação vai ser exibida ao lado do nível de título. Feche as opções para acessar as configurações de cores desse nível.

Se quiser substituir a cor somente de um texto específico (em vez de todos os elementos), defina uma cor diferente nas configurações individuais de cor do bloco no post ou página específica.