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.

All sites include options for changing the font, color, and size of your navigation's links. This guide explains how to customize your navigation on any site.

Bevor Sie anfangen

  • Add links to your navigation by adding pages in the Pages panel. Pages in the Not Linked section won't display.
  • Ändere den Text eines beliebigen Links, indem du dessen Navigationstitel in Seiteneinstellungen aktualisierst.
  • To change the order of links in the menu, drag and drop pages in the Pages panel.

Find the navigation style tweaks

The way that you change your navigation style depends on your site's version.

Navigation link styles are primarily set by your site's header. In the header editor, you can change:

  • The navigation layout
  • The navigation colors
  • The padding around text
  • Whether the navigation is fixed
  • 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.

Every template family has its own Site Styles, so there isn't one single rule for how to update your navigation links. Use these tips to find the style options your template supports:

  • To open Site Styles from the Home Menu, click Design, then Site Styles.
  • Scroll through the tweaks on the left and look for related tweaks. The tweaks usually include the word Navigation.
  • You can also hover over your site's navigation in the site preview on the right. When a blue highlighter box appears around it, click any navigation link. This helps filter out tweaks that don't affect the navigation links. When you're done, click Show All to go back to the main view.

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.

By default, your navigation font matches your site-wide font. To set a different font type or size for your navigation:

  1. Während du eine Seite bearbeitest, klicke auf das Pinselsymbol und dann auf Schriftarten.
  2. Klicke unter Allgemeine Textstile auf Stile zuweisen.
  3. Click Site 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. To change the size, click Size, then choose a preset Paragraph size, or choose Custom. To set a custom size, use the slider or manually enter a new rem value. Click Save to apply your changes.
Tipp: Um zu erfahren, wie Version 7.1 rem-Werte für Schriftgrößen verwendet, besuche Schriftarten ändern.

To change your navigation font, click the v icon next to the tweak name to open its drop-down menu. From here, you can change:

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

Weitere Hilfe dazu finden Sie unter Schriftarten ändern.

Die Farbe ändern

The way you change your navigation color depends on your site's version.

Ä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.

Change the layout and spacing

The way you change the navigation layout depends on your site's version.

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 some templates, you can change the position of the links. In Site Styles, look for tweaks called Navigation Position, Navigation Alignment, or something similar. To see what positions are available in your template, see the table below.

Tip: Some templates support fixed, or "sticky" navigation, that stays in the same position at the top of the browser while you scroll down the page.

Navigation display by 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.

Here's how the Main Navigation displays on computers in these template families:

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, top center, can be split around the site title

Skye

Vertikal, innerhalb eines Overlays

Supply

Vertikal, linke Seitenleiste

Tremont

Horizontal, top left/right

Wells

Vertikal, linke Seitenleiste

Wexley

Horizontal, oben links/mittig/rechts

York

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

Change link spacing

To change the space around navigation links, look for tweaks in Site Styles that change your header, banner, or navigation. While the tweaks vary by template, link spacing tweaks typically include words like Padding, Spacing, or Width.

Active and hover options (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 some templates, there are additional options for navigation links depending on if they've been clicked. This is sometimes called their "state" or "phase." While the tweaks vary by template, look for these words:

  • 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.

For help with your template, visit its template guide or list of Site Styles tweaks.

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.

The way that you style your mobile navigation depends on your site's version.

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 many cases, mobile navigation inherits styles from the computer display to keep your branding consistent. Some templates have advanced mobile style options, which give you a finer degree of control. To learn more, visit your template's guide.

To explore which tweaks affect your mobile navigation, open your navigation in phone view before opening Site Styles:

  1. Switch the Device View to phone.
  2. Click the navigation link (usually a ☰) so your mobile navigation appears.
  3. Klicken Sie im Hauptmenü auf Design und dann auf Website-Stile. Die Navigation für Mobilgeräte bleibt geöffnet.
Tip: If you can’t see your navigation on mobile, ensure that you haven’t set your background or header color to the same color as your navigation text. The links may display over this color on mobile.

Menu icon or link design by template

Here's how the ☰ icon or Menu link displays in these template families:

Template-Gruppe

Icon or link (Always shows on mobile)

Shows on computers...

Adirondack

☰ icon

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

Avenue

Menu link

  • In narrow browsers (640 px)

Aviator

Menu link

  • In narrow browsers (640 px)

Bedford

☰ icon

  • Automatically when links won't fit
  • In narrow browsers (640 px)

Brine

☰ icon. Change the style with the Mobile: Menu Icon section in Site Styles.

  • In narrow browsers (640 px by default. Change this with the Mobile Breakpoint tweak.)

Farro

☰ icon

  • In narrow browsers (640 px)

Five

☰ icon

  • In narrow browsers (640 px)

Flatiron

Menu link

  • In narrow browsers (640 px)

Forte

☰ icon

  • In narrow browsers (768 px)

Galapagos

☰ icon

  • In narrow browsers (724 px)

Ishimoto

Menu link

  • In narrow browsers (800 px)

Momentum

☰ icon

  • In narrow browsers (736 px)

Montauk

Menu link

  • In narrow browsers (640 px)

Native

Menu link

  • In narrow browsers (640 px)

Pacific

☰ icon

  • In narrow browsers (768 px)
  • To always show the icon on computers, select Always Use Overlay Nav in Site Styles.

Skye

☰ icon

  • Always displays

Supply

☰ icon

  • In narrow browsers (1024 px)

Tremont

☰ icon

  • In narrow browsers (640 px)
  • Automatically when links won't fit
  • To always show the icon on computers, select Nav Style: Icon in Site Styles

Wells

Menu link

  • In narrow browsers (800 px)

Wexley

Menu link

  • In narrow browsers (640 px)

York

☰ icon

  • In narrow browsers (768 px)

Empty mobile navigation icons

In some templates, the icon always appears on mobile, even if all your pages are in the Not Linked section.

You can hide the menu icon in these template families:

  • Brine-Familie
  • Farro-Familie

Go to the Home Menu, click Design, then click Site Styles. Scroll to the Mobile: Menu Icon section and set the Menu Icon Position tweak to Hide.

In these template families, there isn't a built-in way to hide the mobile navigation icon:

  • 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.

Hide the collapsed menu on computers

To prevent the link or icon from showing on computers:

  • Keep navigation titles short.
  • Reduce the number of links in the menu. You can use folders to group related pages into drop-down menus, or, if your site is on version 7.0, move pages to Secondary or Footer Navigation.
  • 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?
75 von 475 fanden dies hilfreich
Gestaltung der Navigation