Immagini hero di Elementor più veloci in 2 minuti!

Immagini hero di Elementor più veloci

Elementor, un popolare editor di pagine WordPress, semplifica il design delle pagine. Sfortunatamente, spesso rallenta i siti. A volte a causa di errori dell'utente e a volte a causa delle scelte di design di Elementor. Un esempio che vedo quasi quotidianamente è come Elementor gestisce le immagini hero. Per impostazione predefinita, Elementor usa immagini di sfondo per queste, il che rallenta il caricamento della pagina ogni singola volta.

Ultima revisione a cura di Arjen Karel a marzo 2026

Il fascino delle immagini di sfondo di Elementor

Elementor aggiunge le immagini hero come immagine di sfondo per impostazione predefinita. Mentre modifichi la pagina con Elementor, fai semplicemente clic sul primo contenitore, vai allo stile e aggiungi la tua immagine. È facile, comodo e a prova di idiota. Se questo ti basta, smetti di leggere qui, ma se tieni ai tuoi visitatori continua a leggere e scopri come creare immagini hero di Elementor nel modo giusto.

Il problema con le immagini di sfondo di Elementor

Ora, cosa c'è di sbagliato nelle immagini di sfondo ti potresti chiedere? Le immagini di sfondo sono note per questo comportamento: coprono l'intero sfondo di un elemento. Fanno quello che devono fare. Ma a costo delle prestazioni:

• Scoperta tardiva: Da un punto di vista tecnico, le immagini di sfondo sono tutt'altro che ideali. Le immagini di sfondo di Elementor non vengono scoperte immediatamente nell'HTML. Queste immagini di sfondo sono collegate nei fogli di stile. Poiché i fogli di stile devono essere scaricati e analizzati separatamente, significa che vengono scoperti molto più tardi durante il processo di rendering. Questo ritarda il tuo Largest Contentful Paint (LCP).
• Non ottimizzate per la velocità: Le immagini di sfondo non sono ottimizzate per la velocità perché mancano di proprietà più recenti come il native lazy loading, fetchpriority e l'async decoding.
• Non responsive: Ultimo ma non meno importante, le immagini di sfondo di Elementor non sono responsive e caricheranno sempre un'immagine completa in formato desktop, anche per piccoli dispositivi mobile.

Non entrerò molto più nei dettagli (se sei interessato leggi perché le immagini di sfondo sono il male) ma basti dire che una pagina con questa configurazione probabilmente non supererà i Core Web Vitals.

La correzione in 2 minuti per le immagini di sfondo lente

Le immagini di sfondo lente non devono per forza essere un problema. Con una semplice modifica CSS, possono essere trasformate in immagini veloci e responsive. Il segreto? Usare object-fit: cover per ridimensionare l'immagine e combinarlo con position: relative sul contenitore e position: absolute sull'immagine.

Curiosità: Oggi mi sono cronometrato mentre convertivo le immagini di sfondo di Elementor in immagini responsive velocissime. Ci ho messo meno di 2 minuti!

Passaggio 1: aggiungi gli stili necessari

Per correggere le immagini di sfondo lente, inizia applicando alcuni stili CSS essenziali. Questi stili faranno in modo che l'immagine si comporti come una vera immagine di copertina di sfondo e assicureranno che non entri in conflitto con i div di supporto di Elementor.

/* The relative parent container */
  .relative{
      position: relative;
  }

  /* Ensure Elementor helper divs are not relative */
  .relative .elementor-container,
  .relative .elementor-column,
  .relative .elementor-widget-wrap {
      position: initial;
  }

  /* The new and improved hero image */
  .heroimg, .heroimg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

Cosa fa:

• .relative: Rende relativo il contenitore genitore per posizionare gli elementi figlio al suo interno.
• .relative .elementor-*: Resetta i div di supporto di Elementor per evitare conflitti di layout.
• .heroimg: Assicura che l'immagine si ridimensioni per coprire il contenitore pur rimanendo dietro di esso.

