So fügen Sie ein Hero-Image in WordPress hinzu (funktioniert für alle Themes)

Möchten Sie Ihre WordPress-Seite professioneller gestalten? Ein Heldenbild ist Ihre beste Wahl.

Ein Hero-Bild ist das Erste, was die Leute sehen, wenn sie auf Ihrer Website landen. Und Sie haben nur etwa 3 Sekunden Zeit, um ihre Aufmerksamkeit zu erregen, daher ist es wichtig, es richtig zu machen.

Wir bauen nun seit über einem Jahrzehnt WordPress-Websites – und wir erinnern uns noch, als Hero-Images zum ersten Mal groß herauskamen.

Damals kämpften wir wie alle anderen. Die Bilder sahen komisch aus – zu groß auf dem Desktop, gequetscht auf dem Handy oder einfach kaputt. Aber jetzt haben wir es zur Wissenschaft gemacht.

Wir zeigen Ihnen die einfachsten Wege, ein Hero-Image zu Ihrer WordPress-Website hinzuzufügen. Egal, ob Sie Page Builder verwenden oder den Block-Editor bevorzugen, wir haben das Richtige für Sie.

Zuerst das Wichtigste: Bereiten Sie Ihr WordPress-Hero-Bild vor

Bevor Sie ein Hero-Bild zu Ihrer WordPress-Website hinzufügen, müssen Sie eines erstellen, das die Aufmerksamkeit Ihrer Besucher auf sich zieht. Ein großartiger Hero-Bereich beginnt mit einem beeindruckenden Bild, das zeigt, worum es auf Ihrer Website geht.

Canva ist ein beliebtes Werkzeug zur Gestaltung von Website-Grafiken. Es ist einfach zu bedienen und bietet unzählige Vorlagen zur Erstellung Ihres Hero-Bildes. Wenn Sie kein Fan von Canva sind, haben wir eine Liste mit Canva-Alternativen, die Sie sich ansehen können, um eine zu finden, die für Sie funktioniert.

Wenn Sie Ihr Hero-Bild erstellen, sollten Sie ein paar Dinge beachten.

Überlegen Sie zuerst die Größe. Hero-Bilder sind normalerweise nicht zu hoch und decken oft die volle Breite Ihrer Startseite ab.

Eine gängige WordPress-Hero-Bildgröße beträgt etwa 1920 Pixel breit und 400-600 Pixel hoch (oder manchmal mehr). Dies kann jedoch je nach Ihrem WordPress-Theme variieren.

Überlegen Sie als Nächstes, welche Botschaft Sie senden möchten. Ihr Hero-Image sollte schnell zeigen, worum es auf Ihrer Website geht. Es könnte ein Produkt-Hero-Image sein, ein Foto, das Ihre Marke repräsentiert, oder sogar ein beeindruckender vollbild-Video-Hintergrund.

Wir haben uns zum Beispiel entschieden, unseren Gründer, Syed Balkhi, in unserem Hero-Bild auf der Homepage zu zeigen. Es zeigt, dass hinter unserer Marke eine echte Person steht, die sich dafür einsetzt, WordPress-Benutzern zum Erfolg zu verhelfen, und darum geht es bei WPBeginner.

Lassen Sie außerdem etwas Platz für Text. Viele Hero-Bereiche haben eine Überschrift oder eine Schaltfläche. Stellen Sie sicher, dass dafür Platz vorhanden ist und dass sie gut lesbar sind.

Es ist eine gute Idee, sich andere Websites in Ihrem Bereich anzusehen, um Beispiele für Hero-Bereiche zu finden. Dies kann Ihnen Ideen für Ihr eigenes Design geben. Einige der Einträge in unseren Beispielen für WordPress-Websites können als großartige Inspiration dienen.

Wenn das erledigt ist, sehen wir uns an, wie man das Hero-Bild tatsächlich hinzufügt.

So fügen Sie ein WordPress-Hero-Bild hinzu

Bei der Recherche für dieses Tutorial stellten wir schnell fest, dass das Hinzufügen eines Hero-Bildes zu klassischen WordPress-Themes nicht immer einfach ist. Der Prozess kann je nach Theme stark variieren, da einige über integrierte Hero-Bereiche verfügen, andere jedoch nicht.

Nehmen Sie zum Beispiel das Sydney-Theme. Es verfügt über einen fertigen Hero-Bereich, was die Sache erheblich erleichtert.

Wenn Sie versuchen, Ihrer bestehenden Website ein Hero-Bild hinzuzufügen, Ihr Theme aber keine integrierte Funktion dafür hat, kann das frustrierend sein.

Für diejenigen, die gerade erst anfangen und nichts dagegen haben, ein neues Theme zu wählen, empfehlen wir den Wechsel zu einem mit einem integrierten Hero-Bereich, da dies Ihnen auf lange Sicht Zeit sparen könnte.

Wenn Sie nach Theme-Empfehlungen suchen, können Sie sich unsere Expertenauswahl der besten und beliebtesten WordPress-Themes auf dem Markt ansehen. Besser noch, Sie könnten einen Page Builder mit einem Theme verwenden, das eine Hero-Sektion hat, was wir Ihnen in Methode 3 zeigen.

