Navigation & Menü bei Squarespace stylen: So geht's!
Bist du dabei, deine Squarespace-Seite zu stylen und überlegst, wie du das mit der Navigation am schönsten einrichten kannst?
In diesem Artikel zeige ich dir, welche Möglichkeiten du hast, das Ganze anzuordnen. Natürlich auch mit Beispielen von Squarespace-Websites und was daran besonders gut (oder eben nicht) funktioniert:
Zentrierte, linksbündige und rechtsbündige Navigation
Super Möglichkeiten für Landing Pages oder One Pager
Minimalistische Optionen für Portfolio-Websites
Meine Tipps, wo du deine Social Media Icons am besten hinsetzt
… und noch mehr zum Styling deiner Menüs!
Inhaltsverzeichnis:
Übrigens: Falls du dich gerade erstmal informierst oder noch kein Squarespace-Abo abgeschlossen hast, kannst du dir hier mit dem Code VICTORIA10 ganze 10% Rabatt auf dein erstes Jahr bei Squarespace holen. (Dieser Link ist Werbung für meinen Liebling Squarespace. Hast du dir bestimmt schon gedacht.) 😊
Tipp: Ganz neu richten wir für dich als Blogleser alternativ sogar einen special 20%-Rabatt ein. → Bekommst du hier.
Legen wir also los mit dem Styling deines Website-Hauptmenüs!
Bevor wir anfangen: Meine top Tipps zu deiner Navigation
Der Begriff “Navigation” kommt nicht von ungefähr. Und selbst wenn du es “Menü” nennst - auch ein gutes Restaurantmenü ist normalerweise so aufgeteilt, dass man sich leicht zurecht findet.
Gleich zu Anfang kommen hier also schon mal meine top Tipps zu deinem Hauptmenü:
4-6 Menüpunkte sind das Optimum. Manchmal funktionieren auch 8, das ist meiner Meinung nach aber die absolute Obergrenze. Manche Leute packen sogar nur 3-4 Elemente nach oben und schieben alles andere in die Fußleiste.
Wenn du viele Inhalte hast, nutze statt dem Hauptmenü lieber eine richtig schön große Fußleiste. Das ist ein Bereich, den ganz viele Leute unterschätzen. Ich bin inzwischen ein richtiger Fußleisten-Freak und werde demnächst einen ganzen Guide dazu hier veröffentlichen.
Ein Button in der Navigation wirkt Wunder! Den kannst du ruhig dazu verwenden, deinen wichtigsten Punkt deutlich zu machen. Zum Beispiel so was wie “Buchen!”
Neben der Navigation selbst ist die Mitteilungsleiste (die erst ab dem Business-Paket bei Squarespace dabei ist) eine gute Möglichkeit, als Eyecatcher zu funktionieren. Alles zur Mitteilungsleiste bei Squarespace findest du hier.
Wo du die Einstellungen zum Navigations-Look findest
Bei Squarespace 7.0 findest du fast alle Einstellungen unter “Design” > “Website-Stil” und dann im Bereich zur Kopfzeile (siehe auch weiter unten im Artikel bei “zentrierte Navigation” - da beschreibe ich das nochmal ausführlich).
Wenn du dagegen mit der neuen Version von 7.1 arbeitest, kommst du folgendermaßen an die Einstellungen zum Menü:
Du gehst oben auf den Bereich, in dem dein Logo bzw. Website-Titel erscheint, bis sich dieser Button zeigt:
Dann gehst du zu den Einstellungen zum Logo etc.:
Menü und Logo bzw. Hauptnavigation fixieren
An dieser Stelle kannst du dich dafür entscheiden, ob das Logo und deine Navigation eine feste Position haben soll oder nicht. (Das ist ziemlich cool, denn diese Option konnte man bei Squarespace 7.0 bisher nicht standardmäßig überall festlegen.)
Feste Position bedeutet, ob das Menü oben “angeklebt” sichtbar bleiben soll. Dann musst du nur noch wählen, ob die Navigation immer zu sehen sein soll (“grundlegend”) oder ob sie nur beim Zurückscrollen wieder auftauchen soll.
So suchst du den Navigationsstil bei Squarespace 7.1 aus
Wenn du in diesem Bereich bist, wechsle in die “Desktop”-Ansicht und wähle “Kopfzeile und Layout”.
Als Nächstes öffnen sich diese Funktionen für dich:
Dort kannst du dir den für deine Seite passenden Stil aussuchen - und auswählen, ob zum Beispiel ein Button oben in der Navigationsleiste bzw. dem Hauptmenü auftauchen soll.
Vergiss nicht, das auch für mobile Geräte einzustellen - denn du hast gerade nur das Design für die Desktop-Version ausgesucht.
Artikeltipp: So verwendest du ein anderes Logo auf deiner mobilen Website
Zentrierte Navigation bei Squarespace 7.0
Auf meiner eigenen Website verwende ich aktuell ein Navigationsdesign, das “aufgeteilt” aussieht und mit einem zentrierten Logo arbeitet. Das sieht so aus:
Dieses Design (alles auf einer Höhe) funktioniert aktuell leider nur mit Templates bei Squarespace 7.0, welche eine sekundäre Navigation haben. Zum Beispiel alle Templates aus der Brine-Familie.
So machst du es (geht nur bei Squarespace 7.0):
Setze die Menüpunkte, die links stehen sollen, in die Hauptnavigation, also Primary Navigation.
Setze die Menüpunkte, die rechts stehen sollen, in die Secondary Navigation, also Sekundärnavigation
Geh zu den Stileinstellungen (Design > Websitestil) und klick auf den Header-Bereich der Seite (die Kopfzeile). Dann öffnen sich links die Kopfzeile-Einstellungen. Hier wählst du unter “Branding: Position: Oben Mitte” aus,
Weiter unten bei “Kopfzeile: Sekundärnavigation” wählst du “Primärnavigations-Stil übernehmen” aus
Jetzt kannst du noch bei den Detaileinstellungen an der Größe und den Abständen herumspielen. Fertig!
Die Alternative bei Squarepace 7.1
Leider kannst du dieses Design aktuell nicht eins zu eins replizieren, ohne Code zu verwenden. (Ein Tutorial auf Englisch, wie du das doch hinbekommst, findest du hier.)
Was aber ganz leicht geht: Deine Menüpunkte einfach zentriert UNTER das Logo setzen. Diese Einstellung findest du, wenn du den oberen Kopfzeilen-Bereich bearbeitest. (Siehe Beschreibung oben.)
Schrägstriche oder Symbole zwischen Navigationstiteln einfügen
Du willst deine Navigation noch besonderer machen? Du kannst dir überlegen, zwischen die einzelnen Elemente noch Schrägstriche zu setzen, oder auch bunte Symbole, Punkte, Bindestriche - oder was du eben möchtest.
Dazu brauchst du ein kleines bisschen CSS. (Wenn du das noch nie gemacht hast, schau dir meinen Artikel zu CSS bei Squarespace an.)
So fügst du Schrägstriche zwischen Navigationselementen hinzu
Es kann ziemlich stylish aussehen, Schrägstriche zwischen den Elementen deiner Navigation zu haben:
Dies ist die CSS-Vorlage, die du ganz einfach bei “Design” > “Benutzerdefiniertes CSS” hineinkopieren kannst:
.header-nav-item:not(:last-child) a:after {
color: #A9A9A9;
font-size: 16px;
content: " /";
}
Gut zu wissen: Der Farbcode #A9A9A9 steht für Grau, du kannst hier aber auch jede andere Farbe einsetzen, die du möchtest - falls du zum Beispiel gelbe oder lila Schrägstriche möchtest.
Und unter “font-size” kannst du die Größe (hier: 16px) beliebig groß und klein machen.
Wenn die Schrägstriche etwas dicker sein sollen:
.header-nav-item:not(:last-child) a:after {
color: #A9A9A9;
font-family: monospace;
font-size: 16px;
content: " /";
}
So setzt du Symbole oder andere Zeichen zwischen die Navigations-Titel
Du kannst statt des Schrägstrichs bei “Content” auch jede andere Art von Zeichen oder Symbol setzen:
Der CSS-Schnipsel dazu kommt hier:
.header-nav-item:not(:last-child) a:after {
color: #A9A9A9;
font-size: 16px;
content: " ✨";}
Das Sternchen kannst du durch ein beliebiges Zeichen ersetzen (pass auf - davor ist noch ein Leerzeichen hinter den Gänsefüßchen.
Dabei musst du allerdings darauf achten, dass das auch von verschiedenen Browsern unterstützt wird - Apple-Icons werden zum Beispiel nicht überall angezeigt.
Tipps zur Navigation für Landing Pages oder One Pager
Normalerweise willst du am liebsten gar keine Navigation auf Landing Pages. Denn: Sie sind meist dazu da, ein bestimmtes Ziel zu erreichen. Davon lenkt eine Navigation nur ab.
Beispielsweise willst du, dass sich die Leute für etwas anmelden. Oder sie sollen auf den “Kaufen”-Button klicken. Und sonst nirgendwo hin!
Als Alternative zur komplett “navigationsfreien” Landing Page nimmst du einfach einen Button dazu:
So blendest du die Navigation auf deiner Landing Page komplett aus
Wenn du deine Navigation nur auf einzelnen Seiten ausblenden willst, musst du ein winziges bisschen Code auf Seitenebene verwenden. Das geht ab dem Business-Paket bei Squarespace.
Geh auf das Rädchen (Einstellungen) rechts neben der Seite, auf der du die Navigation ausblenden möchtest
Gehe ganz unten auf “Erweitert”
Gib den folgenden Code ein:
<style>
.Header-nav--primary{
display:none !important;
}
.Mobile-bar-menu{
display:none !important;
}
.Mobile-bar {
display: none !important;
}
header {
display:none !important;
}
}
</style>
Geh auf Speichern und teste, ob das funktioniert. (Der Code ist für Brine-Templates getestet.)
Super minimalistisch: Nur mit Fußleiste
Sehr edel, funktioniert aber nur für wirklich minimalistische “Visitenkarten”-Websites: Das komplette Verzichten auf ein Hauptmenü.
Statt also oben zu zeigen, was es gibt, lässt du die Navigation komplett weg und hast nur eine Fußleiste (und ein Logo):
Sobald du mehr als ein paar Seiten hast, würde ich dir nicht zu dieser Lösung raten - aber gerade wenn deine Website eher simpel daher kommt und du nicht viele Inhalte hast, kann das eine sehr schicke Lösung sein.
So machst du es:
Du schiebst all deine Seiten in den “Nicht verlinkt” Bereich links im Squarespace-Menü und schreibst dann ganz unten in die Fußleiste manuell deine Links.
Überprüf auf jeden Fall, ob keine deiner Seiten zu lang ist, damit man nicht allzulange nach unten scrollen muss.
Die große Frage: Sollen meine Social Media Icons ins Hauptmenü?
Wenn du ein bisschen online herum surfst, wirst du bemerken, dass oft Social Media Icons ganz oben in Website-Navigationen erscheinen. So wie hier:
Und wenn du auf meine Website guckst, wirst du sehen: Hmmm, da ist ja gar nichts! Da muss man schon nach ganz unten scrollen, um überhaupt mal was zu finden.
Das hat eine ganz einfache Erklärung. Meine These ist: Social Media sollte dazu da sein, um die Leute auf deine Website zu holen - und nicht umgekehrt. Schließlich wird der abschließende Kauf, die Buchung oder was auch immer am Ende meist auf deiner Website getätigt. Und eben nicht bei Instagram (die neue Shopfunktion ausgeschlossen).
Aber wenn du eine andere Strategie hast, dann lass dich nicht von meiner Meinung abhalten. 😉
Wichtig: Zu kreative Menü-Titel funktionieren nicht
Als Letztes noch ein Hinweis zur Bezeichnung deiner Navigationstitel. Das ist nämlich so eine Sache. Oft wird einem hier von SEO-Beratern geraten, doch auf jeden Fall genau zu beschreiben, was sich dort verbirgt.
Spezifisch: Ja, bitte!
Aber zu wild sollte es nicht sein.
Worte wie “Wegstationen” (statt Über mich) oder ähnliche Worte klingen toll, man weiß aber im Zweifel nicht, was sich dahinter verbirgt.
Mach deine Navigations-Titel spezifisch!
Überleg dir, wie du es deinem Websitebesucher am leichtesten machen kannst, bestimmte wichtige Seiten zu finden. Besser als allgemein “Leistungen” ist es zum Beispiel, “Webdesign” zu schreiben, wenn das ohnehin die Leistung ist, die du anbietest. Spezifische Menütitel sind übrigens auch sehr gut für Google.
Statt “Preise” kannst du in diesem Beispiel z.B. “Designpakete” als Menüpunkt nehmen - so wird das Ganze glasklar.
Bei Onlineshops ist es eine gute Idee, nicht nur “Shop” als Menüpunkt zu haben, sondern z.B. zu bestimmten Kategorien zu führen.
Merke: Ein verwirrter Website-Besucher sucht nicht, sondern er geht. Und zwar meistens schneller, als du gucken kannst.
Viel Spaß mit dem Stylen deiner Navigation! Falls du Fragen hast, schreib sie einfach in die Kommentare.
👉 Ständig frische Tipps für deine Squarespace-Website? Abonniere jetzt meinen Youtube-Kanal mit laufend neuen Tutorials! 🎥
Diese Artikel könnten dich auch noch interessieren:
