Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Gestaltung der Navigation

Die Navigation deiner Website besteht aus einer Reihe von Links, die Besucher auf den Inhalt deiner Website weiterleiten. Die Navigation wird normalerweise oben auf deiner Website angezeigt, obwohl einige Version 7.0-Templates die Navigation in Footern oder Seitenleisten unterstützen.

Alle Websites enthalten Optionen zum Ändern der Schriftart, Farbe und Größe der Links deiner Navigation. In dieser Anleitung wird erläutert, wie du deine Navigation auf einer Website anpassen kannst.

Bevor Sie anfangen

  • Füge Links zu deiner Navigation hinzu, indem du Seiten im Seiten-Menü hinzufügst. Seiten im Abschnitt Nicht verlinkt werden nicht angezeigt.
  • Ändere den Text eines beliebigen Links, indem du dessen Navigationstitel in Seiteneinstellungen aktualisierst.
  • Um die Reihenfolge der Links im Menü zu ändern, bewege die Seiten im Seiten-Menü per Drag-and-Drop.

Stil-Anpassungen für die Navigation finden

Wie du den Stil deiner Navigation änderst, hängt von der Version deiner Website ab.

Navigationslink-Stile werden hauptsächlich durch den Header deiner Website festgelegt. Im Header-Editor kannst du Folgendes ändern:

  • Das Navigationslayout
  • Die Navigationsfarben
  • Das Padding rund um den Text
  • Ob die Navigation fixiert ist
  • Wie die Navigation auf Computern im Vergleich zu Mobilgeräten aussieht

Du kannst auch Optionen in Website-Stil verwenden, um Schriftarten und Größen zu ändern. Weitere Informationen findest du in den folgenden Abschnitten.

Jede Template-Gruppe hat ihren eigenen Website-Stil, sodass es nicht nur eine einzige Regel für die Aktualisierung deiner Navigationslinks gibt. Halte dich stattdessen an diese Tipps, um die von deinem Template unterstützten Stil-Optionen zu finden:

  • Um Website-Stil im Hauptmenü zu öffnen, klicke auf Design und dann auf Website-Stil.
  • Scrolle durch die Anpassungen auf der linken Seite und suche nach entsprechenden Anpassungen. Die Anpassungen beinhalten in der Regel das Wort Navigation.
  • Du kannst auch mit der Maus über die Navigation deiner Website in der Website-Vorschau auf der rechten Seite fahren. Wenn ein blauer Highlighter-Rahmen um sie herum erscheint, klicke auf einen beliebigen Navigationslink. Dies hilft, Anpassungen herauszufiltern, die nicht die Navigationslinks betreffen. Wenn du fertig bist, klicke Sie auf Alle anzeigen, um zurück zur Hauptansicht zu gelangen.

Hier ist ein Beispiel dafür, wie dies im Template „Thorne“ aussieht, das Teil der Brine-Familie ist:

thorne_site_styles.gif

Schriftart und Größe ändern

Wie du deine Navigations-Schriftart änderst, hängt von der Version deiner Website ab.

Standardmäßig stimmt die Schriftart deiner Navigation mit der Schriftart für die gesamte Website überein. So legst du eine andere Schriftart oder eine andere Größe für deine Navigation fest:

  1. Während du eine Seite bearbeitest, klicke auf das Pinselsymbol und dann auf Schriftarten.
  2. Klicke unter Allgemeine Textstile auf Stile zuweisen.
  3. Klicke auf Website-Navigation.
  4. Um die Schriftart zu ändern, klicke auf Stil und wähle dann Benutzerdefiniert. Wähle eine neue Schriftfamilie, ein neue Schriftstärke, einen neuen Stil und andere Details. Klicke auf Speichern, um deine Änderungen anzuwenden.
  5. Um die Größe zu ändern, klicke auf Größe und wähle dann eine voreingestellte Absatzgröße aus, oder wähle Benutzerdefiniert aus. Um eine benutzerdefinierte Größe festzulegen, verwende den Schieberegler oder gib manuell einen neuen rem-Wert ein. Klicke auf Speichern, um deine Änderungen zu übernehmen.
Tipp: Um zu erfahren, wie Version 7.1 rem-Werte für Schriftgrößen verwendet, besuche Schriftarten ändern.

