Deinen eigenen Header in Wordpress gestalten

Letztes Update:
von sanchez.s
Deinen eigenen Header in WordPress gestalten

Der Header, also der obere Bereich deiner Website, der im Regelfall auf jeder deiner Unterseiten identisch ist, hat drei Funktionen

  1. Der Header enthält das Logo und zeigt dem User unmissverständlich, wo er gerade ist. Im Regelfall ist das Logo auch die Fahrkarte zur Startseite deiner Seite.
  2. Der Header enthält die globale Navigation deiner Seite.
  3. Falls du einen geschützten Bereich auf deiner Seite anbietest, enthält der Header meistens auch einen Login-Button, um sich für diesen geschützten Bereich anzumelden.

Logo hochladen

Bevor du deinen eigenen Header entwickelst, besuche den Theme Customizer und lade dein Logo hoch.

Tipp: Falls du noch kein Logo hast und schnell eines entwickeln möchtest, besuche Canva und entwickle es in wenigen Minuten selbst.

Canva ist ein browserbasiertes Design-Tool für Nicht-Designer. Du brauchst nichts herunterladen und bekommst lizenzfreie Vorlagen, die du kinderleicht nach deinen Wünschen abändern kannst.

Wenn du magst, lade auch ein Favicon hoch. Das ist das kleine Icon, das im Browser-Tab neben dem Titel der Seite angezeigt wird.

Hauptmenü bauen

Baue außerdem dein Hauptmenü. Ich empfehle dir, deine Menüs im Theme Customizer zu bauen und nicht in der Hauptoberfläche deines WordPress-Backends. Die Menü-Funktion im Theme Customizer wesentlich benutzerfreundlicher.

Nutze für dein Menü ganz einfach deine Ressorts, die du zuvor angelegt hast.

Vergiss nicht, deine Unterressorts dem Hauptressort auch in deinem Menü unterzuordnen.

Jetzt bist du bereit, deinen Header zu bauen.

Header-Template öffnen

Das Template für den Header ist bereits aus den Demo-Inhalten angelegt und deshalb schnell geöffnet.

Lösche die Demo-Inhalte und generiere einen Abschnitt mit 2 Spalten.

Logo

In der linken Spalte platzierst du das Logo. Du hast die Wahl zwischen einem Logo aus reinem Text oder einem Bild. Wähle nun dein Logo aus.

Navigationsmenü

In der rechten Spalte platzierst du dein Navigationsmenü. Wähle das Menü aus, dass du zuvor im Theme Customizer erstellt hast und richte es rechtsbündig aus.

Ändere nun das Spaltenverhältnis, bis dir die Größe des Logos gefällt.

Farben

Wähle in den Abschnittsoptionen eine passende Hintergrundfarbe und ändere – falls nötig – die Schriftfarbe des Menüs ab, um genug Kontrast zum Hintergrund zu erhalten.

Vergiss nicht, Hintergrund und Schriftfarbe in den Dropdowns deines Menüs ebenfalls zu ändern, falls das nötig ist.

Mobile Check

In der Tablet-Ansicht ist das Logo zu klein geworden.

Ändere das Spaltenverhältnis, bis es passt. Aber Achtung: Ergeben die beiden Spalten zusammen mehr als 100 Prozent, springt die zweite Spalte automatisch in die nächste Zeile.

In der mobilen Ansicht setzt Elementor die Spalten meistens automatisch auf 100 Prozent und stellt die Widgets untereinander dar. Das macht in den meisten Fällen auch Sinn, beim Header allerdings gefällt mir diese Ansicht nicht. Ich wähle ein Spaltenverhältnis von 40 zum 60.

Mobile Trigger

Außerdem ist das Navigationsmenü verschwunden und es ist nur noch ein kleiner Button zu sehen. Dieser Mobile Trigger ist im Navigationsmenü voreingestellt und macht in unserem Fall auch Sinn, da das Menü den Bildschirm des Smartphones sprengen würde.

Setze den Mobile Trigger rechtsbündig und stelle ein, dass das Menü bei Klick auf den Mobile Trigger von rechts in den Bildschirm gleitet.

Wir färben den Mobile Trigger weiß und den Hintergrund des mobilen Menüs blau.

Außerdem erhöhen wir den inneren Abstand des Menüs, um es von den Seiten wegzuholen.

Zuletzt verringern wir die Schriftgröße der Unterpunkte in unserem Menü.

Den Header haben wir, jetzt folgt das Gegenstück: Der Footer!

Das könnte dich auch interessieren

WordPress-Plugins erweitern deinen Blog um bestimmte Funktionen – und das...
Du hast dein eigenes Nachrichten-Portal gebaut. Nimm dir jetzt einen...
Deine Besucher starten immer seltener auf der Startseite – auch...
Footer-Seiten erstellen Bevor du deinen Footer entwickelst, sollten zunächst alle...

Kommentare

{{ reviewsTotal }} Review

{{ reviewsTotal }} Reviews

{{ options.labels.newReviewButton }}
{{ currentUserData.canReviewMessage }}