A partir dessa escolha, você poderá seguir para as demais configurações e personalizar o painel de acordo com a identidade da sua mentoria.
Para iniciar a personalização, acesse o menu: Nome da mentoria → Design do Painel do Aluno
Layout Clássico
O modelo tradicional da plataforma, com:
• Editor de cores
• Configuração de fontes
• Aplicação de CSS personalizado
OBS.: É a opção ideal para quem já está habituado ao formato anterior.
Novo Layout (Ativo)
Uma versão mais moderna e completa, que inclui:
• Interface atualizada
• Elementos de gamificação
• Suporte a tema claro e escuro
• Experiência visual mais dinâmica
OBS.: Ao optar pelo Novo Layout, o mentor terá acesso a um editor mais avançado, permitindo personalizar diversos elementos do painel do aluno.
Tema: Claro e Escuro
No topo do editor, é possível alternar entre os modos de visualização:
• Modo Claro
• Modo Escuro
OBS.: Cada modo possui configurações independentes, permitindo criar experiências visuais diferentes para o aluno.
Visualização: Desktop e Mobile
Também no topo do editor, é possível alternar entre:
• Desktop
• Mobile
OBS.: Essa visualização permite validar como o painel será exibido em diferentes dispositivos antes de publicar.
- Personalizações disponíveis
Identidade
Nesta seção, é possível definir a base visual da plataforma por meio da cor principal e suas variações para os modos claro e escuro.
Essas configurações garantem consistência visual e alinham o painel com a identidade da mentoria.
As opções disponíveis são:
• Cor principal
• Variações da cor principal (claro e escuro)
OBS.: Essas definições serão aplicadas em diversos elementos do painel, criando uma experiência visual padronizada e profissional.
- Menu Lateral
Nesta seção, é possível configurar os elementos visuais do menu lateral, responsável pela navegação do aluno dentro da plataforma.
As opções disponíveis são:
• Cor de fundo
• Degradê
• Cor dos ícones
OBS.: Essas configurações impactam diretamente na usabilidade, tornando a navegação mais intuitiva e organizada.
- Cor de Destaque
Nesta seção, é possível definir a cor utilizada nos principais elementos de destaque do painel.
Essa cor será aplicada em:
• Ícones
• Barras de progresso
• Elementos ativos
OBS.: Essa configuração ajuda a direcionar a atenção do aluno para ações e informações importantes dentro da plataforma.
- Fundos & Superfícies
Nesta seção, é possível configurar os fundos da interface, controlando o contraste visual do painel.
As opções disponíveis são:
• Fundo da página
• Fundo dos cards
OBS.: Essas definições influenciam diretamente na legibilidade e no conforto visual durante o uso.
- Gamificação
Nesta seção, é possível personalizar elementos visuais relacionados à gamificação do aluno.
As opções disponíveis são:
• Fundo da barra de progresso (gamebar)
• Cor dos botões
OBS.: Essas configurações reforçam a visualização do progresso e tornam a experiência mais interativa e engajadora.
- Cores das Metas
Nesta seção, é possível definir cores específicas para cada tipo de meta dentro do cronograma.
Os tipos disponíveis são:
• Estudo
• Resumo
• Revisão
• Exercício
• Meta especial
OBS.: Essas cores aparecem no cronograma do aluno, facilitando a identificação das atividades e contribuindo para uma melhor organização dos estudos.
- Raridades das Conquistas
Nesta seção, é possível definir as cores de cada nível de conquista dentro da gamificação, conforme o aluno progride e cumpre suas metas.
Os níveis disponíveis são:
• Comum
• Raro
• Épico
• Lendário
OBS.: Cada nível representa uma evolução na jornada do aluno e pode ser personalizado com cores diferentes, ajudando a reforçar visualmente o progresso e aumentar o engajamento;
Essas cores serão aplicadas às conquistas desbloqueadas pelos alunos, tornando a experiência mais dinâmica, motivadora e alinhada à identidade visual da mentoria.
- Texto
Nesta seção, é possível configurar as cores dos textos exibidos no painel do aluno.
As opções disponíveis são:
• Texto principal
• Texto secundário
• Texto de modais
OBS.: Essas definições são essenciais para garantir uma leitura clara e uma experiência visual confortável dentro da plataforma.
- Fonte e CSS
Nesta seção, é possível definir a tipografia e aplicar ajustes avançados no layout.
As opções disponíveis são:
• Escolha da fonte (ex: Poppins)
• Campo de CSS adicional
Exemplo de CSS:
.activity-title-dates {
display: none !important;
}
OBS.: O CSS permite realizar personalizações mais específicas, como ocultar elementos ou ajustar detalhes visuais que não estão disponíveis diretamente no editor.
- Boas práticas
Ao personalizar o painel do aluno, é importante manter uma consistência visual para garantir uma boa experiência. Utilize uma cor principal bem definida e evite o uso excessivo de cores diferentes, pois isso pode deixar o layout confuso e poluído.
Outro ponto essencial é o contraste, principalmente no modo claro, garantindo que textos e elementos sejam facilmente legíveis. Sempre valide suas alterações tanto no desktop quanto no mobile, para assegurar que o painel esteja bem adaptado em todos os dispositivos.
Por fim, utilize o CSS adicional com moderação, apenas quando necessário, para ajustes mais específicos que não são possíveis diretamente pelo editor.
✅ Conclusão
Com o Design do Painel do Aluno, você tem total controle sobre a experiência visual da sua mentoria. É possível personalizar a identidade visual de forma completa, trabalhar com diferentes temas (claro e escuro), definir cores específicas para cada tipo de atividade e garantir uma boa visualização tanto no desktop quanto no mobile.
Além disso, para necessidades mais avançadas, o uso de CSS permite refinar ainda mais o layout, proporcionando uma experiência mais profissional e alinhada com a proposta da sua mentoria.