Bevor Sie größere Änderungen vornehmen, empfehlen wir immer, eine Staging-Site zu verwenden, um neue Themes gründlich zu testen. Auf diese Weise können Sie sicher sein, dass Sie die richtige Wahl für Ihre Website treffen.

Wenn Sie nicht sicher sind, wie das geht, lesen Sie unseren Leitfaden unter So ändern Sie ein WordPress-Theme richtig.

Zufrieden mit Ihrem aktuellen klassischen Theme? Kein Problem. Springen Sie zu Methode 4, wo wir Ihnen zeigen, wie Sie einen Hero-Bereich mit einem Plugin hinzufügen. Dieser Ansatz funktioniert mit jedem Theme, sodass Sie ein beeindruckendes Hero-Bild erstellen können, ohne Ihr gesamtes Website-Design zu überarbeiten.

Sie können die folgenden Schnelllinks verwenden, um zu Ihrer bevorzugten Methode zu springen:

• Methode 1: Verwendung des Theme Customizers (nur klassische Themes)
• Method 2: Using Full Site Editor (Block Themes Only)
  • Schritt 1: Öffnen Sie den Full Site Editor
  • Schritt 2: Fügen Sie den Cover-Block zu Ihrer Seite/Vorlage hinzu
  • Schritt 3: Konfigurieren Sie das Bild in Ihrem Cover-Block
  • Schritt 4: Blöcke zu Ihrem Cover-Block hinzufügen
• Method 3: Using a Page Builder (Custom Landing Pages/Themes)
  • Schritt 1: SeedProd einrichten
  • Schritt 2: Passen Sie Ihren Hero-Bereich an
  • Schritt 3: Weitere Blöcke zu Ihrem Heldenbereich hinzufügen und anpassen
• Method 4: Using Hero Banner Plugin + Shortcode (All Themes)
  • Schritt 1: Richten Sie das Hero Banner Plugin ein
  • Schritt 2: Finden Sie den CSS-Selektor des Header-Bereichs Ihres Themes
  • Schritt 3: Fügen Sie Ihren Shortcode zu WPCode hinzu
• Häufig gestellte Fragen zu Hero-Bildern

Methode 1: Verwendung des Theme Customizers (nur klassische Themes)

Wenn Sie ein klassisches Theme mit einem Hero-Bereich wie Sydney verwenden, können Sie Ihr Hero-Bild über den Theme-Customizer anpassen. Gehen Sie einfach zu Darstellung » Anpassen in Ihrem WordPress-Dashboard, um loszulegen.

💡 Schneller Hinweis: Wenn der Theme Customizer in Ihrem Dashboard fehlt, verwenden Sie wahrscheinlich ein Block-Theme und sollten zu Methode 2 springen.

Die Seitenleiste sollte mehrere Optionen zur Anpassung Ihres klassischen Themes bieten.

In Sydney heißt die Einstellung zur Anpassung Ihres Hero-Bereichs „Hero Area“, aber dieses spezielle Menü variiert je nach Theme. Klicken Sie einfach darauf.

Das Sydney-Theme verfügt über 3 Menüs, um Ihren Hero-Bereich zu erstellen: Hero-Typ, Hero-Slider und Hero-Medien.

Wir werden nur die ersten beiden verwenden, da sie ausreichen, um einen Hero-Bereich für unseren Zweck hinzuzufügen.

Wählen Sie zuerst 'Hero-Typ'.

Unter Hero-Typ werden Sie gefragt, welche Art von Medien Sie zu Ihrem Hero-Bereich hinzufügen möchten.

Sie können zwischen einem Vollbild- Slider, einem Video, einem Bild oder keiner Kopfzeile wählen.

Wir werden einen Vollbild-Slider für den Hero-Bereich auf unserer Startseite und unserer gesamten Website auswählen. Der Grund dafür ist, dass wir so einen Slider mit mehreren Bildern für den Hero-Bereich erstellen und Text und einen Button über den Bildern hinzufügen können.

Gehen Sie nun zurück zum Menü 'Hero Area' und wählen Sie 'Hero Slider'.

Öffnen Sie hier den Tab „Erste Folie“ und klicken Sie auf die Schaltfläche „Bild auswählen“.

Dies öffnet Ihre WordPress-Mediathek, in der Sie ein neues Bild hochladen oder ein vorhandenes für Ihren Hero-Bereich auswählen können.

Sobald Sie ein Bild hochgeladen haben, können Sie nach unten scrollen und den Text in den Feldern Titel und Untertitel ersetzen.

Sie sollten sehen, wie sich die von Ihnen vorgenommenen Änderungen automatisch in der Seitenvorschau widerspiegeln.

Wenn Sie mehr als ein Bild zum Hero-Bereich hinzufügen möchten, können Sie die gleichen Schritte mit den restlichen Folien wiederholen.

Andernfalls können Sie nach unten zum Menü 'Slider-Schaltfläche' scrollen.

Hier können Sie die URL und den Text für den Call-to-Action-Button ändern.

Scrollen Sie danach erneut nach unten zum Tab „Slider-Einstellungen“.

Hier können Sie die Geschwindigkeit des Sliders anpassen, wählen, ob derselbe Text auf allen Folien angezeigt werden soll, und das Verhalten des Sliders responsiv gestalten.

