Página do aluno

Aprenda como criar uma página do aluno que aprimore 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 ocasionais em estudantes comprometidos.

Temas e configurações personalizados permitem ajustar a aparência e o estilo da sua página do aluno, criando um design refinado e envolvente em apenas alguns cliques. Este guia mostrará como configurar essa página de forma eficiente, transformando-a em um hub central que reflete o estilo do seu curso e garante uma experiência de aprendizado fluida.

O que é uma Página do Aluno? Dentro da plataforma Salebot, a página do aluno é um painel personalizado que atua como o principal espaço de trabalho do seu curso. Ela reúne todas as ferramentas de que um aluno precisa, permitindo que ele:

  • Acesse todo o conteúdo e materiais do curso,

  • Acompanhe seu progresso por módulos e lições,

  • Conclua lições e envie atividades,

  • Interaja com instrutores ou facilitadores.

Esse ambiente integrado foi projetado para simplificar 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 simplifica o processo de aprendizado. Ela permite que os alunos:

  • Localizem rapidamente os materiais necessários e retomem os estudos exatamente do ponto em que pararam.

  • Monitorem facilmente seu progresso, visualizando quais tarefas foram 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

circle-check

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á então levado à página principal de configurações do curso, onde precisa abrir aPá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), além de 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.

Etapa 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 principais elementos da página são atualizadas, incluindo:

  • Fundos (imagens de capa, fundo da página, barra de progresso, blocos de lições)

  • Botões

  • Preenchimento da barra de progresso

  • Bordas, contornos etc.

Etapa 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 – os cantos e elementos aparecerão arredondados ou em formato oval.

c) Raio máximo – todos os cantos e elementos da página terão bordas totalmente arredondadas.

circle-check

Tema personalizado

As configurações na aba “Tema personalizado” permitem aplicar seus próprios esquemas de cores exclusivos e variados aos elementos da página do aluno.

circle-exclamation

Observe

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 da sobreposição de fundo

Use as configurações de sobreposição de fundo para aplicar uma cor unificada aos contêineres visuais centrais da página:

a) A barra de progresso;

b) Blocos individuais de lição,;

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 em evidência na página do aluno, incluindo:

a) botões de navegação das lições;

b) o preenchimento da barra de progresso;

c) bordas, fundos dos números das lições 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 dos principais elementos na página do aluno que aparecem sobre sobreposições de fundo.

Cor do texto de destaque

Use esta configuração para definir a cor do texto (fonte) de qualquer elemento que esteja sobre um fundo com cor de destaque, incluindo caixas de aviso 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.

circle-exclamation

Observe

Etapa 1: Enviando uma imagem

Você pode enviar uma imagem diretamente do seu computador.

Ou envie uma imagem por meio de um link do seu armazenamento de arquivos.

A vantagem de enviar uma imagem por meio de um link do armazenamento de arquivos é que você pode usar uma imagem de qualquer tamanho como capa.

circle-info

Para mais detalhes sobre como usar o armazenamento de arquivos, consulte o artigo "Armazenamento de arquivos".

Etapa 2: Altura da capa

Depois de enviar a imagem, defina a altura apropriada da capa na página do aluno.

Altura: 260px
Altura: 400px

Etapa 3: Posição da imagem

Você pode usar a opções de posicionamento predefinidas para alinhar a imagem aocentro, esquerda, direita ou parte inferior, ou escolha configurações personalizadas.

Movendo o controle circular, você pode posicionar a imagem exatamente como quiser.

Etapa 4: Tamanho da imagem

O campo de tamanho da imagem aceita valores decontain / cover, bem como valores numéricos em pixels (px) e porcentagens (%).

1) valores contain/cover

2) valores numéricos

Etapa 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.

Etapa 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 lições 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 personalizados de chamada para ação 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á então aberta para configuração do botão e para inserir o texto do 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 sobrescrever isso definindo uma cor personalizada tanto para o fundo quanto para 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 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 direcionar para 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.

Etapa 1: Acessar as configurações do banner

Nas configurações da página do curso, localize e expanda o "Banners" seção.

Para fazer isso, clique na seção no menu suspenso de configurações.:

Etapa 2: Envie uma imagem.

Após o envio, a imagem aparecerá no campo de configurações.

Etapa 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:

Etapa 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.

Etapa 5: Configure as dimensões do banner Defina o tamanho de exibição do banner inserindo valores de largura e altura.

Importante: Insira apenas valores numéricos nesses campos (por exemplo, 300). Não inclua unidades como px ou %.

Etapa 6: Salve sua configuração Clique "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 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.

  1. Selecione a opção de envio de imagem abaixo do banner adicionado (o grande botão de envio na parte inferior):

  1. A imagem foi enviada abaixo do banner adicionado anteriormente.

  1. Na página do aluno, o banner aparecerá na linha seguinte após o anteriormente adicionado.

Se você clicar no botão "+" à direita de uma imagem já enviada, o novo banner aparecerá na mesma linha que o banner adicionado anteriormente na página do aluno.

  1. Clique no botão "+" à direita da imagem enviada nas configurações da página.

A imagem recém-enviada será posicionada à direita.

  1. Na página do aluno, o banner será exibido na mesma linha que o anteriormente enviado.

Você pode adicionar banners tanto na mesma linha quanto em linhas subsequentes ao mesmo tempo.

Página do Aluno
Configurações do Banner
circle-check

Pré-visualização da página

Depois de configurar a página do aluno, não se esqueça de salvar seu progresso.

Depois de salvar as configurações, clique no botão "Visualizar".

Em seguida, selecione "Ir para a Página do Aluno".

Você será levado à pré-visualização da página do aluno.

No modo de edição, o painel de pré-visualização permite inspecionar visualmente o layout final. Você pode ver como todos os elementos — como a barra de progresso, banners, botões e blocos de lições — estão posicionados e estilizados de acordo com suas configurações.

circle-exclamation

Observe

Atualizado