Schnellere Elementor Hero-Bilder in 2 Minuten!

Schnellere Elementor Hero-Bilder

Elementor, ein beliebter WordPress-Seiten-Editor, vereinfacht das Seitendesign. Leider verlangsamt er oft Websites. Manchmal aufgrund von Benutzerfehlern und manchmal aufgrund von Elementors Designentscheidungen. Ein Beispiel, das ich fast täglich sehe, ist, wie Elementor Hero-Bilder handhabt. Standardmäßig verwendet Elementor Hintergrundbilder dafür, was das Laden der Seite jedes Mal verlangsamt.

Der Reiz von Elementor-Hintergrundbildern

Elementor fügt Hero-Bilder standardmäßig als Hintergrundbild hinzu. Während der Bearbeitung der Seite mit Elementor klicken Sie einfach auf den ersten Container, navigieren Sie zu Stil und fügen Sie Ihr Bild hinzu. Es ist einfach, bequem und idiotensicher. Wenn das gut genug für Sie ist, hören Sie hier auf zu lesen, aber wenn Ihnen Ihre Besucher wichtig sind, lesen Sie weiter und erfahren Sie, wie man Elementor Hero-Bilder richtig erstellt.

Das Problem mit Elementor-Hintergrundbildern

Was ist nun falsch an Hintergrundbildern, könnten Sie fragen? Hintergrundbilder sind für dieses Verhalten bekannt: Sie spannen sich über den gesamten Hintergrund eines Elements. Es tut, was es tun muss. Aber zu einem Leistungspreis:

• Späte Entdeckung: Aus technischer Perspektive 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 viel später während des Rendering-Prozesses entdeckt werden.
• Nicht für Geschwindigkeit optimiert:  Hintergrundbilder sind nicht für Geschwindigkeit optimiert, da ihnen neue Eigenschaften wie natives Lazy Loading, fetchpriority und asynchrones Decoding fehlen.
• Nicht responsive: Nicht zuletzt sind Elementor-Hintergrundbilder nicht responsive und laden immer ein Bild in voller Desktop-Größe, selbst für kleine mobile Geräte.

I werde nicht viel mehr ins Detail gehen (wenn Sie interessiert sind, lesen Sie darüber, warum Hintergrundbilder böse sind), aber es genügt zu sagen, dass eine Seite mit diesem Setup wahrscheinlich die Core Web Vitals nicht bestehen wird.

Die 2-Minuten-Lösung für langsame Hintergrundbilder

Langsame Hintergrundbilder müssen kein Problem sein. Mit einer einfachen CSS-Anpassung können sie in schnelle, responsive Bilder umgewandelt werden.  Das Geheimnis? Verwenden von object-fit: cover zum Skalieren des Bildes und Kombinieren 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 konvertiert habe. Es dauerte weniger als 2 Minuten! 

Wenn das kompliziert klingt, keine Sorge! Ich werde Sie Schritt für Schritt führen. Und am Ende wartet sogar ein How-to-Video auf Sie!

Schritt 1: Notwendige Styles hinzufügen

Um langsame Hintergrundbilder zu beheben, beginnen Sie damit, einige grundlegende CSS-Styles anzuwenden. Diese Styles sorgen dafür, dass sich das Bild wie ein richtiges Hintergrund-Cover verhält und stellen sicher, dass es nicht mit Elementor-Helper-Divs in Konflikt gerät.

