{"id":120137,"date":"2023-07-10T10:54:00","date_gmt":"2023-07-10T07:54:00","guid":{"rendered":"https:\/\/elementor.com\/blog\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/"},"modified":"2023-07-10T10:54:00","modified_gmt":"2023-07-10T07:54:00","slug":"tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/","title":{"rendered":"Tutorial: Come Cambiare l&#8217;Immagine di Sfondo di un Hero, al Passaggio del Mouse"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Cosa c&#8217;\u00e8 in questo Tutorial?<\/strong><\/h2>\n\n<p>In questo tutorial, spiegheremo come creare una sezione hero che cambia l&#8217;immagine di sfondo quando si passa il mouse su diversi elementi.\nPer fare ci\u00f2, utilizzeremo la funzione container di Elementor, aggiungeremo codice <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/it\/che-cose-il-csse-come-usarlo-nel-web-design\/\" title=\"CSS\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"4536\">CSS<\/a> personalizzato e spiegheremo cosa stiamo facendo man mano che procediamo. <\/p>\n\n<h2 class=\"wp-block-heading\"><strong> <\/strong><\/h2>\n\n<h2 class=\"wp-block-heading\"><strong>Cos&#8217;\u00e8 un hero?<br \/><\/strong><\/h2>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" controls=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/04\/Finished.mp4\"><\/video><\/figure>\n\n<p>Una sezione hero, nota anche come immagine hero o banner hero, \u00e8 una sezione prominente su un sito web che appare tipicamente in cima alla homepage.\nDi solito consiste in una grande immagine o video, accompagnata da testo e\/o altri elementi visivi. <\/p>\n\n<p>Lo scopo della sezione hero \u00e8 catturare immediatamente l&#8217;attenzione del visitatore e trasmettere il messaggio o la proposta di valore pi\u00f9 importante del sito web.\n\u00c8 un&#8217;opportunit\u00e0 per le aziende di fare una forte prima impressione. <\/p>\n\n<p>Oltre all&#8217;elemento visivo principale, la sezione hero pu\u00f2 includere anche un pulsante call-to-action (CTA), che invita il visitatore a compiere un&#8217;azione desiderata.<\/p>\n\n<p>Una sezione hero ben progettata pu\u00f2 avere un impatto significativo sul successo di un sito web, migliorando il coinvolgimento degli utenti e i tassi di conversione, oltre a migliorare l&#8217;esperienza utente e l&#8217;ottimizzazione per i motori di ricerca.\n\u00c8 spesso l&#8217;elemento visivamente pi\u00f9 sorprendente e memorabile di un sito web e pu\u00f2 aiutare le aziende a distinguersi in un mercato online affollato. <\/p>\n\n<h2 class=\"wp-block-heading\"><strong>Migliora il coinvolgimento degli utenti<\/strong><\/h2>\n\n<p>Una sezione hero visivamente attraente e ben progettata &amp; sviluppata pu\u00f2 catturare l&#8217;attenzione di un utente e incoraggiarlo a rimanere pi\u00f9 a lungo sul tuo sito web, aumentando le probabilit\u00e0 che compia un&#8217;azione desiderata, come compilare un modulo o effettuare un acquisto.<br \/><br \/>Inoltre, la sezione hero \u00e8 spesso la prima cosa che un utente vede quando visita un sito web e pu\u00f2 impostare il tono per il resto del sito.\nUna sezione hero ben progettata pu\u00f2 aiutare a stabilire l&#8217;identit\u00e0, la personalit\u00e0 e i valori del marchio, aiutando a differenziarlo dai concorrenti. <br \/><\/p>\n\n<h2 class=\"wp-block-heading\"><strong>Come creare una sezione hero che cambia l&#8217;immagine di sfondo quando si passa il mouse su diversi elementi<\/strong><\/h2>\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>Costruiremo questo design con i Container, quindi attivali tramite le Impostazioni &gt; Funzionalit\u00e0 di <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\" title=\"Elementor\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"1291\">Elementor<\/a>.<br \/>Utilizzeremo un po&#8217; di <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/it\/che-cose-il-csse-come-usarlo-nel-web-design\/\" title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"30302\">CSS<\/a>, ma non preoccuparti, fornir\u00f2 tutto il codice e ti guider\u00f2 su dove inserirlo.<\/p>\n<\/div>\n\n<h3 class=\"wp-block-heading\"><strong>Cosa ci serve per iniziare?<\/strong><\/h3>\n\n<ul class=\"wp-block-list\"><li>Plugin <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/pro\/\" title=\"Elementor Pro\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"2912\">Elementor Pro<\/a><\/li><li>4 Immagini<\/li><\/ul>\n\n<h3 class=\"wp-block-heading\"><br \/>Iniziamo:<\/h3>\n\n<p>Crea una nuova pagina e modificala con Elementor.<\/p>\n\n<p>Inserisci un container con le seguenti impostazioni:<\/p>\n\n<p><\/p>\n\n<ul class=\"wp-block-list\"><li>Larghezza Contenuto: Larghezza Completa<\/li><li>Larghezza: 100%<\/li><li>Altezza Minima: 100vh<\/li><li>Padding: 0x<\/li><\/ul>\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"937\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/image2.png\" alt=\"\" class=\"wp-image-85588\" \/><\/figure>\n\n<p>Imposta una classe al container chiamata: \u201cmain-container-slide\u201d<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"294\" height=\"685\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/image6.png\" alt=\"\" class=\"wp-image-85590\" \/><\/figure>\n\n<p>Vai alla dashboard di WordPress e carica le 4 immagini che utilizzerai nell&#8217;area media di WordPress.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"805\" height=\"326\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/image4.png\" alt=\"\" class=\"wp-image-85591\" \/><\/figure>\n\n<p>Torna alla pagina e inserisci il seguente codice <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/it\/che-cose-il-csse-come-usarlo-nel-web-design\/\" title=\"What Is CSS? How to Use it in Web Design (2026)\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"33488\">CSS<\/a> nella scheda CSS personalizzato del container:<br \/><\/p>\n\t\t<div data-elementor-type=\"container\" data-elementor-id=\"85592\" class=\"elementor elementor-85592\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"elementor-element elementor-element-82f2eaf e-flex e-con-boxed e-con e-parent\" data-id=\"82f2eaf\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b8caf55 elementor-widget elementor-widget-code-highlight\" data-id=\"b8caf55\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.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>Sostituisci \u201chttps:\/\/yousite.com\/image.jpg\u201d con gli <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/it\/what-is-a-urlstructure-syntax-best-practices\/\" title=\"What is a URL? Structure, Syntax &#038; Best Practices\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"21517\">URL<\/a> delle immagini che utilizzerai in ogni zona.<\/p>\n<\/div>\n\n<p><br \/>Questo CSS raggiunge 2 obiettivi:<br \/><br \/>1 &#8211; Cambia il colore di sfondo al passaggio del mouse in ogni container<\/p>\n\n<p>2 &#8211; Cambia l&#8217;immagine di sfondo nel .main-container-slide quando si passa il mouse sui container .slide-*.<\/p>\n\n<p><\/p>\n\n<p>Dai un&#8217;occhiata al mio esempio (ho cambiato gli <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/it\/what-is-a-urlstructure-syntax-best-practices\/\" title=\"What is a URL? Structure, Syntax &amp; Best Practices\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"30303\">URL<\/a> delle immagini con le mie immagini caricate di recente):<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>Prossimo Passo:<br \/><br \/><\/strong>Nella scheda Stile, inserisci queste impostazioni:<\/p>\n\n<ul class=\"wp-block-list\"><li>Sfondo: Normale<\/li><li>Tipo di Sfondo: Classico<\/li><li>Colore: Trasparente<\/li><li>Immagine: *Scegli la prima immagine che vuoi mostrare<\/li><li>Dimensione Immagine: Completa<\/li><li>Posizione: Centro Centro<\/li><li>Ripeti: No-repeat<\/li><li>Dimensione di Visualizzazione: Copri<\/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>Prossimo Passo:<br \/><\/strong>Aggiungi 1 container all&#8217;interno con queste impostazioni:<\/p>\n\n<ul class=\"wp-block-list\"><li>Larghezza Contenuto: Larghezza Completa<\/li><li>Larghezza: 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>Vai alla scheda Avanzate e aggiungi l\u00ec una classe chiamata: 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>Ora, progetta ogni container con il tuo stile e i tuoi elementi personalizzati, come ho fatto per questo esempio:<\/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>Come puoi vedere, ho numerato il container, aggiunto bordi per generare una differenza tra le categorie sul mio sito; e contenuti personalizzati con un CTA in ogni zona.<\/p>\n\n<p><\/p>\n\n<p><strong>Prossimo Passo:<\/strong><br \/>Una volta che hai il tuo primo container pronto, duplicalo 3 volte e cambia la classe CSS su ogni container per avere 4 classi numerate sequenzialmente:<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 abbiamo finito!<\/strong><\/p>\n\n<p>In questo tutorial, abbiamo imparato come creare una sezione hero con Elementor, la piattaforma #1 per siti web su WordPress. <\/p>\n\n<p>Ci siamo concentrati sulla creazione di una sezione hero che cambia l&#8217;immagine di sfondo quando si passa il mouse su diversi elementi e abbiamo utilizzato la funzione container di Elementor e codice CSS personalizzato per raggiungere questo obiettivo.<\/p>\n\n<p>Seguendo questo tutorial, puoi migliorare il design UX\/UI del tuo sito web e creare una sezione visivamente attraente e coinvolgente che si distingue dal resto.\nUtilizzare Elementor rende facile per chiunque creare un sito web dall&#8217;aspetto professionale senza alcuna esperienza di codifica.\nIn generale, questo tutorial fornisce un modo semplice ed efficace per progettare una sezione hero che mostri la proposta di valore del tuo sito web e coinvolga i tuoi visitatori.  <\/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 \u00e8 una funzionalit\u00e0 opzionale in Firefox &#8211; Gli utenti possono abilitarla per i test (basato sulla nota di Compatibilit\u00e0 del Browser): https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/:has<\/p>\n<\/div>\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una sezione hero ben progettata pu\u00f2 avere un impatto significativo sul successo di un sito web, migliorando il coinvolgimento degli utenti e i tassi di conversione, oltre a migliorare l&#8217;esperienza utente e l&#8217;ottimizzazione per i motori di ricerca.<\/p>\n","protected":false},"author":507051,"featured_media":120138,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[470,477,476],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-120137","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-it","category-scrive-il-team-di-elementor","category-consigli-trucchi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial: Come Cambiare l&#039;Immagine di Sfondo di un Hero, al Passaggio del Mouse<\/title>\n<meta name=\"description\" content=\"Una sezione hero ben progettata pu\u00f2 avere un impatto significativo sul successo di un sito web, migliorando il coinvolgimento degli utenti e i tassi di conversione, oltre a migliorare l&#039;esperienza utente e l&#039;ottimizzazione per i motori di ricerca.\" \/>\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\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: Come Cambiare l&#039;Immagine di Sfondo di un Hero, al Passaggio del Mouse\" \/>\n<meta property=\"og:description\" content=\"Una sezione hero ben progettata pu\u00f2 avere un impatto significativo sul successo di un sito web, migliorando il coinvolgimento degli utenti e i tassi di conversione, oltre a migliorare l&#039;esperienza utente e l&#039;ottimizzazione per i motori di ricerca.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-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=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931\"},\"headline\":\"Tutorial: Come Cambiare l&#8217;Immagine di Sfondo di un Hero, al Passaggio del Mouse\",\"datePublished\":\"2023-07-10T07:54:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/\"},\"wordCount\":832,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png\",\"articleSection\":[\"Elementor\",\"Scrive il Team di Elementor\",\"Consigli Trucchi\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/\",\"url\":\"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/\",\"name\":\"Tutorial: Come Cambiare l'Immagine di Sfondo di un Hero, al Passaggio del Mouse\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-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\":\"Una sezione hero ben progettata pu\u00f2 avere un impatto significativo sul successo di un sito web, migliorando il coinvolgimento degli utenti e i tassi di conversione, oltre a migliorare l'esperienza utente e l'ottimizzazione per i motori di ricerca.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-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\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\",\"item\":\"https:\/\/elementor.com\/blog\/it\/category\/elementor-it\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Tutorial: Come Cambiare l&#8217;Immagine di Sfondo di un Hero, al Passaggio del Mouse\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/it\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/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\/it\/#\/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\/it\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/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\/it\/author\/alan-kaler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: Come Cambiare l'Immagine di Sfondo di un Hero, al Passaggio del Mouse","description":"Una sezione hero ben progettata pu\u00f2 avere un impatto significativo sul successo di un sito web, migliorando il coinvolgimento degli utenti e i tassi di conversione, oltre a migliorare l'esperienza utente e l'ottimizzazione per i motori di ricerca.","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\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/","og_locale":"it_IT","og_type":"article","og_title":"Tutorial: Come Cambiare l'Immagine di Sfondo di un Hero, al Passaggio del Mouse","og_description":"Una sezione hero ben progettata pu\u00f2 avere un impatto significativo sul successo di un sito web, migliorando il coinvolgimento degli utenti e i tassi di conversione, oltre a migliorare l'esperienza utente e l'ottimizzazione per i motori di ricerca.","og_url":"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-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":{"Scritto da":"Alan Kaler","Tempo di lettura stimato":"4 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931"},"headline":"Tutorial: Come Cambiare l&#8217;Immagine di Sfondo di un Hero, al Passaggio del Mouse","datePublished":"2023-07-10T07:54:00+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/"},"wordCount":832,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/it\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png","articleSection":["Elementor","Scrive il Team di Elementor","Consigli Trucchi"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/","url":"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/","name":"Tutorial: Come Cambiare l'Immagine di Sfondo di un Hero, al Passaggio del Mouse","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-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":"Una sezione hero ben progettata pu\u00f2 avere un impatto significativo sul successo di un sito web, migliorando il coinvolgimento degli utenti e i tassi di conversione, oltre a migliorare l'esperienza utente e l'ottimizzazione per i motori di ricerca.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-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\/it\/tutorial-come-cambiare-limmagine-di-sfondo-di-un-hero-al-passaggio-del-mouse\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/it\/"},{"@type":"ListItem","position":2,"name":"Elementor","item":"https:\/\/elementor.com\/blog\/it\/category\/elementor-it\/"},{"@type":"ListItem","position":3,"name":"Tutorial: Come Cambiare l&#8217;Immagine di Sfondo di un Hero, al Passaggio del Mouse"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/it\/#website","url":"https:\/\/elementor.com\/blog\/it\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/it\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/#\/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\/it\/#\/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\/it\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/#\/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\/it\/author\/alan-kaler\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/120137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/users\/507051"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/comments?post=120137"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/120137\/revisions"}],"predecessor-version":[{"id":150254,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/120137\/revisions\/150254"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/media\/120138"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/media?parent=120137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/categories?post=120137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/tags?post=120137"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/marketing_persona?post=120137"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/marketing_intent?post=120137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}