Editor Wix: usar e personalizar o tema de cor
5 min de leitura
Criar um tema de cor é uma etapa importante no processo de design do seu site. Quando usados de forma consistente, os temas de cor definem criam uma imagem para seus visitantes e apresenta sua marca para eles.
Seu tema de cores é usado automaticamente em todo o seu site e nos elementos "temáticos" no painel Adicionar. Você também pode aplicar as cores do seu tema a qualquer elemento do seu site.
Neste artigo, confira:
Como as cores do tema funcionam no seu site
As cores do tema que você escolher são exibidas no seletor de cores, onde você pode alterar a cor dos elementos individualmente. Além de aparecerem no seletor, as cores também são delegadas e aplicadas automaticamente a determinados elementos em seu site.
Cores de base
As cores de base são usadas no background e no texto em todo o seu site. Se você adicionou apps do Wix (por exemplo: Wix Stores, Wix Blog, etc) ao seu site, essas páginas usam a mesma cor no background e no texto.
Na maioria dos casos, a cor mais clara (1) é usada para o background e a mais escura (2) é usada para o texto. Um gradiente é criado automaticamente, para que você possa ajustar os tons conforme necessário.
Recomendamos que você tenha um bom contraste entre essas cores para que as informações do seu site sejam fáceis de ler.
![Uma captura de tela mostrando cores de base em um painel de design do site.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/07/04/af43205c-a099-474e-84a2-c40ab2a77cd8/d1b482ef-79e9-4430-8376-d7af12a349e0.jpg)
Cores acentuadas
Incentive os visitantes a interagir com seu site ao selecionar cores acentuadas atraentes. Essas cores são usadas para elementos secundários e decorativos como links, botões e elementos de menu. Elas também aparecem em elementos temáticos como botões e caixas, assim como páginas relacionadas a apps do Wix (por exemplo: Wix Stores, Wix Blog, etc.)
![Uma captura de tela cortada mostrando cores acentuadas no painel de design do site.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/07/04/4c14b80e-0799-4889-aff8-2133fd16bfbf/be271f5d-85bc-4037-a685-f0568fe9698c.jpg)
Escolher um tema de cor
Há uma variedade de predefinições de temas disponíveis para você aplicar ao seu site, que incluem texto e cores. Nossos temas foram criados cuidadosamente com cores adicionais para cobrir uma ampla variedade de necessidades de estilo e design.
Para escolher e personalizar um tema de cores:
- Clique em Design do site
no lado esquerdo do Editor.
- Clique em Alterar tema em Tema do site.
- Navegue pelas predefinições e clique para selecionar uma nova.
![O painel de design do site no Editor. A aba Tema está aberta e um tema está sendo selecionado.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/07/04/417f619b-3683-408a-a454-da3ef41866e8/0b3d4db6-907a-4c30-889a-b558ebe65917.jpg)
Personalizar o tema de cores
Você pode personalizar os temas de cor do site para combinar com a estética da sua marca. Escolha novas cores e ajuste o tom das cores de base para obter o visual que você deseja.
Para personalizar seu tema de cor:
- Clique em Design do site
no lado esquerdo do Editor.
- Clique em Tema de cor em Personalize o design do seu site.
- Escolha como você deseja alterar o tema:
- Alterar as cores do tema:
- Clique na cor que deseja editar no painel.
- Selecione uma nova cor usando o cursor para encontrar e selecionar uma nova cor ou inserindo a cor exata em valores HEX, RGB ou HSB
- Clique em Aplicar.
- Ajuste o tom das cores de base do seu tema:
- Clique no tom relevante no gradiente de cor de base.
- Use os sliders para ajustar a saturação e o brilho como preferir.
- Clique em Aplicar.
- Alterar as cores do tema:
![O painel Personalizar tema de cor no design do site. Uma nova cor acentuada está sendo aplicada.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/07/04/e3ef9f09-4cf1-4e6c-aff0-b651d05029b8/1e0a1613-f062-412e-b193-6427b1a23694.jpg)
Definir padrões de cor em todo o seu site
Após escolher e personalizar seu tema de cor, você pode definir as cores do tema como padrão para determinados elementos em seu site. Essa é uma ótima maneira de fortalecer sua marca e garantir que os elementos se complementem.
Para definir padrões de cor para elementos:
- Clique em Design do site
no lado esquerdo do Editor.
- Passe o mouse sobre Tema de cor e texto e clique em Personalizar.
- Clique em Configurações avançadas.
- Clique na caixa de cores ao lado do elemento relevante para atribuir uma cor:
- Geral: escolha as cores que deseja usar para backgrounds primário e secundário no seu site, assim como linhas e separadores.
- Texto: aplique as cores escolhidas a diferentes tipos de texto em seu site, incluindo legendas e links.
- Botões: defina as cores que você deseja usar nos botões principal e secundário. Você pode escolher uma cor para cada estado do botão (normal, passar o mouse ou desativado) separadamente.
![As configurações avançadas de um tema de cor. A caixa de cores para linhas e separadores está sendo clicada.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/03/03/a7806733-b2fd-45a8-a889-b38ad078cd6b/19fee76e-d6c5-44a7-99e2-510b18828ca1.png)
Aplicar manualmente cores do tema aos elementos
Você pode aplicar as cores do seu tema a quaisquer elementos adicionais no seu site. Elas são salvas no seletor de cores no painel do design do elemento, por isso é ainda mais fácil criar um design consistente.
Para aplicar uma cor do tema a um elemento:
- Clique no elemento no seu Editor.
- Clique no ícone Design
.
- Clique em Personalizar design (se exibido).
- Clique nas configurações de cor.
- Clique na caixa de cores.
- Selecione uma cor do tema no seletor.
![O painel Design de uma seção. Uma cor do tema está sendo aplicada ao background da seção.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/03/03/87de4ead-8f11-4811-bcf8-229f6c6f07e1/ca5d5dfe-7924-4a85-a327-5a13b14bcc7b.png)
Dica:
Você também pode salvar cores personalizadas que não fazem parte do seu tema no seletor de cores. Clique em + Adicionar ao lado de Minhas cores para selecionar uma nova cor.
Além disso, os elementos temáticos dentro do painel Adicionar no Editor já apresentam as cores do seu tema (ex.: botões temáticos, caixas e linhas). Portanto, você não precisa se preocupar em ajustá-los manualmente para que combinem com o seu site.
Esse artigo foi útil?
|