Aprenda a criar uma página do aluno que melhora a experiência de aprendizado.
A interface do aluno é a base do seu curso. Um design limpo e fácil de usar mantém os alunos focados e motivados, transformando visitantes casuais em alunos comprometidos.
Temas e configurações personalizados permitem que você adapte a aparência da sua página do aluno, criando um design polido e envolvente em apenas alguns cliques. Este guia mostrará como configurar esta página de forma eficiente, transformando-a em um hub central que reflete o estilo do seu curso, garantindo uma experiência de aprendizado contínua.
O que é uma Página do Aluno?
Na plataforma Mavibot, a página do aluno é um painel personalizado que atua como o espaço de trabalho principal do seu curso. Ela consolida todas as ferramentas que um aluno precisa, permitindo que ele:
- Acesse todo o conteúdo e materiais do curso,
- Monitore seu progresso através dos módulos e aulas,
- Complete aulas e envie tarefas,
- Interaja com instrutores ou facilitadores.
Este ambiente integrado foi projetado para otimizar a jornada de aprendizado, mantendo os alunos focados, organizados e motivados.
Por que a página do aluno é importante?
A página do aluno estrutura e agiliza o processo de aprendizado. Ela permite que os alunos:
- Localizem rapidamente os materiais necessários e retomem os estudos exatamente de onde pararam.
- Monitorem facilmente seu progresso, visualizando quais tarefas estão concluídas e quais ainda estão pendentes.
- Recebam feedback do instrutor, facilitando uma jornada de aprendizado mais personalizada e eficaz.
Onde configurar a página do aluno
O construtor de cursos está disponível com o plano de assinatura “Business”.
Para começar, vá para a seção “Cursos” no MaviBot.
Em seguida, selecione o curso para o qual deseja configurar a página do aluno e vá para suas configurações.
Você será levado para a página principal de configurações do curso, onde precisará abrir a aba “Página do Aluno”.
Agora, para começar a personalizar a página do aluno, localize o ícone de engrenagem para abrir o menu de configurações.
Ao clicar no ícone de engrenagem, um menu será aberto com configurações para o tema padrão (personalizado), seu próprio tema (editável), bem como configurações adicionais e a opção de adicionar botões personalizados.
Tema principal
O tema principal da página do aluno consiste em temas pré-instalados e prontos para uso que permitem personalizar a página em apenas alguns cliques.
Passo 1: Escolha um Esquema de Cores para o Tema principal
Você pode escolher entre 7 temas claros e 2 temas escuros.
Quando um tema personalizado é aplicado, as cores de todos os elementos principais da página são atualizadas, incluindo:
- Fundos (imagens de capa, fundo da página, barra de progresso, blocos de aula)
- Botões
- Preenchimento da barra de progresso
- Bordas, contornos, etc.
Passo 2: Escolha o Nível de Raio da Borda
a) Raio zero – todos os cantos e elementos da página aparecerão quadrados.
b) Raio médio – cantos e elementos aparecerão arredondados ou em forma oval.
c) Raio máximo – todos os cantos e elementos da página terão bordas totalmente arredondadas.
Excelente!
Agora você sabe como configurar rapidamente o tema principal da sua página do aluno.
Se você quiser adicionar botões extras, enviar uma imagem de capa personalizada ou aplicar seu próprio esquema de cores exclusivo à página, recomendamos continuar para as próximas seções deste artigo.
Tema personalizado
As configurações na aba “Tema personalizado” permitem que você aplique seus próprios esquemas de cores exclusivos e variados aos elementos da página do aluno.
Observação
O Tema principal e o Tema personalizado podem ser usados juntos.
Por exemplo, você pode usar as configurações na aba Tema Personalizado para aplicar cores a apenas alguns elementos, mantendo o resto da página estilizado de acordo com o Tema Principal selecionado.
Cor de fundo
Esta configuração altera a cor de fundo de toda a página, excluindo elementos individuais.
Clique no quadrado para abrir a paleta de cores e selecionar a cor desejada.
Além de uma ampla paleta de cores para cada elemento, você também pode ajustar a intensidade da cor usando a escala de transparência.
Cor de sobreposição de fundo
Use as configurações de sobreposição de fundo para aplicar uma cor unificada aos principais contêineres visuais da página:
a) A barra de progresso;
b) Blocos de aula individuais;
c) A área da imagem de capa do curso.
Cor de destaque
As configurações de cor de destaque permitem alterar o esquema de cores dos principais elementos destacados na página do aluno, incluindo:
a) botões de navegação da aula;
b) o preenchimento da barra de progresso;
c) bordas, fundos do número da aula e elementos semelhantes.
Cor do texto do fundo da página
Esta configuração permite escolher um esquema de cores atraente para o texto exibido no fundo da página.
Cor do texto da sobreposição
Esta configuração permite alterar a cor do texto para os elementos principais na página do aluno que aparecem sobre as sobreposições de fundo.
Cor do texto de destaque
Use esta configuração para definir a cor do texto (fonte) para qualquer elemento que esteja sobre um fundo de cor de destaque, incluindo caixas de destaque e botões interativos.
Configurações adicionais
Nas configurações adicionais da página do aluno, você pode enviar uma imagem para usar como capa da página.
Observação
A imagem enviada como capa da página do aluno do seu dispositivo não deve exceder 15 MB de tamanho.
Passo 1: Enviando uma imagem
Você pode enviar uma imagem diretamente do seu computador.
Ou enviar uma imagem através de um link do seu armazenamento de arquivos.
A vantagem de enviar uma imagem através de um link do armazenamento de arquivos é que você pode usar uma imagem de qualquer tamanho como capa.
Para mais detalhes sobre como usar o armazenamento de arquivos, consulte o artigo "Armazenamento de arquivos".
Passo 2: Altura da capa
Após enviar a imagem, defina a altura apropriada da capa na página do aluno.
Passo 3: Posição da imagem
Você pode usar as opções de posicionamento predefinidas para alinhar a imagem ao centro, esquerda, direita ou inferior, ou escolher configurações personalizadas.
Movendo o controle circular, você pode posicionar a imagem exatamente como desejar.
Passo 4: Tamanho da imagem
O campo de tamanho da imagem aceita valores de contain / cover, bem como valores numéricos em pixels (px) e porcentagens (%).
1) valores contain/cover
2) valores numéricos
Passo 5: Repetição da imagem
A imagem pode ser repetida ao longo do eixo Y, ou seja, verticalmente; ao longo do eixo X, ou seja, horizontalmente ou sem repetição.
Passo 6: Caixas de seleção
Para melhorar a experiência do aluno em sua página pessoal, você pode ativar a exibição de:
- a barra de progresso,
- o número de aulas concluídas, e
- o número de tarefas de casa aprovadas.
Se você não quiser usar esses elementos na página, pode desativar as caixas de seleção.
Botões
A página do aluno inclui um recurso para adicionar botões de call-to-action personalizados abaixo da barra de progresso. Você pode vincular esses botões a sites externos, documentos ou outras páginas importantes.
Para adicionar um botão, abra a aba correspondente nas configurações da página do aluno.
Em seguida, clique em "Adicionar Botão".
Uma janela modal será aberta para configuração do botão e insira um texto para o botão.
Agora, especifique o link de destino (URL) para este botão.
As cores do botão herdarão automaticamente a paleta do tema principal. No entanto, você pode substituir isso definindo uma cor personalizada para o fundo e o texto.
Em seguida, clique em "Salvar".
O botão agora está salvo e ativo. Você o verá exibido abaixo da barra de progresso na página do aluno.
Você pode adicionar vários botões – para fazer isso, basta ir ao menu de configurações e clicar em "Adicionar Botão" abaixo do existente.
Banners
Para promover recursos importantes, você pode adicionar banners clicáveis à página do aluno. Esses banners podem ser vinculados a qualquer URL que você especificar, como um bot de mensageiro, um grupo da comunidade, um documento importante ou um site externo.
Vamos prosseguir com a configuração.
Passo 1: Acessar as configurações do banner
Nas configurações da página do curso, localize e expanda a seção "Banners".
Para fazer isso, clique na seção no menu suspenso de configurações.:
Passo 2: Envie uma imagem.
Após o envio, a imagem aparecerá no campo de configurações.
Passo 3: Vá para as configurações da imagem.
Para fazer isso, clique no ícone de engrenagem no canto superior esquerdo da imagem enviada, e uma janela modal de configurações será aberta:
Passo 4: Defina o link de destino
Insira a URL completa para onde os alunos serão redirecionados ao clicar no banner. Pode ser uma página da web, um bot de mensageiro ou qualquer outro recurso online.
Passo 5: Configure as dimensões do banner
Defina o tamanho de exibição do banner inserindo valores para largura e altura.
Importante: Insira apenas valores numéricos nestes campos (por exemplo,
300). Não inclua unidades comopxou%.
Passo 6: Salve sua configuração
Clique em "Salvar" para aplicar todas as configurações do banner.
Configuração concluída!
Seu banner clicável agora está ativo. Ele aparecerá no lado direito da página do aluno, abaixo da barra de progresso (desde que o recurso de banner esteja ativado).
Como adicionar vários banners
Você pode adicionar vários banners a uma única página. Para fazer isso, envie uma imagem nas configurações e configure-a conforme descrito acima.
Se você clicar em "Adicionar Imagem" abaixo de uma imagem já enviada, o novo banner aparecerá abaixo do banner adicionado anteriormente na página do aluno.
- Selecione a opção de upload de imagem abaixo do banner adicionado (o grande botão de upload na parte inferior):
- A imagem foi enviada abaixo do banner adicionado anteriormente.
- Na página do aluno, o banner aparecerá na próxima linha após o adicionado anteriormente.
Se você clicar no botão "+" à direita de uma imagem já enviada, o novo banner aparecerá na mesma linha do banner adicionado anteriormente na página do aluno.
- Clique no botão "+" à direita da imagem enviada nas configurações da página.
A imagem recém-enviada será colocada à direita.
- Na página do aluno, o banner será exibido na mesma linha do anteriormente enviado.
Você pode adicionar banners na mesma linha e em linhas subsequentes ao mesmo tempo.
Tudo pronto!
Agora você sabe como configurar completamente a página do aluno!
Visualização da página
Após configurar a página do aluno, não se esqueça de salvar seu progresso.
Após salvar as configurações, clique no botão "Visualizar".
Em seguida, selecione "Ir para a Página do Aluno".
Você será levado para a visualização da página do aluno.
Enquanto estiver no modo de edição, o painel de visualização permite que você inspecione visualmente o layout final. Você pode ver como todos os elementos—como a barra de progresso, banners, botões e blocos de aula—são posicionados e estilizados de acordo com suas configurações.
Observação
A visualização é apenas para demonstração visual. Os elementos na visualização da página do aluno não são clicáveis e não acionam nenhuma navegação ou funcionalidade real.