/* Der relative Eltern-Container */
  .relative{
      position: relative;
  }
  
  /* Sicherstellen, dass Elementor-Helper-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 dies bewirkt:

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

Wie man die Styles hinzufügt:

• Navigieren Sie zu Ihrem WordPress Dashboard.
• Gehen Sie zu Design > Customizer.
• Klicken Sie auf Zusätzliches CSS.
• Fügen Sie den CSS-Code oben ein und speichern Sie Ihre Änderungen.

Dies legt den Grundstein für die Umwandlung dieser langsamen Hintergrundbilder in responsive, optimierte Hero-Bilder. Wenden Sie als Nächstes die Klassen .relative und .heroimg auf Ihren Hero-Bereich an, um die Magie in Aktion zu sehen! 

Schritt 2: Den Container vorbereiten

Jetzt, da die Styles vorhanden sind, ist es an der Zeit, den Container für das neue Hero-Bild vorzubereiten. Dazu gehört das Entfernen des vorhandenen Hintergrundbilds und das Anwenden der Klasse .relative auf den Container.

Schritte:

• Den Container bearbeiten:
• Gehen Sie zu Ihrem Elementor-Editor und wählen Sie den Container aus, auf dem das Hero-Bild derzeit angewendet ist.
• Das Hintergrundbild entfernen:
• Navigieren Sie zum Tab Stil.
• Suchen Sie den Abschnitt Hintergrund, wo das Bild angewendet ist.
• Klicken Sie auf das Mülleimer-Symbol, um das Hintergrundbild zu entfernen.
• Die .relative Klasse anwenden:
• Wechseln Sie zum Tab Erweitert.
• Geben Sie unter CSS-Klassen relative ein.

Schritt 3: Ein neues Bild hinzufügen und die neuen Klassen anwenden

Wenn der Container bereit ist, ist es an der Zeit, das responsive und optimierte Hero-Bild mit Elementor hinzuzufügen. So geht's:

Was zu erwarten ist: Während des letzten Schritts kann das Hero-Bild falsch ausgerichtet oder seltsam aussehen, bevor die Klassen angewendet werden! Das ist normal! Die .heroimg-Klasse transformiert das Bild in ein responsives, bildschirmfüllendes Hero-Bild, das sich wie ein Hintergrund-Cover verhält. Sobald es fertig ist, sitzt Ihr optimiertes Hero-Bild hinter dem Container und bietet dieselbe visuelle Wirkung bei deutlich verbesserter Leistung.

Schritte:

• Ein Bild-Element hinzufügen:
• Klicken Sie im Elementor-Editor auf das Plus-Symbol in der oberen linken Ecke, um ein neues Element hinzuzufügen.
• Ziehen Sie das Bild-Widget in den obersten Container (den mit der .relative-Klasse) und legen Sie es dort ab.
• Ihr Bild hochladen und auswählen:
• Klicken Sie in den Bildeinstellungen im linken Bereich auf den Bildplatzhalter.
• Laden Sie das Vollbild-Bild hoch, das Sie verwenden möchten, oder wählen Sie ein vorhandenes aus Ihrer WordPress-Mediathek aus.
• Die .heroimg Klasse anwenden:
• Wenn das Bild noch ausgewählt ist, navigieren Sie im Elementor-Menü zum Tab Erweitert.
• Geben Sie im Feld CSS-Klassen heroimg ein.

Fertig, genießen Sie eine schnellere Seite!

Sie haben es geschafft! An diesem Punkt ist Ihr Hero-Bild voll optimiert und bereit, ein schnelleres Seitenerlebnis zu liefern. 

Sobald Sie die Seite veröffentlichen, inspizieren Sie das Element und Sie werden etwas Großartiges bemerken: Das langsame Hintergrundbild wurde durch ein responsives, schnelles Vordergrundbild ersetzt. Dieses Bild wird nun wahrscheinlich mit einer hohen fetchpriority geladen, was sicherstellt, dass es schneller lädt und sowohl Core Web Vitals als auch Benutzererfahrung verbessert.

Herzlichen Glückwunsch zur Erstellung einer schnelleren, effizienteren Seite. Ihre Besucher werden den Unterschied bemerken!

Vorher: 2.6 Sek

Nachher: 0.6 Sek

Bonus: Das Hero-Bild vorladen

Sehen Sie sich die vollständige Anleitung auf YouTube an.