Das Hauptmenü in Squarespace anpassen und weitere Menüs hinzufügen (mit und ohne Code)
Squarespace bietet dir verschiedene Möglichkeiten, die Navigation im Kopfbereich anzupassen. Daneben kannst du das Menü noch durch CSS-Code weiter modifizieren. Zusätzlich kannst du Untermenüs erstellen und verwalten - auch wenn dies von Squarespace eigentlich nicht vorgesehen ist.
Dieser Artikel zeigt dir, welche Möglichkeiten mit und ohne Code du hast, die Navigation auf deiner Squarespace-Website zu ergänzen und das Design zu verändern.
“Menü” und “Navigation” werden dabei synonym verwendet. Lass dich hier also nicht verwirren.
Los geht’s!
Inhaltsverzeichnis:
Einführung zur “Primärnavigation” von Squarespace
Verglichen mit anderen Website-Buildern sind die Menüfunktionen bei Squarespace relativ begrenzt. Es gibt ein Hauptmenü oben auf der Seite. Dieses besteht aus Hauptseiten sowie Unterseiten.
Squarespace nennt dieses Menü “Primärnavigation”. Dies ist etwas irreführend, da es keine “Sekundärnavigation” oder andere Untermenüs gibt.
Seiten im Hauptmenü
Seiten, die du unter Primärnavigation anlegst oder mit der Maus aus Nicht verlinkt dorthin ziehst, erscheinen sofort im Hauptmenü. Über die Einstellungen der jeweiligen Seite (über das Zahnrad-Symbol) kannst du unter “Navigationstitel” angeben, wie die Seite im Menü benannt sein soll.
Über das “+” neben Primärnavigation kannst du neben neuen Seiten, Blogs, etc. auch einen “Link” und einen “Dropdown”-Menüpunkt hinzufügen.
Links im Hauptmenü
Über “Link” kannst du direkt im Menü sowohl eine bestimmte Seite deiner Squarespace-Website als auch zu Seiten anderer (externer) Websites verlinken.
Für Links zu Seiten innerhalb deiner Website empfehlen wir die Funktion “Link in neuem Tab öffnen” zu deaktivieren. Bei externen Links solltest du die Funktion aktivieren, damit die Besucher noch einen Tab mit deiner Website geöffnet haben und schneller wieder zu deiner Website zurückfinden.
Externe Links im Hauptmenü könnten für dich relevant sein, wenn du zum Beispiel einen Shop über ein anderes Portal (wie beispielsweise Ablefy) betreibst und diesen direkt verlinken willst.
Für interne Links gibt es verschiedene Anwendungsfälle. Zum einen kannst du Seiten wie bestimmte Blog-Artikel oder Produkte (die du ansonsten nicht ins Hauptmenü bekommst) darüber direkt im Menü verlinken.
Oder du hast wechselnde Angebote mit zugehöriger Landing-Page, die du unter “Nicht verlinkt” ordentlich sortiert hast. Dann kannst du über einen Link im Menü immer zur aktuellen Seite verlinken, ohne Seiten zwischen “Nicht verlinkt” und “Primärnavigation” hin- und herschieben zu müssen.
Du kannst theoretisch auch dein gesamtes Hauptmenü nur mit “Links” aufbauen und zu Seiten unter “Nicht verlinkt” verweisen. Das kann sinnvoll sein, wenn du deine Seiten unter “Nicht verlinkt” nach einem bestimmten Schema sortieren möchtest. Für deine Website-Besucher macht das keinen Unterschied.
Untermenüpunkte bei Squarespace per Dropdown
Über die Funktion “Dropdown” kannst du bei Squarespace Untermenüpunkte zum Hauptmenü hinzufügen. Wenn man mit der Maus über so einen Menüpunkt fährt (beziehungsweise in der mobilen Version antippt) werden die Untermenüpunkte sichtbar.
Bei Squarespace ist es nicht möglich, dass ein Menüpunkt selbst eine Seite ist und gleichzeitig Unterseiten hat. Andere Website-Builder haben zum Teil diese Funktion. Allerdings kann das für deine Besucher verwirrend und in der mobilen Version schwierig umzusetzen sein.
Gestaltung des Hauptmenüs
Um das Hauptmenü anzupassen, musst du mit der Maus auf einer beliebigen Seite im Bearbeitungsmodus über die Navigation fahren. Hier erscheint dann der Button “Website-Header Bearbeiten”. Wenn du diesen anklickst, erscheint ein weiterer Button “Design bearbeiten”.
Wenn du auf “Design bearbeiten” klickst, findest du die von Squarespace vorgefertigten Möglichkeiten den Header und damit auch die Navigation anzupassen.
Über Website-Stile (Pinsel-Symbol) > Schriftarten > Stile Zuweisen > Website-Navigation kannst du die Schrift der Menüpunkte anpassen. Wähle dazu unter “Stil” die Option “Benutzerdefiniert”.
Hervorhebung aktiver Menüpunkte
Standardmäßig sind bei Squarespace aktive Menüpunkte mit einer Unterstreichung hervorgehoben.
Wenn du die Unterstreichung verändern möchtest oder aktive Menüpunkte zum Beispiel mit fetter Schriftart hervorheben möchtest, kannst du das mit sogenanntem CSS-Code machen.
Anpassung des Hauptmenüs mit CSS
Was ist CSS?
CSS steht für Cascading Style Sheets. Es ist eine Sprache, mit der das Aussehen und Layout von Webseiten gestaltet wird.
Die Sprache HTML baut die Struktur einer Webseite. Also welche Elemente auf einer Seite enthalten sind. Mit CSS werden diese Elemente dann angepasst.
Mit CSS kannst du zum Beispiel die Farben von Texten und Hintergründen, Schriftarten und Schriftgrößen, Abstände zwischen Elementen und vieles mehr festlegen.
CSS und Squarespace
Deine Squarespace-Website enthält natürlich schon viel CSS-Code. Diesen kannst du überschreiben oder ergänzen, um deine Seite an deine individuellen Design-Wünsche anzupassen.
CSS-Code kannst du an verschiedenen Stellen einfügen. Code der für die gesamte Website gelten soll, fügst du am Besten unter Website-Tools > Benutzerdefiniertes CSS (https://DEINE-DOMAIN.squarespace.com/config/pages/website-tools/custom-css) hinzu.
Wenn CSS-Code nur für einzelne Seiten gelten soll, kannst du diesen in den Einstellungen der Seite unter “Erweitert” einfügen. Hier ist es wichtig, dass du den CSS-Code mit “<style>” einleitest und am Ende mit “</style>” abschließt.
Hervorhebung aktiver Menüpunkte mit CSS
Mit CSS-Code kannst du die Hervorhebung aktiver Menüpunkte verändern. Füge dazu die folgenden Code-Snippets unter Website-Tools > Benutzerdefiniertes CSS ein und passe sie bei Bedarf an.
Aktiver Menüpunkt mit fetter Schriftart:
.header-nav-item--active { font-weight: 700; }
Unterstreichung entfernen:
.header-nav-item--active a { background-image: none !important; }Unterstreichung in anderer Farbe / dicker:
.header-nav-item--active a {
background-image: linear-gradient(#00ff00,#00ff00) !important;
background-size: 2px 2px !important;
}Unterstreichung in anderer Farbe / dicker (wenn das Menü Dropdowns enthält):
.header-nav-item--active {
background-image: linear-gradient(#00ff00,#00ff00);
background-repeat: repeat-x;
background-position: left bottom;
background-size: 2px 2px;
}
.header-nav-folder-title-text { background-image: none !important; }
.header-nav-item--active a { background-image: none !important; }
Andere Menü-Anpassungen mit CSS
Mit CSS-Code kannst du das Menü (nahezu) beliebig anpassen. Füge dazu die folgenden Code-Snippets unter Website-Tools > Benutzerdefiniertes CSS ein und passe den Code bei Bedarf an.
Ändere die Farbe der Menüpunkte bei Mouseover
.header-nav-item a:hover { color: #00ff00 !important; }Ändere die Farbe der Social Media-Symbole bei Mouseover:
#header svg:hover { fill: #00ff00; }Passe die Breite der Navigation an (Layout: Navigation mittig, Logo links, CTA-Button rechts):
.header-layout-nav-center .header-actions { width: 22%; }@media screen and (max-width: 1155px) {
.header-layout-nav-center .header-actions { width: auto; }
}
Weitere Menüs hinzufügen
Squarespace bietet neben der Primärnavigation keine vorgefertigten Möglichkeiten weiterer Menüs. Trotzdem kannst du dir verschiedene Menüs selbst bauen. Hier zeigen wir dir wie.
Allerdings: Auch wenn das sich aufklappende Layout von Untermenüs nicht jedem gefällt, empfehlen wir dir diese Funktion bei Bedarf zu nutzen und nicht auf Alternativen auszuweichen. Dadurch stellst du sicher, dass auch die Besucher der mobilen Version ein sauberes Menü dargestellt bekommen.
Viele unterschätzen nach wie vor, wie viel Traffic von mobilen Geräten kommt. Einen Anhaltspunkt findest du unter Analytics > Traffic (https://DEINE-DOMAIN.squarespace.com/config/analytics). Das Diagramm in der Mitte zeigt die Verteilung der Geräte deiner Besucher. Daher solltest du jede Lösung auch auf eine gute mobile Nutzbarkeit hin kontrollieren.
Menü in der Fußzeile (Footer)
Um Besucher, die bis nach ganz unten scrollen, aufzufangen und weiterzuleiten, empfehlen wir dir wichtige Seiten immer auch im Footer zu verlinken. Zusätzlich hilft das deiner Seite auch in Bezug auf SEO.
Im Footer kannst du mit Hilfe von Abschnitten und Text-Blöcken beliebige Menüs bauen. Verlinke dann einfach manuell die verschiedenen Seiten (es gibt keinen Block “Menü”). Dabei kannst du dich von anderen Websites wie zum Beispiel Strato inspirieren lassen. Eine Unterteilung in Blöcke mit aussagekräftigen Überschriften hilft deinen besuchern, sich schnell zu orientieren.
Auch Pflichtseiten wie das Impressum und die Datenschutzerklärung kannst du gut im Footer platzieren. Dadurch nehmen die Seiten keinen wertvollen Platz im Hauptmenü weg.
Der große Vorteil von Verlinkungen im Footer: Der Footer ist automatisch auf allen Seiten sichtbar. Und wenn du etwas ändern möchtest, musst du das nur einmal machen und der Footer wird auf allen Seiten aktualisiert.
(Unter-)Menü auf Seiten
Wie auch im Footer kannst du auch auf Seiten über Text-Blöcke ein neues Menü anlegen. Wir empfehlen hierfür einen eigenen Abschnitt zu verwenden. Dann kannst du diesen Abschnitt über das Herz-Symbol speichern und ohne großen Aufwand auf anderen Seiten einfügen.
Denn: So ein Menü musst du zu jeder einzelnen Seite, auf der das Menü erscheinen soll, hinzufügen. Und auch Änderungen musst du auf jeder Seite einzeln vornehmen. Daher ist es eine gute Idee, so ein Menü erstmal nur auf einer Seite anzulegen und dort auch die mobile Version anzupassen. Und erst dann auf weitere Seiten zu übertragen.
Füge, um ein solches Menü zu erstellen, als erstes einen neuen Abschnitt zu der entsprechenden Seite hinzu. Erstelle dann einen oder mehrere Text-Blöcke und lege manuell die Menüpunkte an. Verlinke dann die Menüpunkte mit den entsprechenden Seiten.
Bei horizontale Menüs kannst du die Menüpunkte beispielsweise mit Leerzeichen und einem horizontalen Strich (“⏐”) oder Bullets (“•” / “●”) trennen.
Dynamische Menüs auf Seiten (ohne Code!)
Es gibt aber noch eine dynamische - also sich automatisch aktualisierende - Alternative zu der eben beschriebenen Möglichkeit mit Text-Blöcken. Damit kannst du das Untermenü zentral verwalten und musst also Änderungen nur an einer Stelle vornehmen.
Die Lösung ist ein Work-Around und klingt erstmal etwas kompliziert - es ist tatsächlich aber gar nicht so schwierig. Und sie kommt ganz ohne Code aus.
Wir zeigen dir Schritt für Schritt wie es geht:
Lege einen neuen Blog an. Nenne diesen zum Beispiel “Untermenüs”.
Setze unter Einstellungen > SEO alle Seiten des Blogs auf “In Suchergebnissen verbergen”.
Lösche die vorgefertigten Blog-Artikel.
Erstelle einen neuen Blog-Artikel. Nenne diesen zum Beispiel “Untermenü 1” und veröffentliche ihn (ohne Inhalt).
Erstelle nun das neue Untermenü unter den Einstellungen des Blog-Artikels unter “Auszug”. Hier kannst du mit den verfügbaren Möglichkeiten zum Beispiel eine Liste anlegen oder ein horizontales Menü erstellen. Verlinke die entsprechenden Seiten mit den Menüpunkten.
Gehe jetzt zu der Seite, auf welcher das Untermenü erscheinen soll.
Füge hier einen leeren Abschnitt und zu diesem Abschnitt dann einen Block “Übersicht” hinzu.
Wähle in den Einstellungen des “Übersicht”-Block unter “Inhalt” deinen Blog “Untermenü” als Quelle. Wenn du mehrere Untermenüs anlegen möchtest, kannst du deine Blog-Artikel entsprechend über Kategorien oder Tags markieren und dann darüber in der Übersicht filtern.
Blende ebenfalls unter “Inhalt” primäre und sekundäre Metadaten aus (“ohne”).
Gehe dann zu “Design” des “Übersicht”-Blocks. Ändere die Einstellungen, sodass nur der Auszug, aber nicht der Titel, das Bild und der Weiterlesen-Link angezeigt werden.
Passe zum Schluss die Formatierung des Blocks zum Beispiel über eine Hintergrundfarbe, einen Rahmen und die Abstände an. Fertig. 😀
Diese Artikel könnten dich ebenfalls interessieren:
