Sie können jedem WordPress-Standort ein Hero-Bild hinzufügen, und zwar in weniger als 15 Minuten. Es wird auf Mobilgeräten korrekt angezeigt, ohne dass zusätzliche Codierung erforderlich ist.
Ein Hero-Bild ist das große Banner oben auf Ihrer Homepage oder Landingpage mit überlagertem Text und einer Schaltfläche. Es ist das Erste, was Besucher sehen. Wenn es gut gemacht ist, vermittelt es Ihre Botschaft sofort.
Als ich mit WordPress-Websites begann, sahen meine Hero-Bilder auf dem Desktop perfekt aus, brachen aber auf Mobilgeräten. Text überlappte, wichtige Teile wurden abgeschnitten und das Layout wirkte unordentlich.
Nachdem ich Dutzende von Landingpages erstellt habe, weiß ich, was wirklich funktioniert. In diesem Leitfaden zeige ich Ihnen drei einfache Methoden, je nach Theme-Typ. Jede Option ist mobilfreundlich und erfordert keine technischen Kenntnisse.
- Bereiten Sie Ihr Hero-Bild zuerst vor
- Methode 1: Verwendung Ihrer Theme-Einstellungen (am einfachsten für klassische Themes)
- Methode 2: Verwendung des WordPress Cover Blocks (Am besten für Block-Themes)
- Methode 3: Verwendung eines Seitenerstellers wie SeedProd (funktioniert mit jedem Theme)
- Häufige Probleme mit Hero-Bildern beheben
- FAQs zum Hinzufügen von WordPress-Hero-Bildern
Bereiten Sie Ihr Hero-Bild zuerst vor
Die richtige Bildgröße und das richtige Dateiformat verhindern fehlerhafte Layouts und langsame Ladezeiten.
Das habe ich auf die harte Tour gelernt, nachdem ich viel zu große Hero-Bilder hochgeladen hatte, die meine Seite zum Kriechen brachten. Jetzt bereite ich Bilder immer vor dem Hochladen vor.
Verwenden Sie 1920 × 1080 Pixel für die meisten Themes. Wenn Sie einen kürzeren Hero-Bereich wünschen, verwenden Sie stattdessen 1600 × 900 Pixel. Halten Sie Ihre Dateigröße mit TinyPNG unter 250 KB.
| Abmessung | Anwendungsfall |
|---|---|
| 1920 × 1080 Pixel | Standard-Vollbild-Hero (empfohlen) |
| 1600 × 900 Pixel | Kürzerer Hero-Bereich |
Verwenden Sie JPG für Fotos und PNG für Grafiken mit Text.
Wählen Sie Bilder mit negativem Raum, auf dem Text platziert werden kann. Dunkle Bilder funktionieren besser mit hellem Text. Soweit ich weiß, wählen viele Anfänger schöne Bilder aus, die Überschriften unleserlich machen. Jetzt suche ich nach Bildern mit klarem Leerraum, in dem Text atmen kann.
Mit den Grundlagen können wir uns nun ansehen, wie Sie Ihr Hero-Bild tatsächlich hinzufügen.
Methode 1: Verwendung Ihrer Theme-Einstellungen (am einfachsten für klassische Themes)
Viele WordPress-Themes enthalten eine Option für den Hero-Bereich im Customizer, die keine Plugins oder Page Builder erfordert.
Wenn ich an einem Projekt arbeite, bei dem bereits ein Theme installiert ist, prüfe ich immer zuerst diese Option. Es ist der schnellste Weg, ein Hero-Bild hinzuzufügen, wenn Ihr Theme es unterstützt.
Nicht alle Themes verfügen über diese Funktion. Wenn Sie sie also nicht sehen, fahren Sie mit Methode 2 oder 3 fort. Diese Methode funktioniert nur auf der Seite, die Ihr Theme dafür vorsieht, normalerweise die Homepage.
Schritt 1: Öffnen Sie den WordPress Customizer
Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung → Customizer.
Der Customizer öffnet sich auf einem neuen Bildschirm 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 der Bezeichnung Hero, Header, Startseite oder ähnlich.
Sie sehen eine Seitenleiste auf der linken Seite mit verschiedenen Anpassungsoptionen. Die Hero-Einstellungen befinden sich möglicherweise unter einem Abschnitt wie „Homepage-Einstellungen“ oder „Header-Optionen“.
Ich habe festgestellt, dass Theme-Entwickler diese Abschnitte unterschiedlich benennen, sodass man manchmal ein wenig suchen muss. Wenn Sie nichts Offensichtliches sehen, schauen Sie zuerst unter den Abschnitten „Titelseite“ oder „Startseite“ nach.
Schritt 3: Laden Sie Ihr Hero-Bild hoch
Klicken Sie auf die Option für den 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 Ihr vorbereitetes Hero-Bild von Ihrem Computer aus.
Schritt 4: Fügen Sie Ihre Überschrift und Ihren 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 für die Button-Beschriftung und 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 live. Besuchen Sie Ihre Website in einem neuen Tab, um es zu sehen.
Methode 2: Verwendung des WordPress Cover Blocks (Am besten für Block-Themes)
Der Cover-Block ist eine Funktion des WordPress-Block-Editors, mit der Sie ein bildschirmfüllendes Hero-Bild mit Textüberlagerung auf jeder Seite ohne Plugins hinzufügen können.
Ich verwende diese Methode oft, da sie mir die Flexibilität gibt, Hero-Bilder zu jeder Seite hinzuzufügen, nicht nur zur Homepage. Ich habe Landing Pages mit dem Cover-Block erstellt, bei denen jede Seite ihren eigenen, einzigartigen Hero-Bereich hat.
Der Cover-Block ist standardmäßig mobil-responsiv, was mir erspart, mobile Layouts später testen und korrigieren zu müssen.
Schritt 1: Öffnen Sie den Seiten-Editor
Gehen Sie zu der Seite, auf der Sie das Hero-Bild haben möchten, und klicken Sie auf Bearbeiten.
Für die meisten Leute ist das die Homepage. Sie sehen den WordPress-Block-Editor mit Ihren Seiteninhalten.
Schritt 2: Fügen Sie einen Cover-Block am Anfang hinzu
Klicken Sie auf das + Symbol ganz oben auf der Seite und suchen Sie nach „Cover“.
Wählen Sie den Cover-Block aus den Ergebnissen aus. Ein Platzhalter-Cover-Block erscheint am Anfang Ihrer Seite.
Schritt 3: Laden Sie Ihr Hero-Bild hoch
Klicken Sie im Cover-Block auf Hochladen und wählen Sie Ihr Hero-Bild von Ihrem Computer aus.
Das Bild füllt den Cover-Block als Hintergrund. In der Mitte des Blocks sehen Sie eine Standard-Texteingabeaufforderung.
Schritt 4: Fügen Sie Ihre Überschrift hinzu
Klicken Sie in den Cover-Block und beginnen Sie, Ihre Überschrift einzugeben.
Um den Text in eine Überschrift zu ändern, klicken Sie auf das Absatz-Dropdown im Block-Werkzeugkasten und wählen Sie Überschrift. Wählen Sie H1 oder H2, je nach Ihrer Seitenstruktur.
Schritt 5: Fügen Sie einen Button-Block hinzu
Drücken Sie nach Ihrer Überschrift die Eingabetaste, um eine neue Zeile zu erstellen. Geben Sie dann /button ein und drücken Sie erneut die Eingabetaste.
Ein Button-Block erscheint unter Ihrer Überschrift. Geben Sie Ihren Button-Text ein und fügen Sie die Link-URL in der Werkzeugleiste hinzu, die erscheint, wenn der Button ausgewählt ist.
Schritt 6: Textfarbe und Überlagerung anpassen
Wenn der Cover-Block ausgewählt ist, schauen Sie in die Block-Einstellungen auf der rechten Seite des Bildschirms.
Schieben Sie nach unten, um den Schieberegler für die Überlagerungsopazität zu finden. Ziehen Sie ihn, um den Hintergrund hinter Ihrem Text abzudunkeln oder aufzuhellen.
Ich stelle die Überlagerungsopazität normalerweise zwischen 30 % und 50 % ein, um einen guten Kontrast zu erzielen. Wenn ich mit einem dunklen Hero-Bild arbeite, verwende ich möglicherweise eine hellere Überlagerung. Wenn das Bild hell und unruhig ist, füge ich eine dunklere Überlagerung hinzu, damit der Text hervorsticht.
Um die Textfarbe zu ändern, wählen Sie Ihre Überschrift oder Schaltfläche aus und wählen Sie dann im rechten Bereich unter den Texteinstellungen eine Farbe aus.
Schritt 7: Seite aktualisieren
Klicken Sie in der oberen rechten Ecke auf die Schaltfläche Speichern oder Aktualisieren. Besuchen Sie dann 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 „Fixed background“ aktivieren. Ich verwende dies sparsam, da es einige Hero-Bilder auf Mobilgeräten unschön aussehen lassen kann.
Methode 3: Verwendung eines Seitenerstellers wie SeedProd (funktioniert mit jedem Theme)
WordPress-Seitenersteller geben Ihnen Drag-and-Drop-Kontrolle über Hero-Bereiche und funktionieren oft unabhängig davon, welches WordPress-Theme Sie verwenden.
Ich verwende diese Methode, wenn ich mehr Kontrolle wünsche, als der Cover-Block bietet, oder wenn ich mit einem Theme arbeite, das keine Hero-Einstellungen hat. Die Live-Vorschau erleichtert es, genau zu sehen, wie Abstände und Farben vor der Veröffentlichung aussehen.
SeedProd ist ein Drag-and-Drop-WordPress-Website-Builder, dem über 1 Million Websites vertrauen. Sie können ihn verwenden, um benutzerdefinierte WordPress-Themes, benutzerdefinierte Landing Pages und benutzerdefinierte WooCommerce-Shops ohne Code zu erstellen.
Ich verwende ihn regelmäßig auf meinen eigenen Websites, und die Live-Vorschau hat Abstände erfasst, die ich sonst 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 grundlegende Hero-Bereiche funktioniert, aber für diese Anleitung verwende ich SeedProd Pro, da es mehr Anpassungsoptionen bietet.
Sie können diese Anweisungen befolgen, um Hilfe bei der Installation von SeedProd zu erhalten.
Schritt 2: Erstellen einer neuen Landing Page
Gehen Sie in Ihrem Dashboard zu SeedProd → Landing Pages.
Klicken Sie auf die Schaltfläche Neue Landing Page hinzufügen. Sie sehen einen Bildschirm, auf dem Sie aufgefordert werden, den Namen Ihrer Seite einzugeben und dann 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, die ein Hero-Bereich-Layout hat, das Ihnen gefällt.
Vorlagen sparen Einrichtungszeit, da der Hero-Bereich bereits strukturiert ist. Sie tauschen einfach das Platzhalterbild und den Text gegen Ihre eigenen aus.
Ich beginne normalerweise mit einer Vorlage, anstatt von Grund auf neu zu erstellen. Selbst wenn ich das Layout ändere, gibt mir die Vorlage einen soliden Ausgangspunkt mit korrektem Abstand und bereits ermittelter Elementhierarchie.
Klicken Sie auf das Häkchen-Symbol bei 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 Ihrer ausgewählten Vorlage.
Klicken Sie auf den Hero-Bereich am oberen Rand der Seite. Wenn der Bereich ausgewählt ist, erscheinen farbige Markierungen um ihn herum.
Schritt 5: Heldenbild hochladen
Suchen Sie im Einstellungsfenster 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 Mediathek auszuwählen.
Das Bild erscheint sofort als Hintergrund des Heldenbereichs. Das meine ich mit der hilfreichen Live-Vorschau. Sie können sofort sehen, ob das Bild zum vorhandenen Text passt oder ob Sie die Überlagerung anpassen müssen.
Schritt 6: Überschrift und Schaltfläche bearbeiten
Klicken Sie auf den Überschriftentext im Heldenbereich und beginnen Sie, Ihre neue Überschrift einzugeben.
In diesem Beispiel ersetze ich den Opt-in-Formular-Block durch einen Schaltflächen-Block. Löschen Sie dazu einfach den vorhandenen Block, indem Sie auf das Papierkorbsymbol klicken.
Ziehen Sie dann den Schaltflächen-Block aus der Seitenleiste der Blöcke per Drag & Drop auf Ihre Seite.
Schritt 7: Überlagerung und Farben anpassen
Wenn der Heldenbereich ausgewählt ist, scrollen Sie im linken Fenster nach unten, um die Überlagerungssteuerungen zu finden.
Sie können eine benutzerdefinierte Überlagerungsfarbe wählen und dann den Hintergrund abdunkeln, damit Ihr Text und Ihre Schaltflächen klar von Ihrem Heldenbild abheben.
Um die Textgröße oder -farbe zu ändern, klicken Sie auf die Überschrift oder die Schaltfläche und passen Sie die Einstellungen im linken Fenster an.
Schritt 8: Auf Mobilgeräten in der Vorschau anzeigen
Klicken Sie auf die Symbole für den Geräteumschalter am unteren Rand des Editors (Desktop, Tablet, Mobilgerät).
Wechseln Sie zur mobilen Ansicht, um zu sehen, wie Ihr Heldenbild auf einem Telefonbildschirm aussieht. Sie können die Textgröße und den Abstand speziell für Mobilgeräte anpassen, falls erforderlich.
Ich überprüfe immer die mobile Ansicht, bevor ich veröffentliche, denn was auf dem Desktop gut aussieht, lässt sich nicht immer gut übertragen. Mir sind schon Überschriften aufgefallen, die zu groß waren und vom Bildschirm liefen, oder Schaltflächen, die winzig und schwer zu tippen waren.
Eine vollständige Anleitung zur Anpassung des Rests Ihrer Seite finden Sie in unserem Tutorial zur Erstellung einer Landingpage in WordPress.
Schritt 9: Seite veröffentlichen
Wenn Sie mit dem Heldenbereich 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 Farbverlauf-Überlagerungen, Partikeleffekte oder Formteiler wünschen, sind diese Optionen in den Einstellungen des Heldenbereichs verfügbar. Sie sind nicht notwendig, aber ich habe Farbverlauf-Überlagerungen verwendet, wenn ich zusätzlichen Kontrast für helle Texte auf einem hellen Bild benötigte.
Wenn Sie Ihre Seite veröffentlicht haben, zeigen Sie sie in Ihrem Browser an, um Ihren neuen Heldenbereich live zu sehen.
Häufige Probleme mit Hero-Bildern beheben
Die meisten Probleme mit Heldenbildern beruhen auf falschen Abmessungen, schlechtem Kontrast oder CSS-Konflikten mit dem Theme.
Ich habe all diese Probleme schon einmal erlebt. Hier erfahren Sie, wie Sie sie beheben können.
| Problem | Ursache | Behebung |
|---|---|---|
| Bild sieht unscharf oder pixelig aus | Bildabmessungen zu klein | Erneut hochladen mit mindestens 1920×1080 Pixeln. Kleine Bilder, die auf volle Breite gestreckt werden, verlieren an Qualität. |
| Text ist schwer zu lesen | Zu geringer Kontrast | Fügen Sie eine dunkle Überlagerung (30-50 % Deckkraft) in Ihren Block- oder Builder-Einstellungen hinzu oder wechseln Sie den Text zu Weiß. |
| Hero-Bild erstreckt sich nicht über die volle Breite | Theme schränkt die Breite ein oder die Ausrichtung ist nicht festgelegt | Aktivieren Sie die Ausrichtung über die volle Breite in den Cover-Block-Einstellungen. Wenn Sie einen Page Builder verwenden, stellen Sie den Abschnitt auf volle Breite ein. |
| Bild wird auf Mobilgeräten seltsam zugeschnitten | Fokuspunkt ist nicht zentriert | Verwenden Sie Bilder mit zentrierten Motiven oder passen Sie die Fokuspunkt-Einstellung in Ihrem Page Builder an. |
FAQs zum Hinzufügen von WordPress-Hero-Bildern
Welche Größe sollte ein Hero-Bild in WordPress haben?
1920×1080 Pixel funktionieren für die meisten Themes 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 Ihre Seite nicht langsamer geladen wird.
Kann ich Video als Hero-Hintergrund anstelle eines Bildes verwenden?
Ja, der Cover-Block und die meisten Page Builder unterstützen Video-Hintergründe. Halten Sie Videodateien unter 5 MB und fügen Sie immer ein Fallback-Bild für mobile Benutzer hinzu, da Video-Hintergründe auf Handys oft nicht abgespielt werden, um Daten zu sparen.
Verlangsamen Hero-Bilder meine Website?
Nur wenn die Dateigröße zu groß ist. Komprimieren Sie Ihr Hero-Bild vor dem Hochladen auf unter 250 KB. Große Hero-Bilder über 1 MB verzögern den Seitenaufbau und beeinträchtigen die SEO. Verwenden Sie ein Tool wie TinyPNG, um ohne Qualitätsverlust zu komprimieren.
Wie ändere ich ein bestehendes Hero-Bild auf meiner WordPress-Website?
Das hängt davon ab, welche Methode Sie zum Hinzufügen verwendet haben. Für Theme-Einstellungen gehen Sie zu Darstellung → Anpassen. Für den Cover-Block bearbeiten Sie die Seite und wählen den Block aus. Für Page Builder öffnen Sie die Seite im Builder und klicken auf den Hero-Bereich.
Was ist der Unterschied zwischen einem Hero-Bild und einem Hero-Banner?
Die Begriffe bedeuten dasselbe. Beide beziehen sich auf das große Bild am oberen Rand einer Seite mit überlagertem Text und Button. Manche Leute sagen „Hero-Banner“, wenn das Bild die volle Breite einnimmt, aber es gibt keinen technischen Unterschied.
Ein Hero-Bild macht Ihre Homepage ansprechender, wenn es eine klare Botschaft mit einer starken visuellen Darstellung vermittelt. Wählen Sie die Methode, die zu Ihrem Theme passt, testen Sie sie auf Mobilgeräten und überdenken Sie das Design nicht zu sehr.
Das richtige Hero-Bild mit lesbarem Text und einem klaren Call-to-Action bringt Besucher dazu, den nächsten Schritt zu tun. Ich habe einfache Hero-Bereiche gesehen, die aufwendigere übertroffen haben, weil sie sich auf Klarheit statt Komplexität konzentrierten.
Verwandte Anleitungen:
- Landing Page Best Practices für unglaubliche Konversionsraten
- So blenden Sie Bilder in der mobilen Ansicht unter WordPress aus
- Best Practices für Call-to-Actions auf Landing Pages mit hoher Konversionsrate
- So fügen Sie ganz einfach eine Schaltfläche zu Ihrem WordPress-Header hinzu
- Hintergrundbild in WordPress ohne CSS abdunkeln
Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
