Ähnliche Beiträge

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zu Diashow-Steuerelementen
3. Company XYZ-Dokumentation zu Header-Einstellungen
4. Company XYZ-Dokumentation zu Karten-Einstellungen
5. Company XYZ-Dokumentation zu Abschnitts-Innenabstand-Einstellungen
6. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
7. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
8. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
9. Company XYZ-Dokumentation zu Breiten-Einstellungen für Layouts

Hilfreiche Videos

Shopify Academy-Video: Ihren Store anpassen

Shopify Academy-Video: Ihren Store anpassen

Zeigen Sie am Ende eines Beitrags weitere Artikel aus demselben Blog an, damit Leserinnen und Leser weiter lesen. Dieser Abschnitt zieht automatisch aktuelle Beiträge aus dem Blog des aktuellen Artikels, eignet sich also am besten, wenn Sie verwandte Inhalte anzeigen möchten, ohne jedes Element manuell zu kuratieren. Für einen umfassenderen Überblick darüber, wie diese Abschnittseinstellungen im Theme-Editor funktionieren, siehe Shopify-Dokumentation zu Abschnitten und Blöcken

Hinweis

Wenn Sie bestimmte Artikel auswählen müssen, statt automatisch aktuelle anzuzeigen, verwenden Sie stattdessen einen Abschnitt Blog posts.

Grundeinstellungen

Die wichtigste Inhaltssteuerung ist die Anzahl der anzuzeigenden Elemente. Verwenden Sie eine kleinere Anzahl, wenn Sie ein übersichtliches Artikelende möchten, oder erhöhen Sie sie, wenn Ihr Blog starke ergänzende Inhalte hat und Sie zu weiterem Stöbern anregen möchten.

Wenn Sie die Anzahl auf 0 setzen, werden alle verfügbaren Elemente bis zum Abschnittslimit angezeigt. Das kann für kleinere Blogs gut funktionieren, bei größeren Blogs kann es den Abschnitt jedoch lang wirken lassen und die Wirkung jeder Karte verringern.

Layout-Einstellungen

Verwenden Sie diese Einstellungen, um zu steuern, wie viele verwandte Beiträge pro Zeile erscheinen und ob jedes Gerät ein Raster oder eine Diashow verwendet. Hier legen Sie vor allem fest, wie leicht sich der Abschnitt auf Desktop, Tablet und Mobilgeräten überblicken lässt.

Höhere Spaltenzahlen können mehr Beiträge auf dem Bildschirm unterbringen, funktionieren aber meist am besten, wenn die Karten visuell schlicht sind. Wenn Ihre Artikeltitel oder Auszüge lang sind, sorgen weniger Spalten in der Regel für ein saubereres, besser lesbares Layout.

Tablet kann die Desktop-Spaltenzahl übernehmen, wenn es bei 0 belassen wird. Das ist nützlich, wenn Sie weniger gerätespezifische Anpassungen wünschen, aber es lohnt sich dennoch, mittlere Bildschirmgrößen zu prüfen, wenn Ihre Karten viel Text enthalten.

Tipp

Bei textlastigen Artikelkarten verbessern weniger Spalten in der Regel die Lesbarkeit und machen Überschriften leichter überfliegbar.

Diashow-Einstellungen

Wenn ein Gerät auf Diashow gesetzt ist, steuern diese Optionen Animation, Autoplay, Schleife, Navigation, Pagination und Slide-Vorschauen. Siehe Company XYZ-Dokumentation zu Diashow-Steuerelementen.

Die Standardanimation ist die flexiblere Wahl, wenn Sie ein typisches Karussell-Erlebnis möchten. Überblenden sorgt für eine fokussiertere Darstellung, vereinfacht jedoch das Layout und entfernt einige Interface-Optionen.

Autoplay kann Bewegung hinzufügen, funktioniert aber am besten, wenn verwandte Beiträge nur eine sekundäre Funktion sind und nicht die wichtigste Handlungsaufforderung. Wenn Leserinnen und Leser Überschriften vermutlich vor dem Klicken vergleichen, ist langsameres Autoplay oder manuelle Navigation meist einfacher zu bedienen.

Navigation und Pagination sind besonders hilfreich, wenn Sie mehrere Elemente im Diashow-Modus anzeigen und den Leserinnen und Lesern verdeutlichen möchten, dass weitere Inhalte verfügbar sind. Slide-Vorschauen können ebenfalls zur Interaktion anregen, besonders auf Mobilgeräten, gelten jedoch nicht bei der Überblenden-Animation.

Die Überblenden-Animation erzwingt ein Ein-Slide-Layout und zeigt keine Pagination oder Vorschauen kommender Slides.

Farbeinstellungen

Mit diesen Einstellungen können Sie die Farben von Icon, Text und Unterüberschrift des Abschnitts überschreiben, ohne die breiteren Theme-Stile zu ändern. Sie sind besonders nützlich, wenn dieser Abschnitt auf einem benutzerdefinierten Hintergrund steht oder mehr Kontrast als die umgebende Artikelseite benötigt.

Halten Sie den Überschriftenbereich visuell klar von den Artikelkarten darunter getrennt. Wenn Sie außerdem Kartenfarben ändern oder einen Abschnittshintergrund hinzufügen, prüfen Sie, ob jedes Textelement weiterhin gut lesbar ist.

Standard-Abschnittseinstellungen

Header-Einstellungen

Verwenden Sie die gemeinsamen Header-Einstellungen, um eine Überschrift, Beschriftung, Unterüberschrift, ein Icon und optional eine Schaltfläche für diesen Abschnitt hinzuzufügen. Siehe Company XYZ-Dokumentation zu Header-Einstellungen.

Dieser Header ist nützlich, wenn verwandte Beiträge weit unterhalb des Artikeltexts erscheinen und eine klarere Einleitung benötigen. Eine kurze Überschrift und ein knapper unterstützender Text reichen in der Regel aus, während die optionale Schaltfläche gut auf den vollständigen Blog verlinken kann.

Karten-Einstellungen

Verwenden Sie die gemeinsamen Karten-Einstellungen, um das Erscheinungsbild jeder verwandten Beitragskarte zu steuern, einschließlich Stil, Bildverhältnis, Textanzeige, Beschriftungsinhalt und CTA-Stil der Karte. Siehe Company XYZ-Dokumentation zu Karten-Einstellungen.

Diese Überschreibungen sind nützlich, wenn Artikelkarten einen stärker redaktionellen Look benötigen als Karten an anderer Stelle. Karten im Banner-Stil unterstützen Auswahlmöglichkeiten für Overlay und Textposition, während schlichtere Kartenstile in dichteren Rastern oft leichter zu überblicken sind.

Padding-Einstellungen

Verwenden Sie die gemeinsamen Padding-Einstellungen, um den Abstand oberhalb und unterhalb des Abschnitts anzupassen. Siehe Company XYZ-Dokumentation zu Padding-Einstellungen.

Mehr Padding hilft dabei, den Bereich für verwandte Beiträge nach dem Artikel als klaren nächsten Schritt wirken zu lassen. Engerer Abstand hält ihn visuell mit dem Inhalt darüber verbunden.

Abschnittshintergrund-Einstellungen

Verwenden Sie die gemeinsamen Abschnittshintergrund-Einstellungen, um dem Abschnitt eine Farbe, einen Farbverlauf, ein Bild oder ein Video als Hintergrund hinzuzufügen. Siehe Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen.

Ein Hintergrund kann helfen, verwandte Beiträge vom Artikeltext abzusetzen, besonders auf Seiten mit langen Inhalten. Wenn Sie einen Medienhintergrund verwenden, stellen Sie sicher, dass sowohl der Header als auch die Beitragskarten weiterhin klar hervortreten.

Achtung

Starke Hintergründe können mit Artikel-Thumbnails und Überschriften konkurrieren. Wenn die Lesbarkeit leidet, vereinfachen Sie den Hintergrund oder erhöhen Sie den Kontrast.

Trennlinien-Einstellungen

Verwenden Sie die gemeinsamen Trennlinien-Einstellungen, um eine Linie oberhalb oder unterhalb des Abschnitts hinzuzufügen. Siehe Company XYZ-Dokumentation zu Trennlinien-Einstellungen.

