Abstandseinstellungen für Abschnitte

Ausgewählte Links

1. Company XYZ-Dokumentation zu Einstellungen für den Innenabstand von Abschnitten
2. Shopify-Dokumentation zu Abschnitten und Blöcken
3. Shopify-Dokumentation zum Theme-Editor

Hilfreiche Videos

Shopify Academy-Video: Ihren Store anpassen

Shopify Academy-Video: Ihren Store anpassen

Verwenden Sie diese Einstellungen, um den Abstand ober- und unterhalb des Inhalts eines Abschnitts zu steuern. Sie helfen Ihnen dabei, ein Gefühl dafür zu verfeinern, wie offen, kompakt oder verbunden die einzelnen Bereiche einer Seite über verschiedene Bildschirmgrößen hinweg wirken. Einen umfassenderen Überblick über abschnittsbasierte Layouts finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Padding-Einstellungen

Diese Gruppe bietet separate Steuerungen für den oberen und unteren Innenabstand auf Desktop und Mobilgeräten. So lässt sich leichter ein gleichmäßiger vertikaler Rhythmus erstellen, ohne auf jedem Gerät denselben Abstand erzwingen zu müssen.

Auf größeren Bildschirmen hat Innenabstand einen starken Einfluss darauf, wie ausgereift und großzügig ein Layout wirkt. Mehr Abstand kann dazu beitragen, dass hervorgehobene Inhalte stärker auffallen, während engere Abstände produkt- oder informationslastige Seiten effizienter wirken lassen können.

Auf kleineren Bildschirmen muss der Abstand oft reduziert werden. Ein Wert, der auf dem Desktop ausgewogen wirkt, kann auf Mobilgeräten zu groß erscheinen, besonders im oberen Bereich einer Seite, wo zusätzlicher Innenabstand wichtige Inhalte weiter nach unten schiebt.

Weitere Hinweise zur Funktionsweise dieser Steuerungen finden Sie unter Abstandseinstellungen für Abschnitte oder in der Shopify-Dokumentation zum Theme-Editor

Tipp

Passen Sie den Innenabstand an, während Sie die Abschnitte oberhalb und unterhalb des Abschnitts anzeigen, den Sie bearbeiten. Abstandsentscheidungen lassen sich im Kontext leichter beurteilen als an einem einzelnen Abschnitt für sich allein.

Oberen und unteren Abstand ausgleichen

Oberer und unterer Innenabstand müssen nicht übereinstimmen. Unterschiedliche Werte können flüssigere Übergänge zwischen Inhaltsbereichen schaffen und dazu beitragen, dass ein Abschnitt natürlicher mit dem zuvor oder danach kommenden Inhalt verbunden wirkt.

Zum Beispiel kann zusätzlicher oberer Innenabstand einem neuen Inhaltsbereich mehr Präsenz verleihen, während ein reduzierter unterer Innenabstand den nächsten Bereich optisch näher heranzieht. Das ist besonders nützlich, wenn Banner, Textabschnitte, Kollektionen oder bildorientierte Inhalte kombiniert werden.

Wenn zwei benachbarte Abschnitte beide großzügigen Innenabstand verwenden, kann die Lücke zwischen ihnen viel größer wirken als erwartet. Wenn der Abstand zu locker wirkt, reduzieren Sie zuerst eine Seite, bevor Sie beide Abschnitte ändern.

Strategie für Abstände auf Desktop und Mobilgeräten

Separate Steuerungen für Desktop und Mobilgeräte ermöglichen es Ihnen, auf größeren Bildschirmen ein großzügiges Layout beizubehalten und gleichzeitig kleinere Bildschirme übersichtlicher zu gestalten. In den meisten Fällen ist es am besten, zuerst die Abstände für den Desktop festzulegen und dann die Mobilwerte nur dort zu verfeinern, wo das Layout zu hoch oder zu gedrängt wirkt.

Innenabstand von null kann nützlich sein, wenn benachbarte Bereiche visuell verbunden wirken sollen. Gehen Sie dabei jedoch vorsichtig vor, denn zu viel Abstand zu entfernen kann Inhalte gedrängt wirken lassen oder den Kontrast zwischen unterschiedlichen Inhaltstypen verringern.

Nutzungshinweise

1. Passen Sie den Abstand an den Inhalt an. Verwenden Sie größeren Innenabstand für hervorgehobene Inhalte und kleineren Innenabstand für dichtere, aufgabenorientierte Bereiche.
2. Prüfen Sie Abschnitte gemeinsam. Überprüfen Sie den Abstand zusammen mit benachbarten Inhalten, damit die gesamte Seite ausgewogen statt unausgeglichen wirkt.
3. Optimieren Sie Mobilgeräte unabhängig. Reduzieren Sie den Innenabstand auf Mobilgeräten, wenn Inhalte zu weit nach unten rutschen oder die Seite übermäßig gestreckt wirkt.
4. Nutzen Sie ungleiche Abstände bewusst. Unterschiedliche Werte für oben und unten können bessere Übergänge schaffen als perfekt abgestimmte Abstände.
5. Achten Sie auf gestapelte Lücken. Großer Innenabstand in benachbarten Abschnitten kann unnötigen Leerraum erzeugen, selbst wenn jeder Abschnitt für sich gut aussieht.
6. Prüfen Sie beide Ansichtsgrößen. Abstände auf Desktop und Mobilgeräten können sich deutlich unterscheiden. Prüfen Sie daher den Abschnitt vor dem Abschluss in beiden Größen.