Preview de identidade visual
Preview de identidade visual mostra como as configurações de cor e fonte ficam antes de publicar.
O que é o preview
O preview de identidade visual é um painel dentro de Plataforma > Configurações > Identidade visual que exibe como as configurações atuais (cor, logo, fonte) ficam em elementos reais da interface — sem precisar publicar para ver o resultado.
O preview mostra:
- Cabeçalho da vitrine com o logo configurado
- Botão de compra com a cor primária
- Texto de título e corpo com a fonte escolhida
- Tela de login com o banner configurado
- Cards de curso com a cor e tipografia ativas
Como usar o preview
- Acesse Plataforma > Configurações > Identidade visual
- Faça as alterações de cor, logo ou fonte
- O preview ao lado direito (ou abaixo, em telas menores) atualiza em tempo real
- Clique em Visualizar na vitrine para ver a loja real em modo de preview (sem publicar)
- Se satisfeito, clique em Salvar
Alterações não salvas não afetam a vitrine ao vivo.
Diferença entre preview interno e preview da vitrine
| | Preview interno | Preview da vitrine | |---|---|---| | Onde fica | Dentro do painel de configurações | Abre a loja em nova aba | | O que mostra | Componentes isolados (botão, logo, fonte) | A loja completa como o aluno vê | | Precisa salvar? | Não — atualiza em tempo real | Não — mostra o estado atual sem salvar | | Afeta alunos? | Não | Não — é apenas visualização |
O que o preview não mostra
- Comportamento em dispositivos móveis (simule com DevTools do Chrome)
- Combinações de elementos que só aparecem em fluxos específicos (checkout, AVA)
- Imagens de cursos — os previews usam placeholders
- Performance de carregamento — veja Performance e tempo de carregamento
Boas práticas
✅ Faça
- Use o preview antes de salvar qualquer mudança visual — especialmente mudanças de cor, que impactam toda a interface
- Acesse o preview em dois navegadores diferentes para comparar a renderização de cores
- Teste a identidade visual completa (logo + cor + fonte juntos) em vez de cada elemento isolado — a combinação pode revelar conflitos que as peças isoladas não mostram
❌ Não faça
- Confiar apenas no preview interno para aprovar mudanças visuais — acesse a vitrine real em aba anônima depois de salvar
- Salvar mudanças sem verificar o preview — especialmente em horários de pico de acesso dos alunos
- Ignorar o preview mobile — muitas inconsistências visuais só aparecem em telas menores
Erros comuns
"O preview interno mostra uma cor mas a vitrine real mostra outra"
O preview interno usa componentes simplificados. Após salvar, acesse a vitrine em aba anônima para ver o resultado real. Limpe o cache se a vitrine ainda mostrar a cor antiga (Ctrl + Shift + R no Chrome).
"O preview de identidade visual está em branco"
O preview carrega os componentes de forma assíncrona. Aguarde alguns segundos após abrir o painel. Se ainda estiver em branco, recarregue a página e tente novamente.
"Salvei a nova cor mas os alunos dizem que a loja ainda aparece com a cor antiga"
O cache do navegador dos alunos pode guardar a versão anterior. Oriente os alunos a pressionar Ctrl + Shift + R (ou Cmd + Shift + R no Mac) para forçar o recarregamento. Mudanças visuais geralmente se propagam para todos em até 24 horas pelo CDN.
"Quero testar a identidade visual em mobile sem publicar"
Abra o preview da vitrine (Visualizar na vitrine) e use o modo responsivo do Chrome DevTools (F12 → ícone de celular) para simular diferentes tamanhos de tela.
Próximos passos
- 📖 Configurar logos
- 📖 Cor primária — impacto na interface
- 📖 Tipografia personalizada
- 📖 Acessibilidade e contraste
- 📖 Banner da tela de login
Foi útil este artigo? 👍 👎 Falar com CS (em produção) · Pergunte ao Vob 🤖 (em produção) Última atualização: 2026-05-06