Come aggiungere gli stili:

• Vai alla tua Bacheca di WordPress.
• Vai su Aspetto > Personalizza.
• Fai clic su CSS aggiuntivo.
• Incolla il codice CSS sopra e salva le modifiche.

Questo pone le basi per convertire quelle lente immagini di sfondo in immagini hero responsive e ottimizzate. Successivamente, applica le classi .relative e .heroimg alla tua sezione hero per completare la conversione.

Passaggio 2: Prepara il contenitore

Ora che gli stili sono a posto, è il momento di preparare il contenitore per la nuova immagine hero. Questo comporta la rimozione dell'immagine di sfondo esistente e l'applicazione della classe .relative al contenitore.

Passaggi:

• Modifica il contenitore:
• Vai al tuo editor di Elementor e seleziona il contenitore in cui è attualmente applicata l'immagine hero.
• Rimuovi l'immagine di sfondo:
• Vai alla scheda Stile.
• Individua la sezione Sfondo in cui è applicata l'immagine.
• Fai clic sull'icona del cestino per rimuovere l'immagine di sfondo.
• Applica la classe .relative:
• Passa alla scheda Avanzato.
• Sotto Classi CSS, digita relative.

Passaggio 3: Aggiungi una nuova immagine e applica le nuove classi

Con il contenitore pronto, è il momento di aggiungere l'immagine hero responsive e ottimizzata usando Elementor.

Cosa aspettarsi: Durante il passaggio finale, l'immagine hero potrebbe sembrare disallineata o strana prima di applicare le classi. Questo è normale. La classe .heroimg trasformerà l'immagine in un'immagine hero responsive a larghezza intera che si comporta come una copertina di sfondo. Una volta completato, la tua immagine hero ottimizzata si posizionerà dietro il contenitore, offrendo lo stesso impatto visivo con prestazioni notevolmente migliorate.

Passaggi:

• Aggiungi un elemento immagine:
• Nell'editor di Elementor, fai clic sull'icona più in alto a sinistra per aggiungere un nuovo elemento.
• Trascina e rilascia il widget Immagine nel contenitore superiore (quello con la classe .relative).
• Carica e seleziona la tua immagine:
• Nelle impostazioni dell'immagine nel pannello di sinistra, fai clic sul segnaposto dell'immagine.
• Carica l'immagine a schermo intero che desideri usare o selezionane una esistente dalla tua galleria multimediale di WordPress.
• Applica la classe .heroimg:
• Con l'immagine ancora selezionata, vai alla scheda Avanzato nel menu di Elementor.
• Nel campo Classi CSS, digita heroimg.

Il risultato: LCP più veloce del 77%

A questo punto, la tua immagine hero è completamente ottimizzata. Una volta pubblicata la pagina, ispeziona l'elemento e noterai qualcosa di fantastico: la lenta immagine di sfondo è stata sostituita con un'immagine in primo piano veloce e responsive. Questa immagine viene ora caricata con una fetchpriority elevata, assicurando che si carichi più velocemente, migliorando sia i Core Web Vitals che la user experience.

In questo esempio, l'LCP è sceso da 2,6 secondi a 0,6 secondi. È un miglioramento del 77% ottenuto con una correzione di 2 minuti.

Bonus: preload dell'immagine hero

Le immagini di sfondo non possono essere precaricate automaticamente. Le immagini in primo piano possono essere precaricate da plugin come WP Core Web Vitals. Il Preloading di queste immagini responsive le metterà in coda prima di tutti i tuoi script e darà priorità agli aspetti visivi della tua pagina web.

Per ulteriori modi per ottimizzare le tue immagini, dai un'occhiata alla guida completa all'ottimizzazione delle immagini.

Guarda il tutorial completo su YouTube

Guardami correggere un'immagine di sfondo di Elementor su YouTube!