Der erste Eindruck Deiner Webseite entsteht nicht allein durch ein großes Bild. Ganz oben sehen Besucher häufig zuerst Dein Logo und Deine Navigation. Wenn diese Elemente unübersichtlich sind, verlieren sie schnell die Orientierung. Ein guter Header hilft Menschen dagegen, Dein Angebot zu verstehen, die wichtigsten Unterseiten zu finden und auf dem Smartphone bequem zu navigieren.
In diesem Beitrag geht es nicht noch einmal ausführlich darum, wie Du ein WordPress-Menü anlegst oder zum ersten Mal einen globalen Header erstellst. Dafür gibt es bereits meinen Beitrag und mein Video zur Menüerstellung. Hier gehen wir einen Schritt weiter: Ich zeige Dir am bestehenden Header meiner Webseite „Harmonie der Seele“, wie Du einen vorhandenen globalen Header mit Divi 5 anpasst, transparent über dem Hero-Bereich darstellst, beim Scrollen sichtbar hältst und auf dem Smartphone überprüfst.
Was ist ein Header auf einer Webseite?
Der Header ist der obere Bereich einer Webseite. Er enthält häufig das Logo, die Hauptnavigation und manchmal einen auffälligen Button, z.B. „Termin buchen“ oder „Kontakt“. Manche Webseiten ergänzen eine schmale Informationsleiste. Nicht jeder Header braucht alle diese Elemente. Wichtig ist die Unterscheidung zum Hero-Bereich: Der Header sorgt in erster Linie für Orientierung und Navigation. Der Hero-Bereich darunter stellt meist das zentrale Angebot oder die Botschaft der Seite vor. Wenn Du beide Bereiche unabhängig planst, kannst Du sie später leichter verändern.
Ein einheitlicher Header auf Deinen Unterseiten hilft Besuchern bei der Orientierung. Viele Webseiten-Systeme ermöglichen es, den Header zentral zu verwalten, statt ihn auf jeder Seite neu aufzubauen. Wenn Du Divi 5 verwendest, kannst Du Deinen Header über den integrierten Theme Builder gestalten. Dort erstellst Du einen individuellen Header und legst fest, ob er auf Deiner gesamten Webseite oder nur auf bestimmten Unterseiten angezeigt werden soll. Das spart Zeit und sorgt für ein einheitliches Erscheinungsbild
Warum ein durchdachter Header wichtig ist
Besucher möchten nicht lange überlegen, wo sie klicken müssen. Ein klarer Header unterstützt deshalb die Benutzerführung. Er kann auch Vertrauen schaffen, wenn Farben, Typografie und Logo zusammenpassen. Gleichzeitig darf er nicht so hoch werden, dass auf kleinen Bildschirmen kaum Platz für den eigentlichen Inhalt bleibt.
Drei Fragen helfen bei der Planung:
➡️ Welche Informationen suchen meine Besucher zuerst?
➡️ Welche Seiten sind wirklich wichtig?
➡️ Was ist der sinnvollste nächste Schritt?
Ein Handwerksbetrieb sollte seine Leistungen und die Kontaktmöglichkeiten gut sichtbar platzieren. Eine Yogalehrerin könnte dagegen ihre Kursangebote und den aktuellen Stundenplan stärker in den Vordergrund stellen. Ein aufwendiges Design ist nicht automatisch ein besseres Design.
Animationen, Schatten und transparente Hintergründe können gut aussehen, erschweren aber manchmal die Lesbarkeit. Entscheidend ist, dass die Navigation funktioniert.
Vor der Anpassung: kurze Kontrolle statt Neuaufbau
Für diese Anleitung sollten Dein WordPress-Menü und Dein globaler Header bereits vorhanden sein. Kontrolliere kurz, ob die richtigen Seiten verlinkt sind, die Bezeichnungen verständlich bleiben und die globale Vorlage auf den gewünschten Seiten verwendet wird. Logo, Menüfarben und ein möglicher Button müssen nicht neu angelegt werden, wenn sie bereits funktionieren. Prüfe lediglich, ob Logo und Navigation vor dem geplanten Hintergrund gut lesbar sind.
Bei einem transparenten Header kann deshalb eine helle oder vereinfachte Logo-Variante erforderlich sein.
Falls Dir diese Grundlage noch fehlt, beginne zuerst mit meiner Anleitung Menü in WordPress erstellen. Im zugehörigen Video zeige ich auch, wie Du einen globalen Header grundsätzlich anlegst:
Schritt 1: Vorhandenes Menü und bestehenden Header kontrollieren
Für diese Anleitung sollte Dein WordPress-Menü bereits angelegt und Deinem Header zugeordnet sein. Prüfe nur kurz, ob Reihenfolge, Bezeichnungen und Links noch stimmen.
Diese kurze Kontrolle verhindert, dass Du später nur das Design verbesserst, während falsche oder veraltete Links bestehen bleiben. Die ausführliche Planung von Menüpunkten, Reihenfolge und Untermenüs gehört weiterhin in die separate Menü-Anleitung.
Schritt 2: Öffne Deinen vorhandenen globalen Header
Gehe im WordPress-Backend zu Divi > Theme Builder und öffne Deinen vorhandenen globalen Header. „Global“ bedeutet, dass diese Vorlage zentral für alle zugewiesenen Seiten verwendet wird. Prüfe deshalb vor der Bearbeitung, wo sie angezeigt wird.
Wenn bereits ein globaler Header vorhanden ist, prüfe zuerst seine Zuweisungen. Erstelle nicht unbemerkt konkurrierende Vorlagen.
Schritt 3: Bestehende Elemente nur gezielt anpassen
Öffne die vorhandene Header-Zeile und prüfe Logo, Navigation, Abstände und einen möglichen Button als Gesamteinheit. Du musst diese Elemente nicht erneut aufbauen.
Entscheide stattdessen, was für die transparente oder sticky Darstellung wirklich verändert werden muss. Das Logo braucht genügend Abstand, darf die Navigation aber nicht verdrängen. Das Menü muss in jedem Zustand gut lesbar bleiben. Ein zusätzlicher Button ist nur sinnvoll, wenn er einen eindeutigen nächsten Schritt anbietet und den Header nicht überlädt.
Schritt 4: Gestalte den Header transparent über dem Hero-Bereich
Bei einem transparenten Header scheint der Hero-Bereich hinter Logo und Navigation durch. Das Hintergrundbild bleibt dabei im Hero-Bereich. Du fügst es nicht zusätzlich in den Header ein.
Öffne im Divi Theme Builder Deinen globalen Header. Entferne zunächst eine deckende Hintergrundfarbe der Header-Sektion beziehungsweise stelle sie transparent ein. Öffne anschließend die Zeile, in der Logo und Menü liegen. Für den hier beschriebenen Aufbau stellst Du diese Zeile unter Erweitert → Position auf „Absolut“ und richtest sie oben aus. Dadurch nimmt sie keinen eigenen Platz mehr im normalen Seitenfluss ein und kann über dem Hero-Bereich liegen.
Passe bei Bedarf den oberen Innenabstand des Hero-Bereichs an.
Ein transparenter Header funktioniert nur mit ausreichendem Kontrast. Prüfe helle und dunkle Bereiche des Bildes. Wenn Logo oder Navigation verschwinden, verwende eine halbtransparente Fläche, einen Verlauf oder einen normalen Hintergrund. Der gestalterische Effekt ist weniger wichtig als eine lesbare Navigation.
Den Hero-Bereich habe ich separat behandelt:
Hero-Bereich mit Divi 5 gestalten: Design nachbauen
Schritt 5: Sticky Header beim Scrollen einrichten
Sticky bedeutet, dass ein Element beim Scrollen an einer festgelegten Position sichtbar bleibt. Ein transparenter Header und ein Sticky Header sind zwei unterschiedliche Einstellungen, können aber miteinander kombiniert werden.
Wähle in Deinem globalen Header die Sektion aus, die beim Scrollen vollständig sichtbar bleiben soll. Öffne Erweitert → Scroll-Effekte und stelle die Sticky-Position auf „Oben fixieren“ bzw. „Stick to Top“. Prüfe anschließend im Frontend, ob der Header beim Scrollen dauerhaft oben sichtbar bleibt und nicht plötzlich verschwindet. Nutze anschließend die Zustandssteuerung für den Sticky-Zustand. Du kannst z.B. eine Hintergrundfarbe einblenden, das Logo verkleinern oder die Höhe des Headers reduzieren.
Achte darauf, dass sich Schriftfarben und Logo auch im Sticky-Zustand deutlich vom Hintergrund abheben. Teste das Verhalten im Frontend. Der Header darf keine Überschriften, Sprungmarken, Formulare oder Bedienelemente verdecken. Wenn er beim Scrollen zu viel Platz einnimmt, reduziere seine Höhe oder verzichte auf kleineren Bildschirmen auf die Fixierung.
Schritt 6: Tablet, Smartphone und Unterseiten prüfen
Die Builder-Vorschau ist ein guter erster Test, ersetzt aber kein echtes Gerät. Öffne die Webseite zusätzlich auf Deinem Smartphone und, wenn möglich, auf einem Tablet.
Prüfe, ob das mobile Menüsymbol sichtbar ist, alle Menüpunkte vollständig aufklappen und mit dem Finger gut erreichbar sind. Kontrolliere beide Zustände: den transparenten Header am Seitenanfang und den Sticky Header nach dem Scrollen.
Da es sich um einen globalen Header handelt, musst Du außerdem mehrere Unterseiten testen. Ein Hintergrund, der auf der Startseite gut funktioniert, kann auf einer hellen Unterseite zu wenig Kontrast bieten. Verwende bei Bedarf eine abweichende Vorlage oder einen normalen Hintergrund für bestimmte Seiten.
Häufige Fehler beim Header-Design
Fehler 1: Zu viele Menüpunkte
Wenn jede Unterseite oben steht, wird die Navigation unübersichtlich. Gruppiere verwandte Inhalte und priorisiere die wichtigsten Wege.
Fehler 2: Ein zu großes Logo
Ein Logo muss erkennbar sein, aber nicht den halben Bildschirm einnehmen. Passe die Größe an das gesamte Layout an.
Fehler 3: Schlechter Kontrast
Helle Schrift auf hellem Hintergrund oder dünne Schriften erschweren die Lesbarkeit. Prüfe Farben nicht nur nach Gefühl.
Fehler 4: Navigation nur für den Desktop gestalten
Ein Header, der auf dem Laptop perfekt aussieht, kann auf dem Smartphone unbrauchbar sein. Plane die mobile Darstellung von Anfang an mit.
Fehler 5: Menü und Header verwechseln
Das Menü ist die Liste und Struktur Deiner Navigationslinks. Der Header ist der gesamte obere Gestaltungsbereich. Deshalb kann ein vorhandenes WordPress-Menü in unterschiedlichen Header-Layouts verwendet werden.
Fehler 6: Änderungen nicht auf allen Seiten prüfen
Ein globaler Header beeinflusst viele Seiten. Teste deshalb auch Unterseiten, Kontaktformulare und gegebenenfalls besondere Vorlagen.
Checkliste: Ist Dein Header fertig?
- Das Logo ist gut erkennbar und führt zur Startseite
- Die wichtigsten Menüpunkte sind verständlich benannt
- Alle Links funktionieren
- Der Header passt optisch zum Hero-Bereich
- Die Navigation ist auf Smartphone und Tablet bedienbar
- Kontrast und Tastaturfokus sind ausreichend sichtbar
- Ein optionaler Button hat ein eindeutiges Ziel
- Die globale Vorlage wird auf den gewünschten Seiten angezeigt
- Es gibt keine unerwünschten Überlagerungen beim Scrollen
- Der Header wurde nach dem Speichern im Frontend geprüft
Häufig gestellte Fragen zum Header
Muss ich einen Header auf jeder Seite einzeln erstellen?
Nein. Mit einer globalen Header-Vorlage im Divi Theme Builder kannst Du ein einheitliches Layout zentral verwalten. Sonderseiten können bei Bedarf eigene Zuweisungen erhalten.
Brauche ich ein kostenpflichtiges Plugin für den Header?
Wenn Du Divi bereits nutzt, brauchst Du für einen einfachen Header normalerweise kein zusätzliches Header-Plugin. Prüfe zunächst die vorhandenen Möglichkeiten, bevor Du weitere Kosten verursachst.
Was ist der Unterschied zwischen Header und Menü?
Das Menü enthält die Navigationslinks. Der Header kann zusätzlich Logo, Buttons und weitere Elemente enthalten und bestimmt deren Anordnung.
Wie viele Menüpunkte sind ideal?
Es gibt keine magische Zahl. Entscheidend sind Verständlichkeit, Platz und Zielgruppe. Eine kurze, gut strukturierte Navigation ist oft hilfreicher als eine lange Liste.
Kann ich ein fremdes Header-Design nachbauen?
Du kannst Dich von allgemeinen Gestaltungsprinzipien inspirieren lassen. Kopiere jedoch nicht einfach fremde Logos, Grafiken, Texte oder eine unverwechselbare Gesamtgestaltung. Entwickle aus Deiner Inspiration eine eigenständige Lösung.
Fazit: Ein guter Header führt Deine Besucher
Ein guter Header muss nicht neu gebaut werden, wenn die Grundlage bereits funktioniert. Oft reicht es, den vorhandenen globalen Header gezielt zu verbessern. Du hast gesehen, wie Du daraus mit Divi 5 eine transparente oder sticky Variante entwickelst, ohne die Menüerstellung unnötig zu wiederholen.
Prüfe zuerst den vorhandenen Stand, sichere Deinen Header und ändere dann Schritt für Schritt Hintergrund, Positionierung und Scroll-Zustand. Teste danach Desktop, Tablet und Smartphone sowie mindestens eine Unterseite. Transparent oder sticky ist kein Pflichtprogramm: Entscheidend ist, dass Deine Navigation jederzeit lesbar, bedienbar und verständlich bleibt.
Im begleitenden Video zeige ich Dir am Bildschirm, wie Du die vorgestellte Header-Struktur in Divi 5 umsetzt und an Dein eigenes Design anpasst: [YOUTUBE-VIDEO HIER EINBETTEN].
Wenn Du nicht nur einen einzelnen Bereich gestalten, sondern Deine gesamte Webseite sinnvoll planen möchtest, findest Du bei BigBiggerBusiness den kostenlosen Leitfaden „Dein roter Faden“. Wenn Du Unterstützung bei der Umsetzung brauchst, kannst Du auch eine Beratung anfragen.