Trennlinien sind nützlich, wenn dieser Abschnitt in der Nähe von Kommentaren, Newsletter-Anmeldungen oder anderen Inhaltsbereichen steht und Sie eine klarere visuelle Abgrenzung wünschen. In den meisten redaktionellen Layouts reicht eine einfache Linie aus.

Sichtbarkeitseinstellungen

Verwenden Sie die gemeinsamen Sichtbarkeitseinstellungen, um zu steuern, ob der Abschnitt auf Desktop, Mobilgeräten oder auf beiden angezeigt wird. Siehe Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen.

Das ist hilfreich, wenn Sie auf größeren Bildschirmen ein reichhaltigeres verwandte-Inhalte-Erlebnis wünschen, auf kleineren jedoch ein einfacheres Artikelende. Es kann auch alternative mobile Layouts an anderer Stelle in der Vorlage unterstützen.

Breiten-Einstellungen

Verwenden Sie die gemeinsamen Breiten-Einstellungen, um die Inhaltsbreite und die äußere Abschnittsbreite zu steuern. Siehe Company XYZ-Dokumentation zu Breiten-Einstellungen.

Breitere Layouts können im Rastermodus bequem mehr Karten anzeigen, während schmalere Layouts nach einem langen Artikel oft kuratierter wirken und leichter zu überblicken sind. Wenn Sie die Breiten ändern, prüfen Sie sowohl die Live-Seite als auch den Editor, um den Abstand genau zu beurteilen.

Nutzungshinweise

1. Halten Sie die Anzahl fokussiert. Zeigen Sie nur so viele Beiträge an, wie Leserinnen und Leser am Ende eines Artikels bequem überblicken können.
   1. Sehr große Zahlen können den Abschnitt repetitiv oder übermäßig lang wirken lassen.
   2. Kleinere Zahlen funktionieren meist am besten, wenn die verwandten Beiträge nur ein abschließender Vorschlag sind.
2. Passen Sie das Layout an den Inhalt an. Verwenden Sie das Raster für schnellen Vergleich und die Diashow, wenn der Platz begrenzt ist oder Sie ein stärker geführtes Stöbern wünschen.
   1. Prüfen Sie sowohl die Desktop- als auch die mobile Ansicht, da Layouts im Slider-Stil Navigation, Pagination, Vorschau und Breakpoint-Verhalten verändern können.
   2. Prüfen Sie Ausrichtung und Sichtbarkeit in jedem Viewport, wenn Sie unterschiedliche Geräteeinstellungen kombinieren.
3. Wählen Sie Überblenden bewusst. Verwenden Sie Überblenden nur, wenn Sie jeweils nur eine hervorgehobene Karte möchten und keine Vorschauen oder Pagination benötigen.
4. Priorisieren Sie lesbare Karten. Wenn Überschriften lang sind, reduzieren Sie die Spaltenzahl oder vereinfachen Sie den Kartentext, damit jeder Beitrag schnell verständlich ist.
5. Setzen Sie Abgrenzungen mit Bedacht ein. Hintergründe, Padding und Trennlinien sollten helfen, den Abschnitt klar wirken zu lassen, ohne den Artikel selbst zu überlagern.
   1. Lassen Sie Farben und Hintergründe dezent, wenn der Abschnitt das Standardbild der Seite übernehmen soll.
   2. Verwenden Sie stärkere Überschreibungen nur, wenn sich der Bereich für verwandte Beiträge deutlich vom Artikeltext abheben soll.
6. Prüfen Sie die Artikelquelle. Die angezeigten Artikel hängen vom aktuellen Blog und den verfügbaren verwandten Ergebnissen ab, sodass Blogs mit wenig Inhalt eine kürzere oder weniger vielfältige Beitragsauswahl erzeugen können.
   1. Wenn Sie für verschiedene Geräte separate Medien verwenden, prüfen Sie Zuschnitt, Lesbarkeit und Fallback-Verhalten auf beiden Größen.
   2. Bestätigen Sie, dass Navigation oder Inhaltsquellen weiterhin zu den Artikeln führen, die Sie erwarten.