Passe die Schriftart, Farbe und Größe der Navigationslinks deiner Website an.
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 du loslegst
- Fügen Sie Links zu Ihrer Navigation hinzu, indem Sie Seiten im Seiten-Panel hinzufügen (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
- 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:
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:
- Während du eine Seite bearbeitest, klicke auf das Pinselsymbol und dann auf Schriftarten.
- Klicke unter Allgemeine Textstile auf Stile zuweisen.
- Klicke auf Website-Navigation.
- 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.
- 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 und dem Header-Stil deiner Website ab.
Header-Stile „Ausgefüllt“ und „Farbverlauf“ | Header-Stile „Design“ und „Dynamisch“ |
|
|
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.
Layout und Abstände ändern
Wie du das Layout deiner Navigation änderst, hängt von der Version deiner Website ab.
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:
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 weitere Optionen für Navigationslinks, je nachdem, ob sie angeklickt wurden. Dies wird manchmal als „Zustand“ oder „Phase“ bezeichnet. Die Anpassungen variieren zwar je nach Template, du kannst aber generell auf folgende Begriffe achten:
- 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.
Wenn du Hilfe zu deinem Template benötigst, besuche die entsprechende Template-Anleitung.
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.
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:
- Stelle die Geräteansicht auf „Mobiltelefon“ um.
- Klicke auf den Navigationslink (in der Regel ein ☰), damit deine Navigation für Mobilgeräte angezeigt wird.
- 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:
Template-Gruppe |
Symbol oder Link (wird immer auf Mobilgeräten angezeigt) |
Anzeige auf Computern ... |
Adirondack |
☰-Symbol |
|
Avenue |
Menü-Link |
|
Aviator |
Menü-Link |
|
Bedford |
☰-Symbol |
|
Brine |
☰-Symbol. Ändere den Stil mit dem Abschnitt Mobil: Menü-Symbol in Website-Stil. |
|
Farro |
☰-Symbol |
|
Five |
☰-Symbol |
|
Flatiron |
Menü-Link |
|
Forte |
☰-Symbol |
|
Galapagos |
☰-Symbol |
|
Ishimoto |
Menü-Link |
|
Momentum |
☰-Symbol |
|
Montauk |
Menü-Link |
|
Native |
Menü-Link |
|
Pacific |
☰-Symbol |
|
Skye |
☰-Symbol |
|
Supply |
☰-Symbol |
|
Tremont |
☰-Symbol |
|
Wells |
Menü-Link |
|
Wexley |
Menü-Link |
|
York |
☰-Symbol |
|
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.
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 ....