{"id":112816,"date":"2023-07-10T10:54:00","date_gmt":"2023-07-10T07:54:00","guid":{"rendered":"https:\/\/elementor.com\/blog\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/"},"modified":"2023-07-10T10:54:00","modified_gmt":"2023-07-10T07:54:00","slug":"tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/","title":{"rendered":"Tutorial: C\u00f3mo Cambiar la Imagen de Fondo de un H\u00e9roe al Pasar el Rat\u00f3n"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>\u00bfQu\u00e9 hay en este Tutorial?<\/strong><\/h2>\n\n<p>En este tutorial, explicaremos c\u00f3mo crear una secci\u00f3n de h\u00e9roe que cambia la imagen de fondo al pasar el rat\u00f3n sobre diferentes elementos.\nPara lograr esto, usaremos la funci\u00f3n de contenedor de Elementor, agregaremos c\u00f3digo <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\" title=\"CSS\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"4536\">CSS<\/a> personalizado y explicaremos lo que estamos haciendo a medida que avanzamos. <\/p>\n\n<h2 class=\"wp-block-heading\"><strong> <\/strong><\/h2>\n\n<h2 class=\"wp-block-heading\"><strong>\u00bfQu\u00e9 es un h\u00e9roe?<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 secci\u00f3n de h\u00e9roe, tambi\u00e9n conocida como imagen de h\u00e9roe o banner de h\u00e9roe, es una secci\u00f3n prominente en un sitio web que generalmente aparece en la parte superior de la p\u00e1gina de inicio.\nSuele consistir en una imagen o video grande, acompa\u00f1ado de texto y\/u otros elementos visuales. <\/p>\n\n<p>El prop\u00f3sito de la secci\u00f3n de h\u00e9roe es captar inmediatamente la atenci\u00f3n del visitante y transmitir el mensaje o propuesta de valor m\u00e1s importante del sitio web.\nEs una oportunidad para que las empresas causen una fuerte primera impresi\u00f3n. <\/p>\n\n<p>Adem\u00e1s del elemento visual principal, la secci\u00f3n de h\u00e9roe tambi\u00e9n puede incluir un bot\u00f3n de llamada a la acci\u00f3n (CTA), que invita al visitante a realizar una acci\u00f3n deseada.<\/p>\n\n<p>Una secci\u00f3n de h\u00e9roe bien dise\u00f1ada puede tener un impacto significativo en el \u00e9xito de un sitio web, desde mejorar la participaci\u00f3n del usuario y las tasas de conversi\u00f3n hasta mejorar la experiencia del usuario y la optimizaci\u00f3n en motores de b\u00fasqueda.\nA menudo es el elemento m\u00e1s visualmente impactante y memorable de un sitio web, y puede ayudar a las empresas a destacarse en un mercado en l\u00ednea saturado. <\/p>\n\n<h2 class=\"wp-block-heading\"><strong>Mejorar la participaci\u00f3n del usuario<\/strong><\/h2>\n\n<p>Una secci\u00f3n de h\u00e9roe visualmente atractiva y bien dise\u00f1ada &amp; desarrollada puede captar la atenci\u00f3n del usuario y alentarlo a permanecer m\u00e1s tiempo en su sitio web, aumentando las posibilidades de que realice una acci\u00f3n deseada, como completar un formulario o realizar una compra.<br\/><br\/>Adem\u00e1s, la secci\u00f3n de h\u00e9roe es a menudo lo primero que un usuario ve cuando visita un sitio web, y puede establecer el tono para el resto del sitio.\nUna secci\u00f3n de h\u00e9roe bien dise\u00f1ada puede ayudar a establecer la identidad, personalidad y valores de la marca, ayudando a diferenciarla de los competidores. <br\/><\/p>\n\n<h2 class=\"wp-block-heading\"><strong>C\u00f3mo crear una secci\u00f3n de h\u00e9roe que cambia la imagen de fondo al pasar el rat\u00f3n sobre diferentes elementos<\/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>Construiremos este dise\u00f1o con Contenedores, as\u00ed que act\u00edvelos a trav\u00e9s de la Configuraci\u00f3n &gt; Funciones de Elementor.<br\/>Usaremos un poco de CSS, pero no se preocupe, proporcionar\u00e9 todo el c\u00f3digo y le guiar\u00e9 sobre d\u00f3nde insertarlo.<\/p>\n<\/div>\n\n<h3 class=\"wp-block-heading\"><strong>\u00bfQu\u00e9 necesitamos para empezar?<\/strong><\/h3>\n\n<ul class=\"wp-block-list\"><li>Plugin Elementor Pro<\/li><li>4 Im\u00e1genes<\/li><\/ul>\n\n<h3 class=\"wp-block-heading\"><br\/>Comencemos:<\/h3>\n\n<p>Cree una nueva p\u00e1gina y ed\u00edtela con Elementor.<\/p>\n\n<p>Inserte un contenedor con las siguientes configuraciones:<\/p>\n\n<p><\/p>\n\n<ul class=\"wp-block-list\"><li>Ancho del Contenido: Ancho Completo<\/li><li>Ancho: 100%<\/li><li>Altura M\u00ednima: 100vh<\/li><li>Relleno: 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>Asigne una clase al contenedor llamada: \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>Vaya al panel de control de WordPress y cargue las 4 im\u00e1genes que usar\u00e1 en el \u00e1rea de medios de 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>Regrese a la p\u00e1gina e inserte el siguiente c\u00f3digo CSS en la pesta\u00f1a de CSS personalizado del contenedor:<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>Reemplace \u201chttps:\/\/yousite.com\/image.jpg\u201d con las URLs de las im\u00e1genes que usar\u00e1 en cada zona.<\/p>\n<\/div>\n\n<p><br\/>Este CSS logra 2 cosas:<br\/><br\/>1 &#8211; Cambia el color de fondo al pasar el rat\u00f3n en cada contenedor<\/p>\n\n<p>2 &#8211; Cambia la imagen de fondo en el .main-container-slide al pasar el rat\u00f3n sobre los contenedores .slide-*.<\/p>\n\n<p><\/p>\n\n<p>Mire mi ejemplo (cambi\u00e9 las URLs de las im\u00e1genes por mis im\u00e1genes reci\u00e9n cargadas):<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>Siguiente Paso:<br\/><br\/><\/strong>En la pesta\u00f1a de Estilo, ingrese estas configuraciones:<\/p>\n\n<ul class=\"wp-block-list\"><li>Fondo: Normal<\/li><li>Tipo de Fondo: Cl\u00e1sico<\/li><li>Color: Transparente<\/li><li>Imagen: *Elija la primera imagen que desea mostrar<\/li><li>Tama\u00f1o de la Imagen: Completo<\/li><li>Posici\u00f3n: Centro Centro<\/li><li>Repetir: No repetir<\/li><li>Tama\u00f1o de Visualizaci\u00f3n: Cubrir<\/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>Siguiente Paso:<br\/><\/strong>Agregue 1 contenedor dentro con estas configuraciones:<\/p>\n\n<ul class=\"wp-block-list\"><li>Ancho del Contenido: Ancho Completo<\/li><li>Ancho: 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>Vaya a la pesta\u00f1a Avanzado y agregue all\u00ed una clase llamada: 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>Ahora, dise\u00f1e cada contenedor con su estilo y elementos personalizados, como lo he hecho en este ejemplo:<\/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 puede ver, numer\u00e9 el contenedor, agregu\u00e9 bordes para generar una diferencia entre las categor\u00edas en mi sitio; y contenido personalizado con un CTA en cada zona.<\/p>\n\n<p><\/p>\n\n<p><strong>Siguiente Paso:<\/strong><br\/>Una vez que tenga su primer contenedor listo, dupl\u00edquelo 3 veces y cambie la clase CSS en cada contenedor para tener 4 clases numeradas secuencialmente:<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>\u00a1Y hemos terminado!<\/strong><\/p>\n\n<p>En este tutorial, aprendimos c\u00f3mo crear una secci\u00f3n de h\u00e9roe con Elementor, la plataforma #1 para sitios web en WordPress. <\/p>\n\n<p>Nos enfocamos en crear una secci\u00f3n de h\u00e9roe que cambia la imagen de fondo al pasar el rat\u00f3n sobre diferentes elementos y usamos la funci\u00f3n de contenedor de Elementor y c\u00f3digo CSS personalizado para lograr esta tarea.<\/p>\n\n<p>Siguiendo este tutorial, puede mejorar el dise\u00f1o UX\/UI de su sitio web y crear una secci\u00f3n visualmente atractiva y atractiva que se destaque del resto.\nUsar Elementor facilita que cualquier persona cree un sitio web de aspecto profesional sin experiencia en codificaci\u00f3n.\nEn general, este tutorial proporciona una forma simple y efectiva de dise\u00f1ar una secci\u00f3n de h\u00e9roe que muestre la propuesta de valor de su sitio web y atraiga a sus 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 es una funci\u00f3n opcional en Firefox &#8211; Los usuarios pueden habilitarla para pruebas (basado en la nota de Compatibilidad del Navegador): https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/:has<\/p>\n<\/div>\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una secci\u00f3n de h\u00e9roe bien dise\u00f1ada puede tener un impacto significativo en el \u00e9xito de un sitio web, desde mejorar la participaci\u00f3n del usuario y las tasas de conversi\u00f3n hasta mejorar la experiencia del usuario y la optimizaci\u00f3n en motores de b\u00fasqueda.<\/p>\n","protected":false},"author":507051,"featured_media":112817,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[353,301,293],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-112816","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-tricks-es","category-elementor-team-writes-es","category-elementor-es"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial: C\u00f3mo Cambiar la Imagen de Fondo de un H\u00e9roe al Pasar el Rat\u00f3n<\/title>\n<meta name=\"description\" content=\"Una secci\u00f3n de h\u00e9roe bien dise\u00f1ada puede tener un impacto significativo en el \u00e9xito de un sitio web, desde mejorar la participaci\u00f3n del usuario y las tasas de conversi\u00f3n hasta mejorar la experiencia del usuario y la optimizaci\u00f3n en motores de b\u00fasqueda.\" \/>\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\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: C\u00f3mo Cambiar la Imagen de Fondo de un H\u00e9roe al Pasar el Rat\u00f3n\" \/>\n<meta property=\"og:description\" content=\"Una secci\u00f3n de h\u00e9roe bien dise\u00f1ada puede tener un impacto significativo en el \u00e9xito de un sitio web, desde mejorar la participaci\u00f3n del usuario y las tasas de conversi\u00f3n hasta mejorar la experiencia del usuario y la optimizaci\u00f3n en motores de b\u00fasqueda.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/\" \/>\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=\"Tiempo de lectura\" \/>\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\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931\"},\"headline\":\"Tutorial: C\u00f3mo Cambiar la Imagen de Fondo de un H\u00e9roe al Pasar el Rat\u00f3n\",\"datePublished\":\"2023-07-10T07:54:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/\"},\"wordCount\":970,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png\",\"articleSection\":[\"Consejos y trucos\",\"El equipo de Elementor escribe\",\"Elementor\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/\",\"url\":\"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/\",\"name\":\"Tutorial: C\u00f3mo Cambiar la Imagen de Fondo de un H\u00e9roe al Pasar el Rat\u00f3n\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#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 secci\u00f3n de h\u00e9roe bien dise\u00f1ada puede tener un impacto significativo en el \u00e9xito de un sitio web, desde mejorar la participaci\u00f3n del usuario y las tasas de conversi\u00f3n hasta mejorar la experiencia del usuario y la optimizaci\u00f3n en motores de b\u00fasqueda.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#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\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\",\"item\":\"https:\/\/elementor.com\/blog\/es\/category\/elementor-es\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Tutorial: C\u00f3mo Cambiar la Imagen de Fondo de un H\u00e9roe al Pasar el Rat\u00f3n\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/es\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/#\/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\/es\/#\/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\/es\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/#\/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\/es\/author\/alan-kaler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: C\u00f3mo Cambiar la Imagen de Fondo de un H\u00e9roe al Pasar el Rat\u00f3n","description":"Una secci\u00f3n de h\u00e9roe bien dise\u00f1ada puede tener un impacto significativo en el \u00e9xito de un sitio web, desde mejorar la participaci\u00f3n del usuario y las tasas de conversi\u00f3n hasta mejorar la experiencia del usuario y la optimizaci\u00f3n en motores de b\u00fasqueda.","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\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/","og_locale":"es_ES","og_type":"article","og_title":"Tutorial: C\u00f3mo Cambiar la Imagen de Fondo de un H\u00e9roe al Pasar el Rat\u00f3n","og_description":"Una secci\u00f3n de h\u00e9roe bien dise\u00f1ada puede tener un impacto significativo en el \u00e9xito de un sitio web, desde mejorar la participaci\u00f3n del usuario y las tasas de conversi\u00f3n hasta mejorar la experiencia del usuario y la optimizaci\u00f3n en motores de b\u00fasqueda.","og_url":"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/","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","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/blog\/es\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931"},"headline":"Tutorial: C\u00f3mo Cambiar la Imagen de Fondo de un H\u00e9roe al Pasar el Rat\u00f3n","datePublished":"2023-07-10T07:54:00+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/"},"wordCount":970,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/es\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/07\/New-Features-Spotlight_Blog-cover.png","articleSection":["Consejos y trucos","El equipo de Elementor escribe","Elementor"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/","url":"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/","name":"Tutorial: C\u00f3mo Cambiar la Imagen de Fondo de un H\u00e9roe al Pasar el Rat\u00f3n","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#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 secci\u00f3n de h\u00e9roe bien dise\u00f1ada puede tener un impacto significativo en el \u00e9xito de un sitio web, desde mejorar la participaci\u00f3n del usuario y las tasas de conversi\u00f3n hasta mejorar la experiencia del usuario y la optimizaci\u00f3n en motores de b\u00fasqueda.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/elementor.com\/blog\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#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\/es\/tutorial-como-cambiar-la-imagen-de-fondo-de-un-heroe-al-pasar-el-raton\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/es\/"},{"@type":"ListItem","position":2,"name":"Elementor","item":"https:\/\/elementor.com\/blog\/es\/category\/elementor-es\/"},{"@type":"ListItem","position":3,"name":"Tutorial: C\u00f3mo Cambiar la Imagen de Fondo de un H\u00e9roe al Pasar el Rat\u00f3n"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/es\/#website","url":"https:\/\/elementor.com\/blog\/es\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/es\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/elementor.com\/blog\/es\/#\/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\/es\/#\/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\/es\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/elementor.com\/blog\/es\/#\/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\/es\/author\/alan-kaler\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/posts\/112816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/users\/507051"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/comments?post=112816"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/posts\/112816\/revisions"}],"predecessor-version":[{"id":112818,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/posts\/112816\/revisions\/112818"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/media\/112817"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/media?parent=112816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/categories?post=112816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/tags?post=112816"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/marketing_persona?post=112816"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/marketing_intent?post=112816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}