Schnellere Elementor Hero-Bilder in 2 Minuten!

Schnellere Elementor Hero-Bilder

Elementor, ein beliebter WordPress-Seiteneditor, vereinfacht das Webdesign. Leider verlangsamt er oft Websites. Manchmal aufgrund von Benutzerfehlern und manchmal wegen der Designentscheidungen von Elementor. Ein Beispiel, das ich fast täglich sehe, ist der Umgang von Elementor mit Hero-Bildern. Standardmäßig verwendet Elementor dafür Hintergrundbilder, was die Ladezeit der Seite jedes Mal verlängert.

Zuletzt überprüft von Arjen Karel im März 2026

Der Reiz von Elementor-Hintergrundbildern

Elementor fügt Hero-Bilder standardmäßig als Hintergrundbild hinzu. Klicke beim Bearbeiten der Seite mit Elementor einfach auf den ersten Container, navigiere zu "Stil" und füge dein Bild hinzu. Es ist einfach, bequem und idiotensicher. Wenn dir das ausreicht, höre hier auf zu lesen. Wenn dir deine Besucher jedoch wichtig sind, lies weiter und lerne, wie man Elementor Hero-Bilder richtig erstellt.

Das Problem mit Elementor-Hintergrundbildern

Du fragst dich jetzt vielleicht, was an Hintergrundbildern falsch ist? Hintergrundbilder sind für dieses Verhalten bekannt: Sie erstrecken sich über den gesamten Hintergrund eines Elements. Das erfüllt seinen Zweck. Aber auf Kosten der Performance:

• Späte Entdeckung: Aus technischer Sicht sind Hintergrundbilder alles andere als ideal. Elementor-Hintergrundbilder werden im HTML nicht sofort entdeckt. Diese Hintergrundbilder sind in Stylesheets verlinkt. Da Stylesheets separat heruntergeladen und geparst werden müssen, bedeutet dies, dass sie während des Rendering-Prozesses viel später entdeckt werden. Dies verzögert deinen Largest Contentful Paint (LCP).
• Nicht auf Geschwindigkeit optimiert: Hintergrundbilder sind nicht auf Geschwindigkeit optimiert, da ihnen neuere Eigenschaften wie natives Lazy Loading, fetchpriority und asynchrones Decoding (async decoding) fehlen.
• Nicht responsive: Zu guter Letzt sind Elementor-Hintergrundbilder nicht responsive und laden immer ein Bild in voller Desktop-Größe, selbst für kleine Mobilgeräte.

Ich werde hier nicht weiter ins Detail gehen (wenn du interessiert bist, lies darüber, warum Hintergrundbilder böse sind), aber es genügt zu sagen, dass eine Seite mit diesem Setup wahrscheinlich bei den Core Web Vitals durchfallen wird.

Der 2-Minuten-Fix für langsame Hintergrundbilder

Langsame Hintergrundbilder müssen kein Problem sein. Mit einer einfachen CSS-Anpassung können sie in schnelle, responsive Bilder verwandelt werden. Das Geheimnis? Die Verwendung von object-fit: cover zur Skalierung des Bildes kombiniert mit position: relative auf dem Container und position: absolute auf dem Bild.

Fun Fact: Ich habe heute die Zeit gestoppt, während ich Elementor-Hintergrundbilder in blitzschnelle responsive Bilder umgewandelt habe. Ich habe weniger als 2 Minuten gebraucht!

Schritt 1: Füge die erforderlichen Styles hinzu

Um langsame Hintergrundbilder zu beheben, wende zunächst einige wichtige CSS-Styles an. Diese Styles sorgen dafür, dass sich das Bild wie ein richtiges Hintergrundbild verhält, und stellen sicher, dass es nicht mit Elementor-Hilfs-Divs kollidiert.

/* Der relative übergeordnete Container */
  .relative{
      position: relative;
  }

  /* Stelle sicher, dass Elementor-Hilfs-Divs nicht relativ sind */
  .relative .elementor-container,
  .relative .elementor-column,
  .relative .elementor-widget-wrap {
      position: initial;
  }

  /* Das neue und verbesserte Hero-Bild */
  .heroimg, .heroimg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

Was das bewirkt:

• .relative: Macht den übergeordneten Container relativ, um untergeordnete Elemente darin zu positionieren.
• .relative .elementor-*: Setzt Elementor-Hilfs-Divs zurück, um Layout-Konflikte zu vermeiden.
• .heroimg: Stellt sicher, dass das Bild skaliert wird, um den Container abzudecken, während es dahinter liegt.

