So passe ich meine WordPress-Kopfzeile an, ohne mein Theme zu beschädigen 

Ihr WordPress-Theme hat Ihr Kopfzeilenlayout ausgewählt. Nicht Sie.

Ich habe im Laufe der Jahre die Kopfzeilen auf Dutzenden von WordPress-Websites bearbeitet, und das ist die Sache, die die Leute am meisten frustriert. Egal, ob Sie ein Logo hinzufügen, Ihre Navigation ändern oder einen Call-to-Action-Button einfügen möchten, Ihre Kopfzeile gibt den Ton für Ihre gesamte Website an. Mit dem richtigen Ansatz können Sie sogar unterschiedliche Kopfzeilen auf verschiedenen Seiten anzeigen, etwas, das die meisten WordPress-Themes von sich aus nicht können.

In diesem Leitfaden führe ich Sie durch die Bearbeitung Ihrer WordPress-Kopfzeile mit vier Methoden, vom visuellen Builder bis zur CSS-Anpassung.

Hinweis: Dieser Leitfaden gilt für selbst gehostete WordPress.org-Websites. Wenn Sie auf WordPress.com sind, gehen Sie stattdessen zu Website » Editor. Die Optionen sind anders.

Schnelle Zusammenfassung: So bearbeiten Sie Ihre WordPress-Kopfzeile

• Kopfzeile mit einem visuellen Builder bearbeiten (ohne Code)
• Kopfzeile mit dem Customizer Ihres WordPress-Themes bearbeiten
• Verwenden Sie ein Kopfzeilen-Plugin für einfache Änderungen
• Code manuell bearbeiten (Fortgeschrittene)

Was ist die WordPress-Kopfzeile?

Die WordPress-Kopfzeile ist der Bereich am oberen Rand jeder Seite Ihrer Website. Sie enthält normalerweise Ihr Logo, das Navigationsmenü und alle CTAs wie eine Telefonnummer oder eine Anmeldeschaltfläche.

Zum Beispiel sieht die Kopfzeile auf der SeedProd-Website so aus.

Wie Sie sehen können, enthält sie das SeedProd-Logo, ein Navigationsmenü und einen Call-to-Action-Button, um mit SeedProd loszulegen.

Wenn Ihre Website andere Anforderungen hat, können Sie zusätzliche Elemente zur Kopfzeile Ihrer WordPress-Website hinzufügen. Wie SeedProd können Sie Call-to-Action-Buttons hinzufügen oder eine Suchleiste, Social-Media-Icons und andere Inhalte einfügen.

Die Details Ihrer WordPress-Kopfzeile finden Sie in der Datei header.php Ihres WordPress-Themes. Wir empfehlen, diese Datei nur zu bearbeiten, wenn Sie ein fortgeschrittener Benutzer sind, der versteht, was er tut.

Was können Sie in einer WordPress-Kopfzeile ändern?

Die Kopfzeile ist der Ort, an dem die meisten ersten Eindrücke entstehen, und die meisten WordPress-Themes geben Ihnen fast keine Kontrolle darüber. Wenn Sie verstehen, was tatsächlich bearbeitbar ist, können Sie die richtige Methode unten auswählen.

Die meisten Anpassungen der Kopfzeile fallen in diese Kategorien:

• Logo und Website-Titel
• Untertitel
• Navigationsmenü
• CTA-Schaltflächen (Telefonnummer, „Kostenlos testen“, „Kontaktieren Sie uns“)
• Suchleiste
• Social-Media-Icons
• Hintergrundfarbe und Schriftarten
• Sticky-Verhalten (Kopfzeile, die beim Scrollen sichtbar bleibt)
• Mobile Layout (Hamburger-Menü, gestapelte vs. Inline-Elemente)

Die von Ihnen gewählte Methode bestimmt, wie viele davon Sie tatsächlich steuern können. Ein Standard-Theme-Customizer gibt Ihnen möglicherweise Logo- und Tagline-Optionen, aber nichts weiter. SeedProd's WordPress-Kopfzeilen-Builder gibt Ihnen die volle Kontrolle über alle.

1. Kopfzeilen in WordPress mit SeedProd anpassen

Wenn Sie die vollständige Kontrolle über Ihre WordPress-Header haben möchten, bietet Ihnen SeedProd die meiste Kontrolle. Es ist das beste WordPress Theme Builder Plugin, mit dem Sie eine benutzerdefinierte WordPress-Header-Vorlage erstellen können, ohne Code schreiben zu müssen.

