Banner da categoria
banner da categoria personaliza a identidade visual de cada grupo de cursos — sem ele, todas as categorias parecem iguais e perdem força.
Onde aparece
``` ┌─────────────────────────────────────────┐ │ [Banner 1920×400 — imagem + título] │ │ │ │ Marketing Digital │ │ X cursos para você dominar marketing │ └─────────────────────────────────────────┘
[Cards dos cursos da categoria abaixo] ```
Aparece:
- ✅ No topo da página da categoria (`/marketing`)
- ✅ Card miniatura na homepage da loja
- ✅ Quando aluno navega pela categoria no app mobile
Especificações
| | Desktop | Mobile | |---|---|---| | Dimensão | 1920×400 px | 375×250 px | | Formato | PNG, JPG, WebP | PNG, JPG, WebP | | Tamanho max | 500 KB | 300 KB | | Razão | 4.8:1 | 1.5:1 |
Onde subir
Lojas > [loja] > Marca > Categorias > [categoria] > BannerConteúdo do banner
Elementos recomendados
- Imagem temática (laptop para programação, espaço criativo para design)
- Título da categoria (sobreposto na imagem)
- Subhead curto opcional ("X cursos disponíveis")
Onde NÃO incluir
- ❌ CTA / botão (banner de categoria é informacional)
- ❌ Preço de cursos
- ❌ Texto longo
💡 Banner = identidade visual. Cards dos cursos abaixo vendem.
Estilo por categoria
Categoria "Marketing"
- Imagem: laptop com gráficos
- Cor: vibrante (laranja, azul)
- Tom: energético
Categoria "Programação"
- Imagem: código, dev workspace
- Cor: escura (verde matrix, azul navy)
- Tom: técnico
Categoria "Design"
- Imagem: paleta, mesa criativa
- Cor: pastel ou neon
- Tom: estético
💡 Cada categoria com identidade visual diferente ajuda aluno reconhecer rapidamente.
Imagem — onde encontrar
✅ Boas fontes
- Unsplash, Pexels (gratuitas)
- Banco da empresa (foto autoral)
- Designer freelancer (Workana, Fiverr)
❌ Evite
- Stock genérico ("homem terno apontando")
- Imagem com marca d'água
- Foto pixelada
Texto sobre imagem
Boas práticas
``` Tamanho: 48-72px (desktop) Cor: branca com sombra escura ou contraste alto Posicionamento: à esquerda ou centralizado ```
Cuidado com legibilidade
- Imagem com muitos detalhes → adicione overlay escuro atrás do texto
- Imagem clara → texto escuro funciona
- Imagem escura → texto branco funciona
💡 Teste em mobile. Texto pequeno demais é invisível.
Banner sem texto vs com texto
Banner com texto sobreposto
- ✅ Aluno entende imediatamente
- ❌ Texto pode ficar ilegível em mobile
Banner sem texto (apenas imagem)
- ✅ Visualmente limpo
- ❌ evob renderiza nome da categoria automaticamente abaixo
💡 Recomendação: imagem + nome renderizado pela evob. Você não escreve texto na imagem; sistema mostra o nome.
Banner em vídeo (Pro+)
Disponível em Pro+. Mesmo padrão do banner da loja:
- 5-10s de loop
- Mute por padrão
- Fallback estático
📖 Saiba mais: Banner em vídeo
Fallback se sem banner
Se você não subir banner:
``` [Cor sólida da paleta + nome da categoria + ícone] ```
evob aplica fallback decente, mas com banner converte mais.
Banner duplicado entre categorias
❌ Não faça:
``` "Marketing" → mesma imagem "Programação" → mesma imagem "Design" → mesma imagem ```
Aluno percebe e perde diferenciação visual.
Boas práticas
✅ Faça
- Imagem temática por categoria
- Diferenciação visual entre categorias
- Mobile responsivo (suba 2 versões)
- Comprima (max 500KB)
- Foto real se sua marca faz isso bem
❌ Não faça
- ❌ Stock genérico repetido
- ❌ Banner sem categoria associada
- ❌ Texto na imagem (deixa evob renderizar)
- ❌ Imagem >2MB (lenta em mobile)
- ❌ Banner igual em 3 categorias
Erros comuns
"Banner aparece cortado em mobile"
Suba versão mobile específica (375×250 px). Sem versão mobile, desktop é redimensionado e pode cortar pontos importantes.
"Imagem fica pixelada em desktop"
Resolução baixa. Suba 1920×400 ou 2x retina (3840×800).
"Banner não atualiza após upload"
Cache. Aguarde 5 min ou Ctrl+F5.
"Categoria sem banner aparece feia"
Configure fallback em Marca > Categorias > Padrão. Aplica cor + ícone genérico.
"Quero banner que muda por dia/hora"
Não disponível. Use vigência para programar campanhas (banner BF na semana de novembro).
📖 Saiba mais: Validade e agendamento
Próximos passos
Foi útil este artigo? 👍 👎 Falar com CS (em produção) · Pergunte ao Vob 🤖 (em produção) Última atualização: 2026-05-02