Wenn Sie die Farbe der Schaltfläche ändern möchten, gehen Sie zurück zum Hauptmenü des Theme Customizers.

Klicken Sie dann auf „Allgemein“.

Sie sollten nun mehrere Menüs sehen, um die allgemeinen Einstellungen Ihres Themes anzupassen.

Klicken Sie hier einfach auf „Buttons“.

Jetzt können Sie zu den Abschnitten „Standardzustand“ und „Hover-Zustand“ scrollen, wo Sie die Farbe des Buttons je nach Zustand ändern können.

Um die Farbe zu ändern, klicken Sie einfach auf das Farbauswahlwerkzeug und wählen Sie eine neue Farbe aus.

Die meisten WordPress-Themes ermöglichen es Ihnen auch, die Farben und die Typografie Ihres Designs anzupassen. Die von Ihnen vorgenommenen Änderungen gelten jedoch normalerweise für Ihre gesamte Website und nicht nur für Ihren Hero-Bereich. Behalten Sie das also im Hinterkopf.

In jedem Fall sieht unser Hero-Bild, erstellt mit dem Sydney-Theme, so aus:

Methode 2: Verwendung des Full Site Editors (nur Block-Themes)

Wenn Sie ein Block-Theme verwenden, können Sie den Cover-Block des Full Site Editors verwenden, um einfach ein Heldenbild in WordPress zu erstellen. Kein Plugin erforderlich.

Schritt 1: Öffnen Sie den Full Site Editor

Gehen Sie zuerst zu Darstellung » Editor in Ihrem WordPress-Admin.

Nun sehen Sie die Hauptmenüs des Editors.

Nehmen wir an, Sie möchten Ihr Hero-Bild nur auf Ihrer Homepage hinzufügen.

Klicken Sie in diesem Fall einfach auf die Theme-Vorschau auf der rechten Seite der Seite.

Wenn Sie das Hero-Bild zu einer anderen Seite, einer benutzerdefinierten Seitenvorlage oder einem Blockmuster hinzufügen möchten, können Sie unseren Leitfaden zu WordPress Full Site Editing lesen, um weitere Informationen zu erhalten.

Schritt 2: Fügen Sie den Cover-Block zu Ihrer Seite/Vorlage hinzu

Da der Hero-Bereich normalerweise über dem „Fold“ (dem oberen Teil Ihrer Seite, der angezeigt wird, wenn Besucher auf der Website landen) platziert wird, müssen Sie sicherstellen, dass Sie sich an der richtigen Stelle befinden. Der Hero-Bereich befindet sich typischerweise direkt unter dem Header.

Sobald Sie das getan haben, müssen Sie entweder die vorhandenen Blöcke an dieser Stelle löschen oder einen neuen Gruppenblock direkt über diesen vorhandenen Blöcken hinzufügen.

In unserem Fall werden wir einfach die Blöcke entfernen, die bereits auf unserer Homepage waren. Wenn Sie dasselbe tun möchten, können Sie auf die Schaltfläche „Listenansicht“ auf der linken Seite der Seite klicken.

Suchen Sie dann die Blöcke, die Sie löschen müssen, um Platz für Ihren Hero-Bereich zu schaffen. Nachdem Sie ihn gefunden haben, klicken Sie einfach auf die Drei-Punkte-Schaltfläche und wählen Sie „Löschen“.

Wählen Sie nun den Block aus, der sich direkt unter dem/den gerade gelöschten Block(en) befand.

Klicken Sie dann auf die Drei-Punkte-Schaltfläche und wählen Sie 'Vorher hinzufügen'. Dies fügt einen Block direkt über dem ausgewählten Block und unter dem Header-Bereich ein.

In diesem Stadium können Sie auf die Schaltfläche '+' klicken, die im vermeintlichen Hero-Bereich erscheint.

Sie müssen hier einen Gruppenblock hinzufügen, da dies es Ihnen ermöglicht, das Hero-Bild, den Text, den Button und andere Elemente bei Bedarf als einzelnen Block zu verwalten.

Sie können nun einen Container auswählen, zu dem Sie Ihre Blöcke hinzufügen möchten.

Zur Demonstration haben wir den einfachen Gruppencontainer gewählt.

Klicken Sie als Nächstes einfach auf die Schaltfläche „+“ innerhalb des Gruppenblocks.

Wählen Sie hier den Block „Cover“ aus.

Danach sehen Sie 3 Optionen, um Ihr Helden-Hintergrundbild hinzuzufügen: Hochladen von Ihrem Computer, Hinzufügen aus Ihrer Mediathek oder Verwenden Ihres Beitragsbilds.

In unserem Beispiel klicken wir auf 'Mediathek' und wählen ein vorhandenes Bild aus.

Wenn der Bild-Upload erfolgreich ist, sehen Sie Ihr Hero-Bild sofort. Es gibt jedoch einige Anpassungen, die Sie vornehmen müssen.

Schritt 3: Konfigurieren Sie das Bild in Ihrem Cover-Block

Wählen Sie zuerst den 'Cover'-Block selbst aus, damit seine Symbolleiste darüber erscheint.

Klicken Sie dann auf die Schaltfläche „Ausrichten“ und wählen Sie „Vollbreite“.

