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

<div align="left"><figure><img src="/files/df5854df26499002c1dcf15db1bb3d12569f4c99" alt=""><figcaption></figcaption></figure> <figure><img src="/files/42e3060953bf1be50a77692772f36289b17956d2" alt=""><figcaption></figcaption></figure></div>

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.

<figure><img src="/files/df5854df26499002c1dcf15db1bb3d12569f4c99" alt=""><figcaption></figcaption></figure>

**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

{% hint style="success" %}
O construtor de cursos está disponível no plano de assinatura “Businnes”.
{% endhint %}

Para começar, vá para a seção “Cursos” no MaviBot.

<figure><img src="/files/922ea95dde488bd65ed20d6b14347e9f11c8550c" alt=""><figcaption></figcaption></figure>

Em seguida, selecione o curso para o qual deseja configurar a página do aluno e vá para suas **configurações.**

<figure><img src="/files/7e328634f7cf516a52d0c1942e8e2862b6c46172" alt=""><figcaption></figcaption></figure>

Você será então levado à página principal de configurações do curso, onde precisa abrir a**Página do Aluno**”.

<figure><img src="/files/3f68cfc915b59a5811c768134dc63ce2c0c0bf61" alt=""><figcaption></figcaption></figure>

Agora, para começar a personalizar a página do aluno, localize o ícone de engrenagem para abrir o menu de configurações.

<figure><img src="/files/e549943b7a776595fb5056e576895cb2600d3b03" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/2efa3bb55bcc31847c09272b5f42e7e0f8016957" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/3d8a0a9776012975e8c2ea1ef47af38624ce7de6" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/124f1a47807ac2040d39f0e5c8caae1ce7372f89" alt=""><figcaption></figcaption></figure>

b) Raio médio – os cantos e elementos aparecerão arredondados ou em formato oval.

<figure><img src="/files/f8519ee8f487619e207f36c661712e88fde8f210" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/f31d94f78ad22804da380d867bf2fa3c1275695e" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Excelente!

Agora você sabe como configurar rapidamente o tema principal da sua página do aluno.

Se 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.
{% endhint %}

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

<figure><img src="/files/38f4479a414263f1de9ee2cb34a0862627ad4bb6" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

## Observe

O Tema Principal e o Tema Personalizado podem ser usados juntos.

Por exemplo, você pode usar as configurações da aba Tema Personalizado para aplicar cores a apenas alguns elementos, mantendo o restante da página estilizado de acordo com o Tema Principal selecionado.
{% endhint %}

#### Cor de fundo

Esta configuração altera a cor de fundo de toda a página, excluindo elementos individuais.

<figure><img src="/files/d42bd358fd7122518a5144e79150767216596a47" alt=""><figcaption></figcaption></figure>

Clique no quadrado para abrir a paleta de cores e selecionar a cor desejada.

<figure><img src="/files/2513ec47727bd9f66df10e2ddcb99afe07cfb438" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/66299953ca2e6e5451a2b3c8da9dd7a329bd5f55" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/248ac04dd5392bf8b6d1500a1c554f2ce50e6dbc" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/110230962396ea2871ebbc562820aa6fe00a5ac9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/51a8caf584a449b91839f385322ff75ddfceb836" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/c02936210e66e9548a876e53586ce67dc78aff44" alt=""><figcaption></figcaption></figure>

#### Configurações adicionais

Nas configurações adicionais da página do aluno, você pode enviar uma imagem para usar como capa da página.

<figure><img src="/files/5782d9805c635720d5e0d8fd9fb806ce1a6793b0" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

## Observe

A imagem enviada como capa da página do aluno a partir do seu dispositivo não deve exceder 15 MB de tamanho.
{% endhint %}

Etapa 1: Enviando uma imagem

Você pode enviar uma imagem diretamente do seu computador.

<figure><img src="/files/73944cc2792a7c823dec3ce5f2045ed9b19781d8" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/a6966b84a8e73970120be2ed4a71df9c5d3a2d2a" alt=""><figcaption></figcaption></figure>

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.

{% hint style="info" %}
Para mais detalhes sobre como usar o armazenamento de arquivos, consulte o artigo "[Armazenamento de arquivos](/doc/pt/chatbot/cloud.md)".
{% endhint %}

Etapa 2: Altura da capa

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

<figure><img src="/files/1a6438ac057dcd6dd8bf25d225f98db7983a0f37" alt=""><figcaption><p>Altura: 260px</p></figcaption></figure>

<figure><img src="/files/7a7b6c2c7a38fc67439dc2a9d1a2b1c64d7937ba" alt=""><figcaption><p>Altura: 400px</p></figcaption></figure>

