So bearbeiten Sie den Header in WordPress

Kürzlich bat uns einer unserer Leser um eine Schritt-für-Schritt-Anleitung zum Bearbeiten des Headers in WordPress, da er nichts finden konnte, das ihm von Grund auf weiterhilft.

Obwohl dies etwas sehr Grundlegendes ist, dachten wir, dies sei eine ausgezeichnete Gelegenheit, denen zu helfen, die neu in ihrer WordPress-Reise sind.

Welcher Editor zur Anwendung kommt, hängt vom Theme ab, das Ihre Website verwendet. Dieser Leitfaden behandelt daher beide Wege. Ich helfe Ihnen zunächst dabei, herauszufinden, welches Sie haben, und führe Sie dann durch die Änderungen selbst.

So bearbeiten Sie den Header in WordPress

Mit der neuesten Version von WordPress können Sie den interaktiven und benutzerfreundlichen Website-Editor verwenden, um Ihre Website anzupassen und zu branden und ganz einfach eine benutzerdefinierte Kopfzeile zu erstellen.

Da die meisten neuen WP-Installationen das Twenty Twenty-Four Theme verwenden, ist der Website-Editor für verschiedene Anpassungen der Kopfzeile sehr hilfreich:

• Schriftarten
• Farben
• Button-Styling
• Und mehr

Themes, die vor der Block-Ära erstellt wurden, bieten Ihnen den älteren Theme Customizer anstelle des Website-Editors, und die Header-Steuerelemente befinden sich an einer völlig anderen Stelle.

Was ist eine WordPress-Kopfzeile?

Ihr Header ist der Streifen, der sich über die Oberseite jeder Seite Ihrer Website erstreckt und normalerweise Ihr Logo, den Titel Ihrer Website und Ihr Hauptnavigationsmenü enthält.

Da er sich in einer Vorlage und nicht auf einer einzelnen Seite befindet, ändert eine Bearbeitung ihn überall.

Der Head-Bereich ist unsichtbares HTML am oberen Rand Ihrer Seite, das Metadaten und Skripte enthält, während eine Überschrift ein Textteil innerhalb Ihres Inhalts ist, wie z. B. eine H1 oder H2.

Beide werden ständig mit dem Header verwechselt, aber keine von beiden ist das, was Sie ändern, wenn Sie ein neues Logo oder ein anderes Menü wünschen.

Welchen Kopfzeilen-Editor verwendet Ihr Theme?

Fahren Sie mit der Maus über Darstellung in Ihrem WordPress-Dashboard, um herauszufinden, welches Sie haben. Eine Option Editor bedeutet, dass Ihr Theme ein Block-Theme ist, und alles ab Schritt 1 gilt für Sie.

Wenn die einzige Option dort Anpassen lautet, verwenden Sie ein klassisches Theme, und der weiter unten befindliche Abschnitt Anpassen ist derjenige, den Sie möchten.

Twenty Twenty-Five wird mit WordPress selbst ausgeliefert, und die meisten kostenlosen Block-Themes, die in den letzten Jahren veröffentlicht wurden, funktionieren auf die gleiche Weise.

Klassische Themes sind jedoch immer noch überall zu finden, und beliebte wie Astra, GeneratePress, OceanWP und Kadence verwalten ihre Header über den Customizer oder über ihr eigenes Einstellungsfeld.

Schritt 1: Greifen Sie auf den Website-Editor zu

Navigieren Sie von Ihrem WordPress-Dashboard einfach zu Design und klicken Sie dann im Menü auf die Option Editor.

Dies leitet Sie zum Website-Editor weiter, wo Sie das Erscheinungsbild Ihrer Website mit dem Block-Editor anpassen können. Öffnen Sie die Optionen unter Muster.

Nun müssen Sie nur noch nach unten scrollen, bis Sie den Abschnitt Vorlagenteile sehen, und dann auf Kopfzeile klicken, um dessen Optionen zu öffnen.

Klicken Sie auf der rechten Seite des Bildschirms auf das Kopfzeilenbild, um die im Website-Editor verfügbaren Anpassungsoptionen zu öffnen, und klicken Sie auf das Bearbeiten-Symbol.

Sie werden nun zum Block-Editor von WordPress weitergeleitet, wo Sie mit dem Hinzufügen Ihres Logos, Ihrer Navigation, Social-Media-Icons und bei Bedarf sogar einer CTA-Schaltfläche beginnen können.

Schritt 2: Fügen Sie Ihr Website-Logo hinzu

Sobald Sie sich im Block-Editor für die Kopfzeile Ihrer Website befinden, klicken Sie auf das Symbol für die Listenansicht, damit Sie leicht erkennen können, welche Elemente in der WordPress-Kopfzeile enthalten sind.

Erweitern Sie alle Blöcke in der Listenansicht, klicken Sie auf das erste Reihe-Element und stellen Sie die Ausrichtung auf Volle Breite ein, um mit der Anpassung der Kopfzeilen-Vorlage zu beginnen.

Klicken Sie nun einfach in der Listenansicht auf die Option Website-Logo und klicken Sie im Vorschaufenster der Kopfzeile auf das Symbol Hochladen.

Sie können Ihr Logo entweder über den Tab Dateien hochladen hochladen oder einfach die Datei aus Ihrer vorhandenen Mediathek auswählen.

Bei Bedarf können Sie die Größenänderungspunkte verwenden, um die Abmessungen und die Größe des Website-Logos entsprechend Ihren spezifischen Bedürfnissen oder Anforderungen zu ändern.

Gut gemacht! Das ist alles, was Sie tun müssen, um Ihr Website-Logo in die Kopfzeile hochzuladen. Nun kommen wir zum nächsten Schritt: dem Hinzufügen Ihres Website-Titels!

Schritt 3: Fügen Sie den Website-Titel hinzu

Das Hinzufügen des Website-Titels in Ihrer Website-Kopfzeile ist genauso einfach wie das Hochladen Ihres Website-Logos im WordPress-Theme. Klicken Sie einfach in der Listenansicht auf Website-Titel.

Klicken Sie dann, ähnlich wie wir zuvor das Website-Logo geändert haben, auf den Block mit der Aufschrift „Website-Titel schreiben…“ und fügen Sie Ihren Website-Titel darin ein.

Wie Sie sehen können, nimmt der Header Ihres Themes nun langsam Gestalt an. Im nächsten Schritt werden wir einige Navigationselemente zu Ihrem Header hinzufügen.

Schritt 4: Fügen Sie die Website-Navigation hinzu

Um Ihre Seiten zum Header hinzuzufügen, klicken Sie einfach in der Listenansicht auf Navigation und dann auf die Option Bearbeiten für dessen Block.

Dies führt Sie zur speziellen Block-Editor-Seite für das Navigation-Element, wo Sie über das Plus-Symbol neue Seiten und deren Links hinzufügen können.

Dies vervollständigt das Aussehen Ihres Headers, aber wie Sie sehen können, wirkt er zu einfach und es gibt viel Raum für Verbesserungen!

Lassen Sie uns nun etwas Styling zu Ihrem Header hinzufügen, um ihn optisch ansprechender zu gestalten und die Farbgebung Ihrer Website abzustimmen.

Schritt 5: Ändern Sie die Hintergrundfarbe

Eine der grundlegendsten Änderungen, die Sie am Header vornehmen können, ist die Änderung seiner Hintergrundfarbe. Klicken Sie dazu auf die erste Zeile und öffnen Sie deren Einstellungen.

Sie sehen nun die Block-Optionen für die ausgewählte Zeile. Alles, was Sie jetzt tun müssen, ist auf das Stile-Symbol neben dem Zahnrad (Einstellungen)-Symbol zu klicken.

Dies öffnet zahlreiche Optionen für die ausgewählte Zeile, wo Sie Farbe, Hintergrundbild, Typografie und Abmessungen ändern können.

Sie können diese erkunden, um Ihren Header ansprechender zu gestalten. Da wir nur die Farbe ändern mussten, haben wir Weiß für den Text und Schwarz für den Hintergrund gewählt.

Wie Sie sehen können, sieht der Header im Frontend jetzt viel besser aus und verleiht der Website ein vollständigeres Aussehen.

Möchten Sie weitere Änderungen am Header vornehmen, wie z. B. das Einfügen von Social-Media-Icons und einer CTA-Schaltfläche? Nun, der Prozess ist einfach!

Schritt 6: Fügen Sie Social-Media-Icons und eine CTA-Schaltfläche hinzu

Um Social-Media-Icons und eine CTA-Schaltfläche hinzuzufügen, müssen Sie eine neue Zeile hinzufügen. Klicken Sie auf das Plus (+)-Symbol und wählen Sie den Zeilen-Block aus.

Ziehen Sie als Nächstes den neu hinzugefügten Zeilen-Block über die vorhandene Zeile, damit Sie ihn frei anpassen können, ohne den vorhandenen Header zu beeinträchtigen.

Klicken Sie danach auf die Schaltfläche (+) innerhalb der neuen Zeile und suchen Sie nach dem Block Social Icons und wählen Sie ihn aus.

Ähnlich wie wir Seiten in der Navigation hinzugefügt haben, klicken Sie auf die Schaltfläche (+), um Social Media Widgets für die von Ihnen bevorzugten Plattformen einzufügen.

Sobald Sie fertig sind, wählen Sie die Zeile erneut aus der Listenansicht aus und klicken Sie erneut auf die Schaltfläche (+), um einen Button-Block zu Ihrem Header hinzuzufügen.

Alles, was Sie jetzt tun müssen, ist, Ihrer Schaltfläche einen Text wie „Jetzt buchen!“ zu geben und den Link zu aktualisieren, um eine Weiterleitung für Website-Besucher einzurichten.

Um alles zusammenzufügen, wählen Sie die Zeile erneut aus und stellen Sie die Ausrichtung auf Volle Breite ein, wie wir es bei der ersten Zeile getan haben.

Um diesem Abschnitt dann ein ansprechenderes Aussehen zu verleihen, verwenden Sie das Menü Elemente-Ausrichtung ändern und wählen Sie die Option Elemente rechts ausrichten.

Und da haben Sie es! Ihre Kopfzeile ist nun vollständig und sieht perfekt aus. Klicken Sie einfach oben auf die Schaltfläche Speichern, um keine Änderungen zu verlieren.

So bearbeiten Sie die Kopfzeile in einem klassischen WordPress-Theme

Klassische Themes leiten Header-Änderungen über den Theme Customizer, ein Live-Vorschaufenster, anstatt eine Block-Leinwand, weiter.

Gehen Sie zu Darstellung » Anpassen und Sie erhalten Ihre Website rechts mit einer Seitenleiste mit Einstellungen links. Das meiste, was Sie brauchen, befindet sich in drei oder vier Bereichen dieser Seitenleiste:

• Website-Identität: Ihr Logo, Website-Titel und Slogan, normalerweise das Erste, was eingestellt wird
• Menüs: Welche Seiten in Ihrer Navigation erscheinen und in welcher Reihenfolge
• Farben: Die Hintergrund- und Textfarben des Headers
• Header-Bild: Ein Banner hinter dem gesamten Streifen, das von vielen Themes angeboten wird, aber nicht von allen

Astra platziert fast alles unter Header-Builder, GeneratePress verwendet Layout » Header und OceanWP teilt seine Optionen auf Header und Typografie auf, sodass die genauen Panelnamen je nach Theme variieren.

Wenn Sie eine Steuerung nicht finden können, klicken Sie direkt auf den Header in der Live-Vorschau, da die meisten Themes Sie zum passenden Panel weiterleiten.

Premium-Themes behalten manchmal ihre besten Header-Optionen komplett aus dem Customizer heraus und legen sie stattdessen in ein eigenes Menü auf der obersten Ebene. Suchen Sie nach einem Menüpunkt mit dem Namen Ihres Themes, bevor Sie davon ausgehen, dass eine Funktion fehlt.

Der Customizer verwaltet Ihren Footer im selben Bedienfeld, daher ist dies ein guter Zeitpunkt, um ein Kontaktformular zu Ihrem Footer hinzuzufügen, während Sie schon dabei sind. Nichts geht live, bis Sie oben in der Seitenleiste auf Veröffentlichen klicken.

Fügen Sie Ihr Logo zur E-Mail-Kopfzeile in WordPress hinzu

Erwägen Sie, Ihr Logo zu einer E-Mail-Kopfzeile hinzuzufügen, um ein konsistentes Branding zu erzielen, das sich auch auf die von Ihrer WordPress-Website gesendeten E-Mails auswirkt.

Es ist einfach, die Funktionsweise von E-Mail-Benachrichtigungen in WPForms zu ändern. Gehen Sie zuerst zu WPForms » Einstellungen und klicken Sie auf die Registerkarte E-Mail.

Wählen Sie im Abschnitt Vorlage einen Stil, der am besten zu Ihrem Branding passt, und klicken Sie auf die Schaltfläche Auswählen, um ihn anzuwenden.

Danach navigieren Sie zum Abschnitt Kopfzeilenbild und klicken auf die Schaltfläche Bild hochladen, um Ihr Website-Logo zu E-Mails hinzuzufügen.

Nachdem Sie Ihr Bild hochgeladen haben, wählen Sie die gewünschte Größe für das Bild aus einem Dropdown-Menü aus, das in Ihren E-Mail-Benachrichtigungen verwendet werden soll.

Klicken Sie anschließend einfach auf den Link E-Mail-Vorlagen-Vorschau unter dem Dropdown-Menü für Typografie.

Ein neuer Tab wird in Ihrem Browser geöffnet, in dem Sie eine Vorschau Ihrer Benachrichtigungs-E-Mail-Vorlage mit Ihrem Website-Logo sehen können!

FAQs zur Bearbeitung der Kopfzeile in WordPress

Das Erlernen der Bearbeitung der Kopfzeile in WordPress ist ein beliebtes Thema bei unseren Lesern. Hier sind Antworten auf einige häufig gestellte Fragen dazu.

Wie passe ich meine Kopfzeile in WordPress an?

Um Ihre Kopfzeile in WordPress anzupassen, navigieren Sie zu Ihrem Dashboard und gehen Sie zu Darstellung » Anpassen. Hier finden Sie den Abschnitt Kopfzeile. Klicken Sie darauf, um verschiedene Optionen zu erkunden, wie z. B. das Ändern des Logos, das Anpassen des Kopfzeilenlayouts, der Farben und anderer Elemente. Einige Themes bieten zusätzliche Kopfzeilenoptionen, die Sie an Ihren Stil anpassen können.

Wie bearbeite ich Kopfzeilen-Schaltflächen in WordPress?

Das Bearbeiten von Kopfzeilen-Schaltflächen in WordPress beinhaltet normalerweise den Zugriff auf den Customizer über Darstellung » Anpassen. Suchen Sie dort nach den Einstellungen für Kopfzeile oder Menü. Sie können Schaltflächen bearbeiten, indem Sie ihren Text, Links und Stile ändern oder neue Elemente hinzufügen, wenn Ihr Theme dies unterstützt. Bei Bedarf können Sie auch benutzerdefinierten Code hinzufügen, um Kopfzeilen-Schaltflächen zu bearbeiten.

Wie setze ich meine Kopf- und Fußzeile in WordPress zurück?

Um Ihre Kopf- und Fußzeile in WordPress zurückzusetzen, können Sie zu Darstellung » Anpassen gehen und den Abschnitt Kopfzeile oder Fußzeile auswählen. Suchen Sie in diesen Einstellungen nach einer Zurücksetzungsoption. Wenn keine vorhanden ist, müssen Sie möglicherweise Änderungen manuell rückgängig machen oder ein Plugin verwenden, das Zurücksetzungsfunktionen bietet.

Wie bearbeite ich das Kopfzeilen-Logo in WordPress?

Öffnen Sie auf einem Block-Theme Darstellung » Editor, bearbeiten Sie den Vorlagenteil Kopfzeile, wählen Sie dann den Block Logo der Website aus und laden Sie Ihr Bild hoch. Gehen Sie auf einem klassischen Theme zu Darstellung » Anpassen » Identität der Website und verwenden Sie die Schaltfläche Logo auswählen. Beide Wege legen das Logo website-weit fest, sodass Sie dies nur einmal tun müssen.

Kann ich meine WordPress-Kopfzeile fixieren?

Wählen Sie den äußersten Gruppe-Block aus, der Ihren Vorlagenteil Kopfzeile umschließt, und setzen Sie seine Position in der Seitenleiste mit den Blockeinstellungen auf Haftend, was auf jedem Block-Theme ohne Plugin funktioniert. Klassische Themes liefern normalerweise einen Umschalter für eine haftende Kopfzeile in ihren eigenen Optionsfeldern, und wenn Ihres dies nicht tut, wird ein Plugin für haftende Kopfzeilen die Aufgabe erfüllen.

Kann ich die WordPress-Kopfzeile ohne Code bearbeiten?

Alles in dieser Anleitung geschieht über die WordPress-Administration ohne jeglichen Code, egal ob Sie den Website-Editor oder den Customizer verwenden. Die direkte Bearbeitung der Datei header.php ist eine Option für Entwickler, die Änderungen auf Markup-Ebene benötigen. Dieser Weg bedeutet, in einem Child-Theme zu arbeiten, damit ein Theme-Update Ihre Änderungen nicht löscht, und fast nichts, was ein typischer Website-Besitzer von einer Kopfzeile möchte, erfordert dies.

Was ist der Unterschied zwischen einer WordPress-Kopfzeile und einer Überschrift?

Eine Kopfzeile ist der Vorlagenbereich am oberen Rand Ihrer Website, der Ihr Logo und Ihre Navigation auf jeder Seite enthält. Eine Überschrift ist eine einzelne Textzeile innerhalb Ihres Inhalts, die als H1 bis H6 markiert ist und einen Artikel in Abschnitte unterteilt. Das Ändern Ihrer Kopfzeile wirkt sich auf die gesamte Website aus, während das Ändern einer Überschrift nur die Seite betrifft, auf der sie sich befindet.

Als Nächstes erfahren Sie, wie Sie ein mehrstufiges Formular in Elementor erstellen

Haben Sie sich jemals gefragt, wie Sie das Benutzerengagement und die Lead-Generierung auf Ihrer Website mit einem mehrstufigen Formular in Elementor steigern können? Diese Formulare führen Benutzer Schritt für Schritt durch den Prozess, wodurch er weniger überwältigend und benutzerfreundlicher wird.

Erstellen Sie jetzt Ihr WordPress-Formular

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularersteller-Plugin.  WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn dieser Artikel Ihnen geholfen hat, folgen Sie uns bitte auf Facebook und  X (Twitter) für weitere kostenlose WordPress-Tutorials und Anleitungen.