Blogbeitrag

Ausgewählte Links

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

Hilfreiche Videos

Video der Shopify Academy: Ihren Shop anpassen

Video der Shopify Academy: Ihren Shop anpassen

Dieser Abschnitt zeigt den vollständigen Artikel an und ermöglicht es Ihnen, die Darstellung auf der Seite fein abzustimmen. Für den umfassenderen Workflow im Theme-Editor siehe Shopify-Dokumentation zu Abschnitten und Blöcken. Außerdem enthält er eine optionale Produkt-Sniffer-Funktion, die Produktlinks im Artikel erkennt, passende Produkte in einer Seitenleiste anzeigt und für diese Links ein Inline-Hover-Verhalten für Produktkarten hinzufügt.

Grundeinstellungen

Verwenden Sie die Haupt-Einstellungen, um festzulegen, ob verknüpfte Produkte zusammen mit dem Artikel angezeigt werden sollen. Die Seitenleiste wird nur angezeigt, wenn die Produkterkennung aktiviert ist und der Artikel passende Produktlinks enthält.

Die Überschrift der Seitenleiste eignet sich am besten als kontextbezogene Bezeichnung statt als generischer Titel. Wenn Ihre Artikel bestimmten Formaten wie Kaufratgebern, Anleitungen oder Geschenkideen folgen, passen Sie die Überschrift so an, dass die Seitenleiste mit dem Inhalt verbunden wirkt.

Tipp

Wenn der Produktbereich hilfreich statt werblich wirken soll, verlinken Sie Produkte natürlich im Artikel an den Stellen, an denen sie den nächsten Schritt der Leserinnen und Leser unterstützen.

Farbeinstellungen

Diese abschnittsspezifische Farbsteuerung ermöglicht es Ihnen, die Textfarbe für den Artikelbereich zu überschreiben. Sie ist besonders nützlich, wenn Sie einen benutzerdefinierten Hintergrund hinzufügen oder einen anderen Kontrast als im restlichen Seiteninhalt benötigen.

Da dieser Abschnitt für längere Lektüre ausgelegt ist, sollten Sie Textfarben zuerst nach Lesekomfort auswählen. Dezente Markenfarben können für Akzente funktionieren, der Fließtext sollte jedoch im gesamten Artikel gut lesbar bleiben.

Prüfen Sie den Textkontrast nach Änderungen an den Farben, insbesondere wenn Sie auch Hintergrundbilder, Verläufe oder Overlays verwenden.

Standard-Abschnittseinstellungen

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb des Artikelinhalts. Verwenden Sie sie, um ein ruhigeres Leseerlebnis zu schaffen oder das Layout zu verdichten, wenn der Artikel zwischen anderen hervorgehobenen Abschnitten steht.

Die Abstände für Desktop und Mobilgeräte können getrennt angepasst werden. Das ist nützlich, wenn großzügige Desktop-Abstände auf kleineren Bildschirmen zu groß wirken.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, dem Artikel eine Farbe, einen Verlauf, ein Bild oder ein Video als Hintergrund hinzuzufügen. Diese Optionen können redaktionellen Seiten mehr Atmosphäre verleihen, sollten aber dennoch das angenehme Lesen unterstützen.

Overlay-Steuerelemente helfen dabei, die Lesbarkeit zu erhalten, wenn Sie Bild- oder Videohintergründe verwenden. Hintergrundmedien speziell für Mobilgeräte sind besonders nützlich, wenn Desktop-Grafiken schlecht beschnitten werden oder auf kleineren Bildschirmen zu überladen wirken.

Achtung

Starke Hintergrundmedien können Artikel schwerer lesbar oder optisch beengt wirken lassen. Prüfen Sie vor der Verwendung bild- oder videolastiger Darstellungen auf inhaltsorientierten Seiten sowohl die Desktop- als auch die Mobilansicht.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen oben oder unten im Abschnitt eine Linie hinzu. Verwenden Sie sie, wenn der Artikel eine klarere Abgrenzung zum umliegenden Inhalt benötigt.

Wenn Sie keine benutzerdefinierte Trennlinienfarbe möchten, können Sie sie transparent lassen, damit der Abschnitt auf die Rahmenfarbe des Themes zurückfällt. So bleibt die Abtrennung dezent und konsistent.

Breiten-Einstellungen

Breiten-Einstellungen steuern sowohl die maximale Breite des Artikelinhalts als auch die Breite des Abschnitts-Containers. Bei den meisten Artikeln hat die Inhaltsbreite den größten Einfluss auf die Lesbarkeit.

Schmalere Inhaltsbreiten sind in der Regel leichter für längere Texte zu erfassen, während breitere Layouts bei bildlastigen oder redaktionell gestalteten Beiträgen besser funktionieren können. Die Abschnittsbreite ist vor allem dann wichtig, wenn Sie zusätzlich einen Hintergrund verwenden und dieser über den Inhaltsbereich hinausreichen soll.

Nutzungshinweise

1. Schreiben Sie mit Produktlinks im Hinterkopf. Die Seitenleiste und das Inline-Produktverhalten hängen von Produktlinks im Artikel ab, fügen Sie sie also dort ein, wo sie das Thema tatsächlich unterstützen.
2. Erwarten Sie, dass sich das Layout mit Blöcken verschiebt. Das Hinzufügen von Blöcken kann ändern, wie stark der Abschnitt vom Artikel selbst gegenüber dem Blockinhalt bestimmt wird. Prüfen Sie daher das Verhältnis erneut, nachdem Sie die Seite aufgebaut haben.
3. Priorisieren Sie gut lesbare Breiten. Verwenden Sie bei textlastigen Beiträgen eine Inhaltsbreite, die angenehme Zeilenlängen beibehält, statt den Artikel zu stark zu verbreitern.
4. Nutzen Sie Gestaltung, um den Artikel zu unterstützen. Benutzerdefinierte Textfarbe, Hintergründe und Trennlinien sollten den Inhalt rahmen, ohne mit ihm zu konkurrieren.
5. Prüfen Sie die Darstellung auf Mobilgeräten. Kontrollieren Sie Abstände, den Zuschnitt des Hintergrunds und den Textkontrast auf kleineren Bildschirmen, damit der Artikel gut lesbar bleibt.
6. Vergleichen Sie Editor- und Live-Ansichten. Das Vorschauverhalten kann sich von der veröffentlichten Seite unterscheiden. Bestätigen Sie daher Layout, Ausrichtung und Medienauswahl auf der endgültigen Seite, bevor Sie sich darauf verlassen.