Erfolgreich
Layout-Einstellungen
Steuern Sie die globalen Breiten und den Eckenstil Ihres Shops für ein übersichtlicheres, konsistenteres Layout.
Diese Einstellungen steuern die grundlegende Struktur Ihres Storefronts, einschließlich der maximalen Breite von Inhaltsbereichen, der Ausdehnung von Abschnittshintergründen und des Rundungsgrads vieler Benutzeroberflächenelemente. Da sie sich global auf das Theme auswirken, sollten Sie sie am besten verwenden, um eine klare Designrichtung festzulegen, bevor Sie einzelne Abschnitte im Theme-Editor fein abstimmen.
Alle Abschnitte können weiterhin eigene Breiten-Einstellungen anbieten. Betrachten Sie diese Einstellungsgruppe daher als Grundlage für Ihr Standard-Layout. Weitere Hinweise finden Sie auch in der zugehörigen Referenz zu Layout.
Zentrale Layout-Steuerelemente
Abschnitt betitelt „Zentrale Layout-Steuerelemente“Eckenradius
Abschnitt betitelt „Eckenradius“Der Eckenradius fügt den meisten Frontend-Elementen abgerundete Ecken hinzu. Niedrigere Werte erzeugen ein schärferes, klareres Erscheinungsbild, während höhere Werte das Storefront weicher und ausdrucksstärker wirken lassen.
Verwenden Sie diese Einstellung als Teil Ihres gesamten Markenstils und nicht nur als dekorative Anpassung. Das beste Ergebnis erzielen Sie meist, wenn Sie einen Radius wählen, der bei Schaltflächen, Karten, Eingabefeldern und Medienrahmen natürlich wirkt.
Inhaltsbreite
Abschnitt betitelt „Inhaltsbreite“Die Inhaltsbreite legt die wichtigste maximale Breite für Theme-Inhalte auf größeren Bildschirmen fest. Dies ist die zentrale Layout-Einstellung und hat den größten Einfluss darauf, wie großzügig oder fokussiert Ihre Seiten wirken.
Eine geringere Breite kann die Lesbarkeit verbessern und für eine eher redaktionelle Wirkung sorgen. Eine größere Breite gibt Produktgittern, Bildabschnitten und Werbeinhalten mehr Raum. Sehr breite Layouts können jedoch dazu führen, dass textlastige Bereiche schwerer zu erfassen sind.
Im Editor können Änderungen der Breite stärker eingeschränkt wirken, als sie im tatsächlichen Storefront sind. Überprüfen Sie nach Layoutänderungen die Live-Vorschau, insbesondere auf Desktop-Geräten.
Abschnittsbreite
Abschnitt betitelt „Abschnittsbreite“Die Abschnittsbreite wirkt sich hauptsächlich auf Abschnitte mit Hintergrund aus. Sie steuert, ob diese Hintergründe an der Breite des Hauptinhalts ausgerichtet bleiben oder sich für eine eindringlichere Darstellung weiter ausdehnen.
Wenn Abschnittshintergründe am Inhalt ausgerichtet bleiben, entsteht ein aufgeräumter, konsistenter Rahmen. Breitere Hintergrundgestaltungen können dazu beitragen, dass hervorgehobene Werbeaktionen oder bildorientierte Abschnitte stärker auffallen. Werden sie jedoch zu häufig verwendet, kann die Seite weniger strukturiert wirken. Wenn Sie einen Hintergrund im Standardzustand oder transparent lassen, übernimmt er in der Regel die umgebende Fallback-Gestaltung. Eine Volltonfarbe, ein Farbverlauf oder ein medienbasierter Hintergrund lässt diesen Bereich unabhängiger vom Rest der Seite wirken.
Zusammenspiel dieser Einstellungen
Abschnitt betitelt „Zusammenspiel dieser Einstellungen“Diese Steuerelemente funktionieren am besten als ein zusammenhängendes System. Die Inhaltsbreite definiert den Hauptrahmen für Lesen und Stöbern, die Abschnittsbreite bestimmt, wie sich Hintergrundbereiche zu diesem Rahmen verhalten, und der Eckenradius legt den Charakter der Benutzeroberfläche fest. Einen umfassenderen Überblick über die Organisation der Theme-Bereiche finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken
Eine begrenzte Inhaltsbreite in Kombination mit gelegentlich breiteren Hintergründen erzeugt häufig ein ausgewogenes Layout, das dennoch dynamisch wirkt. Wenn Sie eine großzügigere Darstellung bevorzugen, stellen Sie sicher, dass Ihre Bilder, Abstände und Textlängen diese zusätzliche Größe unterstützen können.
Nutzungshinweise
Abschnitt betitelt „Nutzungshinweise“- Legen Sie zuerst den globalen Rahmen fest. Wählen Sie die Richtung für die Gesamtbreite, bevor Sie einzelne Abschnitte anpassen, damit das Theme visuell konsistent bleibt.
- Sehen Sie sich die Vorschau im Storefront an. Überprüfen Sie Layoutänderungen außerhalb des Editors, um Abstände und Breite genauer beurteilen zu können.
- Sorgen Sie für gute Lesbarkeit. Vermeiden Sie sehr breite Inhaltslayouts, wenn Ihre Seiten stark auf lange Überschriften, Rich Text oder detaillierte Produktinformationen setzen.
- Setzen Sie breite Hintergründe gezielt ein. Verwenden Sie breitere Abschnittsgestaltungen für Bereiche, die von zusätzlicher visueller Hervorhebung profitieren. Behalten Sie Standard- oder transparente Hintergründe bei, wenn der Abschnitt in das umgebende Layout übergehen soll.
- Sorgen Sie für ein stimmiges Design. Wählen Sie einen Eckenradius, der zu Ihrer Marke passt, damit häufig verwendete Benutzeroberflächenelemente einheitlich wirken.