{"id":55025,"date":"2023-01-26T07:12:09","date_gmt":"2023-01-26T15:12:09","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=55025"},"modified":"2025-05-26T12:58:12","modified_gmt":"2025-05-26T19:58:12","slug":"design-do-heroi-da-pagina-inicial","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-do-heroi-da-pagina-inicial\/","title":{"rendered":"Como criar um Hero de Homepage que chame a aten\u00e7\u00e3o (+25 Exemplos)"},"content":{"rendered":"\n

Se voc\u00ea deseja que novos visitantes continuem olhando para o seu site, voc\u00ea precisar\u00e1 capturar rapidamente a aten\u00e7\u00e3o deles. Sem um conte\u00fado envolvente acima da dobra, os usu\u00e1rios podem se entediar antes de poderem conferir seus produtos ou ler suas postagens no blog.<\/p>\n\n\n\n

Felizmente, voc\u00ea pode usar uma imagem de destaque como o primeiro elemento visual no seu site. Quando voc\u00ea inclui fotos de alta qualidade, fontes \u00fanicas<\/a> e um layout polido, voc\u00ea pode deixar os visitantes com uma excelente primeira impress\u00e3o.<\/p>\n\n\n\n

Neste post, explicaremos o que \u00e9 uma imagem de destaque e como voc\u00ea pode desenhar uma para o seu site. Em seguida, mostraremos 25 exemplos para fornecer alguma inspira\u00e7\u00e3o. Vamos come\u00e7ar!<\/p>\n\n\n\n

O que \u00e9 um Her\u00f3i?<\/h2>\n\n\n\n

Um her\u00f3i \u00e9 um banner maior que \u00e9 exibido no topo de um site acima da dobra. Este \u00e9 o primeiro elemento que os visitantes ver\u00e3o acima da dobra. Ele geralmente apresenta uma foto, v\u00eddeo, gr\u00e1fico ou ilustra\u00e7\u00e3o junto com uma declara\u00e7\u00e3o ou CTA para capturar imediatamente os visitantes.<\/p>\n\n\n\n\n\n

\n\t\n\t\t<\/svg>\n\t\t<\/span>\n\t\t<\/svg>\n\t<\/a>\n

O que \u00e9 um her\u00f3i?<\/h3>\n

Uma imagem de her\u00f3i, ou se\u00e7\u00e3o de her\u00f3i, \u00e9 um grande banner destacado no topo de um site. Pode ser o primeiro elemento que os visitantes veem devido ao seu posicionamento proeminente.<\/p>\n \n Leia Mais <\/a>\n\n<\/div>\n\n\n\n

Imagens de destaque s\u00e3o uma \u00f3tima maneira de chamar aten\u00e7\u00e3o. Nos primeiros segundos cr\u00edticos ap\u00f3s visitar seu website, os usu\u00e1rios querem ser envolvidos por design web de alta qualidade<\/a>. As imagens de destaque podem imediatamente deixar uma impress\u00e3o positiva do seu neg\u00f3cio ou blog.<\/p>\n\n\n\n

J\u00e1 que aparecem no topo da p\u00e1gina inicial<\/a>, as se\u00e7\u00f5es de destaque podem ter um grande impacto em seu site. Quando usadas corretamente, s\u00e3o capazes de transmitir tudo o que os visitantes precisam saber sobre sua marca. Isso pode evitar sobrecarregar os novos visitantes com muitas informa\u00e7\u00f5es de uma s\u00f3 vez.<\/p>\n\n\n\n

Em uma se\u00e7\u00e3o de her\u00f3i, voc\u00ea pode incluir um call to action (CTA)<\/a> para motivar os usu\u00e1rios a visitarem outra p\u00e1gina do seu site. Her\u00f3is interativos tamb\u00e9m podem apresentar carross\u00e9is, sliders e outras anima\u00e7\u00f5es<\/a>. Em \u00faltima an\u00e1lise, as imagens de her\u00f3i visam ser atrativas, envolventes e chamativas.<\/p>\n\n\n\n

Como Projetar um Her\u00f3i de Homepage que Capta a Aten\u00e7\u00e3o<\/strong><\/h2>\n\n\n\n

Agora que voc\u00ea sabe o que s\u00e3o imagens de her\u00f3i, vamos discutir algumas pr\u00e1ticas recomendadas para cri\u00e1-las. Assim, voc\u00ea poder\u00e1 projetar cabe\u00e7alhos de her\u00f3i que atraem usu\u00e1rios para o seu site.<\/p>\n\n\n\n

1. Encontre Imagens de Alta Qualidade<\/h3>\n\n\n\n

A imagem de destaque ser\u00e1 a primeira coisa que os visitantes ver\u00e3o na sua p\u00e1gina inicial, ent\u00e3o voc\u00ea precisar\u00e1 encontrar uma foto de alta qualidade. Se a imagem estiver muito granulada ou n\u00e3o estiver comprimida para carregamento r\u00e1pido, isso pode prejudicar a experi\u00eancia do usu\u00e1rio (UX)<\/a> no seu site.<\/p>\n\n\n\n

Para obter imagens, voc\u00ea pode usar fotos de banco de imagens em sites como Unsplash<\/a>. Esta plataforma fornece fotos de alta resolu\u00e7\u00e3o gratuitas sem prote\u00e7\u00e3o de direitos autorais:<\/p>\n\n\n\n

\"Her\u00f3i<\/figure>\n\n\n\n

Lembre-se de que voc\u00ea tamb\u00e9m pode usar designs gr\u00e1ficos e v\u00eddeos em vez de fotos est\u00e1ticas. Isso pode ajudar seu site a se destacar dos seus concorrentes.<\/p>\n\n\n\n

Junto com imagens de estoque, Pexels<\/a> possui muitos v\u00eddeos gratuitos que voc\u00ea pode explorar. Assim como com as imagens, voc\u00ea poder\u00e1 personalizar o tamanho antes de baixar:<\/p>\n\n\n\n

\"Pexels<\/figure>\n\n\n\n

Para designs gr\u00e1ficos, recomendamos usar uma ferramenta flex\u00edvel como Canva<\/a>. Isso vem com milhares de modelos iniciais para banners heroicos:<\/p>\n\n\n\n

\"Her\u00f3i<\/figure>\n\n\n\n

Por \u00faltimo, o WordPress fornece cabe\u00e7alhos pr\u00e9-projetados em sua Biblioteca de Padr\u00f5es de Blocos<\/a>. Ao projetar sua p\u00e1gina inicial, voc\u00ea pode inserir facilmente essas se\u00e7\u00f5es de her\u00f3i de largura total. Se decidir cri\u00e1-las manualmente, ter\u00e1 que usar cont\u00eaineres HTML<\/a> em vez disso:<\/p>\n\n\n\n

\"Padr\u00f5es<\/figure>\n\n\n\n

Lembre-se, enquanto voc\u00ea procura por imagens, voc\u00ea vai querer lembrar do branding do seu site<\/a>. Mesmo que voc\u00ea encontre uma foto de alta qualidade, certifique-se de que ela seja relevante para o seu nicho.<\/p>\n\n\n\n

Al\u00e9m disso, considere se deseja evocar uma emo\u00e7\u00e3o, promover um produto ou alcan\u00e7ar outro objetivo espec\u00edfico. E, claro, se for apropriado e seu or\u00e7amento permitir, voc\u00ea pode considerar a contrata\u00e7\u00e3o de um fot\u00f3grafo profissional para criar imagens dos seus produtos ou servi\u00e7os.<\/p>\n\n\n\n

2. Adicione Texto Convincente e Informativo<\/strong><\/h3>\n\n\n\n

Muitos sites n\u00e3o apresentam apenas uma imagem na se\u00e7\u00e3o principal. Para gerar novos leads<\/a> e convers\u00f5es, eles frequentemente adicionam um texto sobreposto. Incluindo promo\u00e7\u00f5es de produtos e chamadas para a\u00e7\u00e3o, um her\u00f3i pode alcan\u00e7ar os mesmos objetivos que uma p\u00e1gina de destino<\/a>.<\/p>\n\n\n\n

Embora o texto de destaque deva variar dependendo dos seus objetivos, aqui est\u00e3o algumas coisas a considerar ao escrever o seu texto:<\/p>\n\n\n\n