Sidebar-Ansichten planen

Sidebar-Ansichten ergaenzen Header-Menue, Startseite und Produktlisten mit kontextnaher Navigation. Diese Anleitung hilft dabei, seitliche Bereiche fuer Contentseiten, Kategorien, Produktlisten, Checkout und Servicebereiche bewusst zu planen, statt ueberall dieselben Bloecke anzuzeigen.

Ziel

Eine Sidebar soll Orientierung geben, ohne vom eigentlichen Seitenziel abzulenken. Gute Sidebar-Ansichten zeigen nur Bloecke, die zur aktuellen Seite passen.

  • Contentseiten erhalten passende Informations- oder Service-Navigation.
  • Produktlisten behalten Filter, Kategorien oder Hersteller gut erreichbar.
  • Checkout und Konto bleiben schlank und ohne stoerende Verkaufsbloecke.
  • Startseite und Landingpages koennen bewusst breiter und freier wirken.

Wann diese Anleitung passt

  • Ein Shop nutzt viele Contentseiten und braucht eine klare Seiten-Navigation.
  • Produktlisten sollen Filter, Kategorien oder Hersteller sauber anzeigen.
  • Checkout, Konto oder Servicebereiche sollen weniger Ablenkung enthalten.
  • Ein neues Theme bekommt eigene Sidebar-Ansichten.
  • Bestehende Sidebars wirken voll, doppelt oder unpassend.

Du brauchst

  • einen aktiven Frontend-Theme-Kontext
  • fertige oder geplante Contentseiten mit sinnvoller Eltern-Unterseiten-Struktur
  • eine Entscheidung, welche Bereiche linke oder rechte Sidebar bekommen sollen
  • eine Liste der Bloecke, die wirklich Navigation oder Entscheidungshilfe liefern

Grundprinzip

Sidebar-Ansichten bestehen aus zwei Ebenen: einer Ansicht und den darin platzierten Menuebloecken. Eine Ansicht kann Seiten zugeordnet werden. Innerhalb der Ansicht werden Bloecke links, rechts oder nicht sichtbar platziert.

  • Ansicht: beschreibt eine Sidebar-Konfiguration fuer einen Bereich oder Seitentyp.
  • Zuordnung: verbindet eine Seite oder einen Bereich mit der passenden Ansicht.
  • Bloecke: liefern konkrete Inhalte wie Kategorien, Filter, Suche, Login, Warenkorb, Informationen, Linklisten, Newsletter, Hersteller oder Produktboxen.
  • Position: legt fest, ob ein Block links, rechts oder gar nicht angezeigt wird.
Eine Sidebar ist am staerksten, wenn der Kontext klar ist. Eine Produktliste braucht andere Bloecke als eine Ratgeberseite oder der Checkout.

Entscheidungshilfe

Starte mit wenigen Ansichten und erweitere erst, wenn echte Unterschiede entstehen.

  • Standard-Ansicht: Basis fuer normale Seiten ohne Spezialbedarf.
  • Content-Ansicht: fuer Ratgeber, Service, Hilfeseiten und Unterseiten-Strukturen.
  • Produktlisten-Ansicht: fuer Kategorien, Filter, Hersteller und sortimentsnahe Orientierung.
  • Checkout-Ansicht: moeglichst reduziert, damit der Kaufabschluss im Mittelpunkt bleibt.
  • Konto- oder Kundenbereich: mit Login, Kundenmenue oder Service-Links statt Verkaufsflaeche.
  • Landingpage ohne Sidebar: sinnvoll fuer Kampagnen, Startseiten-nahe Einstiege oder starke Markenwelten.

Ansichten planen

  1. Liste die wichtigsten Seitentypen auf: Startseite, Content, Produktliste, Produktdetail, Checkout, Konto, Hersteller, Merklisten.
  2. Notiere pro Seitentyp das Hauptziel: informieren, filtern, kaufen, vergleichen, anmelden oder abschliessen.
  3. Entscheide, ob eine linke Sidebar, rechte Sidebar, beide Seiten oder keine Sidebar den Prozess unterstuetzen.
  4. Lege nur dann eine neue Ansicht an, wenn ein Bereich andere Bloecke oder eine andere Reihenfolge braucht.
  5. Nutze klare Namen wie Content Service, Produktliste Filter, Checkout reduziert oder Konto Navigation.

Bloecke bewusst auswaehlen

Die verfuegbaren Menuebloecke decken Navigation, Suche, Konto, Warenkorb, Sprache, Waerung, Newsletter, Vertrauen, Hersteller, Kategorien, Contentseiten, Linklisten, Freitext und Produktpraesentationen ab. Nicht jeder Block gehoert in jeden Bereich.

  • Kategorien: stark fuer Produktlisten und Sortimentsbereiche.
  • Filter: stark fuer Produktlisten, aber meist unpassend auf reinen Contentseiten.
  • Hersteller: sinnvoll bei markengetriebenem Sortiment.
  • Information und Contentseite: sinnvoll fuer Service, Ratgeber und Hilfebereiche.
  • Login und Kundenaccount-Menue: passend fuer Konto- und Servicebereiche.
  • Warenkorb: vorsichtig einsetzen, besonders im Checkout nicht doppelt ablenken.
  • Suche: gut fuer informationsreiche Shops oder Ersatzteil-/Sortimentsnavigation.
  • Newsletter, Trusted Shops, Freitext: nur nutzen, wenn der Block an dieser Stelle Vertrauen oder Orientierung verbessert.
  • Neue Produkte, Angebote, Bestseller: eher fuer Entdeckung und Cross-Selling als fuer kritische Abschlussstrecken.

