Seitenbreite festlegen

Die Seitenbreite bestimmt, wie viel Raum Inhalte im Frontend bekommen und wie stark Hintergrund, Header und Startseitenbloecke wirken. Diese Anleitung hilft bei der Wahl zwischen normaler, breiter und voller Darstellung.

Ziel

Die Breite soll zum Sortiment, zur Bildwelt und zur Bedienung passen. Eine breite Darstellung wirkt modern und grosszuegig, kann aber lange Texte, Tabellen und Navigation schwerer lesbar machen.

• Breitenentscheidung passend zum Shoptyp treffen.
• Auswirkungen auf Startseite, Produktlisten, Produktdetailseiten und Warenkorb pruefen.
• Hintergrundbild, Logo und Header-Menue im Zusammenhang bewerten.
• Desktop und mobile Ansicht getrennt kontrollieren.

Wann diese Anleitung passt

• Ein neuer Shop wird eingerichtet und braucht eine erste Layoutbasis.
• Die Startseite soll grosszuegiger oder ruhiger wirken.
• Produktlisten, Tabellen oder lange Texte wirken zu breit oder zu eng.
• Nach Logo-, Farb- oder Hintergrundwechsel soll die Gesamtwirkung geprueft werden.

Was im Hintergrund passiert

Der Einrichtungs-Assistent setzt fuer die Layoutbreite zwei Themeparameter. Normale Breite setzt beide Werte aus. Breiter aktiviert den aeusseren Rahmen. Volle Breite aktiviert zusaetzlich den inneren Inhaltscontainer.

• Normale Breite: Der Inhalt bleibt klassisch begrenzt.
• Breiter: Der Shoprahmen nutzt mehr Flaeche, der Inhalt bleibt kontrollierter.
• Volle Breite: Auch Inhaltsbereiche koennen die verfuegbare Breite staerker nutzen.

Entscheidungshilfe

• Normale Breite passt, wenn Lesbarkeit, B2B-Daten, Tabellen, lange Produkttexte oder ruhige Orientierung wichtiger sind als maximale Flaeche.
• Breiter passt, wenn der Shop moderner wirken soll, aber Produktinformationen weiterhin klar gefuehrt werden sollen.
• Volle Breite passt, wenn starke Bilder, grosse Banner, Markenwelten oder sehr visuelle Startseiten im Mittelpunkt stehen.
• Zurueckhaltende Breite passt, wenn viele Sidebar-Elemente, Filter oder lange Menues genutzt werden.

Ablauf

1. Aktives Theme pruefen, damit die Aenderung an der richtigen Gestaltung erfolgt.
2. Mit normaler Breite starten, wenn noch keine klare Designentscheidung vorliegt.
3. Breitere Darstellung testen und Frontend neu laden.
4. Startseite, Produktliste, Produktdetailseite, Warenkorb und Inhaltsseiten vergleichen.
5. Volle Breite nur aktiv lassen, wenn Bilder, Header, Menue und Inhaltsbloecke stabil wirken.
6. Mobile Ansicht separat pruefen, auch wenn die Desktopbreite gut aussieht.

Pruefen

• Bleiben Texte in angenehmer Zeilenlaenge lesbar.
• Wirken Produktlisten mit mehreren Spalten ruhig.
• Passt der Header mit Logo, Suche, Warenkorb und Menue in die Breite.
• Stoeren Hintergrundbild oder grosse Banner die Inhaltsfuehrung.
• Bleiben Warenkorb, Kasse und Formulare klar bedienbar.
• Funktionieren Startseitenbloecke mit und ohne volle Breite.

Stolperfallen

• Volle Breite kann Produktdaten auseinanderziehen und dadurch schlechter lesbar machen.
• Sehr breite Startseitenbilder koennen beeindrucken, aber wichtige Einstiege nach unten schieben.
• Eine Breite, die am grossen Monitor gut wirkt, kann auf Tablet oder kleinem Laptop anders aussehen.
• Sidebar-Ansichten, Filter und Menuebloecke brauchen oft mehr Struktur als reine Bildseiten.
• Breite nicht isoliert bewerten. Logo, Farb-Schema, Hintergrundbild und Startseite gehoeren dazu.

Verwandte Bereiche

• Farb-Schema auswaehlen: Breite und Farbwirkung beeinflussen sich gegenseitig.
• Logo aendern: Der Header braucht je nach Breite andere Balance.
• Hintergrund Bild aendern: Je breiter der Shop wirkt, desto wichtiger wird die Hintergrundkontrolle.
• Startseite sinnvoll gestalten: Startseitenzeilen koennen eigene Breitenwirkung haben.
• Mobile Ansicht pruefen: Nach jeder Breitenentscheidung notwendig.