Cores e paletas da plataforma
As cores do site são editadas no Builder, em Aparência > Cores, uma a uma ou a partir de 16 paletas prontas, com uma prévia ao lado, e só vão para o ar quando você clica em Salvar alterações.
Onde acessar
Builder > Aparência > Cores.
O Builder abre em nova aba pelo card Editar vitrine, em Área de membros > Personalizar. O passo a passo está em Logotipos e favicon. Só o Administrador da plataforma vê o item Aparência.
Como a tela funciona
- À esquerda, as cores, em grupos.
- À direita, o Preview, com os botões Home e Curso para alternar a página de exemplo.
- Cada cor tem um seletor e um campo de texto em hexadecimal (
#mais 6 dígitos, por exemplo#000000). - O botão de mira ao lado da cor (Ver no preview) destaca onde ela aparece. Clicar em um elemento do preview faz o contrário: mostra qual cor ele usa.
As cores, grupo a grupo
| 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 |
Há ainda um grupo avançado, fechado por padrão, com três cores de nomes legados do botão de chamada (CTA). Só mexa nelas se o suporte orientar.
💡 Comece por quatro cores: Fundo das páginas, Fundo do botão principal, Texto do botão principal e Títulos. Elas definem a maior parte do que o aluno vê.
Usar uma paleta pronta
- Clique em Usar templates, no topo da coluna de cores.
- A janela Paletas prontas mostra 16 opções em 4 grupos:
| 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 |
- Cada cartão mostra a faixa de cores, o nome, se o header é claro ou escuro e, quando todos os pares de texto e fundo passam no contraste, o selo AA.
- Ao escolher uma paleta, a janela compara cor a cor (colunas Cor, Atual e Nova). Desmarque as linhas que você quer manter como estão.
- Clique em Aplicar paleta.
- Uma faixa avisa que a paleta foi aplicada e oferece o link Desfazer. Revise no preview.
- Clique em Salvar alterações. A confirmação é "Configurações salvas!".
Nada é salvo antes do passo 7. As paletas não alteram as três cores legadas.
Editar uma cor só
- Clique no seletor da cor, ou digite o código hexadecimal no campo ao lado.
- Veja o resultado no preview.
- Clique em Salvar alterações.
As cores da tela Infos básicas do admin
A tela Plataforma > Configuração > Infos básicas também tem uma seção Personalização, com seletores de cor (Fundo de tela, Header e Footer, Inputs, Botões e links) e as cores de título, descrição e subtítulo.
São os mesmos dados que o Builder edita, guardados no mesmo lugar. O que você salva em uma tela aparece na outra, e vale o último salvamento.
Qual usar:
| Builder | Infos básicas do admin | |
|---|---|---|
| Preview ao lado | Sim | Não |
| Paletas prontas | Sim | Não |
| Lista de cores | Completa | Parcial |
| Quando salva | Só a aparência | O formulário inteiro da plataforma |
Prefira o Builder. Use a tela do admin só para um ajuste rápido de uma cor que você já conhece.
Cores de uma área de membros
Cada área de membros pode ter cores próprias, em Builder > Área de Membro > Tema. Só as cores diferentes da marca são salvas, e as demais acompanham a plataforma.
⚠️ A tela de tema avisa: "O aluno vê este tema quando o site da área for atualizado". O tema pode ser gravado, mas ainda não muda o que o aluno vê.
O que não existe
- Modo escuro para o aluno alternar: não há. O site tem uma única paleta.
- Cores por loja: as cores são da plataforma e valem para todas as lojas.
- CSS personalizado: não há campo.
Erros comuns
"Apliquei a paleta e o site não mudou"
Faltou clicar em Salvar alterações. A paleta aplicada fica só no preview até você salvar.
"O texto do botão ficou ilegível"
Texto do botão principal e Fundo do botão principal estão com pouco contraste. Escolha uma paleta com o selo AA ou ajuste uma das duas cores. Veja Contraste e legibilidade.
"Mudei o Botão secundário e não vi diferença no site"
Nem todas as cores aparecem em todas as páginas. Use o botão de mira para ver onde a cor é usada no preview. Se ela não é usada em nenhum elemento, a mudança não tem efeito visível.
"Salvei no admin e a cor do Builder mudou sozinha"
É o esperado: as duas telas editam os mesmos dados.