Gerador de seção hero (topo da página)

Gerador de seção hero (topo da página): para que serve

A seção hero é a primeira tela do site, onde a pessoa decide em segundos se continua. Ela precisa de uma promessa clara, uma explicação curta e uma ação principal.

O gerador monta o hero com imagem de fundo e camada escura ajustável para o texto ficar legível, ou com texto e imagem lado a lado, título com tamanho fluido, botão principal e secundário. A imagem entra como img com fetchpriority=high e sem carregamento preguiçoso, porque normalmente é o maior elemento da primeira tela (LCP).

Como usar

1. Escreva o título, o subtítulo e os botões.
2. Escolha a imagem, o layout e as cores.
3. Copie o código e cole no topo da página.

Quando usar

• Página inicial de comércio local.
• Landing page de campanha.
• Página de lançamento.

Perguntas frequentes

O que colocar no hero?

O resultado que o cliente quer, em uma frase (o título), como você entrega (o subtítulo) e uma única ação principal, como "Pedir orçamento no WhatsApp". Um segundo botão discreto é opcional. Tudo deve caber na primeira tela, sem precisar rolar.

Como a imagem não deixa o site lento?

A imagem do hero costuma ser o maior elemento da primeira tela, o que o Google mede como LCP. O código usa uma tag img (não background-image), com fetchpriority=high e sem loading=lazy, para o navegador baixá-la primeiro. Use a imagem em WebP e no tamanho certo.

E o texto em cima da foto?

A camada escura (overlay) por cima da imagem garante contraste do texto branco em qualquer foto. Ajuste a opacidade até o texto ficar fácil de ler; 45% a 60% costuma bastar.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas