{"id":4690,"date":"2022-03-02T07:01:16","date_gmt":"2022-03-02T07:01:16","guid":{"rendered":"https:\/\/vwo.com\/glossary\/hero-image\/"},"modified":"2025-06-30T06:48:20","modified_gmt":"2025-06-30T06:48:20","slug":"hero-image","status":"publish","type":"post","link":"https:\/\/vwo.com\/glossary\/br\/hero-image\/","title":{"rendered":"Hero Image"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>O que \u00e9 hero image?<\/strong><\/h2>\n\n\n\n<p>O termo \u201chero image\u201d \u00e9 usado para se referir a uma imagem grande e chamativa que cont\u00e9m texto, normalmente exibida <a href=\"https:\/\/vwo.com\/glossary\/br\/above-the-fold\/\">acima da dobra<\/a> (\u201cabove the fold\u201d) da p\u00e1gina, logo abaixo do cabe\u00e7alho do site.<\/p>\n\n\n\n<p>Na maioria das vezes, a hero image ocupa praticamente toda a largura da p\u00e1gina antes da rolagem. Os demais componentes do layout (como o bot\u00e3o de <a href=\"https:\/\/vwo.com\/glossary\/br\/call-to-action-cta\/\">call to action<\/a> e o texto) ficam posicionados no cabe\u00e7alho e sobre a hero image ou ao lado dela para criar uma composi\u00e7\u00e3o visual unificada e harmoniosa.<\/p>\n\n\n\n<p>A hero image pode ser est\u00e1tica ou interativa (v\u00eddeos e anima\u00e7\u00f5es). Ela pode apresentar uma imagem tem\u00e1tica de tecnologia, estrutura, paisagem ou at\u00e9 mesmo um modelo abstrato ou obra de arte. Seu objetivo fundamental \u00e9 estabelecer uma conex\u00e3o visual, emocional e educativa r\u00e1pida com o visitante por meio de uma imagem que chame imediatamente sua aten\u00e7\u00e3o. A ideia n\u00e3o \u00e9 explicar um tema completo, mas apresent\u00e1-lo de forma que os leitores parem de rolar a p\u00e1gina e cliquem para saber mais sobre o assunto.<\/p>\n\n\n\n<p>A hero image serve como uma introdu\u00e7\u00e3o para:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Publica\u00e7\u00f5es on-line sobre diversos temas, incluindo not\u00edcias, entretenimento e esportes.<\/li>\n\n\n\n<li>Sites de produtos de todos os tipos, desde pranchas de surfe at\u00e9 sistemas.<\/li>\n\n\n\n<li>Promo\u00e7\u00e3o de filmes, s\u00e9ries de TV ou m\u00fasicas.<\/li>\n\n\n\n<li>Sites relacionados a hot\u00e9is e hospitalidade.<\/li>\n\n\n\n<li>Sites de eventos.<\/li>\n\n\n\n<li>Blogs sobre estilo de vida.<\/li>\n\n\n\n<li>Empresas de consultoria e ag\u00eancias de publicidade.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1100\" data-id=\"1512\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\" alt=\"Hero image website\" class=\"wp-image-1512\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png 1500w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-1366 1366w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-1024 1024w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-375 375w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-142675bb-7fff-ead0-7d54-2fb4c130f86b\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Fonte da imagem: <\/span><a href=\"https:\/\/www.justinmind.com\/blog\/inspiring-hero-image-websites\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Justinmind<\/span><\/a><\/span><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Import\u00e2ncia da hero image<\/strong><\/h2>\n\n\n\n<p>A hero image \u00e9 um componente essencial de web design que traz diversas fun\u00e7\u00f5es e benef\u00edcios para um site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Impressione e atraia visitantes<\/strong><\/h3>\n\n\n\n<p>A for\u00e7a da percep\u00e7\u00e3o visual \u00e9 ativada desde o primeiro instante, pois h\u00e1 pouco tempo para despertar o interesse de um visitante em novas ofertas ou para surpreender um visitante que est\u00e1 retornando ao site. A hero image possibilita atrair rapidamente a aten\u00e7\u00e3o dos usu\u00e1rios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Conhecimento e informa\u00e7\u00e3o<\/strong><\/h3>\n\n\n\n<p>Em geral, os seres humanos processam e interpretam imagens consideravelmente mais r\u00e1pido do que palavras. Por isso, al\u00e9m de ser um aspecto de atratividade, a hero image tamb\u00e9m serve como um componente educacional da p\u00e1gina, transmitindo uma breve mensagem visual sobre o conte\u00fado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Navega\u00e7\u00e3o aprimorada<\/strong><\/h3>\n\n\n\n<p>Uma hero image produzida adequadamente pode melhorar a navega\u00e7\u00e3o e chamar mais aten\u00e7\u00e3o para o bot\u00e3o de call to action.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Provoque sentimentos nos visitantes<\/strong><\/h3>\n\n\n\n<p>O contexto emocional da experi\u00eancia do usu\u00e1rio desempenha um papel significativo e aumenta a humaniza\u00e7\u00e3o da intera\u00e7\u00e3o entre a p\u00e1gina e seu visitante. As hero images s\u00e3o um m\u00e9todo comprovado para evocar os sentimentos apropriados na audi\u00eancia por meio de imagens, formas e cores, criando o clima certo desde os primeiros momentos de uma conversa.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Prazer est\u00e9tico<\/strong><\/h3>\n\n\n\n<p>\u00c9 indiscut\u00edvel que os servi\u00e7os oferecidos e o desempenho do site s\u00e3o prioridades. No entanto, as pessoas tamb\u00e9m querem algo visualmente agrad\u00e1vel. A beleza \u00e9 um fator muito importante, principalmente quando se leva em considera\u00e7\u00e3o a acirrada concorr\u00eancia on-line e a crescente popularidade da est\u00e9tica como componente de uma boa experi\u00eancia do usu\u00e1rio. Ela pode ser atingida com a ajuda de uma hero image.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Diferentes recursos visuais usados em hero images<\/strong><\/h2>\n\n\n\n<p>Os recursos visuais usados em uma hero image e a narrativa que eles transmitem s\u00e3o determinados pelos objetivos da p\u00e1gina inicial e pela natureza do site como um todo. Pode ser uma not\u00edcia de \u00faltima hora que os clientes precisam ver imediatamente, um gr\u00e1fico que capture a ess\u00eancia ou as vantagens de uma oferta ou informa\u00e7\u00e3o, uma nova publica\u00e7\u00e3o que exige a maior aten\u00e7\u00e3o, e assim por diante. As hero images s\u00e3o frequentemente utilizadas em sites de com\u00e9rcio eletr\u00f4nico para destacar os itens mais vendidos, descontos e promo\u00e7\u00f5es, servi\u00e7os essenciais ou verdadeiras pechinchas.<\/p>\n\n\n\n<p>Uma hero image pode ser composta pelos seguintes tipos recursos visuais:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Fotos<\/strong><\/h3>\n\n\n\n<p>A principal vantagem das fotos \u00e9 que elas ajudam os usu\u00e1rios a estabelecer uma conex\u00e3o entre o conte\u00fado que visualizam on-line e os objetos f\u00edsicos e pessoas reais que o habitam.<\/p>\n\n\n\n<p>Quando utilizadas em um site, as fotos criam associa\u00e7\u00f5es fortes e podem expressar o clima desejado de forma adequada ao p\u00fablico. Quando usadas na interface de usu\u00e1rio on-line, elas permitem que voc\u00ea misture realidade e senso est\u00e9tico, ajudando a manter seu estilo essencial e, ao mesmo tempo, apelando para as emo\u00e7\u00f5es do seu p\u00fablico-alvo.<\/p>\n\n\n\n<p>Em sites de com\u00e9rcio eletr\u00f4nico, em que o conceito \u201cvoc\u00ea recebe o que v\u00ea\u201d \u00e9 fundamental para o sucesso, as fotos s\u00e3o a principal ferramenta para exibir os itens vendidos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Ilustra\u00e7\u00f5es<\/strong><\/h3>\n\n\n\n<p>Recursos gr\u00e1ficos personalizados s\u00e3o uma tend\u00eancia popular de web design para diversas finalidades de um site, o que inclui as hero images. Tais recursos, que podem ser criados em v\u00e1rios designs, ajudam a compreender rapidamente as informa\u00e7\u00f5es apresentadas em um site ou tela. Al\u00e9m disso, eles refor\u00e7am a exclusividade visual e melhoram a est\u00e9tica e a eleg\u00e2ncia de sites, blogs e landing pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Gr\u00e1ficos 3D<\/strong><\/h3>\n\n\n\n<p>Os gr\u00e1ficos 3D, que s\u00e3o produzidos ao converter modelos 3D em imagens 2D, tornaram-se mais um tipo de recurso visual on-line que vem se popularizando. Uma das suas maiores vantagens para web design \u00e9 que muitos gr\u00e1ficos 3D apresentam efeitos realistas. Quando bem feitos, eles se tornam muito atraentes, modernos e convincentes, podendo exercer influ\u00eancia significativa sobre a apar\u00eancia e as taxas de convers\u00e3o dos sites, ainda que a produ\u00e7\u00e3o de imagens desse tipo exija conhecimento especializado e seja cara e demorada. Elas s\u00e3o bastante usadas em hero images.<\/p>\n\n\n\n<p>Acesse <a href=\"https:\/\/www.justinmind.com\/blog\/inspiring-hero-image-websites\/\" target=\"_blank\" rel=\"noreferrer noopener\">este site<\/a> para conhecer exemplos inspiradores do uso de diferentes recursos visuais em hero images.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Op\u00e7\u00f5es de hero images dispon\u00edveis<\/strong><\/h2>\n\n\n\n<p>Talvez seja dif\u00edcil decidir qual \u00e9 a hero image ideal para o seu site. A imagem escolhida para o banner difere se voc\u00ea estiver promovendo um produto, servi\u00e7o ou apenas conte\u00fado. V\u00eddeos tamb\u00e9m podem ser utilizados para compartilhar informa\u00e7\u00f5es abrangentes sobre sua empresa.<\/p>\n\n\n\n<p>\u00c9 dif\u00edcil saber qual op\u00e7\u00e3o funcionar\u00e1 melhor. Por isso, o ideal \u00e9 eliminar algumas alternativas e, depois, <a href=\"https:\/\/vwo.com\/ab-testing\/\">realizar um teste A\/B<\/a> para verificar qual imagem apresenta o melhor desempenho. Para entender melhor o que pode ser conseguido com diferentes formatos de hero image, veja estes exemplos:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u00canfase no produto<\/strong><\/h3>\n\n\n\n<p>\u00c0s vezes, a melhor escolha para uma hero image \u00e9 exibir uma foto simples e em alta resolu\u00e7\u00e3o do seu produto, acompanhada de uma breve descri\u00e7\u00e3o. O site da Apple \u00e9 um \u00f3timo exemplo de como usar fotos de produtos para atrair visitantes. Al\u00e9m disso, a empresa utiliza um carrossel para exibir diversos itens.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1050\" data-id=\"1513\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png\" alt=\"An example of Apple's website\" class=\"wp-image-1513\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png 1500w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-1366 1366w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-1024 1024w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-375 375w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-bff2ac10-7fff-36ce-4891-3a942a7fb768\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Fonte da imagem: <\/span><a href=\"https:\/\/www.justinmind.com\/blog\/inspiring-hero-image-websites\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">justinmind<\/span><\/a><\/span><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Destaque dos benef\u00edcios<\/strong><\/h3>\n\n\n\n<p>No caso das empresas que prestam servi\u00e7os, uma hero image que enfatize um diferencial ou uma proposta de valor \u00e9 uma escolha inteligente. Por exemplo, em seu site, a UXPin oferece aos usu\u00e1rios a oportunidade de come\u00e7ar a usar imediatamente seus servi\u00e7os, apresentando seu diferencial sobreposto a uma hero image din\u00e2mica.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"287\" data-id=\"1514\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-29.png\" alt=\"UXPin's example \" class=\"wp-image-1514\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-29.png 512w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-29.png?tr=w-375 375w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-ce143913-7fff-4b12-6318-0373855930d2\"><p dir=\"ltr\" style=\"line-height:1.38;margin-top:0pt;margin-bottom:0pt\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Fonte da imagem: <\/span><a href=\"https:\/\/yourstory.com\/2017\/03\/what-is-hero-image?utm_pageloadtype=scroll\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">yourstory<\/span><\/a><\/p><\/span><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Representa\u00e7\u00e3o b\u00e1sica<\/strong><\/h3>\n\n\n\n<p>Voc\u00ea pode explicar as ofertas da sua empresa aos visitantes com uma imagem simples e b\u00e1sica, sem sobrecarreg\u00e1-los com detalhes. Para que essa abordagem funcione, basta adicionar um CTA e um texto claros. Confira a p\u00e1gina inicial da Buffer para ver essa abordagem em a\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"447\" data-id=\"1515\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png\" alt=\"Buffer's homepage\" class=\"wp-image-1515\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png 800w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png?tr=w-375 375w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-626d2ce5-7fff-7759-9fbe-f4cd6cccf46f\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Fonte da imagem: <\/span><a href=\"https:\/\/yourstory.com\/2017\/03\/what-is-hero-image?utm_pageloadtype=scroll\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">yourstory<\/span><\/a><\/span><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Toque humano<\/strong><\/h3>\n\n\n\n<p>A inclus\u00e3o de pessoas reais em seu conte\u00fado visual ajuda a desenvolver credibilidade e confian\u00e7a junto aos visitantes.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"571\" data-id=\"1516\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png\" alt=\"An example of Yoga Lite's homepage\" class=\"wp-image-1516\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png 900w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png?tr=w-375 375w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\">Fonte da imagem <a href=\"https:\/\/www.mockplus.com\/blog\/post\/hero-image-website-examples\" target=\"_blank\" rel=\"noreferrer noopener\">Mockplus<\/a><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Desperte sentimentos<\/strong><\/h3>\n\n\n\n<p>\u00c9 mais prov\u00e1vel que os visitantes atendam ao seu pedido para que realizem uma determinada a\u00e7\u00e3o se a sua hero image despertar sentimentos. Uma organiza\u00e7\u00e3o sem fins lucrativos chamada Charity: Water usa doa\u00e7\u00f5es para levar \u00e1gua pot\u00e1vel a pa\u00edses pobres. A hero image demonstra claramente os efeitos ben\u00e9ficos de uma doa\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-6 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"456\" data-id=\"1517\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png\" alt=\"Charity's webpage \" class=\"wp-image-1517\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png 800w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png?tr=w-375 375w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-7a23b378-7fff-44a9-fabb-24c69d2cc30e\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Fonte da imagem: <\/span><a href=\"https:\/\/yourstory.com\/2017\/03\/what-is-hero-image?utm_pageloadtype=scroll\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">yourstory<\/span><\/a><\/span><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Melhores pr\u00e1ticas para hero images<\/strong><\/h2>\n\n\n\n<p>As tend\u00eancias representam uma pequena parte do desenvolvimento de uma boa hero image. O resto da magia se baseia em princ\u00edpios de design comprovados. Voc\u00ea pode criar uma hero image que cause identifica\u00e7\u00e3o com o p\u00fablico seguindo estas pr\u00e1ticas recomendadas:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tamanho e posicionamento<\/strong><\/h3>\n\n\n\n<p>Considere as dicas abaixo:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A hero image deve ficar centralizada.<\/li>\n\n\n\n<li>O texto deve ser simples de ler.<\/li>\n\n\n\n<li>A imagem precisa ficar incr\u00edvel em todos os tipos de telas.<\/li>\n\n\n\n<li>A imagem deve preencher a janela.<\/li>\n\n\n\n<li>Siga estas diretrizes de tamanho:\n<ul class=\"wp-block-list\">\n<li>O tamanho ideal para uma hero image em tela cheia \u00e9 1200 pixels de largura e propor\u00e7\u00e3o de 16:9.<\/li>\n\n\n\n<li>A resolu\u00e7\u00e3o ideal para uma hero image em banner \u00e9 1600 x 500 pixels.<\/li>\n\n\n\n<li>A resolu\u00e7\u00e3o ideal para uma hero image em dispositivos m\u00f3veis \u00e9: 800 x 1200 pixels.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Teste arquivos JPG e PNG para ver qual deles acelera o carregamento da p\u00e1gina.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Equil\u00edbrio e harmonia<\/strong><\/h3>\n\n\n\n<p>Se a hero image n\u00e3o combinar com o restante do estilo do site, os visitantes ficar\u00e3o distra\u00eddos com o design ruim e sair\u00e3o do site instantaneamente. A coer\u00eancia est\u00e9tica pode ser mantida prestando muita aten\u00e7\u00e3o \u00e0s fontes, tamanhos, cores, navega\u00e7\u00e3o, recursos gr\u00e1ficos e conte\u00fado.<\/p>\n\n\n\n<p>Ao criar uma ideia para uma hero image, \u00e9 uma boa ideia analisar a identidade e os princ\u00edpios da sua marca. Seria p\u00e9ssimo se os visitantes perdessem o interesse no seu produto antes de chegar \u00e0 parte importante do conte\u00fado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Organiza\u00e7\u00e3o l\u00f3gica<\/strong><\/h3>\n\n\n\n<p>A organiza\u00e7\u00e3o eficiente \u00e9 um componente necess\u00e1rio para um design harmonioso. O conte\u00fado da sua hero image deve ser organizado em uma estrutura l\u00f3gica, em que cada elemento se baseia no anterior. Isso \u00e9 essencial para sincronizar fotos e textos.<\/p>\n\n\n\n<p>Certifique-se de que sua mensagem seja compreendida e que as imagens a complementem. Talvez seja \u00fatil criar um wireframe b\u00e1sico que mostre como sua hero image ficar\u00e1 organizada na p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Recursos visuais originais<\/strong><\/h3>\n\n\n\n<p>Embora as fotos de banco de imagens sejam um componente essencial para o marketing de conte\u00fado, o ideal \u00e9 incorporar recursos visuais exclusivos \u00e0s suas p\u00e1ginas, pois eles ajudam a alcan\u00e7ar os objetivos de marketing. Voc\u00ea pode usar toda a sua imagina\u00e7\u00e3o com o Canva para criar hero images exclusivas ou encontrar ideias no Behance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Continuidade e consist\u00eancia<\/strong><\/h3>\n\n\n\n<p>Qual \u00e9 o aspecto mais desafiador da cria\u00e7\u00e3o de elementos visuais atrativos? Os profissionais de marketing costumam dizer que \u00e9 produzi-los de forma consistente. Estabele\u00e7a um cronograma para criar esses elementos e adicione-o ao seu or\u00e7amento de marketing, se necess\u00e1rio.<\/p>\n\n\n\n<p>A reformula\u00e7\u00e3o de seus recursos visuais desatualizados pode ser uma boa op\u00e7\u00e3o, se o tempo for um fator cr\u00edtico. Essa \u00e9 uma t\u00e9cnica inovadora para fazer o que \u00e9 necess\u00e1rio de um jeito r\u00e1pido e eficaz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclus\u00e3o<\/strong><\/h2>\n\n\n\n<p>Uma hero image deslumbrante atrai os visitantes e os incentiva a continuar navegando no site.<\/p>\n\n\n\n<p>As hero images afetam significativamente a forma como as pessoas enxergam sua marca, o tr\u00e1fego da internet e a convers\u00e3o, pois esses s\u00e3o os principais pontos de intera\u00e7\u00e3o dos clientes com elas.<\/p>\n\n\n\n<p>Em resumo, est\u00e1 claro que as hero images oferecem um conjunto de ferramentas vers\u00e1til e amplo para os designers de sites. Elas t\u00eam um potencial significativo para melhorar a usabilidade e a atratividade das p\u00e1ginas, estimulando as pessoas a saber mais sobre um tema. Chegou a hora de colocar em pr\u00e1tica as informa\u00e7\u00f5es que compartilhamos e criar uma hero image que capture a aten\u00e7\u00e3o dos visitantes imediatamente. Para ter certeza de que a sua hero image funciona, teste algumas vers\u00f5es com a VWO de um jeito r\u00e1pido e f\u00e1cil. <a href=\"#free-trial\">Fa\u00e7a um teste gratuito dos recursos completos da VWO<\/a> para come\u00e7ar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hero image \u00e9 uma imagem grande e chamativa que cont\u00e9m texto, normalmente exibida acima da dobra da p\u00e1gina, logo abaixo do cabe\u00e7alho do site.<\/p>\n","protected":false},"author":565,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-4690","post","type-post","status-publish","format-standard","hentry","category-uncategorized-br"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Hero Image | VWO<\/title>\n<meta name=\"description\" content=\"Hero image \u00e9 uma imagem grande e chamativa que cont\u00e9m texto, normalmente exibida acima da dobra da p\u00e1gina, logo abaixo do cabe\u00e7alho do site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vwo.com\/glossary\/br\/hero-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hero Image | VWO\" \/>\n<meta property=\"og:description\" content=\"Hero image \u00e9 uma imagem grande e chamativa que cont\u00e9m texto, normalmente exibida acima da dobra da p\u00e1gina, logo abaixo do cabe\u00e7alho do site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vwo.com\/glossary\/br\/hero-image\/\" \/>\n<meta property=\"og:site_name\" content=\"VWO Glossary\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-02T07:01:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-30T06:48:20+00:00\" \/>\n<meta name=\"author\" content=\"avnishsharamav\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vwo.com\/glossary\/br\/hero-image\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vwo.com\/glossary\/br\/hero-image\/\"},\"author\":{\"name\":\"avnishsharamav\",\"@id\":\"https:\/\/vwo.com\/glossary\/br\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044\"},\"headline\":\"Hero Image\",\"datePublished\":\"2022-03-02T07:01:16+00:00\",\"dateModified\":\"2025-06-30T06:48:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vwo.com\/glossary\/br\/hero-image\/\"},\"wordCount\":2015,\"image\":{\"@id\":\"https:\/\/vwo.com\/glossary\/br\/hero-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\",\"articleSection\":[\"Uncategorized @br\"],\"inLanguage\":\"br\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vwo.com\/glossary\/br\/hero-image\/\",\"url\":\"https:\/\/vwo.com\/glossary\/br\/hero-image\/\",\"name\":\"Hero Image | VWO\",\"isPartOf\":{\"@id\":\"https:\/\/vwo.com\/glossary\/br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vwo.com\/glossary\/br\/hero-image\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vwo.com\/glossary\/br\/hero-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\",\"datePublished\":\"2022-03-02T07:01:16+00:00\",\"dateModified\":\"2025-06-30T06:48:20+00:00\",\"author\":{\"@id\":\"https:\/\/vwo.com\/glossary\/br\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044\"},\"description\":\"Hero image \u00e9 uma imagem grande e chamativa que cont\u00e9m texto, normalmente exibida acima da dobra da p\u00e1gina, logo abaixo do cabe\u00e7alho do site.\",\"breadcrumb\":{\"@id\":\"https:\/\/vwo.com\/glossary\/br\/hero-image\/#breadcrumb\"},\"inLanguage\":\"br\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vwo.com\/glossary\/br\/hero-image\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"br\",\"@id\":\"https:\/\/vwo.com\/glossary\/br\/hero-image\/#primaryimage\",\"url\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\",\"contentUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vwo.com\/glossary\/br\/hero-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/vwo.com\/glossary\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hero Image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vwo.com\/glossary\/br\/#website\",\"url\":\"https:\/\/vwo.com\/glossary\/br\/\",\"name\":\"VWO Glossary\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vwo.com\/glossary\/br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"br\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/vwo.com\/glossary\/br\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044\",\"name\":\"avnishsharamav\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"br\",\"@id\":\"https:\/\/vwo.com\/glossary\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g\",\"caption\":\"avnishsharamav\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hero Image | VWO","description":"Hero image \u00e9 uma imagem grande e chamativa que cont\u00e9m texto, normalmente exibida acima da dobra da p\u00e1gina, logo abaixo do cabe\u00e7alho do site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vwo.com\/glossary\/br\/hero-image\/","og_locale":"en_US","og_type":"article","og_title":"Hero Image | VWO","og_description":"Hero image \u00e9 uma imagem grande e chamativa que cont\u00e9m texto, normalmente exibida acima da dobra da p\u00e1gina, logo abaixo do cabe\u00e7alho do site.","og_url":"https:\/\/vwo.com\/glossary\/br\/hero-image\/","og_site_name":"VWO Glossary","article_published_time":"2022-03-02T07:01:16+00:00","article_modified_time":"2025-06-30T06:48:20+00:00","author":"avnishsharamav","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vwo.com\/glossary\/br\/hero-image\/#article","isPartOf":{"@id":"https:\/\/vwo.com\/glossary\/br\/hero-image\/"},"author":{"name":"avnishsharamav","@id":"https:\/\/vwo.com\/glossary\/br\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044"},"headline":"Hero Image","datePublished":"2022-03-02T07:01:16+00:00","dateModified":"2025-06-30T06:48:20+00:00","mainEntityOfPage":{"@id":"https:\/\/vwo.com\/glossary\/br\/hero-image\/"},"wordCount":2015,"image":{"@id":"https:\/\/vwo.com\/glossary\/br\/hero-image\/#primaryimage"},"thumbnailUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png","articleSection":["Uncategorized @br"],"inLanguage":"br"},{"@type":"WebPage","@id":"https:\/\/vwo.com\/glossary\/br\/hero-image\/","url":"https:\/\/vwo.com\/glossary\/br\/hero-image\/","name":"Hero Image | VWO","isPartOf":{"@id":"https:\/\/vwo.com\/glossary\/br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vwo.com\/glossary\/br\/hero-image\/#primaryimage"},"image":{"@id":"https:\/\/vwo.com\/glossary\/br\/hero-image\/#primaryimage"},"thumbnailUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png","datePublished":"2022-03-02T07:01:16+00:00","dateModified":"2025-06-30T06:48:20+00:00","author":{"@id":"https:\/\/vwo.com\/glossary\/br\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044"},"description":"Hero image \u00e9 uma imagem grande e chamativa que cont\u00e9m texto, normalmente exibida acima da dobra da p\u00e1gina, logo abaixo do cabe\u00e7alho do site.","breadcrumb":{"@id":"https:\/\/vwo.com\/glossary\/br\/hero-image\/#breadcrumb"},"inLanguage":"br","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vwo.com\/glossary\/br\/hero-image\/"]}]},{"@type":"ImageObject","inLanguage":"br","@id":"https:\/\/vwo.com\/glossary\/br\/hero-image\/#primaryimage","url":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png","contentUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png"},{"@type":"BreadcrumbList","@id":"https:\/\/vwo.com\/glossary\/br\/hero-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vwo.com\/glossary\/br\/"},{"@type":"ListItem","position":2,"name":"Hero Image"}]},{"@type":"WebSite","@id":"https:\/\/vwo.com\/glossary\/br\/#website","url":"https:\/\/vwo.com\/glossary\/br\/","name":"VWO Glossary","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vwo.com\/glossary\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"br"},{"@type":"Person","@id":"https:\/\/vwo.com\/glossary\/br\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044","name":"avnishsharamav","image":{"@type":"ImageObject","inLanguage":"br","@id":"https:\/\/vwo.com\/glossary\/br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g","caption":"avnishsharamav"}}]}},"_links":{"self":[{"href":"https:\/\/vwo.com\/glossary\/br\/wp-json\/wp\/v2\/posts\/4690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vwo.com\/glossary\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vwo.com\/glossary\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vwo.com\/glossary\/br\/wp-json\/wp\/v2\/users\/565"}],"replies":[{"embeddable":true,"href":"https:\/\/vwo.com\/glossary\/br\/wp-json\/wp\/v2\/comments?post=4690"}],"version-history":[{"count":2,"href":"https:\/\/vwo.com\/glossary\/br\/wp-json\/wp\/v2\/posts\/4690\/revisions"}],"predecessor-version":[{"id":4700,"href":"https:\/\/vwo.com\/glossary\/br\/wp-json\/wp\/v2\/posts\/4690\/revisions\/4700"}],"wp:attachment":[{"href":"https:\/\/vwo.com\/glossary\/br\/wp-json\/wp\/v2\/media?parent=4690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vwo.com\/glossary\/br\/wp-json\/wp\/v2\/categories?post=4690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vwo.com\/glossary\/br\/wp-json\/wp\/v2\/tags?post=4690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}