So fügen Sie ein Hero-Bild in WordPress hinzu (3 einfache Methoden) 

Sie können in weniger als 15 Minuten ein Hero-Bild zu jeder WordPress-Website hinzufügen, das ohne zusätzliche Programmierung korrekt auf Mobilgeräten angezeigt wird.

Ein Hero-Bild ist das große Banner oben auf Ihrer Homepage oder Landing Page mit Text und einer Schaltfläche darüber. Es ist das Erste, was Besucher sehen. Wenn es gut gestaltet ist, vermittelt es Ihre Botschaft sofort.

Als ich mit WordPress-Websites angefangen habe, sahen meine Hero-Bilder auf dem Desktop perfekt aus, aber auf Mobilgeräten waren sie völlig durcheinander. Der Text überlappte sich, wichtige Teile wurden abgeschnitten und das Layout wirkte unordentlich.

Nachdem ich Dutzende von Landing Pages erstellt habe, habe ich gelernt, was tatsächlich funktioniert. In diesem Leitfaden zeige ich Ihnen drei einfache Methoden, die auf Ihrem Thementyp basieren. Alle Optionen sind mobilfreundlich und erfordern keine technischen Kenntnisse.

Bereiten Sie zuerst Ihr Hero-Bild vor

Die richtige Bildgröße und das richtige Dateiformat verhindern fehlerhafte Layouts und langsames Laden.

Ich habe dies auf die harte Tour gelernt, nachdem ich viel zu große Hero-Bilder hochgeladen hatte, die meine Seite zum Crawlen brachten. Jetzt bereite ich Bilder immer vor, bevor ich sie hochlade.

Verwenden Sie für die meisten Designs eine Auflösung von 1920 × 1080 Pixel. Wenn Sie einen kürzeren Hero-Bereich wünschen, verwenden Sie stattdessen eine Auflösung von 1600 × 900 Pixel. Halten Sie Ihre Dateigröße mit TinyPNG unter 250 KB.

Dimension	Anwendungsfall
1920 × 1080 Pixel	Standard-Hero in voller Breite (empfohlen)
1600 × 900 Pixel	Kürzerer Heldenbereich

Verwenden Sie JPG für Fotos und PNG für Grafiken mit Text.

Wählen Sie Bilder mit negativem Raum, in den Text eingefügt werden kann. Dunkle Bilder eignen sich besser für hellen Text. Meiner Erfahrung nach wählen viele Anfänger schöne Bilder, auf denen die Überschriften unleserlich sind. Jetzt suche ich nach Bildern mit klarem Leerraum, in dem der Text atmen kann.

Nachdem wir nun die Grundlagen geschaffen haben, schauen wir uns an, wie Sie Ihr Hero-Bild tatsächlich hinzufügen können.

Methode 1: Verwendung Ihrer Theme-Einstellungen (am einfachsten für klassische Themes)

Viele WordPress-Themes enthalten im Customizer eine Option für einen Hero-Bereich, für die keine Plugins oder Page Builder erforderlich sind.

Wenn ich an einem Projekt arbeite, für das bereits ein Theme installiert ist, überprüfe ich immer zuerst diese Option. Das ist der schnellste Weg, um ein Hero-Bild hinzuzufügen, sofern Ihr Theme dies unterstützt.

Nicht alle Themes verfügen über diese Funktion. Wenn Sie sie nicht sehen, fahren Sie mit Methode 2 oder 3 fort. Diese Methode funktioniert nur auf der Seite, die Ihr Theme festlegt, in der Regel ist dies die Startseite.

Schritt 1: Öffnen Sie den WordPress Customizer.

Gehen Sie in Ihrem WordPress-Dashboard zu„Darstellung“ → „Anpassen“.

Der Customizer öffnet sich in einem neuen Fenster mit einer Vorschau Ihrer Website auf der rechten Seite.

Schritt 2: Finden Sie die Einstellungen für den Hero-Bereich

Suchen Sie nach Abschnitten mit den Bezeichnungen„Hero“,„Header“,„Front Page“ oder ähnlichen Begriffen.

Auf der linken Seite sehen Sie eine Seitenleiste mit verschiedenen Anpassungsoptionen. Die Hero-Einstellungen befinden sich möglicherweise unter einem Abschnitt wie „Homepage-Einstellungen“ oder „Kopfzeilenoptionen“.