SeedProd ist ein Drag-and-Drop WordPress Website Builder, mit dem Sie eine vollständige WordPress-Website und ein benutzerdefiniertes Theme erstellen können, ohne Code anfassen zu müssen.

Der Theme Builder von SeedProd ist Theme-agnostisch. Er ersetzt Ihr aktives WordPress-Theme vollständig, sodass Änderungen, die Sie vornehmen, niemals verloren gehen, wenn Sie Themes aktualisieren oder wechseln.

Das Erstellen eines benutzerdefinierten Headers für Ihre WordPress-Website dauert nur wenige Klicks, und Sie können beliebte Header-Elemente per Drag-and-Drop hinzufügen.

Mit diesen Worten folgen hier die Schritte, um Ihren WordPress-Header mit SeedProd zu bearbeiten.

Schritt 1. Installieren Sie das SeedProd Theme Builder Plugin

Der SeedProd Theme Builder funktioniert mit jedem WordPress-Theme, sodass Sie Ihre bestehende Einrichtung nicht zuerst löschen müssen.

Installieren und aktivieren Sie zuerst SeedProd auf Ihrer WordPress-Website.

Hilfe hierzu finden Sie in dieser Schritt-für-Schritt-Anleitung, wie Sie ein WordPress-Plugin installieren.

Hinweis: Sie benötigen mindestens den Pro- oder Elite-Plan, um den Theme Builder freizuschalten.

Nachdem Sie das Plugin aktiviert haben, gehen Sie zu SeedProd » Einstellungen, um Ihren Plugin-Lizenzschlüssel einzugeben. Sie finden diesen in Ihrem Konto auf der SeedProd-Website.

Sobald Sie Ihren Lizenzschlüssel eingegeben und auf Schlüssel überprüfen geklickt haben, können Sie mit SeedProd einen benutzerdefinierten WordPress-Header erstellen.

Schritt 2. Wählen Sie eine Starter-Theme-Vorlage

Um Ihren Header mit SeedProd zu bearbeiten, erstellen Sie zuerst ein benutzerdefiniertes Theme. Keine Sorge, es ist einfacher als es klingt.

Gehen Sie zu SeedProd » Theme Builder. Auf dieser Seite sehen Sie Ihre aktuellen Theme-Vorlagendateien aufgelistet.

Da wir noch nicht begonnen haben, sehen Sie nur eine Globale CSS-Vorlage.

Sie haben zwei Möglichkeiten, um zu beginnen:

1. Verwenden Sie eines der fertigen SeedProd-Themes als Ausgangspunkt
2. Erstellen Sie manuell Theme-Vorlagen von Grund auf neu

Ich empfehle, mit einem vorhandenen Theme zu beginnen. SeedProd generiert automatisch alle Vorlagendateien, einschließlich Header-, Footer- und Seitenvorlagen. Dies sind vollständige, professionelle Themes, die Ihnen einen Vorsprung verschaffen.

Klicken Sie auf Themes und wählen Sie dasjenige aus, das den Anforderungen Ihrer Website am besten entspricht.

Nachdem Sie ein Theme ausgewählt haben, erstellt SeedProd automatisch alle Vorlagendateien. Von dort aus können Sie jede Vorlage einzeln im Drag-and-Drop-Editor bearbeiten.

Schritt 3. Passen Sie den Kopfzeilenbereich an

Um Ihren Header mit SeedProd zu bearbeiten, suchen Sie die Vorlage Header und klicken Sie auf Design bearbeiten.

Dies öffnet die Vorlagendatei im Theme Builder von SeedProd. Sie sehen eine Live-Vorschau Ihrer WordPress-Header-Vorlage auf der rechten Seite mit einem Bearbeitungsbereich auf der linken Seite.

Um ein Element in Ihrer Header-Vorlage zu ändern, zeigen Sie darauf und klicken Sie, um es zu bearbeiten.

Abhängig vom angeklickten Element sehen Sie unterschiedliche Bearbeitungsoptionen in der linken Spalte. Sie können Schriftarten, Farben, Hintergrund, Abstände und mehr ändern.

Um benutzerdefinierte Header-Elemente hinzuzufügen, ziehen Sie SeedProd-Blöcke aus der linken Spalte in Ihre Vorlage. Hier sind die verfügbaren Blocktypen:

• Template-Tags – Blöcke, die Theme-Elemente aus Ihrer WordPress-Datenbank generieren, wie z. B. Blogbeiträge, Kommentare und Beitragsbilder.
• Standardblöcke – Gängige Webdesign-Elemente, mit denen Sie Bilder, Schaltflächen, Text, Trennlinien und mehr hinzufügen können.
• Erweiterte Blöcke – Blöcke zum Hinzufügen von Kontaktformularen, Social-Media-Profilen, Teilen-Schaltflächen, WordPress-Shortcodes, Google Maps und mehr.
• WooCommerce – Wenn Sie einen Online-Shop betreiben, verwenden Sie diese Blöcke, um Produkte, Warenkörbe und benutzerdefinierte Checkout-Seiten anzuzeigen.

Verwenden von Abschnitten zur Anpassung Ihres WordPress-Headers

Neben einzelnen Blöcken können Sie Ihrem Header-Template auch vollständige Abschnitte hinzufügen.

Wechseln Sie zur Registerkarte Abschnitte im Design-Panel.

Abschnitte sind Gruppen von Blöcken für verschiedene Bereiche Ihres Website-Designs. Sie finden vorgefertigte Abschnitte für Ihren Header, Footer, Calls to Action, Features und mehr.

Klicken Sie auf einen beliebigen Header-Abschnitt, um ihn zu Ihrem Template hinzuzufügen, und bearbeiten Sie ihn dann nach Ihren Wünschen.

Wenn Sie mit dem Aussehen Ihres Headers zufrieden sind, klicken Sie oben rechts auf Speichern.

Wiederholen Sie diesen Vorgang nun für die anderen Vorlagen in Ihrem Theme, um ein vollständig benutzerdefiniertes WordPress-Theme zu erstellen.

Schritt 4. Veröffentlichen Sie Ihren benutzerdefinierten WordPress-Header

Wenn Sie mit Ihrem benutzerdefinierten WordPress-Header-Template zufrieden sind, ist der letzte Schritt die Aktivierung auf Ihrer Website.

In SeedProd wenden Sie Ihren benutzerdefinierten WordPress-Header mit einem einfachen Schalter an.

Gehen Sie zu SeedProd » Theme Builder und schalten Sie den Schalter neben „SeedProd Theme aktivieren“ auf „Ja“.

SeedProd ersetzt Ihr bestehendes Design durch das neue WordPress-Theme und den neuen Header.

Besuchen Sie Ihre Website, um Ihren benutzerdefinierten WordPress-Header in Aktion zu sehen.

So machen Sie Ihren WordPress-Header Sticky

Ein Sticky-Header bleibt sichtbar, während Besucher nach unten scrollen, wodurch Ihre Navigation und CTAs jederzeit zugänglich bleiben. Egal, ob Sie SeedProd oder ein Standard-Theme verwenden, der Ansatz ist derselbe: ein kleiner CSS-Schnipsel.

Fügen Sie dies zu den zusätzlichen CSS Ihres Themes hinzu (gehen Sie zu Darstellung » Anpassen » Zusätzliches CSS) oder fügen Sie es, wenn Sie SeedProd verwenden, in SeedProd » Theme Builder » Global CSS ein:

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
}

Der Selektor .site-header variiert je nach Theme. Möglicherweise müssen Sie Ihr Header-Element untersuchen, um die richtige Klasse zu finden.

Erstellen mehrerer benutzerdefinierter Header mit SeedProd

Sie können auch mehrere Header für verschiedene Bereiche Ihrer Website erstellen.

Sie möchten zum Beispiel vielleicht einen Header, der nur für bestimmte Kategorien oder Landingpages angezeigt wird. Erstellen Sie dazu ein neues Template und ändern Sie die Anzeige-Bedingungen nach Ihren Bedürfnissen.

Mit dem Drag-and-Drop-Theme-Builder von SeedProd können Sie jedes benutzerdefinierte Header-Layout erstellen, das Ihre Website benötigt.

Während der visuelle Editor von SeedProd die einfachste Methode zur Bearbeitung Ihres WordPress-Headers bietet, gibt es auch andere Methoden, die es wert sind, sie zu kennen.

2. WordPress-Header mit Theme Customizer bearbeiten

Die meisten WordPress-Themes geben Ihnen im nativen WordPress Customizer einige Kontrolle über den Header Ihrer Website. Sie erhalten keine tiefgreifende Kontrolle, aber grundlegende Optionen, um das Aussehen und Verhalten Ihres Headers zu ändern.

