Hero Section

Hero section é a primeira seção visível de uma página, ocupando toda ou boa parte da tela inicial sem necessidade de rolagem. Comunica de forma imediata o que o site oferece, para quem e por que vale a atenção, geralmente com headline, subheadline, imagem de destaque e CTA. É a seção mais importante de qualquer landing page — onde o visitante decide em segundos se continua ou sai.

O que é hero section?

Hero section é o nome técnico para a seção de abertura de uma página web. O termo “hero” vem do contexto editorial: a imagem ou seção que carrega o peso visual principal, como o herói de uma história. Em design web, é o espaço onde a primeira impressão acontece.

Quando alguém abre uma página, a hero section é o que aparece nos primeiros 100% da viewport (acima da “dobra”, em referência ao jornal impresso). Tudo que vier depois exige rolagem. E menos de 30% dos visitantes rolam até o fim da página em sites institucionais.

Por isso, a hero é onde a página precisa entregar seu valor mais alto. Headline clara que diz o que o produto/serviço faz. Subhead que adiciona contexto ou prova. CTA que indica próximo passo. Visual que reforça a mensagem.

Em sites WordPress, a hero section é construída tipicamente como primeiro bloco no Elementor, primeira seção no Gutenberg ou primeiro template part em temas FSE. É renderizada antes de qualquer outra coisa e impacta diretamente a métrica LCP dos Core Web Vitals.

Anatomia de uma hero section eficiente

Uma hero section bem estruturada tem cinco componentes claros, cada um com função específica.

Headline (proposta de valor)

A headline é a frase mais importante do site. Em uma linha, comunica o que você oferece e para quem. Boa headline responde: “o que isso é, e por que devo me importar?”. “Hospedagem WordPress gerenciada para agências brasileiras” é melhor que “Bem-vindo à nossa empresa”. Tamanho típico: 36-60px no desktop, peso bold ou black.

Subheadline (contexto)

A subhead amplifica a headline com 1-2 linhas adicionais. Pode adicionar contexto, prova ou diferencial. Continuando o exemplo: “Stack profissional, suporte 24/7 e migração sem dor para mais de 500 agências em todo o Brasil”. Tamanho típico: 18-24px no desktop, peso regular.

Visual (imagem, vídeo, ilustração)

Elemento visual que reforça a mensagem. Imagem do produto sendo usado, screenshot de interface, ilustração conceitual, vídeo curto. Não use imagens genéricas de banco de imagens — visitante reconhece, e isso quebra a confiança. Visual próprio cria autenticidade.

CTA principal

Botão com ação clara. Texto ativo (“Quero conhecer”, “Começar agora”, “Falar com vendas”) em vez de passivo (“Saiba mais”, “Clique aqui”). Cor de contraste forte com o fundo da hero. Tamanho generoso (mínimo 48px de altura para ser clicável em mobile). Veja boas práticas em CTA.

Prova social opcional

Logos de clientes, número de usuários, depoimento curto. Adiciona credibilidade imediata. “Mais de 50.000 sites WordPress” ou “Indicado por agências como X, Y e Z”. Posicionado abaixo do CTA ou em barra discreta acima dele.

Tipos de hero section

Cinco formatos cobrem 90% dos casos de uso. A escolha depende do tipo de site e da mensagem.

Hero estático com imagem

O formato mais comum. Imagem grande de fundo (do produto, time, ambiente) com headline e CTA sobrepostos. Performance excelente quando a imagem é otimizada (WebP, lazy loading não aplicável aqui pois é above the fold). Funciona para 80% dos sites institucionais.

Hero com vídeo de fundo

Vídeo em loop tocando como fundo, com texto sobreposto. Visualmente impactante, mas pesado para performance. Comprimi vídeo, use formato MP4 + WebM, autoplay muted, exibir thumbnail antes do vídeo carregar. Indicado quando o produto é dinâmico (apps, SaaS, mídia).

Hero ilustrado

Ilustração custom no lugar de foto. Comum em SaaS modernos (Stripe, Slack, Linear). Permite mostrar conceitos abstratos que foto não consegue. Custo mais alto (precisa contratar ilustrador) mas diferenciação visual forte.

Hero minimalista (texto)

Sem imagem, só tipografia bem trabalhada e espaço em branco. Estilo “editorial” usado por Apple, Medium, Notion. Ideal para marcas premium ou conteúdo editorial onde o foco é mensagem, não visual.

Hero com formulário

