Gestaltung der Navigation

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

• Das Navigationslayout
• Die Navigationsfarben
• Die Navigationslink-Abstände
• Das Padding rund um den Text
• Ob die Navigation fest 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-Stile zu öffnen, öffne das Design-Menü und klicke dann auf Website-Stile.
• 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 Navigationslinks 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. So können Anpassungen, die nicht die Navigationslinks betreffen, herausgefiltert werden. Wenn du fertig bist, klicke 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:

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.

Du kannst auch das Farbdesign deines Header-Overlays für Mobilgeräte ändern.

Klicke unter Website-Stil auf eine Farbanpassung, um die Farbe der Navigationslinks zu ändern. Wähle eine neue Farbe, indem du auf eine Farbe oben in der Auswahl klicken und dann einen Farbton innerhalb des Quadrats auswählen. Du kannst auch einen bestimmten Wert in das Textfeld eingeben. Weitere Hilfe findest du unter Farbänderungen oder im Template-Leitfaden deiner Website.

Um die Position und die Abstände deiner Navigationslinks zu ändern, bearbeite die Anzeige deines Website-Headers auf Computern. Du kannst auch das Aussehen und die Platzierung des Menü-Symbols auf Mobilgeräten anpassen.

In einigen Templates kannst du die Position der Links ändern. Suche in Website-Stile 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:

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.

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.

Denk daran:

• Header-Buttons werden immer mit den Navigationslinks hinter dem Menü-Link oder ☰-Symbol angezeigt.
• 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.
• Um das Menü-Symbol aus deinem Header zu entfernen, vergewissere dich, dass sich alle deine Seiten im „Nicht verlinkt“-Abschnitt befinden, und deaktiviere alle Header-Elemente mit Ausnahme des Warenkorbs. Durch die Aktivierung des Warenkorbs wird das Menü-Symbol nicht angezeigt.

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. Klicke im Hauptmenü auf Website, dann auf Design und anschließend 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:

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

Öffne das Design-Menü und klicke dann auf Website-Stile. Scrolle zum Abschnitt Mobil: Menü-Symbol und stelle die Anpassung Menü: Symbol-Position auf Ausblenden 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.