Contentseiten zuordnen

Contentseiten koennen in der Seitenpflege eine Sidebar-Ansicht erhalten und separat in der Sidebar sichtbar sein. Dadurch lassen sich Hilfeseiten, Ratgeber und Servicebereiche als kleine Navigationsraeume aufbauen.

  • Nutze Elternseiten und Unterseiten, wenn ein Themenbereich mehrere zusammenhaengende Seiten hat.
  • Aktiviere Sidebar-Sichtbarkeit nur fuer Seiten, die als Navigationseintrag hilfreich sind.
  • Pflege eine klare Sidebar-Reihenfolge, damit wichtige Seiten oben stehen.
  • Waehle eine passende Sidebar-Ansicht, wenn ein Contentbereich andere Bloecke braucht als der Standard.
  • Pruefe nach dem Speichern, ob Unterseiten und Menuepunkte im Frontend logisch wirken.

Links, rechts oder ausgeblendet

Die Blockposition entscheidet stark ueber Wahrnehmung und Gewichtung.

  • links: gut fuer primaere Navigation, Kategorien, Filter oder Inhaltsverzeichnisse.
  • rechts: gut fuer ergaenzende Hinweise, Vertrauen, Newsletter, kleine Produktboxen oder Servicekontakt.
  • ausgeblendet: gut fuer Bloecke, die in einer Ansicht stoeren oder nur in anderen Bereichen gebraucht werden.
  • beide Seiten: nur nutzen, wenn das Layout genuegend Raum hat und der Hauptinhalt nicht eingeengt wird.
Zu viele Sidebar-Bloecke wirken schnell wie Werbung neben dem eigentlichen Inhalt. Besser wenige starke Bloecke als viele halb passende Elemente.

Theme-Wechsel und Kopieren

Sidebar-Setups sind themebezogen. Beim Aufbau eines neuen Themes kann ein bestehendes Sidebar-Setup uebernommen werden. Dabei werden Ansichten, Seitenzuordnungen und Menuebloecke fuer das Zieltheme ersetzt.

  • Kopieren eignet sich, wenn ein neues Theme dieselbe Grundstruktur behalten soll.
  • Vor dem Kopieren sollte klar sein, dass bestehende Ziel-Einstellungen ueberschrieben werden duerfen.
  • Nach dem Kopieren muss jede wichtige Seitenart im neuen Theme kontrolliert werden.
  • Abweichungen im neuen Theme sollten bewusst angepasst und nicht zufaellig stehen gelassen werden.

Ablauf fuer eine neue Sidebar-Ansicht

  1. Lege das Ziel der Ansicht fest, zum Beispiel Produktliste mit Filter oder Contentbereich mit Unterseiten.
  2. Erstelle die Ansicht mit einem klaren Namen.
  3. Ordne die Ansicht dem passenden Seitentyp oder den passenden Contentseiten zu.
  4. Oeffne die Struktur der Ansicht und verschiebe nur die benoetigten Bloecke nach links oder rechts.
  5. Bearbeite konfigurierbare Bloecke, wenn ein Block eigene Inhalte oder Produktauswahl braucht.
  6. Speichere und pruefe die Darstellung im Frontend auf Desktop und Mobil.
  7. Entferne Bloecke, die keinen Beitrag zur Orientierung leisten.

Pruefliste vor Freigabe

  • Jede Ansicht hat einen klaren Zweck.
  • Seitenzuordnungen passen zum Seitentyp.
  • Contentseiten haben eine sinnvolle Eltern-Unterseiten-Struktur.
  • Sidebar-Reihenfolge passt zur erwarteten Nutzung.
  • Filter und Kategorien erscheinen nur dort, wo Produkte tatsaechlich gefiltert oder eingegrenzt werden.
  • Checkout und Konto sind nicht mit unnötigem Cross-Selling ueberladen.
  • Desktop und Mobil wurden separat geprueft.
  • Nach Theme-Wechsel oder Setup-Kopie wurden die wichtigsten Seitentypen erneut getestet.

Typische Stolperfallen

  • eine Ansicht fuer alles: Content, Produktliste und Checkout brauchen meist unterschiedliche Seitenelemente.
  • zu viele Bloecke: Hauptinhalt verliert Gewicht und wichtige Navigation wird schwerer sichtbar.
  • falsche Seitenzuordnung: eine gute Ansicht wirkt schlecht, wenn der falsche Bereich zugeordnet ist.
  • leere Content-Navigation: Sidebar zeigt nur dann Wert, wenn Unterseiten und Reihenfolge gepflegt sind.
  • Theme-Kopie ohne Kontrolle: uebernommene Setups koennen im neuen Layout anders wirken.

Verwandte Bereiche

  • Sidebar-Ansichten: Ansichten erstellen, Bloecke positionieren und Seiten zuordnen.
  • Seiten: Contentseiten, Unterseiten, Sidebar-Sichtbarkeit und Sidebar-Reihenfolge pflegen.
  • Header-Menue sinnvoll aufbauen: Hauptnavigation und Sidebar sauber voneinander abgrenzen.
  • Startseite sinnvoll gestalten: Startseite als freieren Einstieg statt als Sidebar-Ersatz nutzen.
  • Produktlisten: Filter, Kategorien und Produktpraesentation passend zur Sidebar planen.
  • Themes verwalten: Sidebar-Setups im Kontext des aktiven Frontend-Themes bewerten.

War diese Seite hilfreich?

Hilf uns, das Handbuch weiter zu verbessern. Wenn etwas fehlt oder unverständlich ist, kannst Du direkt einen kurzen Kommentar senden.