Als Nächstes können Sie auf das Duoton-Symbol klicken, um den auf Ihr Bild angewendeten Duoton-Filter zu ändern.

Wenn es Ihnen nicht gefällt, können Sie es später deaktivieren, was wir Ihnen zeigen werden.

Danach können Sie auf das Symbol für die Inhaltsausrichtung klicken, um zu ändern, wo Ihr Text und Ihre Schaltfläche auf dem Bild erscheinen.

Wir haben uns für die linke Mitte entschieden, da der Fokus des Bildes auf der rechten Seite liegt.

Klicken Sie nun auf das 'Einstellungen'-Symbol und wechseln Sie zur Registerkarte 'Block'.

Scrollen Sie hier nach unten zu den Einstellungen. Hier können Sie optional einen Parallax-Effekt zu Ihrem Bild hinzufügen („Fixed background“) oder einen wiederholten Hintergrund verwenden.

Sie können auch nach oben scrollen und zum Stile-Symbol wechseln.

Hier können Sie die Überlagerungsopazität auf 0 setzen, damit Ihr Bild keinen Filter verwendet.

Wenn Sie die Höhe des Bildes ändern möchten, können Sie im Feld „Mindesthöhe des Covers“ eine Zahl in Pixel eingeben.

Wir haben beschlossen, unser Bild auf 400 Pixel einzustellen.

Passen Sie gerne auch andere Einstellungen wie Rahmen und Schatten, Blockabstand, Abstand und Innenabstand, Typografie usw. an.

Schritt 4: Blöcke zu Ihrem Cover-Block hinzufügen

Wir sind nun bereit, weitere Elemente zu Ihrem Hero-Bild hinzuzufügen. Sie sollten einen Text „Titel schreiben“ über dem Bild sehen.

Hier ist ein Profi-Tipp: Anstatt direkt eine Überschrift hinzuzufügen, klicken Sie auf die Schaltfläche „+“ und fügen Sie zuerst einen weiteren Gruppenblock hinzu. Betrachten Sie diesen Gruppenblock als Container für Ihren Text und Button.

Wenn Sie sie in einen Container setzen, ist es viel einfacher, ihre Ausrichtung und Gestaltung als eine Einheit zu steuern.

Wählen Sie dann Ihren gewünschten Container wie im vorherigen Schritt.

Sobald Sie das getan haben, können Sie erneut auf die Schaltfläche '+' klicken, um einen Überschriftenblock hinzuzufügen.

Jetzt können Sie die Überschrift Ihrer Seite einfügen.

Sie können die Textfarbe, -größe und -abmessungen in der Seitenleiste der Blockeinstellungen nach Belieben ändern.

Nachdem Sie das getan haben, können Sie die Eingabetaste drücken.

In diesem Stadium können Sie gerne eine Unterüberschrift direkt unter der Überschrift hinzufügen.

Schließlich können Sie Ihrer Hero-Bild einen Call-to-Action-Button hinzufügen.

Um dies zu tun, drücken Sie einfach erneut die „Enter“-Taste, klicken Sie auf die Schaltfläche „+“ und wählen Sie den Block „Buttons“ aus.

Fügen Sie dann einfach den Button-Text ein.

Um einen Link zu der Schaltfläche hinzuzufügen, klicken Sie einfach auf das Link-Symbol in der Symbolleiste und fügen Sie Ihre URL in das entsprechende Feld ein.

Klicken Sie dann auf den Pfeil-Button.

Wenn Sie Tipps und Tricks zum Erstellen von hochkonvertierenden Schaltflächen benötigen, können Sie sich unseren Leitfaden zu Best Practices für Call-to-Actions ansehen.

Und das war's im Grunde. Sie können weitere Elemente zu Ihrem Hero-Image hinzufügen oder es nach Ihren Wünschen anpassen.

Wenn Sie mit dem Aussehen des Hero-Bereichs zufrieden sind, klicken Sie einfach auf „Speichern“.

So sieht unser Cover-Block aus:

Methode 3: Verwendung eines Page Builders (Benutzerdefinierte Landingpages/Themes)

Nehmen wir an, Sie befinden sich noch in den Anfangsstadien der Einrichtung Ihrer Website. Oder Sie möchten eine benutzerdefinierte Landingpage erstellen, ohne durch die Einschränkungen Ihres Themes eingeschränkt zu sein. In diesem Fall empfehlen wir die Verwendung eines Page Builders, der Vorlagen mit Hero-Sektionen enthält, wie z. B. SeedProd.

SeedProd ist ein Drag-and-Drop-Seitenersteller, den wir oft verwendet haben, um benutzerdefinierte Seiten für WPBeginner und unsere anderen Marken-Websites, einschließlich Duplicator und OptinMonster, zu erstellen.

Obwohl es einfach zu bedienen ist, bietet es auch viele integrierte WordPress-Bearbeitungsfunktionen, die der Theme Customizer, der Full Site Editor und Gutenberg standardmäßig nicht haben.

Aus diesem Grund konnten wir Zeit und Geld sparen, indem wir keine Drittanbieter-Plugins installieren mussten, nur um unseren Themes oder Landingpages spezielle Funktionen hinzuzufügen.