Um die Schriftart deiner Navigation zu ändern, klicke auf das v-Symbol neben dem Namen der Anpassung, um das Drop-down-Menü zu öffnen. Von hier aus kannst du Folgendes ändern:

  • Schriftart-Namen
  • Stil
  • Größe
  • Zeilenhöhe
  • Den Zeichenabstand

Weitere Hilfe dazu finden Sie unter Schriftarten ändern.

Die Farbe ändern

Wie du deine Navigationsfarbe änderst, hängt von der Version deiner Website ab.

Ändere das Farbdesign deines Header-Abschnitts, um die Farben der Navigationslinks zu ändern. Du kannst auch das Farbdesign deines Header-Overlays für Mobilgeräte ändern.

Nachdem ein Farbdesign festgelegt wurde, kannst du das Design weiter anpassen, indem du bestimmte Farben für Navigationslinks festlegst.

Um die Farben der Navigationslinks zu ändern, klicke in Website-Stil auf eine Farbanpassung. Wähle eine neue Farbe, indem du oben in der Auswahl auf eine Farbe klickst und dann einen Farbton innerhalb des Quadrats auswählst. Du kannst auch einen bestimmten Wert in das Textfeld eingeben. Weitere Hilfe findest du unter Farben ändern oder im Leitfaden des Templates deiner Website.

Layout und Abstände ändern

Wie du das Layout deiner Navigation änderst, hängt von der Version deiner Website ab.

Um die Position und den Abstand deiner Navigationslinks zu ändern, bearbeite den Header deiner Website. Du kannst das Aussehen und die Platzierung des Menü-Symbols auch auf Mobilgeräten anpassen.

In einigen Templates kannst du die Position der Links ändern. Suche in Website-Stil nach Anpassungen, die als Navigationsposition, Navigationsausrichtung oder ähnliches bezeichnet werden. Welche Positionen in deinem Template verfügbar sind, siehst du in der folgenden Tabelle.

Tipp: Einige Templates unterstützen eine feste oder „Sticky“-Navigation, die oben im Browser an derselben Position bleibt, während du auf der Seite nach unten scrollst.

Navigationsanzeige nach Template

Das Navigationslayout deiner Website hängt vom Template deiner Website ab und wird auf Mobilgeräten unterschiedlich angezeigt. Größere Mobilgeräte wie Tablets können den Desktop-Stil anzeigen.

So wird die Primärnavigation auf Computern in diesen Template-Gruppen angezeigt:

Template

Layout

Adirondack

Horizontal, oben mittig

Avenue

Horizontal, oben links/mittig/rechts

Aviator

Vertikal, oben links (Visitenkarte/Offset); oder horizontal, oben mittig (Poster)

Bedford

Horizontal, oben rechts

Brine

Horizontal, oben links/mittig/rechts, kann versteckt sein Im Seiten-Menü nennt sich dies „Hauptnavigation“.

Farro

Horizontal, oben links/mittig/rechts, kann versteckt sein

Five

Vertikal, in Seitenleiste (Obere Navigationsposition: Keine); oder horizontal oben links/mittig/rechts (Über Banner, Unter Banner)

Flatiron

Horizontal, oben links

Forte

Horizontal, oben rechts

Galapagos

Horizontal, oben mittig

Ishimoto

Horizontal, oben links/mittig/rechts

Momentum

Horizontal, in der Navigationsleiste

Montauk

Horizontal, oben links/mittig/rechts

Native

Horizontal, oben mittig

Pacific

Horizontal, oben mittig, kann um den Website-Titel aufgeteilt werden

Skye

Vertikal, innerhalb eines Overlays

Supply

Vertikal, linke Seitenleiste

Tremont

Horizontal, oben links/rechts

Wells

Vertikal, linke Seitenleiste

Wexley

Horizontal, oben links/mittig/rechts

York

Horizontal, oben links/mittig/rechts, kann versteckt sein

Link-Abstand ändern

Um den Bereich um Navigationslinks zu ändern, suche nach Website-Stil-Anpassungen, die deinen Header, dein Banner oder deine Navigation ändern. Während die Anpassungen je nach Template variieren, enthalten Anpassungen für Link-Abstände in der Regel Wörter wie Padding, Abstand oder Breite.

