Seiteninhalt

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zu Einstellungen für den Abschnitts-Innenabstand
3. Company XYZ-Dokumentation zu Einstellungen für Abschnittshintergründe
4. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
5. Company XYZ-Dokumentation zu Einstellungen für Layout-Breiten

Hilfreiche Videos

Shopify Academy-Video: Ihren Store anpassen

Shopify Academy-Video: Ihren Store anpassen

Verwenden Sie diesen Abschnitt, um den Hauptinhalt einer Seite anzuzeigen und zu steuern, wie er innerhalb des Layouts dargestellt wird. Er eignet sich besonders für textlastige Seiten, bei denen Lesbarkeit, Abstände und visuelle Hierarchie wichtig sind.

Grundeinstellungen

Die wichtigste Entscheidung ist, ob der Seitentitel in diesem Abschnitt angezeigt werden soll. Einen umfassenderen Überblick darüber, wie Seiteninhalt in ein Theme-Layout passt, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken. Wenn Sie diese Option aktiviert lassen, bleibt die Seitenüberschrift schlicht und konsistent; wenn Sie sie deaktivieren, haben Sie mehr Freiheit, die Seite mit einem anderen Abschnitt oder einem benutzerdefinierten Überschrift-Layout einzuleiten.

Wenn Sie Titel anzeigen deaktivieren, fügen Sie an anderer Stelle auf der Seite eine H1-Überschrift hinzu, damit der Inhalt weiterhin eine klare Überschrift auf oberster Ebene hat.

Dieser Abschnitt eignet sich am besten, um gut strukturierten Seiteninhalt darzustellen, nicht um die Inhaltsformatierung zu ersetzen. Klare Überschriften, Absätze und Listen im Seiteninhalt machen den Abschnitt unabhängig von den gewählten Layout-Einstellungen leichter lesbar.

Farbeinstellungen

Verwenden Sie diese Einstellungen, um die standardmäßige Textfarbe nur für diesen Abschnitt zu überschreiben. Das ist besonders nützlich, wenn der Seiteninhalt auf einem benutzerdefinierten Hintergrund liegt oder wenn Sie einen stärkeren Kontrast benötigen, als die globalen Theme-Farben bieten.

Prüfen Sie vor der Veröffentlichung längere Absätze, Links und Überschriften gemeinsam. Eine Textfarbe, die bei kurzen Inhalten gut aussieht, kann auf längeren Seiten zu wenig Kontrast haben oder anstrengend zu lesen sein.

Standard-Abschnittseinstellungen

Padding-Einstellungen

Verwenden Sie die gemeinsamen Padding-Einstellungen, um den Abstand oberhalb und unterhalb des Inhalts zu steuern. Getrennte Werte für Desktop und Mobile erleichtern es, den Abschnitt auf größeren Bildschirmen großzügig zu halten, ohne kleinere Bildschirme zu locker wirken zu lassen.

Für Langform-Inhalte wirkt ein moderater Abstand meist am besten. Erhöhen Sie das Padding, wenn sich dieser Abschnitt von den umliegenden Abschnitten abheben soll, und verringern Sie es, wenn die Seite als zusammenhängender Fluss gelesen werden soll.

Abschnittshintergrund-Einstellungen

Verwenden Sie die gemeinsamen Abschnittshintergrund-Einstellungen, um eine Farbe, einen Verlauf, ein Bild oder ein Video hinter dem Inhalt hinzuzufügen. Diese Einstellungen können einer schlichten Seite einen stärker gebrandeten oder redaktionellen Look verleihen, haben aber auch den größten Einfluss auf die Lesbarkeit.

Verlaufseinstellungen überschreiben flache Farbeinstellungen, und Overlay-Verläufe überschreiben Overlay-Farben. Sie können auch medienbezogene Hintergründe für Mobile bereitstellen, wenn die Desktop-Version auf kleineren Bildschirmen nicht gut zugeschnitten ist.

Achtung

Dekorative Hintergründe können den Seitentext schwerer lesbar machen. Prüfen Sie den Fließtext, die Überschriften und Links immer zusammen mit der finalen Kombination aus Hintergrund und Overlay.

Trennlinien-Einstellungen

Verwenden Sie die gemeinsamen Trennlinien-Einstellungen, um oberhalb oder unterhalb des Abschnitts eine Linie hinzuzufügen. Das ist eine einfache Möglichkeit, Seiteninhalt von benachbarten Abschnitten zu trennen, ohne auf große Änderungen bei den Abständen oder eine vollständige Hintergrundgestaltung angewiesen zu sein.

Wenn Sie die Farbe der Trennlinie transparent lassen, verwendet der Abschnitt die Rahmenfarbe des Themes. Das ist in der Regel die einfachste Wahl, wenn Sie eine dezente Trennung möchten, die auf der Seite visuell konsistent bleibt.

Breiten-Einstellungen

Verwenden Sie die gemeinsamen Breiten-Einstellungen, um die Inhaltsbreite und die äußere Abschnittsbreite zu steuern. Für diesen Abschnitt ist die Inhaltsbreite meist am wichtigsten, da sie die Zeilenlänge und den Lesekomfort direkt beeinflusst.

Schmalere Inhaltsbreiten eignen sich oft besser für Richtlinienseiten, Story-Seiten und andere textlastige Layouts. Die Abschnittsbreite fällt stärker auf, wenn Sie einen Hintergrund hinzufügen, da sich dadurch verändert, wie weit dieser Hintergrund über die Textspalte hinaus reicht.

Hinweis

Breitenänderungen können im Editor anders aussehen als auf der Live-Seite. Prüfen Sie daher das Frontend, bevor Sie Ihr Layout finalisieren.

Nutzungshinweise

1. Halten Sie die Seitenüberschrift klar. Verwenden Sie den integrierten Titel, sofern nicht bereits ein anderer Abschnitt eine klare H1 bereitstellt.
2. Optimieren Sie für das Lesen. Wählen Sie eine Inhaltsbreite und Textfarbe, die lange Absätze angenehm lesbar machen.
3. Setzen Sie Hintergründe gezielt ein. Fügen Sie Hintergrundmedien nur hinzu, wenn sie die Seite unterstützen, ohne mit dem Inhalt zu konkurrieren.
4. Passen Sie die Abstände an den Seitenzweck an. Geben Sie redaktionellen Seiten mehr Luft und halten Sie Hilfeseiten kompakter, damit sie schneller erfasst werden können.
5. Prüfen Sie die Darstellung auf Mobilgeräten. Überprüfen Sie Abstände, Breite und Hintergrundverhalten auf kleineren Bildschirmen vor der Veröffentlichung.
6. Vergleichen Sie beide Ansichten. Desktop- und Mobile-Einstellungen können unterschiedliche Ausrichtung, Sichtbarkeit und Medienverhalten erzeugen. Prüfen Sie den Abschnitt daher in beiden Größen, bevor Sie ihn finalisieren.
7. Behandeln Sie Überschreibungen bewusst. Leere oder transparente Werte behalten in der Regel die Fallback-Gestaltung des Themes bei, während explizite Farben, Verläufe oder Medienentscheidungen diesen Abschnitt eigenständiger machen.
8. Prüfen Sie konfigurierte Medien sorgfältig. Wenn Desktop- und Mobile-Medien getrennt festgelegt sind, bestätigen Sie, dass Zuschnitt, Laden, Fallback-Verhalten und Lesbarkeit des Textes in beiden Versionen weiterhin gut funktionieren.