WordPress-Header bearbeiten – Design & Inhalte gezielt anpassen

Der WordPress-Header ist das Erste, was Besucher auf deiner Website wahrnehmen – er hilft bei der Orientierung und führt direkt durch dein Angebot. Neben Logo und Gestaltung spielt also vor allem dieser Webseiten-Header eine zentrale Rolle bei der Navigation: 

Das Headerbild sorgt dafür, dass Nutzer schnell die passenden Inhalte finden. In WordPress lässt sich der Kopfbereich flexibel anpassen – von Farben und Schriften über das Einfügen von Buttons bis hin zur idealen Struktur der Menüführung. In diesem Beitrag erfährst du, wie du Schritt für Schritt den Header und die Navigation bearbeitest und dadurch optimal auf dein Projekt abstimmst.

Welche Elemente gehören in den WordPress-Header?

Im Header von WordPress können unterschiedliche Elemente eingebaut sein – je nach Theme und den individuellen Einstellungen. Typischerweise gehören dazu:

• Logo oder Seitentitel – sorgt für Wiedererkennung und Markenauftritt.
  
• Navigation / Menü – zentral für die Benutzerführung, oft als Hauptmenü mit Unterpunkten.
  
• Suchfunktion – erleichtert Besucherinnen den schnellen Zugang zu Inhalten.
  
• Call-to-Action (CTA) – z. B. ein Button für Kontakt, Buchung oder Shop.
  
• Kontaktinformationen – Telefonnummer, E-Mail oder Standort, gerade für lokale Anbieter praktisch.
  
• Sprachumschalter – falls die Website mehrsprachig ist.
  
• Social-Media-Icons – direkte Verknüpfung zu Social-Profilen.
  
• Sticky-Header / Transparenz-Effekt – technische Features, die das Nutzererlebnis verbessern.

WordPress-Header mit dem Website Editor bearbeiten

Mit dem Website-Editor von WordPress ist es heute sehr einfach, den Kopfbereich einer Seite individuell zu gestalten. Du kannst unmittelbar im Editor den Aufbau anpassen, Farben ändern, ein Logo hochladen oder die Navigation verschieben. 

Wenn du also deinen WordPress-Header bearbeiten möchtest, brauchst du dafür kein zusätzliches Plugin – der Website-Editor bietet dir die wichtigsten Werkzeuge bereits an. Auf diese Weise hast du volle Kontrolle darüber, wie Logo, Menü und Call-to-Action im Header erscheinen und kannst das Design optimal an deine Website anpassen. So geht’s:

1. Im Dashboard zu Design → Website-Editor wechseln.
   
2. Links Vorlagen-Teile öffnen und Header wählen. Falls du ihn in einer Vorlage siehst, auf den Header klicken und Template-Teil bearbeiten.
   
3. Logo oder Seitentitel anpassen: Logo-Block einfügen bzw. Bild tauschen, Alternativtext setzen.
   
4. Navigation bearbeiten: Navigation-Block markieren → Menü auswählen oder neues Menü erstellen, Punkte per Drag-and-Drop ordnen, Unterpunkte anlegen.
   
5. Suche, Button, Social-Icons ergänzen: Entsprechende Blöcke hinzufügen und rechts im Bereich Einstellungen Text, Link und Abstände setzen.
   
6. Layout und Design feinjustieren: Unter Stile Farben, Typografie und Abstände definieren. Im Header-Container ggf. den Innenabstand (Padding) oben/unten anpassen.
   
7. Responsives Verhalten prüfen: Im Editor die Vorschau für Tablet und Handy testen. Die Navigation klappt mobil automatisch zum Hamburger-Menü.
   
8. Auf Speichern klicken und Änderungen übernehmen. Danach die Startseite neu laden und kurz mobil gegenchecken.
   
9. Optional: Wenn du den Website-Editor nicht siehst, nutzt du vermutlich kein Block-Theme. Dann gehst du über Design → Customizer bzw. die Theme-Optionen vor.

WordPress-Header mit Elementor bearbeiten

Auch mit dem Elementor kannst du deinen WordPress-Header bearbeiten und völlig frei gestalten. Statt auf die Vorgaben deines Themes beschränkt zu sein, baust du den Header per Drag-and-Drop genau so, wie du ihn brauchst – mit Logo, Navigation, Buttons oder weiteren Elementen. Auf diese Weise erhält deine Website einen individuellen Kopfbereich, der perfekt zu deinem Design passt. Hier ist eine Schritt-für-Schritt Anleitung:

1. Elementor Theme Builder öffnen
   
   • Gehe im Dashboard zu Templates → Theme Builder.
     
   • Wähle dort den Bereich Header.
     
2. Neuen Header anlegen
   
   • Klicke auf Neu hinzufügen und wähle Header.
     
   • Gib deinem Template einen Namen und bestätige.
     
3. Struktur festlegen
   
   • Wähle ein vorgefertigtes Layout oder starte mit einer leeren Sektion.
     
   • Teile die Sektion in Spalten, z. B. Logo links, Navigation rechts.
     
4. Elemente einfügen
   
   • Logo: Ziehe das Bild-Widget oder das Site-Logo-Widget in die erste Spalte.
   • Navigation: Füge das Nav Menu Widget hinzu und wähle dein gewünschtes Menü aus.
     
   • Optional: Buttons, Suchleiste oder Social Icons einfügen.
     
   • Design anpassen
     
     • Unter Stil Farben, Schriftarten und Abstände definieren.
       
     • Bei Bedarf einen Sticky-Header aktivieren, damit er beim Scrollen sichtbar bleibt.
       
   • Anzeige-Bedingungen einstellen
     
     • Klicke auf Veröffentlichen.
       
     • Lege fest, wo der Header angezeigt werden soll (z. B. gesamte Website, nur bestimmte Seiten).
       
   • Speichern & testen
     
     • Änderungen sichern und die Seite im Frontend prüfen.
       
     • Kontrolliere die Darstellung ebenfalls auf einem Mobiltelefon.
       