Formulário curto (e-mail + botão) integrado na hero. Padrão em SaaS focados em trial gratuito. Reduz fricção: o usuário converte na própria hero sem rolagem. Funciona quando a oferta é clara e de baixo compromisso.

Como criar hero section no WordPress

Em Elementor, comece com seção full-width, defina altura mínima de 100vh (full viewport), adicione coluna interna. Insira heading (H1), parágrafo (subhead), botão (CTA). Configure imagem ou vídeo de fundo na seção. Use Edit Layout para responsividade.

Em Gutenberg, use bloco “Cover” para a base com imagem de fundo. Adicione blocos “Heading”, “Paragraph” e “Button” dentro. Ajuste cores via Settings, padding via Cover. Para opções avançadas, use temas FSE como Twenty Twenty-Five com bloco “Group” personalizado.

Em page builders alternativos como Bricks Builder e Brizy, o processo é similar. Sempre comece pela estrutura semântica (H1 + parágrafo + botão), depois adicione visual.

Para imagens, use formato WebP, dimensão correta (1920×1080 para desktop, 768×1024 para mobile via art direction), lazy loading desligado para a hero (é above the fold, precisa carregar primeiro). Defina width e height nas tags img para evitar layout shift.

Erros comuns em hero section

Erro um: headline genérica. “Bem-vindo ao nosso site” ou “Soluções inovadoras para o seu negócio” não dizem nada. Visitante sai imediatamente. Headline precisa ser específica e diferenciada.

Erro dois: CTA fraco. “Saiba mais” é passivo e pouco motivador. “Falar com especialista”, “Começar trial gratuito”, “Ver demonstração” criam mais ação. Texto direto vence sempre.

Erro três: imagem irrelevante. Foto de banco de imagens com pessoas sorrindo na frente de um laptop é cliché. Visitante reconhece e quebra a confiança imediatamente. Use foto da empresa real, screenshot do produto, ilustração custom.

Erro quatro: muita informação. Hero tentando explicar tudo (3 parágrafos de texto, 5 ícones de feature, 4 botões diferentes) sobrecarrega. Hero é vitrine, não brochura. Foque no essencial: o que oferece, para quem, próximo passo.

Erro cinco: ignorar mobile. Hero linda em desktop, com texto cortado em mobile. Sempre teste em viewport real (DevTools modo responsive não é o suficiente). Como 60% do tráfego é mobile, hero quebrada significa metade dos visitantes saindo.

Hero section e Core Web Vitals (LCP)

A hero é a parte da página que mais afeta a métrica LCP (Largest Contentful Paint). LCP mede quando o maior elemento visual termina de carregar — geralmente é a imagem ou texto da hero. LCP ruim derruba ranking SEO.

Para LCP rápido na hero: imagem em formato moderno (WebP/AVIF), tamanho adequado para a viewport (não usar imagem 4K em hero de 1920px), preload do recurso crítico no head, sem lazy loading na imagem da hero (precisa carregar imediatamente).

Vídeos de fundo são pesados. Se usar, comprima agressivamente (taxa de bitrate baixa, resolução reduzida em mobile), use poster image enquanto carrega, e considere desabilitar autoplay em mobile para preservar bateria e dados do visitante.

Tipografia também afeta LCP. Fontes web carregadas via Google Fonts ou similar adicionam delay. Use font-display: swap, preload das fontes críticas, e considere carregar variáveis font subsets (apenas pesos usados na hero).

Combine otimização da hero com práticas de Core Web Vitals e landing page para resultados sólidos.

Perguntas frequentes

Quanto tempo o usuário passa na hero section? Em média 5-10 segundos. Estudos de eyetracking mostram que metade dos visitantes decidem se continuam ou saem nesse intervalo. Por isso a importância de mensagem clara e CTA visível imediatamente.

Hero section deve ter slider? Em geral, não. Sliders rotativos performam pior que hero estática em testes de conversão — a maioria dos usuários nem vê o segundo slide. Se precisa apresentar múltiplas mensagens, considere seções separadas em vez de slider.

Hero section afeta SEO? Indiretamente. Headline na hero geralmente é o H1 da página, sinal forte para SEO. Imagem da hero afeta LCP, que é fator de ranking. Texto da hero, sendo o mais visível, tem peso editorial maior. UX da hero impacta tempo na página e taxa de rejeição.

Crie hero sections que convertem: conheça os planos PRO da FULL Services. Entregamos WordPress com Elementor PRO já configurado, tema otimizado e landing pages profissionais por padrão.