Cores e paletas prontas
A aparência da plataforma é definida por 18 cores, que você ajusta uma a uma ou preenche de uma vez com uma das 16 paletas prontas do botão "Usar templates".
Onde acessar
Builder > Aparência > Cores
💡 Como abrir o Builder: no admin, abra uma área de membros em Loja > Produtos > Área de membros, entre em Área de membros > Personalizar e clique no card Editar vitrine. O Builder abre em outra aba. A seção Aparência só aparece para administrador de plataforma.
Como a tela funciona
À esquerda ficam as cores, em grupos. À direita, um Preview com os botões Home e Curso, que mostra o efeito antes de salvar.
Cada cor tem um seletor e um campo de texto em hexadecimal (# mais 6 dígitos, por exemplo #000000). Duas formas de achar a cor certa:
- Clique em um elemento do preview para localizar a cor que o pinta.
- Clique no ícone de mira ao lado de uma cor (Ver no preview) para ver onde ela aparece.
Nada vai para o site até você clicar em Salvar alterações. O aviso de confirmação é "Configurações salvas!".
As 18 cores
| Grupo | Cores |
|---|---|
| Fundos | Fundo das páginas, Fundo dos cards, Fundo das seções |
| Bordas | Bordas e detalhes |
| Destaques | Cor de destaque |
| Botões de ação | Texto do botão principal, Fundo do botão principal, Botão secundário |
| Cor de texto | Títulos, Textos e parágrafos, Subtítulos |
| Header | Fundo do header, Texto do header |
| Footer | Fundo do footer, Texto do footer |
| Input | Texto dos campos, Texto de exemplo (placeholder), Fundo dos campos |
Existe ainda um grupo de nomes legados, fechado por padrão, com três cores: Texto do botão CTA (legado), Fundo do botão CTA (legado) e Cor do botão CTA (Checkout, legado). Elas ainda são usadas em alguns pontos, como o botão dos e-mails automáticos. Se você mudou a cor do botão principal e o botão do e-mail continuou com a cor antiga, é neste grupo que ela está.
⚠️ Sobre Botão secundário: o campo existe e é salvo, mas não confirmamos que o site do aluno já aplique essa cor. Não conte com ela para um ajuste visual sem testar no site.
Usar uma paleta pronta
- Em Builder > Aparência > Cores, clique em Usar templates, no topo da coluna de cores.
- Na janela Paletas prontas, escolha uma das 16 opções:
| Grupo | Paletas |
|---|---|
| Quentes | Terracota Claro, Terracota Noturno, Âmbar e Índigo, Oliva e Creme |
| Frias | Azul Noturno, Azul Gelo, Teal e Coral, Sálvia Claro |
| Neutras | Grafite Quente, Greige Claro, Ardósia, Grafite e Âmbar |
| Vibrantes | Magenta e Lima, Violeta e Âmbar, Lima Elétrica, Coral e Turquesa |
- A janela mostra a comparação cor a cor, com as colunas Cor, Atual e Nova. Desmarque as linhas das cores que você quer manter.
- Clique em Aplicar paleta.
- Revise no preview. Aparece a faixa "Paleta aplicada. Revise no preview e salve para publicar.", com o link Desfazer.
- Clique em Salvar alterações.
Cada cartão de paleta traz informações que ajudam na escolha:
- O selo AA indica que todos os pares de texto e fundo da paleta passam no contraste 4,5 para 1.
- O tipo de harmonia: Monocromática, Análoga, Complementar, Split-complementar ou Triádica.
- Header claro ou Header escuro, que define qual dos seus logotipos vai aparecer no topo.
As paletas não mexem nas três cores legadas.
Cores por área de membros
Em Builder > Área de Membro > Tema, painel Cores da Área de Membro, você encontra as mesmas cores e o mesmo botão Usar templates. Abaixo de cada cor aparece "Herdado da marca" ou "Personalizado", com o link Restaurar da marca. Só as cores diferentes da marca são salvas.
⚠️ A tela avisa: "O aluno vê este tema quando o site da área for atualizado.". Hoje o Builder grava o tema da área, mas não garantimos que o site já o exiba. Confirme com o suporte antes de planejar uma identidade diferente por área.
No admin
As mesmas cores também aparecem no admin, em Plataforma > Configuração > Infos básicas, seção Personalização, sem preview e sem paletas prontas. As duas telas gravam os mesmos dados: o que você salvar em uma aparece na outra.
O que não existe
- Modo escuro para o aluno alternar. O que há são paletas de header escuro e logotipos para fundo escuro.
- CSS customizado. O ajuste de aparência é feito pelas cores, pela tipografia e pelos componentes das páginas.
- Cores por loja. A paleta é da plataforma inteira.
Erros comuns
"Apliquei a paleta e o site não mudou"
Faltou clicar em Salvar alterações. Aplicar a paleta só muda o preview.
"O texto ficou ilegível"
Texto e fundo com pouco contraste. Prefira uma paleta com o selo AA ou ajuste o par à mão: Títulos e Textos e parágrafos contra Fundo das páginas e Fundo dos cards.
"O logotipo sumiu depois de trocar a paleta"
A paleta mudou o header de claro para escuro, ou o contrário. Envie o logotipo da versão que falta em Logotipos e favicon.
"O campo não aceita a cor"
O valor precisa ser # seguido de 6 dígitos hexadecimais. Nomes de cor e formatos com 3 dígitos não são aceitos.