Editor do Wix Studio: trabalhar com cores do site
4 min de leitura
Neste artigo
- Sobre as cores do site
- Editar as cores do site
- Gerenciar as cores do site
- Aplicar cores do site a elementos
As cores do site compõem o tema geral de cores usado em todo o site do seu cliente. Este tema é dividido em intervalos de cores que são aplicadas a diferentes categorias (por exemplo: background e texto) e contêm tons específicos.
As cores únicas e os intervalos de cores são personalizáveis, para que você possa personalizar e ajustar partes específicas do site conforme necessário.
Como faço para encontrar as cores do site?
Neste artigo, confira:
Sobre as cores do site
Essas são as cores usadas em todo o site em que você está trabalhando. Elas geralmente estão conectadas a componentes. Por exemplo, uma cor pode estar conectada aos backgrounds das seções, outra ao texto, etc.
O número de cores do site com as quais você começa depende do template escolhido ou se decide criar do zero. No entanto, você pode adicionar, gerenciar e substituir as cores do site para ter a experiência de design desejada.
Editar as cores do site
Personalize as cores do site no painel Estilos do site para que elas combinem com o design que você precisa e reforce a marca dos seus clientes.
Importante:
Alterar uma cor afeta instantaneamente os elementos com a cor que você está atualizando. Por exemplo, quaisquer elementos temáticos que você adicionou anteriormente ou elementos em que você usou essa cor.
Para editar as cores do site:
- Clique em Estilos
no lado esquerdo do editor.
- Selecione a aba Cores.
- Clique na cor que você deseja ajustar.
- Escolha como selecionar a cor do centro no intervalo entre as seguintes opções:
- Selecione uma nova cor no seletor usando o cursor.
- Insira as informações HEX, RGB ou HSB nos campos relevantes.
- Clique no Conta-gotas
para selecionar uma nova cor em qualquer parte da tela.
- Clique em OK.

Gerenciar as cores do site
Gerencie as cores do site para tornar o processo de design o mais simples possível. Você pode renomear as cores para torná-las mais fáceis de encontrar ou substituir as cores para fazer alterações rápidas no site.
Para gerenciar as cores do site:
- Clique em Estilos
no lado esquerdo do editor.
- Selecione a aba Cores.
- Passe o mouse sobre a cor relevante e clique no ícone Mais ações
.
- Escolha o que você quer fazer:
- Alterar o nome da cor:
- Clique em Renomear.
- Insira o novo nome da cor no campo.
- Excluir/substituir:
- Clique em Excluir.
- Selecione a cor substituta no seletor.
- Clique em OK.
- Alterar o nome da cor:

Não consegue excluir/substituir uma cor?
- Alguns tons são usados como a cor padrão para aplicativos e elementos do Wix no site e, portanto, a opção Excluir fica acinzentada. No entanto, você pode clicar no tom no painel para substituí-lo.
- Tons que não foram definidos como uma cor padrão podem ainda estar em uso em todo o site e, portanto, será solicitado que você substitua a cor.
Aplicar cores do site a elementos
À medida que as cores são atribuídas a categorias, elas são aplicadas automaticamente a alguns elementos de tema no painel Elementos (por exemplo: elementos de texto estilizados). Você também pode aplicar cores do site a elementos na tela usando o Inspetor.
Para aplicar cores do site a elementos:
- Selecione o elemento relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
- Clique na caixa de cores em Design para abrir o seletor.

- Selecione um tom em Cores do tema para aplicá-lo.

É importante saber:
Se o elemento tiver mais de uma cor, você pode personalizar cada tom ao clicar na caixa de cores.