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, em Acessos e segurança.
- Cadastro gratuito: Configurações → Alunos → Cadastro gratuito (Configurações de alunos).
- Rodapé das telas de acesso: Configurações → Área do aluno → Rodapé (Área do aluno).
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:
- No painel, abra Configurações → Telas de acesso.
- Em Modelo, clique no cartão do modelo. A descrição abaixo dos cartões muda com a escolha.
- Clique em Pré-visualizar.
- Na faixa da pré-visualização, alterne entre as telas.
- Volte ao painel e ajuste Logo, Formulário e botões e Painel visual.
- 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). 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 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.