Banners: o que são e onde ficam
Existem dois tipos de banner, os do carrossel da página inicial, cadastrados no admin, e o componente Banner, colocado em qualquer página pelo Builder.
Os dois tipos
| Banners do carrossel | Componente Banner | |
|---|---|---|
| Onde se cadastra | Plataforma > Configuração > Banner, no admin | No editor de página do Builder |
| Onde aparece | No componente Carrossel das páginas, em geral no topo da página inicial | No ponto da página em que você soltar o componente |
| Quantos | Vários, que se alternam | Uma imagem por componente |
| Formato | Imagem, vídeo ou GIF | Imagem |
| Texto e botões | Título, descrição e até dois botões | Não tem: só a imagem e um link |
| Período de exibição | Sim, com data e hora de início e fim | Não |
A confusão mais comum: o componente Carrossel do Builder não tem campo de imagem. Ele só define o estilo e o intervalo de rotação. As imagens que rodam nele vêm da lista do admin.
Banners do carrossel
Em Plataforma > Configuração > Banner você vê a lista Banners, com o botão + Adicionar banner. Cada banner tem:
- um nome interno e a chave Publicar banner
- o tipo: Imagem, Vídeo ou GIF
- uma versão para desktop e outra para celular
- opções que você liga conforme a necessidade: clique no banner, bloco de conteúdo (título e descrição), imagem no lugar do título, período de validade e botões
A ordem da lista é a ordem do carrossel. Arraste para reordenar.
Passo a passo em Criar um banner.
Componente Carrossel (Builder)
É ele que exibe os banners do admin. Fica no grupo Banners e Carrossel da biblioteca de componentes e, depois de solto na página, aparece com o nome "Carrossel Principal". Seus campos:
- Schema: "Standard" ou "Seção (faixa)"
- Intervalo de rotação: de 1 a 15 segundos, de meio em meio segundo, com os atalhos 3s, 5s, 7s e 10s. O padrão é 5s
- Visível para: "Todos", "Apenas logados" ou "Apenas visitantes"
- Margens e fundo
Se a página inicial não tem o componente Carrossel publicado, os banners do admin não aparecem em lugar nenhum.
Componente Banner (Builder)
Uma imagem isolada, que você posiciona entre os outros blocos de uma página. Caminho: Builder > Páginas padrão > Home (ou outra página), botão Editar página, componente Banner.
Campos:
- Schema: "Normal", "Seção (faixa)" ou "Auth Callback"
- Texto alt, URL ao clicar e Abrir em ("Mesma aba" ou "Nova aba")
- Tamanho: "Padrão" ou "Grande"
- Visível para
- Imagens: uma para Desktop e outra para Mobile
Ao enviar a imagem, você escolhe a proporção no recorte:
| Versão | Proporções | Largura máxima |
|---|---|---|
| Desktop | 16/5 (padrão), 16/7, 4/1 e 21/9 | 1920 px |
| Mobile | 4/3, 16/9, 1/1 e 4/5 | 1080 px |
Sem escolha, a versão mobile herda a proporção do desktop. Tudo o que fica fora da moldura do recorte é cortado: deixe o texto e o logo dentro dela. Para mudar a proporção depois, clique em Trocar imagem e escolha de novo.
O limite é de 10 MB por imagem, nos formatos WEBP, JPG, JPEG, PNG, GIF e SVG. JPG e PNG passam pelo recorte e são convertidos para WEBP. GIF, SVG e WEBP sobem como estão, sem recorte.
Outros banners da plataforma
| Banner | Onde fica |
|---|---|
| Banner do login | Builder > Autenticação > Login, campo Banner do login |
| Banner do admin | Builder > Aparência > Imagens, campo Banner do admin |
| Banners do produto | No admin, em Produto > Info básicas, seção "Imagens" |
| Banners da categoria | No admin, em Plataforma > Configuração > Categorias |
| Banners do professor | Builder > Educadores, botão Editar |
Qual usar
- Quer destacar lançamentos, com texto, botão e data para sair do ar: banners do carrossel.
- Quer uma imagem fixa no meio de uma página, como uma faixa de campanha ou de patrocinador: componente Banner.