Dropdown-Menü bei Squarespace: So teilst du deine Navigation auf
Wenn du deine Website-Navigation mega übersichtlich und nutzerfreundlich gestalten willst, ist ein Dropdown-Menü super dafür.
Es hilft dir, deine verschiedenen Themenbereiche zu bündeln - zum Beispiel Angebote, Services und Co. So wirkt deine Navigation nicht überlaufen, sondern strukturiert und die Leute finden sich besser zurecht. Und das Beste: So ein Menü ist super easy und schnell mit Squarespace* erstellt.
Wie das geht, zeige ich dir hier! 💻
Inhaltsverzeichnis:
Bist du eher Team Video? Dann schau dir dieses Tutorial gerne an. 👇
Ansonsten scroll einfach weiter!
Warum ein Dropdown-Menü?
Wie ich oben schon kurz erwähnt habe, kannst du durch ein Dropdown-Menü deine Navigation besser und übersichtlicher gestalten. Es ist halt echt easy gemacht. 😉 Und auch mega, wenn du generell ein minimalistischeres Design hast.
Ich würde auch immer nur maximal sechs Punkte in der Navigation empfehlen. Wenn nicht sogar fünf Punkte plus ein Button (wie du das machst, zeige ich dir weiter unten). Alles andere ist überfordernd.
Wenn du keine kleine Seite hast, dann sind diese sechs Punkte auch schnell voll. Damit du aber jetzt nicht irgendwas aus der Navigation rauslassen musst, kannst du passende Seiten zusammenfügen und einen “Oberbegriff” für diese Seiten finden und einzelne Seiten in deiner Navigation bündeln - zum Beispiel deine Produkte, “Über mich”-Informationen oder Kurse.
Lass uns jetzt mal anschauen, wie du dies in Squarespace machen kannst. 👇
Step by Step: Dropdown-Menü bei Squarespace erstellen
#1 So kommst du zur Navigation
Wenn du deine Navigation bei Squarespace einsehen willst, dann musst du auf “Seiten” gehen.
Hier siehst du dann die Seiten, die in der Navigation sichtbar sind - unter “Main Navigation”.
Und die Seiten, die nicht in der Navigation angezeigt werden - unter “Nicht verlinkt”. (Kleine Anmerkung am Rande: “Nicht verlinkt” ist hier etwas ungünstig als Bezeichnung gewählt, aber hier meint Squarespace die Seiten, die in der Navigation nicht verlinkt sind. Also Leute kommen hier dann nur durch einen Link auf diese Seiten oder wenn sie eben die URL kennen)
#2 Navigation neu anordnen
Was echt cool ist: Du kannst Navigationspunkte hin und her schieben, also neu anordnen. So veränderst du die Platzierung der einzelnen Seiten in der Navigation oder kannst einzelne Seiten zu “nicht verlinkt” verschieben, dann werden diese auch im Menü für die Leute nicht mehr angezeigt.
#3 Dropdown in Main Navigation anlegen
So jetzt kommen wir zum eigentlichen Ding. 😉
Was halt viele nicht wissen, ist, dass du auch Dropdown-Menüs und somit Unterkategorien in deiner Navigation anzeigen lassen kannst.
Dafür klickst du bei “Main Navigation” auf das “+”.
Vielleicht siehst du hier nicht alle Punkte, die aufgelistet werden, weil dein Bildschirm zu klein ist. Aber unter der Kategorie “Mehr” ist der Punkt “Dropdown” aufgelistet.
Zum Beispiel bietet es sich bei einem Shop an, “Kategorien” zu erstellen. Hier kannst du dann die verschiedenen Produktkategorien auflisten.
👉 Ständig frische Tipps für dein Webdesign-Business? Abonniere jetzt meinen Youtube-Kanal mit laufend neuen Tutorials! 🎥
#4 Navigationspunkte (um-) benennen
Du kannst deine Navigationspunkte auch easy umbenennen, wie hier im Beispiel “Shop” in “Alles shoppen”. Hierfür musst du auf das Zahnrädchen neben der Seite klicken, dann öffnet sich ein Fenster, in welchem du verschiedene Einstellungen - wie Seitentitel, Navigationstitel, URL und Co. - anpassen kannst.
#5 Unterseiten hinzufügen
So jetzt brauchst du ja noch deine Unterseiten für dein Dropdown-Menü. 😉
Du kannst dann entweder neue Seiten erstellen (wenn du hierfür noch keine hast) oder wenn du schon einzelne Kategorieseiten (oder in deinem Fall dann Produktseiten et cetera hast), dann kannst du die Seiten, die unter “nicht verlinkt” sind, nach oben schieben.
So sieht das dann zum Beispiel aus:
#6 Ebenen der Navigation
Was ich auch oft gefragt werde, ist, ob es auch ein drittes Level gibt. Also man noch eine Ebene tiefer im Dropdown hinzufügen kann.
Und nein, das gibt es nicht. Es gibt nur zwei Navigationshierarchien. Und selbst wenn dies ginge, würde ich das absolut NICHT empfehlen. Das checken die Leute dann überhaupt nicht, weil es einfach zu unübersichtlich ist. Die zweite Sache ist, dass dies in der mobilen Ansicht nicht gut klappen beziehungsweise aussehen würde. 👀
#7 Dropdown-Menü in der mobilen Ansicht
Für die mobile Ansicht musst du an sich nichts weiter tun. Das Dropdown-Menü wird automatisch übernommen. Hier sieht es dann so aus:
Neben dem Oberpunkt “Kategorie” ist nun ein Pfeil. Das bedeutet, wenn man auf Kategorien draufklickt, dann kommt man auf dieses Submenü. (Und wenn du jetzt hier noch eine Ebene mehr, wäre das echt nicht nice und übersichtlich 😉)
#8 Hauptseite öffnen: Geht das?!
Eine weitere Frage, die ich oft gestellt bekomme, ist: Wie kann ich es machen, dass ich auch auf die Hauptseite klicken kann und nicht nur auf das Submenü?
Ehrlich gesat: Gar nicht. 👀
Der Grund, warum es nicht klappt, ist, weil heute die allermeisten Seiten mobil angeguckt werden. Und wenn man mobil auf die Oberkategorie klickt, öffnet sich das Submenü, weil die Leute ja eben auch diese Seiten sehen und auf diese klicken sollen.
Meine Empfehlung ist, wenn du eine Seite willst, wo alle Kategorien mit dabei sind, dass du eine neue Seite einfügst. Du erstellst also eine neue Seite als Übersichtsseite, auf der dann alle Kategorien (Produkte, Services und Co.) genannt und abgebildet sind.
Diese Übersichtsseite fügst du dann als erste Unterseite im Dropdown-Menü mit ein.
Und das sieht dann mobil genauso aus:
Diese Variante ist auch mega, wenn du zum Beispiel Online-Kurse verkaufst, für jeden Kurs eine Seite willst und dann nochmal eine Seite hast, wo alle Kurse drauf sind (oder bei Services und Co.).
#9 Menü bearbeiten
Jetzt kannst du dein Menü noch designen, deine Corporate Design Farben auswählen und so weiter.
Wie das genau geht, zeige ich dir hier. 👇
Du kannst auch statt der Begriffe in der Navigation Buttons verwenden. Diese findest du, wenn du bei deiner Seite auf “Bearbeiten” klickst, dann mit der Maus über das Menü fährst und auf “Website Header bearbeiten” klickst.
Jetzt musst du auf “+ Elemente hinzufügen” klicken.
Nun erscheinen die verschiedenen Elemente beziehungsweise Buttons. Diese kannst du einblenden oder ausblenden. 😉
Extra-Tipps
#1 So organisierst du Seiten intern
Hier ein Extra-Tipp, was wir in unserer Agentur für unsere Kunden immer machen. 👇
Normalerweise ist es so, dass eine Website nicht so super simpel ist, wie in diesem Beispiel. Das hier ist schon eine sehr sehr kleine Website. “In echt” haben die meisten zig mehr Seiten. Und wenn das auch auf dich zutrifft, dann würde ich dir empfehlen, dass du auch deine Seiten unter “nicht verlinkt” sortierst. Vielleicht hast du hier 10, 20, 30 oder teilweise auch 80 Seiten.
Um deine Seiten also zu sortieren, kannst du auch hier mit Dropdown-Menüs arbeiten.
Das erste, was ich hier mache, ist die Oberkategorie “rechtliche Seiten” anlegen - rechtliche Seiten hat ja jede Website. Hier legst du dann dein Impressum, AGB usw. rein.
Und keine Angst, niemand wird dieses Dropdown jemals sehen (solange es unter “Nicht verlinkt” bleibt 😉).
Wenn du die Texte für deine ganzen rechtlichen Seiten brauchst, dann kann ich dir dir diese hier empfehlen: Datenschutzerklärung & Impressum für Squarespace: Woher bekommen?!
Und das Coole ist, du kannst dieses Dropdown zusammenklappen, was mega übersichtlich ist, wenn du viele Seiten hast.
Jetzt hast du eine Möglichkeiten, um intern deine eigenen Seiten für dich sortieren. Und das kannst du natürlich auch bei Leadmagnet-Seiten oder Anmeldeseiten oder oder oder machen.
👉 Apropos Funktionen kennen, wenn du jemand bist, der Squarespace mal so richtig kennen möchte mit allen Funktionen plus Support und Ansprechpartner haben möchte, dann schau dir mal Website mit Plan an. Das ist mein Online-Kurs für Leute, die Squarespace wirklich komplett lernen wollen.
👉 Oder falls du sowas für Kunden machst, dann ist mein Tipp, dir das Webdesigner Wunderland anzugucken. Dieser Online-Kurs ist mega, wenn du dir dein eigenes Webdesign-Business aufbauen möchtest. Hier lernst du, wie du Kunden bekommst, mit ihnen umgehst, Projekte planst und Co.
#2 Behalte unbedingt deine Archivseiten!!!
In der Agentur haben wir oft das Problem, dass manche Leute einfach Seiten löschen, weil sie nicht so viele tausend Seiten drin haben wollen. Aber hinterher wollen sie die dann doch gerne wieder beziehungsweise sie wollen die Inhalte dieser Seiten.
Daher mein Tipp. 👇
Leg dir hier ein Dropdown als “Archiv” unter “Nicht verlinkt” an. Hier kannst du dann die Seiten hinschieben, die du aktuell nicht mehr brauchst, aber für alle Fälle aufheben solltest.
Schieb das Menü nach ganz unten, damit es dich nicht stört, und dann schiebst du alte Seiten dahin. Damit alte Seiten nicht mehr abrufbar sind (zum Beispiel, wenn Leute die URL der Seite gespeichert haben), solltest du diese Seiten deaktivieren.
👉 Alte Seiten deaktivierst du, indem du auf das Zahnrädchen klickst, welches erscheint, wenn du über eine Seite fährst. Dann verschiebst du den Schieberegler unter “Seite aktivieren” auf grau und schon ist die Seite inaktiv.
Die deaktivierte Seite wird dann grau im Menü und ist für andere nicht mehr sichtbar.
❗Wichtig: Wenn du eine Seite deaktivierst, dann solltest du Weiterleitungen einrichten. Wie das geht, erfährst du auch in meinem Kurs Website mit Plan. Du solltest auch unbedingt mit Kopien arbeiten, bevor du etwas groß änderst. Sicher ist sicher. 😉
#3 Tue das bei einem Bug
Ein Bug (Programmfehler), der manchmal passiert, wenn du richtig viele Seiten hast und diese durch die Gegend schiebst, ist, dass die Seite nach ganz unten gelegt wird. Diese Seite ist dann nicht “weg”, auch wenn du sie nicht direkt wiederfindest.
Am besten du refresht deinen Browser. Danach kannst du sie dahin schieben, wohin du willst. Das Problem kommt leider manchmal auf. Und ich empfehle dir, mit Chrome zu arbeiten. Dieser Browser kann im Gegensatz zu anderen das Volume am besten tragen.
👉 Ständig frische Tipps für dein Webdesign-Business? Abonniere jetzt meinen Youtube-Kanal mit laufend neuen Tutorials! 🎥
Dann viel Spaß und Erfolg mit deiner neuen und übersichtlichen Navigation! 💻
Fragen? Stell sie gerne in den Kommentaren.
Diese Artikel könnten für dich auch interessant sein:
Squarespace-Website optimieren: 11 schnell umzusetzende Tipps
Testbericht: Was du mit Squarespace alles machen kannst (und was nicht!)
Die wichtigsten SEO-Einstellungen für deine Squarespace-Website
Farben, Abstände, Boom! 11 hilfreiche CSS-Einstellungen für deine Squarespace-Website
9 tolle Squarespace-Websites zur Inspiration (Hochzeitsbranche)
Strategisch planen: Warum du Ziele für deine Website brauchst
3 schnelle, aber extrem wirkungsvolle Tipps für deine Website