So fügst du die Styles hinzu:

• Navigiere zu deinem WordPress Dashboard.
• Gehe zu Design > Customizer.
• Klicke auf Zusätzliches CSS.
• Füge den obigen CSS-Code ein und speichere deine Änderungen.

Dies bildet die Grundlage für die Umwandlung dieser langsamen Hintergrundbilder in responsive, optimierte Hero-Bilder. Wende als Nächstes die Klassen .relative und .heroimg auf deine Hero-Sektion an, um die Konvertierung abzuschließen.

Schritt 2: Bereite den Container vor

Da die Styles nun an Ort und Stelle sind, ist es an der Zeit, den Container für das neue Hero-Bild vorzubereiten. Dies beinhaltet das Entfernen des vorhandenen Hintergrundbildes und die Anwendung der Klasse .relative auf den Container.

Schritte:

• Bearbeite den Container:
• Gehe in deinen Elementor-Editor und wähle den Container aus, in dem das Hero-Bild derzeit angewendet wird.
• Entferne das Hintergrundbild:
• Navigiere zum Tab Stil.
• Suche den Abschnitt Hintergrund, in dem das Bild angewendet wird.
• Klicke auf das Mülleimer-Symbol, um das Hintergrundbild zu entfernen.
• Wende die Klasse .relative an:
• Wechsle zum Tab Erweitert.
• Gib unter CSS-Klassen relative ein.

Schritt 3: Füge ein neues Bild hinzu und wende die neuen Klassen an

Sobald der Container bereit ist, ist es an der Zeit, das responsive und optimierte Hero-Bild mithilfe von Elementor hinzuzufügen.

Was dich erwartet: Im letzten Schritt kann das Hero-Bild vor der Anwendung der Klassen verschoben oder seltsam aussehen. Das ist normal. Die Klasse .heroimg verwandelt das Bild in ein responsives Hero-Bild in voller Breite, das sich wie ein Hintergrundbild verhält. Nach Abschluss liegt dein optimiertes Hero-Bild hinter dem Container und bietet dieselbe visuelle Wirkung bei deutlich verbesserter Performance.

Schritte:

• Füge ein Bild-Element hinzu:
• Klicke im Elementor-Editor auf das Plus-Symbol in der oberen linken Ecke, um ein neues Element hinzuzufügen.
• Ziehe das Bild-Widget per Drag-and-Drop in den obersten Container (den mit der Klasse .relative).
• Lade dein Bild hoch und wähle es aus:
• Klicke in den Bildeinstellungen im linken Panel auf den Bild-Platzhalter.
• Lade das Vollbild hoch, das du verwenden möchtest, oder wähle ein vorhandenes aus deiner WordPress-Mediathek aus.
• Wende die Klasse .heroimg an:
• Während das Bild noch ausgewählt ist, navigiere im Elementor-Menü zum Tab Erweitert.
• Gib im Feld CSS-Klassen heroimg ein.

Das Ergebnis: 77 % schnellerer LCP

Zu diesem Zeitpunkt ist dein Hero-Bild vollständig optimiert. Sobald du die Seite veröffentlichst und das Element untersuchst, wirst du etwas Großartiges bemerken: Das langsame Hintergrundbild wurde durch ein responsives, schnelles Vordergrundbild ersetzt. Dieses Bild wird nun mit einer hohen fetchpriority geladen. Dies stellt sicher, dass es schneller geladen wird, was sowohl die Core Web Vitals als auch die User Experience (UX) verbessert.

In diesem Beispiel fiel der LCP von 2,6 Sekunden auf 0,6 Sekunden. Das ist eine Verbesserung von 77 % durch einen 2-Minuten-Fix.

Bonus: Das Hero-Bild vorladen (Preload)

Hintergrundbilder können nicht wirklich automatisch vorgeladen werden. Vordergrundbilder können von Plugins wie WP Core Web Vitals vorgeladen werden. Das Vorladen (Preloading) dieser responsiven Bilder reiht sie vor all deinen Skripten ein und priorisiert die visuellen Aspekte deiner Webseite.

Für weitere Möglichkeiten, deine Bilder zu optimieren, sieh dir den vollständigen Leitfaden zur Bildoptimierung an.

Sieh dir den vollständigen Walkthrough auf YouTube an

Schau mir auf YouTube zu, wie ich ein Elementor-Hintergrundbild repariere!