{"id":112599,"date":"2023-07-10T10:54:00","date_gmt":"2023-07-10T07:54:00","guid":{"rendered":"https:\/\/elementor.com\/blog\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/"},"modified":"2023-07-10T10:54:00","modified_gmt":"2023-07-10T07:54:00","slug":"tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/","title":{"rendered":"Tutorial: Como Alterar a Imagem de Fundo de um Hero, ao Passar o Mouse"},"content":{"rendered":"\n

O que h\u00e1 neste Tutorial?<\/strong><\/h2>\n\n

Neste tutorial, explicaremos como criar uma se\u00e7\u00e3o de hero que muda a imagem de fundo ao passar o mouse sobre diferentes elementos.\nPara realizar isso, usaremos o recurso de cont\u00eainer do Elementor, adicionaremos c\u00f3digo CSS<\/a> personalizado e explicaremos o que estamos fazendo ao longo do caminho. <\/p>\n\n

<\/strong><\/h2>\n\n

O que \u00e9 um hero?
<\/strong><\/h2>\n\n

Melhorar o engajamento do usu\u00e1rio<\/strong><\/h2>\n\n

Uma se\u00e7\u00e3o de hero visualmente atraente e bem projetada & desenvolvida pode capturar a aten\u00e7\u00e3o do usu\u00e1rio e incentiv\u00e1-lo a permanecer mais tempo no seu site, aumentando as chances de ele realizar uma a\u00e7\u00e3o desejada, como preencher um formul\u00e1rio ou fazer uma compra.

Al\u00e9m disso, a se\u00e7\u00e3o de hero \u00e9 frequentemente a primeira coisa que um usu\u00e1rio v\u00ea ao visitar um site, e pode definir o tom para o restante do site.\nUma se\u00e7\u00e3o de hero bem projetada pode ajudar a estabelecer a identidade, personalidade e valores da marca, ajudando a diferenci\u00e1-la dos concorrentes.
<\/p>\n\n

Como criar uma se\u00e7\u00e3o de hero que muda a imagem de fundo ao passar o mouse sobre diferentes elementos<\/strong><\/h2>\n\n
\n
Nota<\/h5>\n\n\n\n

Vamos construir este design com Cont\u00eaineres, ent\u00e3o, por favor, ative-os atrav\u00e9s das Configura\u00e7\u00f5es > Recursos do Elementor.
Usaremos um pouco de CSS<\/a> – mas n\u00e3o se preocupe, eu fornecerei todo o c\u00f3digo e guiarei voc\u00ea sobre onde inseri-lo.<\/p>\n<\/div>\n\n

O que precisamos para come\u00e7ar?<\/strong><\/h3>\n\n
  • Plugin Elementor Pro<\/li>
  • 4 Imagens<\/li><\/ul>\n\n


    Vamos come\u00e7ar:<\/h3>\n\n

    Crie uma nova p\u00e1gina e edite-a com o Elementor.<\/p>\n\n

    Insira um cont\u00eainer com as seguintes configura\u00e7\u00f5es:<\/p>\n\n

    <\/p>\n\n

    • Largura do Conte\u00fado: Largura Completa<\/li>
    • Largura: 100%<\/li>
    • Altura M\u00ednima: 100vh<\/li>
    • Padding: 0x<\/li><\/ul>\n\n
      \"\"<\/figure>\n\n

      Defina uma classe para o cont\u00eainer chamada: \u201cmain-container-slide\u201d<\/p>\n\n

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

      V\u00e1 para o painel do WordPress e fa\u00e7a o upload das 4 imagens que voc\u00ea usar\u00e1 na \u00e1rea de m\u00eddia do WordPress.<\/p>\n\n

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

      Volte para a p\u00e1gina e insira o seguinte c\u00f3digo CSS na aba de CSS personalizado do cont\u00eainer:
      <\/p>\n\t\t

      \n\t\t\t\t
      \n\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t
      \n\t\t\t\t\n\t\t\t\t\t.main-container-slide [class*=\"slide\"]:hover {\r\n    background-color: #CE3A3AA1 !important;\r\n}\r\n.main-container-slide:has(.slide1:hover) {\r\n    background-image: url(https:\/\/yousite.com\/image1.jpg) !important;\r\n}\r\n\r\n\r\n.main-container-slide:has(.slide2:hover) {\r\n    background-image: url(https:\/\/yousite.com\/image2.jpg) !important;\r\n}\r\n\r\n\r\n.main-container-slide:has(.slide3:hover) {\r\n    background-image: url(https:\/\/yousite.com\/image3.jpg) !important;\r\n}\r\n\r\n\r\n.main-container-slide:has(.slide4:hover) {\r\n    background-image: url(https:\/\/yousite.com\/image4.jpg) !important;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n\n<div class=\"wp-block-group post-alert is-layout-flow wp-block-group-is-layout-flow\">\n<h5 class=\"wp-block-heading\">Nota<\/h5>\n\n\n\n<p>Substitua \u201chttps:\/\/yousite.com\/image.jpg\u201d pelos URLs das imagens que voc\u00ea usar\u00e1 em cada zona.<\/p>\n<\/div>\n\n<p><br \/>Este CSS realiza 2 coisas:<br \/><br \/>1 &#8211; Muda a cor de fundo ao passar o mouse em cada cont\u00eainer<\/p>\n\n<p>2 &#8211; Muda a imagem de fundo no .main-container-slide ao passar o mouse sobre os cont\u00eaineres .slide-*.<\/p>\n\n<p><\/p>\n\n<p>D\u00ea uma olhada no meu exemplo (eu mudei os URLs das imagens para minhas imagens recentemente carregadas):<br \/><\/p>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"275\" height=\"618\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/csscustom.png\" alt=\"\" class=\"wp-image-85598\" \/><\/figure>\n\n<p><strong>Pr\u00f3ximo Passo:<br \/><br \/><\/strong>Na Aba de Estilo, insira estas configura\u00e7\u00f5es:<\/p>\n\n<ul class=\"wp-block-list\"><li>Fundo: Normal<\/li><li>Tipo de Fundo: Cl\u00e1ssico<\/li><li>Cor: Transparente<\/li><li>Imagem: *Escolha a primeira imagem que voc\u00ea quer mostrar<\/li><li>Tamanho da Imagem: Completo<\/li><li>Posi\u00e7\u00e3o: Centro Centro<\/li><li>Repetir: N\u00e3o repetir<\/li><li>Tamanho de Exibi\u00e7\u00e3o: Cobrir<\/li><\/ul>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"932\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/image7.png\" alt=\"\" class=\"wp-image-85599\" \/><\/figure>\n\n<p><strong>Pr\u00f3ximo Passo:<br \/><\/strong>Adicione 1 cont\u00eainer dentro com estas configura\u00e7\u00f5es:<\/p>\n\n<ul class=\"wp-block-list\"><li>Largura do Conte\u00fado: Largura Completa<\/li><li>Largura: 25%<\/li><\/ul>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1327\" height=\"934\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/image1.png\" alt=\"\" class=\"wp-image-85600\" \/><\/figure>\n\n<p>V\u00e1 para a Aba Avan\u00e7ado e adicione l\u00e1 uma classe chamada: slide1<\/p>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"935\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/image3.png\" alt=\"\" class=\"wp-image-85589\" \/><\/figure>\n\n<p><\/p>\n\n<p>Agora, projete cada cont\u00eainer com seu estilo e itens personalizados, como eu fiz para este exemplo:<\/p>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"276\" height=\"431\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/image8.png\" alt=\"\" class=\"wp-image-85601\" \/><\/figure>\n\n<p>Como voc\u00ea pode ver, eu numerei o cont\u00eainer, adicionei bordas para gerar uma diferen\u00e7a entre as categorias no meu site; e conte\u00fado personalizado com um CTA em cada zona.<\/p>\n\n<p><\/p>\n\n<p><strong>Pr\u00f3ximo Passo:<\/strong><br \/>Depois de ter seu primeiro cont\u00eainer pronto, duplique-o 3 vezes e mude a classe CSS em cada cont\u00eainer para ter 4 classes numeradas sequencialmente:<br \/>slide1, slide2, slide3, slide4<\/p>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" controls=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/cssinsert.mp4\"><\/video><\/figure>\n\n<p><br \/><strong>E terminamos!<\/strong><\/p>\n\n<p>Neste tutorial, aprendemos como criar uma se\u00e7\u00e3o de hero com o Elementor, a plataforma de sites n\u00famero 1 para WordPress. <\/p>\n\n<p>Focamos em criar uma se\u00e7\u00e3o de hero que muda a imagem de fundo ao passar o mouse sobre diferentes elementos e usamos o recurso de cont\u00eainer do Elementor e c\u00f3digo CSS personalizado para realizar essa tarefa.<\/p>\n\n<p>Seguindo este tutorial, voc\u00ea pode melhorar o design UX\/UI do seu site e criar uma se\u00e7\u00e3o visualmente atraente e envolvente que se destaca das demais.\nUsar o Elementor facilita para qualquer pessoa criar um site com apar\u00eancia profissional sem qualquer experi\u00eancia em codifica\u00e7\u00e3o.\nNo geral, este tutorial fornece uma maneira simples e eficaz de projetar uma se\u00e7\u00e3o de hero que mostra a proposta de valor do seu site e envolve seus visitantes.  <\/p>\n\n<div class=\"wp-block-group post-alert is-layout-flow wp-block-group-is-layout-flow\">\n<h5 class=\"wp-block-heading\">Nota<\/h5>\n\n\n\n<p>:has \u00e9 um recurso opcional no Firefox &#8211; Os usu\u00e1rios podem habilitar para testes (com base na nota de Compatibilidade do Navegador): https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/:has<\/p>\n<\/div>\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uma se\u00e7\u00e3o de hero bem projetada pode ter um impacto significativo no sucesso de um site, desde melhorar o engajamento do usu\u00e1rio e as taxas de convers\u00e3o at\u00e9 aprimorar a experi\u00eancia do usu\u00e1rio e a otimiza\u00e7\u00e3o para motores de busca.<\/p>\n","protected":false},"author":507051,"featured_media":112600,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[292,300,352],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-112599","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-pt","category-elementor-team-writes-pt","category-tips-tricks-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial: Como Alterar a Imagem de Fundo de um Hero, ao Passar o Mouse<\/title>\n<meta name=\"description\" content=\"Uma se\u00e7\u00e3o de hero bem projetada pode ter um impacto significativo no sucesso de um site, desde melhorar o engajamento do usu\u00e1rio e as taxas de convers\u00e3o at\u00e9 aprimorar a experi\u00eancia do usu\u00e1rio e a otimiza\u00e7\u00e3o para motores de busca.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: Como Alterar a Imagem de Fundo de um Hero, ao Passar o Mouse\" \/>\n<meta property=\"og:description\" content=\"Uma se\u00e7\u00e3o de hero bem projetada pode ter um impacto significativo no sucesso de um site, desde melhorar o engajamento do usu\u00e1rio e as taxas de convers\u00e3o at\u00e9 aprimorar a experi\u00eancia do usu\u00e1rio e a otimiza\u00e7\u00e3o para motores de busca.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-10T07:54:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931\"},\"headline\":\"Tutorial: Como Alterar a Imagem de Fundo de um Hero, ao Passar o Mouse\",\"datePublished\":\"2023-07-10T07:54:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/\"},\"wordCount\":932,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png\",\"articleSection\":[\"Elementor\",\"Reda\u00e7\u00f5es da equipe Elementor\",\"Dicas e truques\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/\",\"name\":\"Tutorial: Como Alterar a Imagem de Fundo de um Hero, ao Passar o Mouse\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png\",\"datePublished\":\"2023-07-10T07:54:00+00:00\",\"description\":\"Uma se\u00e7\u00e3o de hero bem projetada pode ter um impacto significativo no sucesso de um site, desde melhorar o engajamento do usu\u00e1rio e as taxas de convers\u00e3o at\u00e9 aprimorar a experi\u00eancia do usu\u00e1rio e a otimiza\u00e7\u00e3o para motores de busca.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/category\/elementor-pt\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Tutorial: Como Alterar a Imagem de Fundo de um Hero, ao Passar o Mouse\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/author\/alan-kaler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: Como Alterar a Imagem de Fundo de um Hero, ao Passar o Mouse","description":"Uma se\u00e7\u00e3o de hero bem projetada pode ter um impacto significativo no sucesso de um site, desde melhorar o engajamento do usu\u00e1rio e as taxas de convers\u00e3o at\u00e9 aprimorar a experi\u00eancia do usu\u00e1rio e a otimiza\u00e7\u00e3o para motores de busca.","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:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/","og_locale":"pt_BR","og_type":"article","og_title":"Tutorial: Como Alterar a Imagem de Fundo de um Hero, ao Passar o Mouse","og_description":"Uma se\u00e7\u00e3o de hero bem projetada pode ter um impacto significativo no sucesso de um site, desde melhorar o engajamento do usu\u00e1rio e as taxas de convers\u00e3o at\u00e9 aprimorar a experi\u00eancia do usu\u00e1rio e a otimiza\u00e7\u00e3o para motores de busca.","og_url":"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2023-07-10T07:54:00+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png","type":"image\/png"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Escrito por":"Alan Kaler","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931"},"headline":"Tutorial: Como Alterar a Imagem de Fundo de um Hero, ao Passar o Mouse","datePublished":"2023-07-10T07:54:00+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/"},"wordCount":932,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png","articleSection":["Elementor","Reda\u00e7\u00f5es da equipe Elementor","Dicas e truques"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/","url":"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/","name":"Tutorial: Como Alterar a Imagem de Fundo de um Hero, ao Passar o Mouse","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png","datePublished":"2023-07-10T07:54:00+00:00","description":"Uma se\u00e7\u00e3o de hero bem projetada pode ter um impacto significativo no sucesso de um site, desde melhorar o engajamento do usu\u00e1rio e as taxas de convers\u00e3o at\u00e9 aprimorar a experi\u00eancia do usu\u00e1rio e a otimiza\u00e7\u00e3o para motores de busca.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/pt-br\/tutorial-como-alterar-a-imagem-de-fundo-de-um-hero-ao-passar-o-mouse\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Elementor","item":"https:\/\/elementor.com\/blog\/pt-br\/category\/elementor-pt\/"},{"@type":"ListItem","position":3,"name":"Tutorial: Como Alterar a Imagem de Fundo de um Hero, ao Passar o Mouse"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/pt-br\/#website","url":"https:\/\/elementor.com\/blog\/pt-br\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/pt-br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you","url":"https:\/\/elementor.com\/blog\/pt-br\/author\/alan-kaler\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/112599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/507051"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=112599"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/112599\/revisions"}],"predecessor-version":[{"id":148797,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/112599\/revisions\/148797"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/112600"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=112599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=112599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=112599"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_persona?post=112599"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_intent?post=112599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}