Erfolgreich
Layout-Breiten-Einstellungen
Passen Sie Inhalts- und Abschnittsbreite an, um Lesbarkeit, Abstände und visuelle Reichweite feinzujustieren.
Nutzen Sie diese Einstellungen, um zu steuern, wie breit ein Bereich insgesamt erscheint und wie weit sich sein Inhalt innerhalb dieses Bereichs ausdehnen kann. Sie sind hilfreich, wenn ein Teil der Seite besser lesbar, großzügiger oder visuell deutlicher abgesetzt wirken soll, ohne das übergeordnete Design zu verändern.
Breiten-Einstellungen
Abschnitt betitelt „Breiten-Einstellungen“Diese Gruppe umfasst eine Steuerung für den inneren Inhaltsbereich und eine für den äußeren Abschnitts-Wrapper. Zusammen bestimmen sie, wie Text, Bilder und Hintergründe die Seite ausfüllen.
Sie können außerdem die Company XYZ-Dokumentation zu Layout-Breiten-Einstellungen lesen, um weitere Beispiele dafür zu sehen, wie diese Breitenoptionen in der Praxis funktionieren.
Für einen umfassenderen Überblick darüber, wie diese Einstellungen in Ihr Storefront-Layout passen, sehen Sie die Shopify-Dokumentation zu Abschnitten und Blöcken
Inhaltsbreite
Abschnitt betitelt „Inhaltsbreite“Die Inhaltsbreite legt die maximale Breite des Materials innerhalb des Bereichs fest. Dies ist in der Regel die wichtigste Einstellung, da sie sich direkt auf den Lesekomfort, die Größe der Medien und darauf auswirkt, wie dicht oder offen das Layout wirkt.
Schmalere Breiten eignen sich oft am besten für textlastige Inhalte, da kürzere Zeilenlängen leichter zu erfassen sind. Breitere Breiten passen eher zu bildorientierten Layouts, Produktgittern und mehrspaltigen Inhalten, die mehr horizontalen Platz benötigen.
Wenn Sie die gemeinsame Theme-Einstellung beibehalten, bleibt der Bereich an den Rest der Seite angeglichen. Wenn Sie eine benutzerdefinierte Breite wählen, können Sie diesen Bereich bewusst enger oder großzügiger wirken lassen.
Die Inhaltsbreite passt sich weiterhin an kleinere Bildschirme an, sodass diese Wahl vor allem beeinflusst, wie das Layout auf größeren Viewports wirkt.
Abschnittsbreite
Abschnitt betitelt „Abschnittsbreite“Die Abschnittsbreite steuert den äußeren Wrapper um den Inhalt. Dies ist besonders wichtig, wenn der Bereich eine Hintergrundfarbe, ein Bild oder eine andere visuelle Gestaltung verwendet, die über den Inhalt selbst hinausreicht.
Ein Wrapper, der der Inhaltsbreite folgt, erzeugt ein begrenztes Erscheinungsbild. Breitere Wrapper-Optionen lassen den Bereich größer wirken und geben Hintergrundgestaltungen mehr Präsenz.
Leere, transparente oder standardmäßige Hintergrundwerte erhalten in der Regel die umgebende Theme-Gestaltung. Explizite Farben, Verläufe oder medienbasierte Hintergründe lassen den Bereich unabhängiger wirken und können ihn visuell von benachbarten Abschnitten absetzen.
Full-Width- und Full-bleed-Optionen sind besonders nützlich, wenn der äußere Bereich weiter über die Seite hinweg ausgedehnt werden soll. In der Praxis ist dies meist eine visuelle und keine auf das Lesen bezogene Entscheidung.
Prüfen Sie Inhaltsbreite und Abschnittsbreite gemeinsam, wenn Sie starke Hintergrundgestaltungen verwenden. Ein sehr breiter äußerer Bereich mit schmalem inneren Inhalt kann gewollt wirken, aber auch unausgewogen, wenn die Abstände zu knapp oder zu großzügig sind.
Gemeinsame oder benutzerdefinierte Breiten wählen
Abschnitt betitelt „Gemeinsame oder benutzerdefinierte Breiten wählen“Verwenden Sie die gemeinsame Theme-Einstellung, wenn Sie einen einheitlichen Seitenrhythmus über verschiedene Bereiche hinweg wünschen. Dies ist in der Regel die sicherste Wahl, um eine saubere Ausrichtung von einem Bereich zum nächsten beizubehalten.
Verwenden Sie benutzerdefinierte Breiten, wenn ein bestimmter Bereich eine andere Darstellung benötigt. Häufige Gründe sind eine bessere Lesbarkeit für längere Texte, mehr Platz für Medien oder ein Bereich, der hervorgehoben werden soll.
Änderungen genau in der Vorschau prüfen
Abschnitt betitelt „Änderungen genau in der Vorschau prüfen“Breitenänderungen können im Editor anders aussehen als auf der Live-Seite, insbesondere bei breiteren Layouts und randabdeckenden Designs. Prüfen Sie die Storefront-Ansicht, bevor Sie entscheiden, ob Abstand und Balance stimmig sind.
Für Details zur Arbeit im Editor sehen Sie die Shopify-Dokumentation zum Theme-Editor
Nutzungshinweise
Abschnitt betitelt „Nutzungshinweise“- Lesbarkeit priorisieren. Verwenden Sie schmalere Inhaltsbreiten für lange Texte, damit die Zeilenlängen angenehm zu lesen bleiben.
- Medien bei Bedarf mehr Raum geben. Wählen Sie breitere Inhaltsbreiten für bildlastige oder mehrspaltige Layouts, die mehr horizontalen Platz benötigen.
- Die äußere Breite für visuelle Wirkung nutzen. Ändern Sie die Abschnittsbreite, wenn Hintergründe oder randabdeckende Gestaltung auf der Seite stärker wirken sollen.
- Die Hintergrundgestaltung konsistent halten. Lassen Sie Hintergrundwerte leer oder auf dem Standard, wenn die umgebende Theme-Gestaltung fortbestehen soll; verwenden Sie explizite Farben, Verläufe oder Medien, wenn sich der Bereich abheben soll.
- Die Ausrichtung bewusst halten. Verwenden Sie die gemeinsame Theme-Einstellung, wenn Bereiche auf der gesamten Seite konsistent ausgerichtet sein sollen.
- Außerhalb des Editors in der Vorschau prüfen. Überprüfen Sie die Live-Seitenansicht, bevor Sie breite, Full-Width- oder Full-bleed-Layouts abschließen.