SeedProd gibt es in einer kostenlosen und einer kostenpflichtigen Version. Sie können definitiv die kostenlose Version verwenden, um eine benutzerdefinierte Landingpage zu erstellen, aber die Vorlagen- und Blockoptionen sind ziemlich begrenzt. Aus diesem Grund empfehlen wir ein Upgrade auf einen kostenpflichtigen Plan für mehr Funktionen, einschließlich des KI-Content-Generators.

Weitere Informationen finden Sie in unserem SeedProd-Testbericht und unserem Vergleich zwischen Elementor vs. Divi vs. SeedProd, die alle beliebte Seitenersteller sind.

Schritt 1: SeedProd einrichten

Um SeedProd zu verwenden, müssen Sie das in Ihrem SeedProd-Konto bereitgestellte WordPress-Plugin in Ihrem Admin-Bereich installieren. Sobald das Plugin aktiv ist, werden Sie aufgefordert, Ihren Lizenzschlüssel einzugeben, den Sie auf Ihrer SeedProd-Kontoseite erhalten können.

Nachdem Sie ihn eingegeben haben, klicken Sie einfach auf die Schaltfläche 'Schlüssel überprüfen'.

Mit SeedProd haben Sie 2 Optionen: Sie können einen Hero-Bereich zu einer Landingpage oder bestimmten Seiten innerhalb eines benutzerdefinierten Themes hinzufügen.

Um Ihre Landingpage oder Ihr Theme einzurichten, können Sie diese Anleitungen lesen:

• So erstellen Sie ein benutzerdefiniertes WordPress-Theme ohne Code
• So erstellen Sie eine Landingpage in WordPress
• So erstellen Sie eine Squeeze Page in WordPress, die konvertiert
• So erstellen Sie schöne „Coming Soon“-Seiten in WordPress

Für den Rest des Tutorials verwenden wir die Menu Sales-Vorlage.

Schritt 2: Passen Sie Ihren Hero-Bereich an

Sobald Sie eine Vorlage für Ihr Theme oder Ihre Landingpage ausgewählt haben, gelangen Sie zum SeedProd-Editor.

Die SeedProd-Bearbeitungsoberfläche besteht aus einer Seitenvorschau auf der rechten Seite und einer linken Seitenleiste, in der Sie weitere Blöcke hinzufügen, einen Block/Abschnitt anpassen, Änderungen rückgängig machen/wiederholen, die Ebenen Ihrer Seite anzeigen und Ihre Website auf Mobilgeräten oder Tablets in der Vorschau anzeigen können.

Da das SeedProd-Theme bereits einen Hero-Bereich enthält, ist unsere Arbeit bereits zur Hälfte erledigt. Wir müssen nur noch das Bild ersetzen, es anpassen und bei Bedarf weitere Blöcke zum Hero-Bereich hinzufügen.

Alternativ können Sie weitere Hero-Bereich-Designs finden, indem Sie in der linken Seitenleiste von „Blöcke“ zu „Bereiche“ wechseln. Navigieren Sie dann zu „Hero“ und klicken Sie auf die Schaltfläche „+“ bei der Hero-Bereich-Vorlage, die Sie Ihrer Seite hinzufügen möchten.

SeedProd wird ihn dann in Ihre Seite einfügen.

Ändern wir zuerst das Hero-Bild.

Klicken Sie dazu auf den obersten Bereich, der das Heldenbild enthält. Sie wissen, dass Sie das Richtige ausgewählt haben, wenn in der linken Seitenleiste eine lila Box 'Bearbeiten: Bereich' erscheint.

Bewegen Sie nun den Mauszeiger über das Hintergrundbild in der Seitenleiste.

Klicken Sie dann auf das „Medien-Symbol“. Danach können Sie Ihr Hero-Bild von Ihrem Computer oder aus der Mediathek hochladen.

Als Nächstes müssen Sie die Hintergrundposition wählen, die am besten zu Ihrem Bild passt.

Wir sind der Meinung, dass die Option „Benutzerdefinierte Position“ uns die beste Kontrolle über die Positionierung der Brennpunkte gibt, daher wählen wir diese Option.

Die Option „Benutzerdefinierte Position“ bietet Ihnen mehrere Möglichkeiten, den Hintergrund zu konfigurieren.

Für die X- und Y-Positionen können Sie ändern, wie das Bild vertikal und horizontal positioniert wird.

Die Einstellung „Attachment“ hat 2 Optionen: Scroll (nicht-parallax) und Fixed (parallax).

Wenn Ihr Bild kleiner als der Hero-Bereich ist, Sie aber möchten, dass der gesamte Bereich mit dem Bild gefüllt wird, können Sie das Bild in diesem Bereich wiederholen. Andernfalls wählen Sie einfach 'Keine Wiederholung'.

Was die Größe des WordPress Hero-Bildes betrifft, können Sie die Option 'Auto' wählen, wenn das Bild automatisch an den Hero-Bereich angepasst werden soll.

Experimentieren Sie ruhig mit diesen Einstellungen, um zu sehen, was für Ihr Bild am besten funktioniert.

Eine weitere Möglichkeit besteht darin, das Hintergrundbild abzudunkeln, damit Ihr Text besser zur Geltung kommt.

