# Telas de acesso

> O visual das telas de login, cadastro e recuperação de senha: modelo, logo, cor e imagem lateral, com pré-visualização antes de salvar.

As telas de acesso são o primeiro contato do aluno com a sua plataforma. São seis: login, cadastro, recuperação de senha, nova senha, verificação em dois fatores e cadastro concluído. Em **Configurações > Telas de acesso** você escolhe o modelo visual dessas telas, a logo, a cor e a imagem lateral. Depois confere o resultado antes de salvar.

## O que esta tela muda e o que não muda

Esta tela muda só a aparência. O resto fica em outras telas:

- **Regras de entrada** (senha forte, login com Google, limite de dispositivos): [Autenticação](https://help.cademi.cloud/pt/configuracoes/autenticacao.md), em Acessos e segurança.
- **Cadastro gratuito**: **Configurações > Alunos > Cadastro gratuito** ([Configurações de alunos](https://help.cademi.cloud/pt/configuracoes/cadastro-de-alunos.md)).
- **Rodapé das telas de acesso**: **Configurações > Área do aluno > Rodapé** ([Área do aluno](https://help.cademi.cloud/pt/configuracoes/area-do-aluno.md)).

**A regra mais importante:** nada muda para os alunos até você clicar em **Salvar agora** na barra do rodapé. Antes de salvar, use **Pré-visualizar** para ver as telas reais com o modelo escolhido.

## Modelo

Em **Modelo**, a pergunta **Qual modelo esta plataforma usa?** mostra quatro cartões:

| Modelo | Como é |
|---|---|
| **Clássico** | O layout com painel de imagem ao lado do formulário |
| **Aurora** | Fundo escuro em degradê, com o formulário num cartão translúcido |
| **Palco** | Fundo escuro com o formulário centralizado sob um anel colorido |
| **Editorial** | Fundo claro em duas colunas, com a frase em destaque |

Cada modelo tem o próprio fundo. Se você escolhe um modelo diferente do Clássico, a tela mostra dois avisos:

- Confira na pré-visualização se a sua logo tem boa leitura sobre o fundo. Aurora e Palco são escuros, Editorial é claro, e a imagem enviada é a mesma em todos.
- Códigos personalizados feitos para o modelo Clássico podem precisar de revisão.

**Frase de destaque** aparece só nos modelos Aurora e Editorial, ao lado do formulário. Ela tem até 120 caracteres. Com o campo em branco, aparece a frase do modelo: "Todo o seu conteúdo, em um só lugar." no Aurora e "Aprenda no seu ritmo." no Editorial. No Aurora, a frase só aparece em telas largas.

## Logo

Em **Logo**, envie a **Imagem** que aparece no topo das telas de login, cadastro e recuperação de senha. JPG ou PNG, até 200 kb.

- **Alinhamento**: **Esquerda**, **Centro** ou **Direita**.
- **Altura**: de 20 a 120 px.

Sem logo enviada, as telas mostram a marca padrão da Cademí.

## Formulário e botões

- **Lado do formulário**: **Esquerda** ou **Direita**, em telas maiores. Só existe nos modelos Clássico e Editorial. Aurora e Palco têm posição fixa.
- **Modo claro ou escuro**: **Seguir a área do aluno**, **Claro** ou **Escuro**. Vale para os quatro modelos. Com **Seguir a área do aluno**, as telas acompanham o **Modo de exibição** da área do aluno.
- **Cor de destaque**: a cor dos botões, dos links e do fundo das telas de acesso, nos quatro modelos.

Como a **Cor de destaque** funciona:

- Com o campo vazio, as telas seguem a cor de destaque da área do aluno. A tela mostra **Seguindo a cor de destaque da área do aluno.**
- Se você escolhe uma cor (no seletor ou nas **Cores sugeridas**), as telas usam essa cor.
- **Usar a cor da área do aluno** limpa o campo. As telas voltam a seguir a área do aluno.
- A **Prévia** logo abaixo mostra o botão **Entrar** e o link **Esqueci minha senha** com a cor escolhida, também ao passar o mouse.

## Painel visual

O painel é a parte que aparece ao lado do formulário em telas maiores.

- **Imagem do painel visual**: a imagem do painel. JPG de 1280x1024, até 850 kb.
- **Posição da imagem**: **Esquerda**, **Centro** ou **Direita**. É a parte da imagem que fica em evidência no painel.
- **Largura do painel**: só no modelo Clássico. **Estreita**, **Padrão**, **Média**, **Larga** ou **Muito larga**.

## Passo a passo

Para trocar o visual das telas:

1. No painel, abra **Configurações > Telas de acesso**.
2. Em **Modelo**, clique no cartão do modelo. A descrição abaixo dos cartões muda com a escolha.
3. Clique em **Pré-visualizar**.
4. Na faixa da pré-visualização, alterne entre as telas.
5. Volte ao painel e ajuste **Logo**, **Formulário e botões** e **Painel visual**.
6. Clique em **Salvar agora**.

A pré-visualização abre numa aba nova, com o modelo escolhido e as cores já salvas. Uma faixa avisa que o modelo ainda não está publicado. Nela você alterna entre **Login**, **Cadastro**, **Esqueci a senha**, **Nova senha**, **Verificação em dois fatores** e **Cadastro concluído**. Depois de salvar, os alunos veem o visual novo.

**Atenção: a prévia usa as cores e a logo já salvas.** O Pedro escolhe uma cor nova e abre a pré-visualização. A cor nova não aparece, porque ele ainda não salvou. Para ver uma cor nova nas telas reais, salve antes de pré-visualizar de novo.

## Bom saber

- **A prévia não é a publicação.** Nada muda para os alunos até você salvar. A prévia mostra o modelo escolhido na hora, mas as cores e a logo são as salvas.
- **Pixels e códigos personalizados podem não aparecer na prévia.** Ela mostra as telas, não os códigos de rastreamento.
- **Tela de cadastro.** Ela só recebe alunos se o cadastro gratuito estiver ligado em **Configurações > Alunos > Cadastro gratuito** ([Configurações de alunos](https://help.cademi.cloud/pt/configuracoes/cadastro-de-alunos.md)). O visual dela, porém, se define aqui, junto com as outras telas. A pré-visualização mostra a tela **Cadastro** mesmo com o cadastro gratuito desligado, para você conferir o visual. Já no **Login**, o link **Crie sua conta** só aparece com o cadastro gratuito ligado, como acontece para os alunos.
- **Uma cor só.** Botões, links e fundo saem da mesma cor de destaque. Não existe cor separada para texto, link ou botão.
- **Aviso de instalação do aplicativo.** Com o [Aplicativo](https://help.cademi.cloud/pt/configuracoes/aplicativo.md) configurado, a tela de login do modelo Clássico mostra, no celular, a instrução para instalar.

## Perguntas frequentes

**Minha logo sumiu no fundo escuro. O que faço?** Envie uma versão da logo que tenha boa leitura sobre o fundo do modelo: clara para Aurora e Palco, escura para Editorial. Ou mude o **Modo claro ou escuro**. A imagem é uma só para os quatro modelos.

**Quero a tela de login na minha cor, mas a área do aluno em outra.** Defina a **Cor de destaque** aqui. Com ela preenchida, as telas de acesso não seguem a cor da área do aluno.

**Escolhi uma cor e a pré-visualização não mudou.** A pré-visualização usa as cores já salvas. Clique em **Salvar agora** e abra a pré-visualização de novo.

**Mudei o modelo e meu código personalizado quebrou a tela.** Códigos feitos para o modelo Clássico podem depender da estrutura antiga. Revise o código em **Configurações > Código personalizado** ou volte ao Clássico.