Mir ist aufgefallen, dass Theme-Entwickler diese Abschnitte unterschiedlich benennen, sodass man manchmal ein wenig suchen muss. Wenn Sie nichts Offensichtliches finden, schauen Sie zunächst unter den Abschnitten „Front Page“ oder „Homepage“ nach.

Schritt 3: Laden Sie Ihr Hero-Bild hoch

Klicken Sie auf die Option „Hero-Bereich“ und suchen Sie nach einer Schaltfläche zum Hochladen von Bildern.

Klicken Sie auf„Bild auswählen“oder„Hochladen“ und wählen Sie dann das vorbereitete Hero-Bild von Ihrem Computer aus.

Schritt 4: Fügen Sie Ihre Überschrift und den Button-Text hinzu

Geben Sie Ihre Überschrift in das dafür vorgesehene Textfeld ein.

Fügen Sie Ihren Button-Text und die URL hinzu, zu der der Button verlinken soll. Die meisten Themes bieten Felder sowohl für die Beschriftung des Buttons als auch für den Ziel-Link.

Schritt 5: Veröffentlichen Sie die Änderungen

Klicken Sie oben in der Seitenleiste des Customizers auf die Schaltfläche„Veröffentlichen“.

Ihr Hero-Bild ist jetzt auf Ihrer Homepage zu sehen. Rufen Sie Ihre Website in einem neuen Tab auf, um es anzusehen.

Methode 2: Verwendung des WordPress-Cover-Blocks (am besten für Block-Themes geeignet)

Der Cover-Block ist eine Funktion des WordPress-Blockeditors, mit der Sie ohne Plugins auf jeder Seite ein Hero-Bild in voller Breite mit Textüberlagerung hinzufügen können.

Ich verwende diese Methode häufig, da sie mir die Flexibilität bietet, Hero-Bilder nicht nur auf der Startseite, sondern auf jeder beliebigen Seite einzufügen. Ich habe Landingpages mit dem Cover-Block erstellt, wobei jede Seite ihren eigenen einzigartigen Hero-Bereich hat.

Der Cover-Block ist standardmäßig für Mobilgeräte optimiert, sodass ich später keine mobilen Layouts testen und korrigieren muss.

Schritt 1: Öffnen Sie den Seiteneditor.

Gehen Sie zu der Seite, auf der Sie das Hero-Bild einfügen möchten, und klicken Sie auf„Bearbeiten“.

Für die meisten Menschen ist dies die Startseite. Sie sehen den WordPress-Block-Editor mit dem Inhalt Ihrer Seite.

Schritt 2: Fügen Sie oben einen Cover-Block hinzu

Klicken Sie auf das+-Symbol ganz oben auf der Seite und suchen Sie nach „Cover“.

Wählen Sie den Block „Cover“ aus den Ergebnissen aus. Ein Platzhalter-Block „Cover“ wird oben auf Ihrer Seite angezeigt.

Schritt 3: Laden Sie Ihr Hero-Bild hoch

Klicken Sie im Block „Cover“ auf„Hochladen“und wählen Sie Ihr Hero-Bild von Ihrem Computer aus.

Das Bild füllt den Cover-Block als Hintergrund aus. In der Mitte des Blocks wird eine Standard-Textanforderung angezeigt.

Schritt 4: Fügen Sie Ihre Überschrift hinzu

Klicken Sie in den Block „Cover“ und beginnen Sie mit der Eingabe Ihrer Überschrift.

Um den Text in eine Überschrift umzuwandeln, klicken Sie auf das Dropdown-Menü „Absatz“ in der Block-Symbolleiste und wählen Sie„Überschrift“. Wählen Sie je nach Ihrer Seitenstruktur H1 oder H2.

Schritt 5: Einen Schaltflächenblock hinzufügen

Drücken Sie nach Ihrer Überschrift die Eingabetaste, um eine neue Zeile zu erstellen, geben Sie dann/buttonein und drücken Sie erneut die Eingabetaste.

Unter Ihrer Überschrift erscheint ein Schaltflächenblock. Geben Sie Ihren Schaltflächentext ein und fügen Sie die Link-URL in der Symbolleiste hinzu, die angezeigt wird, wenn die Schaltfläche ausgewählt ist.

Schritt 6: Textfarbe und Überlagerung anpassen

Wenn der Block „Cover“ ausgewählt ist, sehen Sie sich das Block-Einstellungsfeld auf der rechten Seite des Bildschirms an.

Scrollen Sie nach unten, um den Schieberegler für die Deckkraft der Überlagerung zu finden. Ziehen Sie ihn, um den Hintergrund hinter Ihrem Text abzudunkeln oder aufzuhellen.

Normalerweise stelle ich die Deckkraft der Überlagerung auf 30 % bis 50 % ein, um einen guten Kontrast zu erzielen. Wenn ich mit einem dunklen Hero-Bild arbeite, wähle ich möglicherweise eine hellere Überlagerung. Ist das Bild hell und unruhig, füge ich eine dunklere Überlagerung hinzu, damit der Text besser zur Geltung kommt.

Um die Textfarbe zu ändern, wählen Sie Ihre Überschrift oder Schaltfläche aus und wählen Sie dann eine Farbe aus den Texteinstellungen im rechten Bereich.

Schritt 7: Aktualisieren Sie die Seite

Klicken Sie oben rechts auf die Schaltfläche„Speichern“ oder „Aktualisieren“. Besuchen Sie anschließend Ihre Seite, um Ihr Hero-Bild live zu sehen.

Sie können später einen Parallax-Effekt hinzufügen (das Bild bleibt fixiert, während der Inhalt scrollt), indem Sie in den Einstellungen des Cover-Blocks die Option „Fixierter Hintergrund“ aktivieren. Ich verwende diese Option nur sparsam, da sie manche Hero-Bilder auf Mobilgeräten unvorteilhaft aussehen lassen kann.

Methode 3: Verwendung eines Page Builders wie SeedProd (funktioniert mit jedem Theme)

WordPress-Seitenersteller bieten Ihnen Drag-and-Drop-Steuerung für Hero-Bereiche und funktionieren oft unabhängig davon, welches WordPress-Theme Sie verwenden.

Ich verwende diese Methode, wenn ich mehr Kontrolle als mit dem Cover-Block haben möchte oder wenn ich mit einem Theme arbeite, das keine Hero-Einstellungen hat. Dank der Live-Vorschau kann ich vor der Veröffentlichung genau sehen, wie Abstände und Farben aussehen.

SeedProdist ein Drag-and-Drop-Website-Builder für WordPress, dem über 1 Million Websites vertrauen. Mit ihm können Sie ohne Programmierkenntnisse individuelle WordPress-Themes, individuelle Landingpages und individuelle WooCommerce-Shops erstellen.

Ich verwende es regelmäßig auf meinen eigenen Websites, und die Live-Vorschau hat mir Probleme mit der Zeichensetzung aufgezeigt, die ich erst nach der Veröffentlichung bemerkt hätte. Dieses visuelle Feedback spart mir viel Zeit.

Schritt 1: SeedProd installieren

Um loszulegen, installieren und aktivieren Sie SeedProd auf Ihrer WordPress-Website. Es gibt eine kostenlose Version, die für einfache Hero-Abschnitte geeignet ist, aber für diese Anleitung werde ich SeedProd Pro verwenden, da es mehr Anpassungsoptionen bietet.

Befolgen Sie diese Anweisungen, um Hilfe bei der Installation von SeedProd zu erhalten.

Schritt 2: Erstellen Sie eine neue Landing Page

Gehen Sie in Ihrem Dashboard zuSeedProd → Landing Pages.

Klicken Sie auf die Schaltfläche„Neue Landing Page hinzufügen”. Es erscheint ein Bildschirm, in dem Sie aufgefordert werden, einen Namen für Ihre Seite einzugeben und anschließend eine Vorlage auszuwählen.

Schritt 3: Wählen Sie eine Vorlage mit einem Hero-Bereich

Durchsuchen Sie die Vorlagen und wählen Sie eine aus, deren Hero-Section-Layout Ihnen gefällt.

Vorlagen sparen Einrichtungszeit, da der Hero-Bereich bereits strukturiert ist. Sie müssen lediglich das Platzhalterbild und den Platzhaltertext durch Ihre eigenen Inhalte ersetzen.

Ich beginne in der Regel mit einer Vorlage, anstatt alles von Grund auf neu zu erstellen. Selbst wenn ich das Layout am Ende doch noch ändere, bietet mir die Vorlage einen soliden Ausgangspunkt mit bereits festgelegten Abständen und einer klaren Hierarchie der Elemente.

Klicken Sie auf das Häkchen-Symbol der gewünschten Vorlage und dann auf„Diese Vorlage verwenden“.

Schritt 4: Öffnen Sie den Hero-Bereich zur Bearbeitung.

Der visuelle Editor von SeedProd öffnet sich mit der von Ihnen ausgewählten Vorlage.

Klicken Sie auf den Hero-Bereich oben auf der Seite. Wenn der Bereich ausgewählt ist, erscheinen farbige Griffe um ihn herum.

Schritt 5: Laden Sie Ihr Hero-Bild hoch

Suchen Sie im Einstellungsfeld auf der linken Seite nach dem Abschnitt „Hintergrundeinstellungen“.

Wählen Sie das vorhandene Bild aus und klicken Sie dann auf das Bildsymbol, um ein Bild aus Ihrer Medienbibliothek auszuwählen.

Das Bild erscheint sofort als Hintergrund des Hero-Bereichs. Das meine ich mit der Nützlichkeit der Live-Vorschau. Sie können sofort sehen, ob das Bild zum vorhandenen Text passt oder ob Sie die Überlagerung anpassen müssen.

Schritt 6: Bearbeiten Sie die Überschrift und die Schaltfläche

Klicken Sie auf den Text der Überschrift im Hero-Bereich und beginnen Sie mit der Eingabe Ihrer neuen Überschrift.

In diesem Beispiel ersetze ich den Opt-in-Formular-Block durch einen Button-Block. Dazu löschen Sie einfach den vorhandenen Block, indem Sie auf das Papierkorb-Symbol klicken.

Ziehen Sie dann aus der Seitenleiste „Blöcke“ den Schaltflächenblock per Drag & Drop auf Ihre Seite.

Schritt 7: Überlagerung und Farben anpassen

Wenn der Heldenbereich ausgewählt ist, scrollen Sie im linken Bereich nach unten, um die Overlay-Steuerelemente zu finden.

Sie können eine benutzerdefinierte Überlagerungsfarbe auswählen und dann den Hintergrund abdunkeln, damit Ihr Text und Ihre Schaltflächen deutlich von Ihrem Hero-Bild hervorstechen.

Um die Textgröße oder -farbe zu ändern, klicken Sie auf die Überschrift oder Schaltfläche und passen Sie die Einstellungen im linken Bereich an.

Schritt 8: Vorschau auf Mobilgeräten

Klicken Sie auf die Symbole für den Gerätewechsler unten im Editor (Desktop, Tablet, Mobilgerät).

Wechseln Sie zur mobilen Ansicht, um zu sehen, wie Ihr Hero-Bild auf einem Smartphone-Bildschirm aussieht. Bei Bedarf können Sie die Textgröße und den Abstand speziell für Mobilgeräte anpassen.

Ich überprüfe vor der Veröffentlichung immer die mobile Ansicht, da das, was auf dem Desktop gut aussieht, nicht immer auch auf Mobilgeräten gut aussieht. Ich habe schon Überschriften gesehen, die zu groß waren und über den Bildschirm hinausragten, oder Schaltflächen, die winzig aussahen und auf Mobilgeräten schwer anzutippen waren.

Eine vollständige Anleitung zum Anpassen des restlichen Teils Ihrer Seite finden Sie in unserem Tutorial zum Erstellen einer Landing Page in WordPress.

Schritt 9: Seite veröffentlichen

Wenn Sie mit dem Hero-Bereich zufrieden sind, klicken Sie oben rechts auf„Speichern“. Klicken Sie dann auf den Dropdown-Pfeil neben „Speichern“ und wählen Sie„Veröffentlichen“.

Wenn Sie Farbverläufe, Partikeleffekte oder Formteiler wünschen, stehen Ihnen diese Optionen in den Einstellungen für den Hero-Bereich zur Verfügung. Sie sind nicht unbedingt notwendig, aber ich habe Farbverläufe verwendet, wenn ich zusätzlichen Kontrast für hellen Text auf einem hellen Bild benötigte.

Wenn Sie Ihre Seite veröffentlicht haben, rufen Sie sie in Ihrem Browser auf, um Ihren neuen Hero-Bereich live zu sehen.

Fehlerbehebung bei häufigen Problemen mit Hero-Bildern

Die meisten Probleme mit Hero-Bildern lassen sich auf falsche Abmessungen, schlechten Kontrast oder Konflikte mit dem Theme-CSS zurückführen.

Ich habe mich irgendwann einmal mit all diesen Problemen befasst. Hier erfahren Sie, wie Sie sie beheben können.