Dazu können Sie den Schieberegler 'Hintergrund abdunkeln' auf die gewünschte Opazitätseinstellung ziehen.

Wenn Sie die überlagernde Hintergrundfarbe ändern möchten, klicken Sie einfach auf die Schaltfläche „Overlay Color“ (Farbauswahl).

Wählen Sie dann einfach Ihre bevorzugte Farbe aus.

Scrollen wir nun wieder nach oben und wechseln zu den 'Erweiterten' Einstellungen. Hier können Sie Ihrem Hero-Bereich alle möglichen coolen Effekte hinzufügen.

Sie können zum Beispiel den Tab 'Partikel-Hintergrund' öffnen und einen animierten Partikel-Hintergrund zu Ihrem Bild hinzufügen. Dies kann Ihren Hero-Bereich wesentlich beeindruckender und einzigartiger machen.

Als Nächstes können Sie einen benutzerdefinierten Form-Trenner oben und/oder unten in Ihrem Hero-Bereich hinzufügen, indem Sie zum Menü „Form-Trenner“ gehen.

Dies kann Ihrer Hero-Sektion mehr visuelles Interesse verleihen. Wenn Sie außerdem einen lustigen Formteiler am unteren Rand hinzufügen, können Sie Benutzer dazu ermutigen, Ihre Landingpage nach unten zu scrollen und mehr über Ihr Angebot zu erfahren.

Schritt 3: Weitere Blöcke zu Ihrem Heldenbereich hinzufügen und anpassen

Wenn Ihr Hero-Bild bereit ist, fügen wir weitere Blöcke zum Hero-Bereich hinzu.

Da wir bereits einen Überschriftenblock haben, klicken wir darauf und passen ihn an. Wenn er ausgewählt ist, sollten Sie sehen, dass die linke Seitenleiste jetzt ein oranges Banner mit der Aufschrift „Bearbeiten: Überschrift“ anzeigt.

Das Coole an SeedProd ist, dass es einen integrierten KI-Content-Generator hat.

Wenn Sie sich also nicht sicher sind, welche Überschrift Sie verwenden sollen, können Sie auf die Schaltfläche „Mit KI bearbeiten“ klicken, um einige Ideen zu erhalten.

Sie sollten nun ein Popup-Fenster sehen, in dem Sie Ihre Inhalte mit KI schreiben können.

Wir möchten eine komplett neue Überschrift generieren, also klicken wir auf die Schaltfläche „Neue Eingabeaufforderung“, um dies zu tun.

Sagen Sie der KI dann einfach, welche Art von Inhalt sie erstellen soll.

Klicken Sie dann auf die Schaltfläche „Text generieren“.

Die KI generiert dann den Inhalt für Sie.

Sie können ihn jedoch immer noch ändern, indem Sie den Ton ändern, die Sprache vereinfachen, den Text länger oder kürzer machen und ihn sogar in über 50 Sprachen übersetzen.

Wenn Sie mit dem Aussehen der Überschrift zufrieden sind, klicken Sie einfach auf „Einfügen“.

Jetzt können Sie die linke Seitenleiste nach unten scrollen.

Hier können Sie die Ausrichtung des Textes, die Schriftgröße und die Überschriften-Tags nach Ihren Wünschen ändern.

Wenn der Text noch mehr hervorstechen soll, können Sie nach oben scrollen und zum Tab „Erweitert“ wechseln.

Klicken Sie im Menü „Stile“ auf „Bearbeiten“ bei den Typografieeinstellungen. Hier können Sie gerne die Schriftfamilie, den Zeilenabstand, den Buchstabenabstand und die Groß-/Kleinschreibung des Textes ändern.

Sie können auch ein Stück weiter nach unten gehen und der Überschrift einen Textschatten hinzufügen.

Hier haben wir uns entschieden, einen benutzerdefinierten Schatten zu erstellen, damit der Text noch mehr hervorsticht.

Um eine Unterüberschrift unter der Hauptüberschrift einzufügen, können Sie einfach auf die Schaltfläche „Blöcke“ in der linken Seitenleiste klicken.

Dies bringt Sie zur Blockbibliothek.

Ziehen Sie nun einfach den 'Text'-Block direkt unter die Überschrift und legen Sie ihn dort ab.

Die Einstellungen für den Textblock ähneln stark denen des Überschriftenblocks, sodass Sie die gleichen Schritte wie zuvor wiederholen können, um die Unterüberschrift zu erstellen.

Um eine Call-to-Action-Schaltfläche hinzuzufügen, müssen Sie den Block 'Button' per Drag & Drop auf die Seite ziehen.

Es wird normalerweise direkt unter der Unterüberschrift platziert.

Wenn das erledigt ist, geben Sie Ihren Button-Text in das entsprechende Feld ein.

Sie können auch einen Untertext direkt unter dem Hauptbutton-Text für mehr Kontext hinzufügen.

Scrollen Sie dann nach unten und fügen Sie einen Link zu Ihrer Schaltfläche hinzu.

Ändern Sie gerne auch die Ausrichtung und Größe der Schaltfläche.

Bewegen Sie sich nun wieder nach oben in der Seitenleiste und wechseln Sie zum Tab 'Vorlagen'.

