Imagens do curso (thumbnail, capa, certificado)
cada curso usa 3 imagens distintas (thumbnail da vitrine, capa interna do AVA, imagem do certificado) — saber a especificação correta evita layout torto e perda de conversão.
# Imagens do curso (thumbnail, capa, certificado)
⏱️ 6 min de leitura · 🏷️ Cursos · 👤 Admin de Loja · Admin de Curso · 🆓 Todos os planos
Em 1 frase: cada curso usa 3 imagens distintas (thumbnail da vitrine, capa interna do AVA, imagem do certificado) — saber a especificação correta evita layout torto e perda de conversão.
As 3 imagens do curso
| Imagem | Onde aparece | Tamanho | Formato | |---|---|---|---| | Thumbnail | Vitrine, busca, compartilhamento social | 1280×720 | JPG ou PNG | | Capa interna | Header dentro do AVA (após matrícula) | 1920×400 | JPG ou PNG | | Imagem do certificado | Certificado emitido (PDF) | 1200×300 ou full | PNG transparente |
1. Thumbnail
A imagem mais importante do curso. É o "rosto" dele em todo lugar.
Onde aparece:- Vitrine pública da loja
- Busca interna
- Compartilhamento WhatsApp/Slack/Telegram (`og:image`)
- Email de matrícula
- Lista "Meus cursos" do aluno
- JPG (foto) ou PNG (com elementos gráficos)
- Tamanho: 1280×720 pixels (proporção 16:9)
- Peso: até 500 KB (otimize com TinyPNG)
- Texto legível mesmo em preview pequeno (~300×170px)
Boas práticas
- ✅ Headline curta (3-6 palavras)
- ✅ Foto autêntica (do professor ou tema) > foto stock genérica
- ✅ Cor de fundo da marca (consistência)
- ✅ Logo do curso/marca em canto (não centro)
- ✅ Versão clara e escura disponíveis
Exemplos
✅ Bom:``` ┌─────────────────────────────────┐ │ │ │ MARKETING DIGITAL │ │ do Zero ao Avançado │ │ │ │ [foto do professor à direita] │ └─────────────────────────────────┘ ```
❌ Ruim:``` ┌─────────────────────────────────┐ │ Marketing Digital com técnicas │ │ avançadas e bônus exclusivos │ │ + 5 e-books grátis e suporte │ │ vitalício em comunidade VIP │ └─────────────────────────────────┘ ``` (Texto pequeno demais, ilegível em mobile)
Onde encontrar
- Unsplash — fotos profissionais
- Pexels — alternativa gratuita
- DALL-E 3 / Midjourney — gerar com IA
- Canva — templates prontos para thumbnail
💡 Quer criar várias rapidamente? Use o add-on de IA da evob para gerar thumbnail a partir do nome do curso.
📖 Saiba mais: IA generativa para descrição e imagens (em produção)
2. Capa interna
Aparece dentro do AVA quando o aluno entra no curso (já matriculado). É o "ambiente visual" do estudo.
Onde aparece:- Header dentro do AVA
- Página inicial do curso (welcome)
- JPG ou PNG
- Tamanho: 1920×400 pixels (mais larga, menos alta)
- Peso: até 400 KB
Boas práticas
- ✅ Imagem mais sóbria que o thumbnail (não compete com conteúdo)
- ✅ Sem texto ou texto mínimo (header já mostra nome do curso por cima)
- ✅ Cor de fundo complementar ao tema visual da loja
- ❌ Foto cheia de detalhes (cansa, atrapalha leitura)
💡 Diferença filosófica: thumbnail "vende" (chama atenção), capa interna "abriga" (cria ambiente). Use linguagens visuais diferentes.
3. Imagem do certificado
A imagem do fundo do certificado que o aluno baixa em PDF.
Especificação:- PNG transparente (preferível) ou JPG
- Tamanho: 1200×848 (proporção A4 paisagem) ou 1200×300 (apenas header)
- Peso: até 1 MB (certificado é PDF gerado, não comprimido)
Tipos de imagem
#### Opção A — Certificado completo
A imagem é o certificado inteiro já com layout. As variáveis dinâmicas (nome do aluno, data, carga horária) ficam por cima.
- Vantagem: visual 100% controlado por designer
- Desvantagem: muda layout = recriar imagem
#### Opção B — Apenas header (recomendado)
A imagem é só o topo do certificado (com logo, padrão decorativo). O resto é montado pela evob:
- Nome do curso
- Nome do aluno
- Carga horária
- Data
- Assinatura do professor
- QR Code de validação
- Vantagem: você muda nome do curso ou professor sem refazer imagem
- Desvantagem: visual menos personalizado
💡 Para a maioria dos casos, opção B funciona. Use opção A só se você tem designer dedicado.
📖 Saiba mais: Editor visual de certificado (em produção) · Variáveis dinâmicas (em produção)
Como subir
- Dashboard do Curso → Configurações > Visual
- Para cada slot, clique em Subir imagem
- Pré-visualize
- Salve
⚠️ Cache pode atrapalhar. Se trocou e ainda mostra antiga, force refresh (`Ctrl+Shift+R` ou `Cmd+Shift+R`).
Multi-curso: imagens consistentes
Se você tem vários cursos, mantenha estilo visual consistente:
- Mesma família de cores
- Mesmo tom de filtro nas fotos
- Mesma posição do logo
- Mesma fonte (se usar texto na thumbnail)
Aluno reconhece "isso é da mesma escola" sem precisar ler o nome.
💡 Crie um template no Figma/Canva com 3-5 variações. Use sempre o mesmo template e troque só conteúdo.
Geração com IA (add-on)
A evob tem add-on IA generativa. Para curso:
- Configurações > Visual > Gerar thumbnail com IA
- Descreva o tema ("marketing digital, profissional jovem, fundo roxo")
- IA gera 4 opções
- Escolha a melhor
- Edite se quiser (recortar, adicionar texto)
💡 Útil quando: você não tem designer + precisa criar 5+ thumbnails rapidamente.
📖 Saiba mais: IA gera descrição e imagens (em produção)
Boas práticas resumidas
✅ Faça
- Otimize sempre (TinyPNG, Squoosh)
- Versão dark disponível para modo escuro
- Teste em mobile real depois de subir
- Atualize sazonalmente (Black Friday, lançamento)
❌ Não faça
- ❌ JPG com fundo branco (vaza em fundos coloridos)
- ❌ Texto < 28px no thumbnail (ilegível em preview)
- ❌ Foto stock genérica óbvia (perde credibilidade)
- ❌ Mesma imagem em thumbnail E capa (conflita visualmente)
- ❌ PNG > 2 MB (carrega lento)
Erros comuns
"Thumbnail aparece esticado"
Fora da proporção 16:9. Use exatamente 1280×720.
"Capa interna corta o título"
Capa muito alta (proporção errada). Use 1920×400, não 1920×1080.
"Certificado sai com fundo cinza"
Imagem do certificado é JPG. Troque por PNG transparente para variáveis ficarem visíveis.
"Imagem demora para aparecer"
Tamanho > 1 MB. Comprima.
"Preview no WhatsApp continua antiga"
Cache do WhatsApp/Facebook. Use o Facebook Debugger para forçar reescaneo.
"Tenho thumbnail bonito mas conversão é baixa"
Não é só estética — pode ser:
- Texto da headline ruim (revise nome do curso)
- Promessa não clara (revise descrição curta)
- Preço desalinhado com o público (revise oferta)
Próximos passos
- 📖 Editor de certificado (em produção)
- 📖 IA gera descrição e imagens (em produção)
Foi útil este artigo? 👍 👎 Falar com CS (em produção) · Pergunte ao Vob 🤖 (em produção) Última atualização: 2026-05-01