Optionen für „aktiv“ und „Mouseover“ (Version 7.0)

In Version 7.1 ist es nicht möglich, verschiedene Farben für Links bei einem Mouseover und für aktive Navigationslinks festzulegen. Aktive Links sind immer unterstrichen.

In einigen Templates gibt es zusätzliche Optionen für Navigationslinks, je nachdem, ob sie angeklickt wurden. Dies wird manchmal als „Zustand“ oder „Phase“ bezeichnet. Während die Anpassungen je nach Template variieren, achte auf folgende Wörter:

  • Mouseover – Der Link ändert sich, wenn ein Besucher mit dem Mauszeiger darüber fährt.
  • Aktiv – Wenn ein Besucher eine Seite in Ihrer Navigation besucht, ändert sich der Stil des entsprechenden Links.

Um Hilfe zu deinem Template zu erhalten, besuche die entsprechende Template-Anleitung oder die Liste der Anpassungen von Website-Stil.

Tipp: Externe Navigationslinks weisen keine aktiven Stile auf, selbst wenn sie auf eine Seite auf Ihrer Website verweisen.

Navigation auf Mobilgeräten

Auf Mobilgeräten werden Links von der Primärnavigation hinter einem Menü-Link oder ☰-Symbol (auch bekannt als „Hamburger“-Symbol) zusammengeklappt. Ein Besucher kann darauf klicken oder tippen, um das vollständige Menü anzuzeigen. Dies trägt zur Benutzerfreundlichkeit bei und optimiert deine Website für Mobilgeräte.

Der Link oder das Symbol kann je nach Browsergröße deines Besuchers, der Anzahl der Links in deinem Menü oder der Länge deiner Navigationstitel auch in Computerbrowsern angezeigt werden.

Wie du deine Navigation für Mobilgeräte gestaltest, hängt von der Version deiner Website ab.

Um deine Mobilgerät-Navigation zu gestalten, bearbeite den Header deiner Website. Klicke im Header-Editor auf das Mobilgerät-Symbol, um für das Mobilgerät spezifische Stile festzulegen, einschließlich des Layouts und des Typs des Menü-Symbols.

Denken Sie daran:

  • Das Menüsymbol wird immer auf Mobilgeräten angezeigt, auch wenn sich alle Seiten im Abschnitt „Nicht verknüpft“ befinden.
  • Es ist nicht möglich, die Schriftgröße der Mobilgerät-Navigation zu ändern.
  • Es ist nicht möglich, dass das Menü-Symbol immer auf einem Computer angezeigt wird.

In vielen Fällen übernimmt die Navigation für Mobilgeräte die Stile von der Computeranzeige, um deine Markenführung konsistent zu halten. Einige Templates verfügen über erweiterte Stil-Optionen für Mobilgeräte, die dir ein feineres Maß an Kontrolle bieten. Um mehr zu erfahren, besuche den Leitfaden für dein Template.

Um zu untersuchen, welche Anpassungen sich auf deine mobile Navigation auswirken, öffne deine Navigation in der Smartphone-Ansicht, bevor du Website-Stil öffnest:

  1. Stelle die Geräteansicht auf „Mobiltelefon“ um.
  2. Klicke auf den Navigationslink (in der Regel ein ☰), damit deine Navigation für Mobilgeräte angezeigt wird.
  3. Klicken Sie im Hauptmenü auf Design und dann auf Website-Stile. Die Navigation für Mobilgeräte bleibt geöffnet.
Tipp: Wenn du deine Navigation auf dem Mobilgerät nicht sehen kannst, stelle sicher, dass du deine Hintergrund- oder Header-Farbe nicht auf die gleiche Farbe wie deinen Navigationstext eingestellt hast. Die Links können auf Mobilgeräten über diese Farbe angezeigt werden.

Menü-Symbol oder Link-Design nach Template

So wird das ☰-Symbol oder der Menü-Link in diesen Template-Gruppen angezeigt:

Template-Gruppe

Symbol oder Link (wird immer auf Mobilgeräten angezeigt)

Anzeige auf Computern ...

Adirondack

