weboffice.digital - Dokumentation
Branche Beauty Branche Gastro Branche Handel
PDF

Standard-Header

Standard-Header

Der Standard-Header ist die Hauptnavigation deiner Website und erscheint oben auf jeder Seite. Er enthält dein Logo, die wichtigsten Menüpunkte und Aktionsschaltflächen. Je nach Einstellung wird er als obere oder seitliche Navigation angezeigt.

Voraussetzungen

Du benötigst ein Logo und solltest deine Menüstruktur geplant haben. Der Header wird automatisch auf allen Seiten deiner Website angezeigt.

Aufbau der Seite

Der Header kann in verschiedenen Formen angezeigt werden:

  • Obere Navigation: Horizontale Menüleiste am oberen Seitenrand
  • Seitliche Navigation: Ausklappbares Menü von der Seite
  • Ausgeblendet: Keine Navigation anzeigen
  • Logo: Dein Firmenlogo, verlinkt zur Startseite
  • Hauptmenü: Wichtigste Navigationspunkte
  • Untermenüs: Ausklappbare Bereiche für weitere Links
  • Aktionsschaltflächen: Besondere Aktionen wie Kontakt oder Shop

Responsive Verhalten

  • Automatische Anpassung an Bildschirmgröße
  • Mobile Navigation mit Hamburger-Menü
  • Optimierte Touch-Bedienung auf Smartphones

So arbeitest du mit dieser Seite

  1. Gehe zu den Website-Einstellungen
  2. Wähle unter "Navigation" die gewünschte Variante:
    • Oben: Für klassische horizontale Navigation
    • Seitlich: Für moderne, platzsparende Navigation
    • Ausgeblendet: Für spezielle Landing Pages

Logo einrichten

  1. Lade dein Navigationslogo in den Website-Einstellungen hoch
  2. Empfohlene Größe: 200x60 Pixel
  3. PNG-Format mit transparentem Hintergrund
  4. Das Logo wird automatisch skaliert
  1. Klicke auf "Menüpunkt hinzufügen"
  2. Gib den Namen ein (z.B. "Über uns", "Leistungen")
  3. Füge die Ziel-URL hinzu (z.B. /ueber-uns)
  4. Optional: Wähle ein Symbol
  5. Entscheide über Öffnung in neuem Fenster

Untermenüs erstellen

  1. Füge einen Hauptmenüpunkt hinzu
  2. Klicke auf "Untermenü hinzufügen"
  3. Erstelle die gewünschten Unterpunkte
  4. Untermenüs erscheinen beim Hover oder Klick

Aktionsschaltflächen hinzufügen

  1. Klicke auf "Aktion hinzufügen"
  2. Gib den Text ein (z.B. "Termin buchen", "Kontakt")
  3. Füge die Ziel-URL hinzu
  4. Wähle Farbe und Stil der Schaltfläche

Design-Einstellungen

  • Logo anzeigen: Ein-/Ausblenden des Logos
  • Fixiert oben: Navigation bleibt beim Scrollen sichtbar
  • Volle Breite: Navigation nutzt gesamte Bildschirmbreite
  • Menü zentrieren: Menüpunkte werden mittig ausgerichtet
  • Dunkles Design: Schwarzer Hintergrund mit weißer Schrift

Tipps und Hinweise

Menüstruktur:

  • Maximal 5-7 Hauptmenüpunkte für Übersichtlichkeit
  • Wichtigste Seiten direkt im Hauptmenü
  • Logische Gruppierung verwandter Inhalte
  • Kurze, prägnante Menübezeichnungen

Logo-Optimierung:

  • Verwende ein professionelles, gut lesbares Logo
  • PNG-Format für beste Qualität
  • Transparenter Hintergrund für flexible Verwendung
  • Teste die Darstellung auf verschiedenen Bildschirmgrößen

URL-Struktur:

  • Verwende sprechende URLs: /leistungen statt /page2
  • Interne Links beginnen mit /
  • Externe Links mit vollständiger URL
  • Prüfe regelmäßig alle Links

Mobile Navigation:

  • Hamburger-Menü auf kleinen Bildschirmen
  • Große Klickflächen für Touch-Bedienung
  • Schnelle Ladezeiten wichtig
  • Einfache Bedienung mit dem Daumen

SEO-Optimierung:

  • Verwende relevante Keywords in Menübezeichnungen
  • Interne Verlinkung stärkt die Website-Struktur
  • Breadcrumb-Navigation für bessere Orientierung
  • Sitemap für Suchmaschinen

Barrierefreiheit:

  • Tastaturnavigation ermöglichen
  • Ausreichende Kontraste verwenden
  • Aussagekräftige Linktexte
  • Screenreader-freundliche Struktur

Performance:

  • Optimierte Bilder für schnelle Ladezeiten
  • Minimale JavaScript-Verwendung
  • Effiziente CSS-Struktur
  • Caching für bessere Performance

Verwandte Seiten