Problem	Warum es passiert	So beheben Sie das Problem
Das Bild sieht verschwommen oder pixelig aus.	Bildabmessungen zu klein	Erneut mit mindestens 1920 × 1080 Pixel hochladen. Kleine Bilder, die auf die volle Breite gestreckt werden, verlieren an Qualität.
Der Text ist schwer zu lesen.	Nicht genug Kontrast	Fügen Sie in Ihren Block- oder Builder-Einstellungen eine dunkle Überlagerung (30–50 % Deckkraft) hinzu oder ändern Sie die Textfarbe zu Weiß.
Das Hero-Bild erstreckt sich nicht über die gesamte Breite.	Thema schränkt Breite oder Ausrichtung ein, nicht festgelegt	Aktivieren Sie die Ausrichtung über die gesamte Breite in den Einstellungen des Cover-Blocks. Wenn Sie einen Page Builder verwenden, stellen Sie den Abschnitt auf „volle Breite“ ein.
Bild wird auf Mobilgeräten seltsam beschnitten	Der Brennpunkt liegt außerhalb der Mitte.	Verwenden Sie Bilder mit zentrierten Motiven oder passen Sie die Fokuspunkt-Einstellung in Ihrem Seitenersteller an.

Häufig gestellte Fragen zum Hinzufügen von WordPress-Hero-Bildern

Welche Größe sollte ein Hero-Bild in WordPress haben?

1920 × 1080 Pixel eignen sich für die meisten Designs und lassen sich gut auf Mobilgeräten skalieren. Wenn Sie einen kürzeren Hero-Bereich wünschen, verwenden Sie stattdessen 1600 × 900 Pixel. Halten Sie die Dateigröße nach der Komprimierung unter 250 KB, damit das Laden Ihrer Seite nicht verlangsamt wird.

Kann ich anstelle eines Bildes ein Video als Hintergrund für den Hero-Bereich verwenden?

Ja, der Cover-Block und die meisten Seitenersteller unterstützen Videohintergründe. Halten Sie Videodateien unter 5 MB und fügen Sie immer ein Fallback-Bild für mobile Nutzer hinzu, da Videohintergründe auf Smartphones oft nicht abgespielt werden, um Daten zu sparen.

Verlangsamen Hero-Bilder meine Website?

Nur wenn die Datei zu groß ist. Komprimieren Sie Ihr Hero-Bild vor dem Hochladen auf unter 250 KB. Große Hero-Bilder mit mehr als 1 MB verlangsamen das Laden der Seite und beeinträchtigen die Suchmaschinenoptimierung (SEO). Verwenden Sie ein Tool wie TinyPNG, um die Datei ohne Qualitätsverlust zu komprimieren.

Wie kann ich ein vorhandenes Hero-Bild auf meiner WordPress-Website ändern?

Das hängt davon ab, mit welcher Methode Sie es hinzugefügt haben. Für Theme-Einstellungen gehen Sie zu „Darstellung“ → „Anpassen“. Für den Cover-Block bearbeiten Sie die Seite und wählen Sie den Block aus. Für Page Builder öffnen Sie die Seite im Builder und klicken Sie auf den Hero-Bereich.

Was ist der Unterschied zwischen einem Hero-Bild und einem Hero-Banner?

Die Begriffe haben dieselbe Bedeutung. Beide beziehen sich auf das große Bild oben auf einer Seite mit Text und Schaltflächenüberlagerung. Manche Leute sprechen von einem „Hero-Banner“, wenn das Bild die gesamte Breite einnimmt, aber technisch gesehen gibt es keinen Unterschied.

Ein Hero-Bild macht Ihre Homepage ansprechender, wenn es eine klare Botschaft mit einem starken visuellen Eindruck vermittelt. Wählen Sie die Methode, die zu Ihrem Thema passt, testen Sie sie auf Mobilgeräten und überdenken Sie das Design nicht zu sehr.

Das richtige Hero-Bild mit lesbarem Text und einer klaren Handlungsaufforderung motiviert Besucher dazu, den nächsten Schritt zu tun. Ich habe gesehen, dass einfache Hero-Bereiche aufwändigere übertreffen, weil sie sich auf Klarheit statt Komplexität konzentrieren.

Verwandte Anleitungen:

• Landing Page Best Practices für unglaubliche Konversionsraten
• Wie man Bilder in der mobilen Ansicht von WordPress ausblendet
• Call-to-Action-Best-Practices für hoch-konvertierende Landing Pages
• So fügen Sie ganz einfach eine Schaltfläche zu Ihrer WordPress-Kopfzeile hinzu
• Wie man ein Hintergrundbild in WordPress ohne CSS dimmt

Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte beteiligen Sie sich an der Konversation auf YouTube, X und Facebook, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.