# Banners

> Crie os banners do topo da tela inicial, com imagem, vídeo de fundo, textos e botão.

Os banners aparecem em destaque no topo da tela inicial da área do aluno. Podem ter imagem ou vídeo de fundo, logo, título, texto e um botão. Com mais de um banner publicado, eles giram em carrossel, com setas e marcadores.

Os banners ficam em **Conteúdo › Banners** (`/dashboard/content/banners`).

## Como criar um banner

1. Acesse **Conteúdo › Banners** e clique em **Novo Banner**;
2. Dê um nome (só para identificar no painel), escolha o **Formato** e clique em **Salvar**;
3. Na tela do banner, envie as imagens e preencha os campos;
4. Clique em **Salvar**;
5. Troque o status de **Rascunho** para **Publicado**.

:::aviso Envie a imagem antes de publicar
Um banner publicado sem imagem aparece como um espaço vazio no topo da tela inicial. Envie sempre a imagem para desktop e a imagem para celular, mesmo quando o banner tem vídeo: a imagem aparece enquanto o vídeo carrega e nos aparelhos que não reproduzem vídeo automaticamente.
:::

Banners têm só dois status: **Publicado** e **Rascunho**. Logado como administrador, você vê também os banners em rascunho na área do aluno, para conferir antes de publicar.

## Formatos

- **Banner completo**: imagem ou vídeo de fundo, com logo, título, texto e botão por cima;
- **Imagem simples**: só a imagem, que pode ser clicável.

:::embreve
O formato **HTML personalizado**. O campo de código já aparece, mas o conteúdo ainda não é exibido na área do aluno. Use *Banner completo* ou *Imagem simples*.
:::

## Ação ao clicar

Em **Ao clicar no banner**, escolha:

- **Não fazer nada**;
- **Abrir um produto**: escolha o produto. O aluno que não tem acesso a ele é levado para a URL de oferta do produto;
- **Abrir página externa**: informe o endereço completo, com `https://`.

Em **Abrir link em**, escolha **Mesma janela** ou **Nova aba**.

No banner completo, se você preencher o **Texto do botão**, o clique vale para o botão. Sem botão, o banner inteiro fica clicável.

## Conteúdo do banner (formato completo)

- **Logo**: PNG até 300 KB, de preferência horizontal;
- **Título** e **Texto**, cada um com sua cor;
- **Exibir sombra nos textos** e a **Cor da sombra**, para facilitar a leitura sobre imagens claras;
- **Texto do botão** e as cores do botão (texto, fundo e as cores ao passar o mouse). Deixe o texto vazio para não ter botão.

## Imagens de fundo

| Formato | Imagem para desktop | Imagem para celular |
|---|---|---|
| Banner completo | JPG até 800 KB, 1920 x 1080 px (16:9) | JPG até 800 KB, 600 x 1050 px (4:7) |
| Imagem simples | JPG até 1 MB, 1920 x 1080 px (16:9) | JPG até 1 MB, 600 x 1050 px (4:7) |

Se você não enviar a imagem para celular, a imagem de desktop é usada também no celular, com corte.

## Vídeo de fundo (opcional)

No banner completo, você pode usar um vídeo no lugar da imagem:

- **URL do vídeo**: link completo de um vídeo do **YouTube** ou do **Vimeo**;
- **URL do vídeo para celular**: opcional. Se ficar vazio, o mesmo vídeo vale para todos os aparelhos;
- **Som do vídeo**: *Sem som* ou *Com som*. Os navegadores só iniciam o vídeo sozinhos quando ele está sem som;
- **Ao terminar o vídeo**: *Parar* ou *Repetir*;
- **Exibir sobreposição do vídeo**: escurece o fundo para destacar os textos.

O aluno tem botões para ligar o som e pausar o vídeo.

:::dica
Prefira o **Vimeo** para vídeo de fundo: ele toca sem a interface do player. O YouTube pode mostrar elementos próprios por cima do vídeo.
:::

## Aparência

- **Exibir degradê inferior** e a **Cor do degradê**: esfuma a base do banner até o fundo da página.

:::embreve
- **Altura do banner**, **Cor do menu sobre o banner**, **Reduzir conteúdo durante o vídeo** e a **Cor da sobreposição** do vídeo.
- **Exibição por vitrine**: hoje todo banner publicado aparece no topo da tela inicial, independentemente das vitrines marcadas.
:::

## Ordem, duplicação e lixeira

- Use as setas da lista para definir a ordem do carrossel;
- **Duplicar** cria uma cópia em rascunho;
- **Excluir** manda o banner para a **Lixeira**, de onde ele pode ser restaurado.

Se a sua plataforma tem instâncias filhas, em **Herança para instâncias filhas** você escolhe se o banner aparece também nelas.

## Banner na página do produto

Cada produto pode ter o próprio banner no topo da página dele. Ele é configurado no produto, em **Configurações › Página do produto › Banner**. Veja [Produtos](/vitrines/produtos#configuracoes-pagina-do-produto).

## Saiba mais

- [Vitrines](/vitrines/vitrine)
- [Produtos](/vitrines/produtos)