¡Imágenes hero de Elementor más rápidas en 2 minutos!

Imágenes hero de Elementor más rápidas

Elementor, un popular editor de páginas de WordPress, simplifica el diseño de páginas. Desafortunadamente, a menudo ralentiza los sitios. A veces debido a errores del usuario y otras debido a las decisiones de diseño de Elementor. Un ejemplo que veo casi a diario es cómo Elementor maneja las imágenes hero. Por defecto, Elementor usa imágenes de fondo para estas, lo cual ralentiza la carga de la página cada vez.

Última revisión por Arjen Karel en marzo de 2026

El atractivo de las imágenes de fondo de Elementor

Elementor añade las imágenes hero como una imagen de fondo por defecto. Mientras editas la página con Elementor, simplemente haz clic en el primer contenedor, navega hasta estilo y añade tu imagen. Es fácil, conveniente y a prueba de tontos. Si eso es suficientemente bueno para ti, deja de leer aquí, pero si te importan tus visitantes, sigue leyendo y aprende a crear imágenes hero de Elementor de la manera correcta.

El problema con las imágenes de fondo de Elementor

Ahora, ¿qué tienen de malo las imágenes de fondo te preguntarás? Las imágenes de fondo son conocidas por este comportamiento: abarcan todo el fondo de un elemento. Hacen lo que tienen que hacer. Pero con un coste de rendimiento:

• Descubrimiento tardío: Desde una perspectiva técnica, las imágenes de fondo están lejos de ser ideales. Las imágenes de fondo de Elementor no se descubren inmediatamente en el HTML. Estas imágenes de fondo están enlazadas en hojas de estilo. Dado que las hojas de estilo tienen que descargarse y analizarse por separado, eso significa que se descubren mucho más tarde durante el proceso de renderizado. Esto retrasa tu Largest Contentful Paint (LCP).
• No optimizadas para la velocidad: Las imágenes de fondo no están optimizadas para la velocidad porque carecen de propiedades más nuevas como carga diferida nativa, fetchpriority y decodificación asíncrona.
• No son responsivas: Por último, pero no menos importante, las imágenes de fondo de Elementor no son responsivas y siempre cargarán una imagen completa del tamaño de escritorio, incluso para dispositivos móviles pequeños.

No entraré en mucho más detalle (si estás interesado lee sobre por qué las imágenes de fondo son malas) pero basta con decir que una página con esta configuración probablemente fallará las Core Web Vitals.

La solución de 2 minutos para las imágenes de fondo lentas

Las imágenes de fondo lentas no tienen por qué ser un problema. Con un simple ajuste de CSS, pueden transformarse en imágenes rápidas y responsivas. ¿El secreto? Usar object-fit: cover para escalar la imagen y combinarlo con position: relative en el contenedor y position: absolute en la imagen.

Dato curioso: Hoy me he cronometrado mientras convertía imágenes de fondo de Elementor en imágenes responsivas increíblemente rápidas. ¡Me llevó menos de 2 minutos!

Paso 1: añade los estilos necesarios

Para arreglar las imágenes de fondo lentas, comienza aplicando unos pocos estilos CSS esenciales. Estos estilos harán que la imagen se comporte como una verdadera imagen de fondo (cover) y garantizarán que no haya conflictos con los divs auxiliares de Elementor.

/* El contenedor padre relativo */
  .relative{
      position: relative;
  }

  /* Asegura que los divs auxiliares de Elementor no sean relativos */
  .relative .elementor-container,
  .relative .elementor-column,
  .relative .elementor-widget-wrap {
      position: initial;
  }

  /* La nueva y mejorada imagen hero */
  .heroimg, .heroimg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

Lo que hace esto:

• .relative: Hace que el contenedor padre sea relativo para posicionar los elementos hijos dentro de él.
• .relative .elementor-*: Restablece los divs auxiliares de Elementor para evitar conflictos de diseño.
• .heroimg: Asegura que la imagen se escale para cubrir el contenedor mientras se sitúa detrás de él.

Cómo añadir los estilos:

• Navega a tu Escritorio de WordPress.
• Ve a Apariencia > Personalizar.
• Haz clic en CSS adicional.
• Pega el código CSS de arriba y guarda los cambios.

Esto sienta las bases para convertir esas imágenes de fondo lentas en imágenes hero responsivas y optimizadas. A continuación, aplica las clases .relative y .heroimg a tu sección hero para completar la conversión.

Paso 2: Prepara el contenedor

Ahora que los estilos están en su lugar, es hora de preparar el contenedor para la nueva imagen hero. Esto implica eliminar la imagen de fondo existente y aplicar la clase .relative al contenedor.

Pasos:

• Edita el contenedor:
• Ve a tu editor de Elementor y selecciona el contenedor donde está aplicada actualmente la imagen hero.
• Elimina la imagen de fondo:
• Navega a la pestaña Estilo.
• Localiza la sección Fondo donde está aplicada la imagen.
• Haz clic en el icono de papelera para eliminar la imagen de fondo.
• Aplica la clase .relative:
• Cambia a la pestaña Avanzado.
• En Clases CSS, escribe relative.

Paso 3: Añade una nueva imagen y aplica las nuevas clases

Con el contenedor listo, es hora de añadir la imagen hero responsiva y optimizada usando Elementor.

Qué esperar: Durante el paso final, la imagen hero puede verse desalineada o extraña antes de aplicar las clases. Esto es normal. La clase .heroimg transformará la imagen en una imagen hero responsiva de ancho completo que se comporta como una cubierta de fondo. Una vez completado, tu imagen hero optimizada se situará detrás del contenedor, ofreciendo el mismo impacto visual con un rendimiento significativamente mejorado.

Pasos:

• Añade un elemento de imagen:
• En el editor de Elementor, haz clic en el icono del signo más en la esquina superior izquierda para añadir un nuevo elemento.
• Arrastra y suelta el widget de Imagen en el contenedor superior (el que tiene la clase .relative).
• Sube y selecciona tu imagen:
• En los ajustes de la imagen en el panel izquierdo, haz clic en el marcador de posición de la imagen.
• Sube la imagen a pantalla completa que deseas usar o selecciona una existente de tu galería de medios de WordPress.
• Aplica la clase .heroimg:
• Con la imagen aún seleccionada, navega a la pestaña Avanzado en el menú de Elementor.
• En el campo Clases CSS, escribe heroimg.

El resultado: LCP un 77% más rápido

Llegados a este punto, tu imagen hero está totalmente optimizada. Una vez que publiques la página, inspecciona el elemento y notarás algo genial: la imagen de fondo lenta ha sido reemplazada por una imagen en primer plano rápida y responsiva. Esta imagen ahora se carga con una fetchpriority alta, asegurando que se cargue más rápido, mejorando tanto las Core Web Vitals como la user experience.

En este ejemplo, el LCP se redujo de 2,6 segundos a 0,6 segundos. Eso es una mejora del 77% con una solución de 2 minutos.

Bonus: precarga la imagen hero

Las imágenes de fondo no pueden precargarse automáticamente de manera real. Las imágenes en primer plano pueden ser precargadas por plugins como WP Core Web Vitals. La precarga de estas imágenes responsivas las pondrá en cola antes de todos tus scripts y priorizará los aspectos visuales de tu página web.

Para más formas de optimizar tus imágenes, consulta la guía completa de optimización de imágenes.

Mira el tutorial completo en YouTube

¡Mírame arreglar una imagen de fondo de Elementor en YouTube!