Hier können Sie Ihren Button-Stil ändern, damit er besser zu Ihrem WordPress-Design passt.

Wenn Ihnen die Standardvorlagendesigns nicht gefallen, wechseln Sie zur Registerkarte „Erweitert“.

Hier können Sie die Typografie, den Stil, die Farbe, den Abstand, den Schatteneffekt usw. der Schaltfläche ändern.

Passen Sie Ihre Vorlage gerne weiter an, bis sie gut aussieht.

Wenn Sie zufrieden sind, klicken Sie einfach oben auf die Schaltfläche „Speichern“ und wählen Sie „Veröffentlichen“, um die Seite live zu schalten.

Und das war's für das Hinzufügen eines Hero-Bildes mit einem Page Builder.

Hier ist, wie der Hero-Bereich auf unserer Demoseite aussieht:

Methode 4: Verwendung des Hero Banner Plugins + Shortcode (Alle Themes)

Diese letzte Methode funktioniert technisch mit allen Themes, aber wir empfehlen sie am meisten für Personen, die ein klassisches Theme ohne integrierte Hero-Sektion verwenden.

Um diese Methode anzuwenden, müssen Sie das Plugin Hero Banner Ultimate installieren. Schritt-für-Schritt-Anleitungen finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins für Anfänger.

Schritt 1: Richten Sie das Hero Banner Plugin ein

Sobald das Plugin aktiv ist, gehen Sie zu Hero Banner » Add Hero Banner.

Geben Sie danach Ihrem Hero-Banner einen Titel. Dieser dient als Ihre Überschrift.

Fügen Sie anschließend Text im visuellen klassischen Editor ein, der als Ihre Unterüberschrift dient. Ändern Sie hier gerne die Formatierung und Farbe.

Scrollen Sie nun nach unten zum Abschnitt 'Hero Banner – Einstellungen'.

Hier können Sie ein Banner-Layout auswählen. Obwohl Sie das Layout nicht in Echtzeit in den Plugin-Einstellungen in der Vorschau anzeigen können, ist es einfach, später auf Ihrer tatsächlichen Seite zwischen ihnen zu wechseln, um dasjenige zu finden, das Ihnen am besten gefällt.

Wir wählen Layout 1 für unser Tutorial.

Was den Bannertyp betrifft, können Sie 'Hintergrundbild' für ein Hero-Bild auswählen, aber Sie können auch 'Hintergrundvideo' wählen, wenn Sie ein Vollbildvideo als Hero verwenden möchten.

Vergessen Sie nicht, als Nächstes auf „Bild hochladen“ zu klicken, um Ihr Bild vom Computer oder aus der Mediathek hinzuzufügen.

In diesem Stadium können Sie die Hintergrundbildgröße auf 'Cover' einstellen, damit das Bild die volle Breite einnimmt.

Sie möchten auch „Scrollen“ für die Hintergrundbild-Anlage wählen, um jegliche Parallax-Effekte zu deaktivieren.

Gehen Sie nach unten, bis Sie die Einstellung für die Bannerfarbe erreichen.

Hier können Sie die Farbe der Überschrift (Title Color) und der Unterüberschrift (Content Color) ändern. Klicken Sie einfach auf das Farbauswahlwerkzeug, um dies zu tun.

Zusätzlich möchten Sie vielleicht eine Überlagerungsfarbe über das Bild legen, was praktisch sein kann, um die Lesbarkeit des Textes auf dem Bild anzupassen.

Wir haben uns für die Farbe Schwarz mit einer Deckkraft von 0,5 entschieden.

Konfigurieren wir die Call-to-Action-Einstellungen.

Hier können Sie den Text und den Link für Ihre Schaltfläche einfügen. Sie können auch die Farbe unter „Button – 1 Class“ ändern.

Alles, was Sie als Nächstes tun müssen, ist nach oben zu scrollen.

Danach klicken Sie auf „Veröffentlichen“.

Gehen wir nun zu Hero Banner » Hero Banner. Sie sollten nun sehen, dass Ihr Hero-Bild erstellt wurde und das Plugin einen Shortcode für Sie generiert hat, um es anzuzeigen.

Notieren Sie sich diesen Shortcode, da wir ihn später benötigen werden.

Schritt 2: Finden Sie den CSS-Selektor des Header-Bereichs Ihres Themes

Um das Hero-Bild anzuzeigen, müssen wir eine bestimmte „Adresse“ für den Header-Bereich Ihres Themes finden.

Dies wird als CSS-Selektor bezeichnet und teilt unserem Plugin genau mit, wo das Hero-Bild platziert werden soll. Keine Sorge, Sie müssen keinen eigenen Code schreiben.

Besuchen Sie dazu Ihre Website im Frontend. Klicken Sie dann mit der rechten Maustaste auf Ihren Header-Bereich und wählen Sie „Inspizieren“.

Auf der rechten Seite müssen Sie herausfinden, welchen CSS-Selektor der Header-Bereich verwendet. Sie können den Cursor über all diese Code-Schnipsel bewegen, bis Sie sehen, dass der Header-Bereich im Frontend hervorgehoben wird.

Hier ist ein Beispiel:

Wenn der gesamte Header-Bereich beim Überfahren des Codes hervorgehoben wird, sind Sie auf dem richtigen Weg.

Klicken Sie nun mit der rechten Maustaste auf diesen Code-Snippet und wählen Sie Kopieren » Selektor kopieren.

Nachdem Sie das getan haben, können Sie den Selektor entweder irgendwo sicher einfügen, z. B. in einen Texteditor, oder diese Registerkarte einfach geöffnet lassen.

Schritt 3: Fügen Sie Ihren Shortcode zu WPCode hinzu

Der nächste Schritt ist die Installation von WPCode, einem Code-Snippet-Plugin.

Technisch gesehen benötigen Sie kein Plugin, um benutzerdefinierte Code-Snippets in Ihre Theme-Dateien einzufügen. Wir wollten dies jedoch tun, um die Dinge sicher zu halten, da das Einfügen von Code in eine Theme-Datei einige unerwartete Fehler verursachen kann.

Wir haben WPCode als äußerst hilfreich für die Verwaltung von benutzerdefinierten Code-Snippets empfunden, ohne Ihre Website zu beschädigen.

Installieren Sie zuerst das WordPress-Plugin in Ihrem Admin-Bereich. Sobald das Plugin aktiv ist, navigieren Sie zu Code Snippets » + Snippet hinzufügen, wählen Sie „Eigene Codes hinzufügen (Neues Snippet)“ und klicken Sie auf die Schaltfläche „+ Benutzerdefiniertes Snippet hinzufügen“.

Geben wir nun Ihrem neuen Code-Snippet einen Namen. Es kann etwas Einfaches sein, wie 'Hero Banner Shortcode'.

Ändern Sie danach den Code-Typ auf „PHP-Snippet“.

Fügen Sie im Feld „Code-Vorschau“ den folgenden Ausschnitt ein:

echo do_shortcode('[hbupro_banner id="XXX"]'); // Replace with your own shortcode

Stellen Sie sicher, dass Sie [hbupro_banner id="XXX"] durch Ihren eigenen Hero-Banner-Shortcode ersetzen, den Sie zuvor gesehen haben.

Scrollen Sie als Nächstes nach unten zum Abschnitt 'Einfügen'.

Hier sollte die Einfügemethode „Automatisch einfügen“ und der Speicherort „Nach HTML-Element“ sein.

Fügen Sie dann den zuvor kopierten Selektor in das Feld 'CSS-Selektor' ein. In unserem Fall war es #masthead, aber dies variiert je nach Theme.

Wenn das erledigt ist, können Sie den Schalter „Inaktiv“ auf „Aktiv“ umlegen und auf die Schaltfläche „Snippet speichern“ klicken.

Und das ist alles!

Wenn Sie Ihre Website aufrufen, sollten Sie jetzt das Hero-Banner-Bild direkt unter Ihrem Header sehen:

Häufig gestellte Fragen zu Hero-Bildern

Hier ist eine Liste einiger häufig gestellter Fragen, die unsere Leser häufig zu Hero-Bildern stellen:

Was ist die beste Größe für ein WordPress-Hero-Bild?

Ein guter Ausgangspunkt für die Größe von Hero-Bildern ist 1920 Pixel breit und 400 bis 600 Pixel hoch. Dies stellt sicher, dass es auf den meisten Desktop-Bildschirmen scharf aussieht, ohne zu viel vertikalen Platz einzunehmen.

Die perfekte Größe hängt jedoch oft von Ihrem spezifischen WordPress-Theme ab. Wir empfehlen immer, zu testen, wie Ihr Bild sowohl auf Desktop- als auch auf Mobilgeräten aussieht.

Kann ich ein Video in meinem Hero-Bereich verwenden?

Absolut. Die Verwendung eines Video-Hintergrunds kann Ihrer Website mehr Dynamik verleihen und die Aufmerksamkeit der Besucher sofort fesseln. Die meisten Page Builder wie SeedProd und der Standard-WordPress-Cover-Block bieten einfache Optionen, um anstelle eines statischen Bildes einen Video-Hintergrund hinzuzufügen.

Wie mache ich mein Hero-Bild mobilfreundlich?

Moderne Themes und Page Builder sind responsiv gestaltet, sodass sie Ihr Hero-Bild automatisch für kleinere Bildschirme skalieren. Der Schlüssel ist, ein Bild zu wählen, das auch beschnitten gut aussieht.

Es ist auch sehr wichtig, Ihr Bild zu komprimieren, bevor Sie es hochladen. Dies stellt sicher, dass es für Besucher mit langsameren mobilen Verbindungen schnell geladen wird.

Ist ein Hero-Bild dasselbe wie ein Slider?

Sie sind ähnlich, aber nicht genau gleich. Ein Hero-Image ist typischerweise ein einzelnes, großes Bannerbild am oberen Rand einer Webseite. Ein Slider hingegen rotiert durch mehrere Bilder oder Videos. Sie können einen Slider in Ihrem Hero-Bereich verwenden, wie wir in der Methode für klassische Themes gezeigt haben.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein Hero-Bild in WordPress hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Hinzufügen einer Preloader-Animation zu WordPress und unsere Expertenauswahl der besten Tools zum Erstellen und Verkaufen digitaler Produkte lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.