Übrigens: Du möchtest mehr über die besten WordPress Plugins erfahren? Dann schau hier vorbei.

Theme Code zur Bearbeitung des WordPress-Headers nutzen

Wenn du deinen WordPress-Header bearbeiten möchtest, kannst du dafür auch gleich den Theme-Code nutzen. Über die PHP-, HTML- und CSS-Dateien des Themes lassen sich Struktur, Inhalte und Design des Headers individuell anpassen – weit über die Möglichkeiten des Website-Editors oder von Page-Buildern hinaus. 

Diese Methode bietet maximale Flexibilität, erfordert jedoch Grundkenntnisse in Webentwicklung, da kleine Fehler Auswirkungen auf das gesamte Theme haben können. Hier ist eine sichere Schritt-für-Schritt-Anleitung, wie du den WordPress-Header über den Theme-Code bearbeiten kannst:

Schritt 1: Child-Theme erstellen

• Niemals unmittelbar im Original-Theme arbeiten, sonst gehen Änderungen bei Updates verloren.
• Erstelle ein Child-Theme oder nutze ein bereits vorhandenes.
  

Schritt 2: Header-Datei finden

• Öffne dein Theme-Verzeichnis unter wp-content → themes → [dein-Theme].
  
• Die Header-Datei heißt in der Regel header.php.
  

Schritt 3: Backup anlegen

• Vor Änderungen die Datei sichern oder lokal kopieren. Auf diese Weise kannst du die Änderungen bei Bedarf jederzeit zurücksetzen.
  

Schritt 4: Code bearbeiten

• Öffne header.php in einem Code-Editor.
  

Passe Logo, Menü oder andere Elemente an, z. B.:

<?php if ( function_exists( ‚the_custom_logo‘ ) ) {

the_custom_logo();

} ?>

• Prüfe Header, Navigation und Responsivität (Desktop, Tablet, Smartphone).
• CSS-Anpassungen erfolgen meist in style.css des Child-Themes oder direkt über den Customizer → Zusätzliches CSS.
  

Schritt 5: Änderungen testen

• Speichere die Dateien und lade die Website neu.
  

Schritt 6: Funktionalität sichern

• Wenn du z. B. Menüs bearbeitet hast, überprüfe Design → Menüs, dass die Zuordnung korrekt bleibt.
  
• Prüfe am besten ebenfalls, ob alle Plugins weiterhin korrekt funktionieren.

WordPress-Header ausblenden oder fixieren – so klappt’s

Manchmal soll der WordPress-Header nicht dauerhaft sichtbar sein oder beim Scrollen fixiert bleiben. Ob du ihn komplett ausblenden oder als sogenannten Sticky Header immer oben sichtbar machen willst – WordPress bietet dafür verschiedene Möglichkeiten. Mit ein paar Klicks oder etwas CSS lässt sich der Header individuell anpassen, ohne zusätzliche Plugins zu benötigen.

1. WordPress-Header ausblenden

Variante A – Über den Website-Editor / Customizer

1. Gehe zu Design → Customizer oder Design → Website-Editor.
   
2. Wähle den Header-Bereich aus.
   
3. Manche Themes bieten hier die Option „Header anzeigen/ausblenden“.
   
4. Speichern und prüfen.
   

Variante B – Über CSS

Wenn dein Theme keine Option hat, kannst du den Header per CSS ausblenden:

header {

    display: none;

}

• Füge den Code unter Customizer → Zusätzliches CSS ein.
  
• Prüfe, dass die Seite korrekt angezeigt wird, insbesondere Navigation und Inhalte.
  

2. WordPress-Header fixieren (Sticky Header)

Variante A – Über Theme-Einstellungen

• Viele Themes bieten unter Customizer → Header oder Layout die Option „Sticky Header aktivieren“.
  
• Aktivieren, speichern und testen.
  

Variante B – Über CSS

Wenn dein Theme diese Option nicht hat, kannst du selbst fixieren:

header {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 9999; /* Header bleibt immer oben */

}

body {

    padding-top: 100px; /* Höhe des Headers anpassen */

}

• Code wieder unter Customizer → Zusätzliches CSS einfügen.
  

Prüfen, dass Inhalte nicht vom Header überlagert werden, und gegebenenfalls den padding-top anpassen.

Fazit: WordPress-Header bearbeiten

Ob Header oder Footer – beide Bereiche prägen den ersten und letzten Eindruck einer Website und spielen eine zentrale Rolle für die Benutzerführung. In WordPress gibt es verschiedene Möglichkeiten, diese Elemente anzupassen: vom einfachen Bearbeiten im Website-Editor über den Einsatz von Page-Buildern wie Elementor bis hin zur direkten Arbeit im Theme-Code. Welcher Ansatz für dich der richtige ist, hängt von deinen Anforderungen ab.

• Für schnelle Anpassungen ohne Zusatzaufwand eignet sich der Website-Editor.
  
• Wer mehr kreative Freiheit sucht, findet in Elementor ein starkes Werkzeug.
  
• Mit der Code-Bearbeitung erhältst du maximale Flexibilität, brauchst dafür aber technisches Know-how.

Letztlich gilt: Deinen WordPress-Header bearbeiten oder den Footer anpassen kannst du auf unterschiedliche Weise – wichtig ist, die Methode zu wählen, die zu deinem Projekt, deinem Wissen und deinem gewünschten Grad an Individualisierung passt. Du hast Fragen? Dann kontaktiere uns gerne.