Etapa 3: Posição da imagem

<figure><img src="/files/3c146322f0669963d8e13198c641a91da1f3f3c1" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/86fa27766f0afb226163d14c2ef57c61acbae039" alt=""><figcaption></figcaption></figure>

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

Etapa 4: Tamanho da imagem

<figure><img src="/files/186f2385385eea59957513b692fc645b9ce2c364" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/13a741084405d4ac39801bc2ab00a8d4b76bf498" alt=""><figcaption></figcaption></figure>

2\) valores numéricos

<figure><img src="/files/f72203291a3a5b050ed563db134cb6f5169df386" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/1bb3bb11228c7a45ac4982abf455398ff8c78e40" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/83689096760b9ea9ff4c4e9fdab54a44605b82cf" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/24f28868271ce460bfcb2dc9b9dabca25f8da4be" alt=""><figcaption></figcaption></figure>

Para adicionar um botão, abra a aba correspondente nas **configurações da página do aluno.**

<figure><img src="/files/2b4e3e7827e0751d9867483f782a4ca08e11769b" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/e948a150c3ca879877a5c39190350e38ae339530" alt=""><figcaption></figcaption></figure>

Agora, especifique o link de destino (URL) para este botão.

<figure><img src="/files/db9aaf5262103118af9dd6c7478b9f3dfa529e15" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/f655dd92f6cc9af4915de5391c72a5b550a7d975" alt=""><figcaption></figcaption></figure>

Em seguida, clique em "Salvar".

<figure><img src="/files/a2b793f19b8a4d764d655fbb4f2051bb4c4102d2" alt=""><figcaption></figcaption></figure>

O botão agora está salvo e ativo. Você o verá exibido abaixo da barra de progresso na página do aluno.

<figure><img src="/files/5a73e6e087334732d0e58aa8109f27b058fa4dc7" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/61e18d70a5f61f5024a14f6ffc6de3854318fd08" alt=""><figcaption></figcaption></figure>

## Banners&#x20;

<figure><img src="/files/c92211391840759058fe6f8a083f05082383bff0" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/e948a150c3ca879877a5c39190350e38ae339530" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/7031ccabf73be7579ba251966ad4d04d60e564c4" alt=""><figcaption></figcaption></figure>

Etapa 2: Envie uma imagem.

<figure><img src="/files/084b408e10a3f21a505d3fcbbe1cfbf8cc9b3f12" alt="" width="563"><figcaption></figcaption></figure>

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

Etapa 3: Vá para as configurações da imagem.

<figure><img src="/files/16d62b2e3822af6e4cc3ebc47c6af4d0b34c3c8c" alt=""><figcaption></figcaption></figure>

Para fazer isso, clique no ícone de engrenagem no canto superior esquerdo da imagem enviada, e uma janela modal de configurações será aberta:

<figure><img src="/files/a45a666f3858be0128687293375f5b4cefaf11b3" alt=""><figcaption></figcaption></figure>

**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):

<figure><img src="/files/4e028d10ff4839065323b43c3954002589eb207c" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/200b398066d25f16a1fd74845b1dd1dd6b541c7d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/e46930ecd903f029519e16f8d892ad5267952499" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/b12d241bed8ab32e3888f158edadc556b54a0102" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/fa187fffeb53b9826a3a0e211f97cc465c4039ba" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/0cdd626a70983c446939ae7ed56e0d8531973409" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/08e8290c5a881f04d8482f2a49db1a925333157c" alt=""><figcaption><p>Página do Aluno</p></figcaption></figure>

<figure><img src="/files/2b11432f0517f008fdae1af1f9fb668fabe5016d" alt=""><figcaption><p>Configurações do Banner</p></figcaption></figure>

{% hint style="success" %}
Tudo pronto!\
Agora você sabe como configurar completamente a página do aluno!
{% endhint %}

## Pré-visualização da página

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

<figure><img src="/files/b3a1e533bf5fef38d3388929770fac0066ae42e7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/b8d6c079a9edfa49aad2bbb381c5d762e60215d7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/e4d07a53318ae1e3f599c858f44866c8ee65b2c7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/eaeb21bc4a989918eaae4c1472b8858b8b4dfb66" alt=""><figcaption></figcaption></figure>

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.

{% hint style="warning" %}

## Observe

A pré-visualização é **apenas para demonstração visual**. Os elementos na pré-visualização da página do aluno são **não clicáveis** e não acionam nenhuma navegação ou funcionalidade real.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/pt/lms/builder/student_page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.