Die verfügbaren Optionen hängen von Ihrem Theme ab. Bei den meisten klassischen Themes gehen Sie in Ihrem WordPress-Adminbereich zu Darstellung » Anpassen. Klicken Sie dann in der linken Spalte auf Identität der Website.

Die meisten Themes ermöglichen es Ihnen, Ihr Logo, den Website-Titel und den Slogan in diesem Bereich anzupassen.

Anschließend können Sie auf Menüs klicken, um das Layout Ihres Navigationsmenüs zu ändern.

Hinweis: Wenn Sie ein blockbasiertes (FSE) Theme wie Twenty Twenty-Five (das aktuelle Standard-Theme) verwenden, ist der klassische Customizer nicht verfügbar. Gehen Sie stattdessen zu Darstellung » Editor, um Ihren Header mit der Full-Site-Editing-Oberfläche zu bearbeiten.

Mit dem Website-Editor können Sie Ihren WordPress-Header mit dem Block-Editor bearbeiten, genau wie jeden anderen Beitrag oder jede andere Seite. Er bietet mehr Flexibilität als der klassische Customizer, aber immer noch weniger Kontrolle als der dedizierte WordPress-Header-Builder von SeedProd.

3. Header in WordPress mit einem Header-Plugin anpassen

Eine weitere einfache Möglichkeit, den Header in WordPress zu bearbeiten, ist die Verwendung eines einfachen Header-Plugins. Dies ist eine gute Option, wenn Sie Skripte oder Code zu Ihrem Header hinzufügen müssen, ohne Ihre Theme-Dateien direkt zu bearbeiten.

Obwohl es Hunderte von Plugins zur Auswahl gibt, ist das kostenlose Insert Headers and Footers Plugin die beliebteste Option.

Nachdem Sie das Plugin auf Ihrer Website aktiviert haben, finden Sie es unter Einstellungen » Header und Footer einfügen.

Von dort aus können Sie jeden Code einfügen, den Sie zum Header Ihrer Website hinzufügen möchten.

Alle hier hinzugefügten Skripte werden automatisch in das Header-Tag Ihrer WordPress-Site eingefügt. Klicken Sie auf Speichern, um Ihre Änderungen zu sichern.

4. WordPress-Header-Code anpassen (Fortgeschritten)

Wenn Sie ein fortgeschrittener Benutzer sind, können Sie Ihren WordPress-Header direkt mit HTML, PHP und CSS bearbeiten. Diese Methode ist für Anfänger nicht geeignet.

Wichtig: Wenn Sie planen, header.php direkt zu bearbeiten, tun Sie dies in einem Child-Theme. Andernfalls werden Ihre Änderungen überschrieben, wenn Sie Ihr Theme aktualisieren. Der unten beschriebene reine CSS-Ansatz hat dieses Problem nicht.

Um den Code Ihres Headers zu bearbeiten, gehen Sie zu Darstellung » Theme-Editor und öffnen Sie die Datei Style.css.

Scrollen Sie von dort zum Abschnitt Site-Header und fügen Sie Code hinzu oder entfernen Sie ihn, um die Formatierung anzupassen.

Sie können auch Ihre header.php-Datei für strukturelle und funktionale Änderungen bearbeiten. Wenn Sie beispielsweise eine Telefonnummer hinzufügen oder das Header-Layout umstrukturieren möchten, befindet sich dies in header.php und nicht in CSS.

Diese Änderungen gelten für die gesamte Website. Wenn Ihr mobiler Header anders aussehen soll, erfahren Sie hier, wie Sie das separat handhaben.

So passen Sie Ihren WordPress-Header auf Mobilgeräten an

Desktop- und mobile Header benötigen oft unterschiedliche Layouts. Ein Navigationsmenü, das auf einem 1440-Pixel-Bildschirm sauber aussieht, kann auf Mobilgeräten zu einem überladenen Durcheinander werden, und die meisten Themes bieten keine visuelle Möglichkeit, dies zu beheben.

Hier sind die drei Möglichkeiten, die Anpassung des mobilen Headers in WordPress zu handhaben:

• SeedProd Responsive Vorschau-Modus: Klicken Sie im SeedProd-Header-Editor auf das mobile Symbol am unteren Bildschirmrand, um eine Vorschau Ihres Headers in mobiler Größe anzuzeigen und zu bearbeiten. Sie können Elemente ausblenden, Abstände anpassen und Blöcke speziell für Mobilgeräte neu anordnen, ohne das Desktop-Layout zu beeinträchtigen.
• CSS Media Queries: Fügen Sie für Theme-basierte Websites responsive CSS-Regeln hinzu, um Header-Elemente an bestimmten Breakpoints anzusprechen. Um beispielsweise eine Tagline auf Mobilgeräten auszublenden: @media (max-width: 768px) { .site-description { display: none; } }
• Integrierte Einstellungen für das mobile Menü Ihres Themes: Die meisten Themes verwalten das Hamburger-Menü automatisch, aber überprüfen Sie unter Design » Anpassen » Mobil (oder einem ähnlichen Bereich) auf mobil-spezifische Header-Optionen, die Ihr Theme enthält.

Das häufigste Problem, das ich gesehen habe, sind widersprüchliche Desktop- und Mobile-Header-Stile nach einer CSS-Bearbeitung. Wenn dies geschieht, prüfen Sie, ob Ihre CSS-Regel einen responsiven Breakpoint hat oder ob Sie den richtigen Selektor für Mobilgeräte bearbeiten.

Häufig gestellte Fragen zu WordPress-Headern

Wie bearbeite ich meinen WordPress-Header, ohne mein Theme zu beschädigen?

Der sicherste Ansatz ist die Verwendung des Theme Builders von SeedProd, der Ihr aktives Theme vollständig ersetzt, anstatt es zu modifizieren. Das bedeutet, dass Ihr benutzerdefinierter Header beim Aktualisieren oder Wechseln von Themes nie gefährdet ist. Wenn Sie bei Ihrem Theme bleiben möchten, halten Sie sich an CSS-Bearbeitungen über Design » Anpassen » Zusätzliches CSS und vermeiden Sie die direkte Bearbeitung von header.php. Wenn Sie header.php bearbeiten müssen, verwenden Sie immer zuerst ein Child-Theme.

Was ist der Unterschied zwischen der Header-Bearbeitung von WordPress.com und WordPress.org?

WordPress.org (selbst gehostet) gibt Ihnen die volle Kontrolle über Ihren Header durch Theme-Anpassung, Plugins und direkte Dateibearbeitung. WordPress.com ist ein gehosteter Dienst mit mehr Einschränkungen. Auf WordPress.com bearbeiten Sie Ihren Header über Website » Editor, und Ihre Optionen hängen von Ihrem Plan ab. Die Methoden in diesem Artikel gelten nur für selbst gehostete WordPress.org-Websites.

Wie mache ich meinen WordPress-Header "sticky" (fixiert)?

Sowohl SeedProd als auch Standard-Theme-Setups verwenden den gleichen CSS-Ansatz. Fügen Sie position: sticky; top: 0; z-index: 999; zur CSS-Klasse Ihres Header-Elements hinzu. Fügen Sie es für SeedProd-Benutzer in SeedProd » Theme Builder » Global CSS ein. Gehen Sie für Standard-Themes zu Design » Anpassen » Zusätzliches CSS. Die genaue Klasse variiert je nach Theme, untersuchen Sie daher Ihr Header-Element, um den richtigen Selektor zu finden.

Kann ich auf bestimmten Seiten in WordPress einen anderen Header anzeigen?

Ja, mit SeedProd können Sie mehrere Header-Vorlagen erstellen und jede davon bestimmten Seiten, Kategorien oder Beitragstypen mithilfe von Anzeigebedingungen zuweisen. Dies ist in den Theme Builder integriert und erfordert keine Programmierung. Mit einem Standard-WordPress-Theme erfordert die Anzeige unterschiedlicher Header auf verschiedenen Seiten benutzerdefiniertes PHP oder ein Plugin wie Conditional Headers.

Passen Sie Ihren WordPress-Header noch heute an

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Header in WordPress bearbeiten.

Der einfachste Weg, die vollständige Kontrolle über Ihr benutzerdefiniertes Header-Setup in WordPress zu erhalten, ist mit SeedProd. Es bietet einen visuellen Drag-and-Drop-WordPress-Header-Builder, Sie müssen keine Codes oder Theme-Dateien bearbeiten, und Sie können alle Änderungen direkt im WordPress-Dashboard vornehmen.

Vielleicht gefällt Ihnen auch dieser Leitfaden, wie Sie den Footer in WordPress bearbeiten.

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.