# Banners

> Os banners da área do aluno: o tipo de cada modelo de navegação, o que acontece no clique, as imagens, o vídeo de fundo, as vitrines e a ordem.

Um banner é uma faixa na área do aluno que leva o aluno a um destino: um produto, uma página externa ou nenhum. Ele não dá acesso a nada. Os banners ficam em **Conteúdo > Banners**.

## Como funciona

**A regra mais importante:** o tipo de banner depende do modelo de navegação da conta. Você escolhe o modelo em **Configurações > Área do aluno**, no campo **Modelo de navegação**.

| Tipo de banner | Aparece no | O que é |
|---|---|---|
| **Banner completo** | **Modelo Cademí** | A faixa do estilo streaming: imagem ou vídeo de fundo, logo, título, texto e botão. |
| **Imagem** | **Modelo Educacional** | Uma imagem para computador e outra para celular. |
| **HTML personalizado** | **Modelo Educacional** | Um código HTML seu, mostrado na área do aluno. |

Um banner do outro modelo fica salvo, mas não aparece. A lista mostra **Não exibido no estilo atual**. A edição explica como trocar o formato.

O banner tem dois status: **Publicado** e **Rascunho**. O status fica no selo da lista e no cabeçalho da edição. Em rascunho, o banner some para os alunos. A prévia do administrador ainda o mostra.

## Passo a passo

### Criar um banner

1. Abra **Conteúdo > Banners**.
2. Clique em **Novo Banner**.
3. Preencha **Nome**. Ele só identifica o banner no painel.
4. No Modelo Educacional, escolha o **Formato**: **Imagem** ou **HTML personalizado**.
5. Clique em **Salvar**.

A edição do banner abre em seguida.

### Escolher o que acontece no clique

O painel **Ação ao clicar** não existe no **HTML personalizado**, porque o HTML traz os próprios links. Nos outros, escolha em **Ao clicar no banner**:

- **Não fazer nada**.
- **Abrir um produto**: escolha o **Produto de destino**. O aluno sem acesso vai para a oferta do produto. Se não há oferta, a tela mostra **Oferta não configurada.**, com um atalho para preencher.
- **Abrir página externa**: preencha o **Endereço de destino** completo, com https://.

Se a ação não é **Não fazer nada**, escolha em **Abrir link em**: **Mesma janela** ou **Nova aba**.

### Montar um Banner completo

- **Conteúdo do banner**:
  - **Logo**, em PNG até 300 KB, de preferência horizontal;
  - **Título** e **Texto**, cada um com uma cor;
  - **Exibir sombra nos textos**;
  - **Texto do botão**. Vazio, o botão some;
  - **Cores do botão**.
- **Imagens de fundo**: **Imagem para desktop** (JPG até 800 KB, 1920 × 1080 px) e **Imagem para celular** (JPG até 800 KB, 600 × 1050 px).
- **Vídeo de fundo (opcional)**:
  - **URL do vídeo**: a URL completa de um vídeo do YouTube ou do Vimeo;
  - **URL do vídeo para celular**. Vazia, o celular usa o mesmo vídeo;
  - **Exibir sobreposição do vídeo**: uma cor com transparência, para os textos ficarem legíveis;
  - **Som do vídeo**: **Com som** ou **Sem som**. Os navegadores só tocam o vídeo sozinho quando ele está sem som;
  - **Ao terminar o vídeo**: **Repetir** ou **Parar**.
- **Aparência**: **Altura do banner** em porcentagem da tela, **Exibir degradê inferior**, **Cor do menu sobre o banner** e **Reduzir conteúdo durante o vídeo**.

### Montar um banner de Imagem ou de HTML

- **Imagem**: **Imagem para desktop** (JPG até 1 MB, 1920 × 1080 px) e **Imagem para celular** (JPG até 1 MB, 600 × 1050 px).
- **HTML personalizado**: cole o **Código HTML**.
- **Exibição**: marque as vitrines em que o banner aparece. Sem nenhuma marcada, ele aparece em todas.

Salve pela barra no rodapé.

### Ordenar, duplicar e excluir

- Arraste os banners pela alça para mudar a ordem.
- **...** > **Duplicar** cria uma cópia.
- **...** > **Excluir** manda o banner para a lixeira.

Para trazer de volta, abra a **Lixeira** no canto da tela.

## Bom saber

- **Banner completo sem vitrines.** O **Banner completo** não tem a escolha de vitrines. No Modelo Cademí, ele é a faixa da página inicial.
- **Imagem de fundo com vídeo.** Envie a imagem de fundo mesmo com vídeo. Ela fica atrás do vídeo enquanto ele carrega. Sem a imagem de celular, o celular usa a de computador.
- **Banner do produto.** Um produto também pode ter um banner próprio, no topo da página dele. As opções são parecidas com as do banner completo. Veja [Página do produto e página da aula](https://help.cademi.cloud/pt/conteudo/pagina-do-produto-e-da-aula.md).
- **Banners do outro modelo.** Trocar o **Modelo de navegação** da conta não apaga os banners do outro modelo. Eles só deixam de aparecer, até você trocar o formato de cada um.

## Perguntas frequentes

**Criei um banner e o aluno não vê.** Confira três coisas:

1. O status é **Publicado**.
2. O tipo combina com o modelo de navegação da conta.
3. Num banner de **Imagem** ou **HTML personalizado**, as vitrines marcadas em **Exibição** estão certas.

**O banner aparece como um espaço em branco.** Falta a imagem de fundo. Envie a **Imagem para desktop** e a **Imagem para celular** antes de publicar.

**Quero pôr um vídeo no banner, mas a opção não aparece.** O vídeo só existe no **Banner completo**, do Modelo Cademí. Os banners de **Imagem** e de **HTML personalizado** não têm vídeo de fundo.