☰-Symbol

  • In schmalen Browsern (640 px)
  • Um das Symbol immer auf Computern anzuzeigen, aktivieren Sie die Option Navigation in Website-Stilen immer anzeigen.

Avenue

Menü-Link

  • In schmalen Browsern (640 px)

Aviator

Menü-Link

  • In schmalen Browsern (640 px)

Bedford

☰-Symbol

  • Automatisch, wenn Links nicht passen
  • In schmalen Browsern (640 px)

Brine

☰-Symbol. Ändere den Stil mit dem Abschnitt Mobil: Menü-Symbol in Website-Stil.

  • In schmalen Browsern (standardmäßig 640 Pixel. Ändere dies mit der Anpassung Mobil-Breakpoint.)

Farro

☰-Symbol

  • In schmalen Browsern (640 px)

Five

☰-Symbol

  • In schmalen Browsern (640 px)

Flatiron

Menü-Link

  • In schmalen Browsern (640 px)

Forte

☰-Symbol

  • In schmalen Browsern (768 px)

Galapagos

☰-Symbol

  • In schmalen Browsern (724 px)

Ishimoto

Menü-Link

  • In schmalen Browsern (800 px)

Momentum

☰-Symbol

  • In schmalen Browsern (736 px)

Montauk

Menü-Link

  • In schmalen Browsern (640 px)

Native

Menü-Link

  • In schmalen Browsern (640 px)

Pacific

☰-Symbol

  • In schmalen Browsern (768 px)
  • Um das Symbol immer auf Computern anzuzeigen, wähle unter Website-Stil Immer Overlay-Navigation verwenden aus.

Skye

☰-Symbol

  • Immer angezeigt

Supply

☰-Symbol

  • In schmalen Browsern (1024 px)

Tremont

☰-Symbol

  • In schmalen Browsern (640 px)
  • Automatisch, wenn Links nicht passen
  • Um das Symbol immer auf Computern anzuzeigen, wähle unter Website-Stil Navigationsstil: Symbol aus.

Wells

Menü-Link

  • In schmalen Browsern (800 px)

Wexley

Menü-Link

  • In schmalen Browsern (640 px)

York

☰-Symbol

  • In schmalen Browsern (768 px)

Leere Navigationssymbole auf Mobilgeräten

In einigen Templates wird das Symbol immer auf Mobilgeräten angezeigt, auch wenn sich alle deine Seiten im Abschnitt „Nicht verlinkt“ befinden.

Du kannst das Menü-Symbol in diesen Template-Gruppen ausblenden:

  • Brine-Familie
  • Farro-Familie

Gehe zum Hauptmenü, klicke auf Design und dann auf Website-Stil. Scrolle zum Abschnitt Mobil: Menü-Symbol und stelle die Anpassung Menü: Symbol-Position auf Verstecken ein.

In diesen Template-Gruppen gibt es keine integrierte Möglichkeit, das Navigationssymbol auf Mobilgeräten auszublenden:

  • Bedford
  • Forte
  • Galapagos
  • Montauk
  • Wells
  • York

Tipp: Du kannst das Navigationssymbol für Mobilgeräte ausblenden, indem du benutzerdefinierten Code hinzufügst. Weitere Informationen findest du in diesem Beitrag im Squarespace Forum.

Bitte beachte, dass benutzerdefinierte Code-Modifikationen nicht von unserem Support abgedeckt werden. Das bedeutet, dass wir keine Unterstützung bei der Einrichtung oder Fehlerbehebung codebasierter Lösungen bieten können.

Das eingeklappte Menü auf Computern ausblenden

So verhinderst du, dass der Link oder das Symbol auf Computern angezeigt wird:

  • Verwende kurze Navigationstitel.
  • Reduziere die Anzahl der Links im Menü. Du kannst Ordner verwenden, um verwandte Seiten in Drop-down-Menüs zu gruppieren oder, wenn du eine Website in Version 7.0 hast, Seiten in die Sekundär- oder Footer-Navigation verschieben.
  • Wenn deine Website Version 7.0 nutzt, wechsle zu einem anderen Template. Klicke oben auf den Version 7.0-Tab und erkunde die Optionen von Wird auf Computern angezeigt ....
War dieser Beitrag hilfreich?
81 von 534 fanden dies hilfreich
Gestaltung der Navigation