Diashow

Ausgewählte Links

1. Company XYZ-Dokumentation zu den Einstellungen der Diashow-Steuerungen
2. Company XYZ-Dokumentation zum Banner-Block
3. Company XYZ-Dokumentation zum Blogpost-Block
4. Company XYZ-Dokumentation zum Bild-Block
5. Company XYZ-Dokumentation zum Produkt-Block
6. Company XYZ-Dokumentation zum Rich-text-Block
7. Company XYZ-Dokumentation zum Testimonial-Block
8. Company XYZ-Dokumentation zum Video-Block
9. Company XYZ-Dokumentation zu den Header-Einstellungen
10. Company XYZ-Dokumentation zu den Abschnitts-Innenabstandseinstellungen
11. Company XYZ-Dokumentation zu den Abschnittshintergrund-Einstellungen
12. Company XYZ-Dokumentation zu den Trennlinien-Einstellungen
13. Company XYZ-Dokumentation zu den Sichtbarkeitseinstellungen
14. Company XYZ-Dokumentation zu den Layout-Breiteneinstellungen
15. Shopify-Dokumentation zu Abschnitten und Blöcken
16. Shopify-Dokumentation zur Übersicht der Theme-Editor-Funktionen

Hilfreiche Videos

Shopify Academy-Video: Ihren Store anpassen

Shopify Academy-Video: Ihren Store anpassen

Verwenden Sie die Diashow, um einen wisch- oder klickbaren Inhaltsbereich mit gemischten Blocktypen zu erstellen, von einfachen bildbasierten Promotions bis hin zu mehrteiligen hervorgehobenen Inhalten. Sie eignet sich besonders gut, wenn Sie visuelle Vielfalt möchten und gleichzeitig steuern wollen, wie viele Elemente in jeder Bildschirmgröße angezeigt werden und wie Besucher durch die Slides navigieren. Einen umfassenderen Überblick darüber, wie Abschnitte und Blöcke im Theme-Editor funktionieren, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Diese Einstellungen definieren das grundlegende Layout, bevor Sie das Verhalten der Diashow fein abstimmen. Sie steuern, wie viele Blöcke gleichzeitig sichtbar sind und wie gleichmäßig sich Inhalte über jede Zeile verteilen.

Layout und responsives Verhalten

Legen Sie separate Spaltenzahlen für Desktop, Tablet und Mobilgeräte fest, um zu steuern, wie dicht die Diashow auf jeder Bildschirmgröße wirkt. Wenn der Tablet-Wert auf 0 gesetzt ist, verwenden Tablet-Bildschirme die Desktop-Spaltenzahl. Das ist nützlich, wenn Sie weniger Haltepunkte verwalten möchten.

Verwenden Sie Auf Mobilgeräten stapeln, wenn jeder Slide mehr Leseraum benötigt oder wenn gemischte Blocktypen auf kleineren Bildschirmen nebeneinander beengt wirken. Dadurch entsteht eine einfachere Einspaltenansicht.

Verwenden Sie Inhalt vertikal strecken, damit die Blöcke die Höhe des höchsten Blocks in jeder Zeile annehmen. Das ist besonders hilfreich, wenn Sie textlastige Blöcke mit bildbasierten kombinieren, da die gesamte Zeile dadurch sauberer wirkt.

Tipp

Wenn Sie Produkte, Artikel und Rich-Text in derselben Diashow mischen, beginnen Sie mit weniger Spalten und lassen Sie die vertikale Streckung aktiviert, damit das Layout einheitlicher wirkt.

Diashow-Einstellungen

Verwenden Sie diese Steuerelemente, um festzulegen, wie Besucher mit dem Abschnitt interagieren. Die Referenz zu den Steuerelementen der Diashow finden Sie in den Einstellungen der Diashow-Steuerelemente.

Animation und Übergänge

Wählen Sie den Animationsstil je nach Art der gewünschten Präsentation. Die Standardanimation eignet sich am besten zum Durchsehen mehrerer sichtbarer Slides, während Fade eher für fokussiertes Storytelling im Hero-Stil passt.

Fade erzwingt ein Ein-Slide-Layout und deaktiviert das Verhalten im Vorschau-Stil sowie die Anzeige der Paginierung.

Die Animationsgeschwindigkeit bestimmt, wie schnell die Slides übergehen. Schnellere Bewegungen können sich für Promotions dynamischer anfühlen, während langsamere Übergänge meist besser für redaktionelle oder hochwertige visuelle Inhalte geeignet sind.

Autoplay und Wiederholung

Autoplay kann den Abschnitt dynamischer wirken lassen, funktioniert aber am besten, wenn jeder Slide schnell verständlich ist. Wenn Slides längere Texte, Produktdetails oder Video enthalten, sorgt eine längere Autoplay-Verzögerung meist für eine bessere Nutzererfahrung.

Bei Hover pausieren gilt nur auf dem Desktop und hilft Besuchern, zu lesen oder zu interagieren, ohne dass die Diashow weiterläuft. Slides in Schleife abspielen ist nützlich, wenn der Abschnitt kontinuierlich wirken soll, statt ein klares Ende zu haben.

Navigation und Paginierung

Verwenden Sie Navigation anzeigen, wenn Besucher eine klare manuelle Steuerung haben sollen. Das ist vor allem bei Diashows mit gemischten Inhalten oder bei Layouts wichtig, in denen mehrere Karten gleichzeitig sichtbar sind.

Navigationsposition ermöglicht es Ihnen, die Steuerelemente über oder unter dem Inhalt zu platzieren, je nachdem, wie prominent sie wirken sollen. Eine Platzierung unter dem Inhalt wirkt bei bildbasierten Layouts oft sauberer, während eine Platzierung über dem Inhalt gut funktionieren kann, wenn der Abschnitt auch eine Überschrift enthält.

Die Paginierung ist am nützlichsten, wenn die Diashow eine Abfolge erzählt oder jeweils einen Haupt-Slide zeigt. Die Stile Bruchzahl und Fortschrittsbalken lassen sich für inhaltsreiche Slides oft leichter interpretieren als eine dynamische Paginierung.

Verhalten der Slide-Vorschau

Vorschau der nächsten Slides anzeigen zeigt einen Teil der nächsten Karte an, um zu signalisieren, dass weitere Inhalte verfügbar sind. Das funktioniert am besten in Layouts mit mehreren Karten, bei denen Sie zum Durchsehen anregen möchten.

Wenn sich das Layout bereits eng anfühlt, kann das Ausschalten der Vorschauen den Abschnitt ruhiger und leichter scannbar machen. Diese Einstellung gilt nicht bei Fade-Animation.

Farbeinstellungen

Diese Farbüberschreibungen betreffen den Bereich der Abschnittsüberschrift und nicht die einzelnen Slide-Blöcke. Verwenden Sie sie, wenn sich der einleitende Inhalt von Ihren globalen Farbeinstellungen oder von einer starken Hintergrundgestaltung abheben soll.

Passen Sie die Farben für Symbol, Überschrift und Unterüberschrift gemeinsam an, damit die Einleitung lesbar bleibt. Wenn Ihre Slides bereits kräftige Farben oder Bildwelten verwenden, sorgt ein zurückhaltenderes Farbkonzept für die Abschnittsüberschrift meist für eine bessere Balance.

Unterstützte Blocktypen

1. Banner
2. Blogbeitrag
3. Bild
4. Produkt
5. Rich-Text
6. Testimonial
7. Video

Banner

Banner-Blöcke sind die flexibelste Option in diesem Abschnitt und eignen sich ideal für Promotions, Slides im Hero-Stil und bildbasiertes Storytelling. Weitere blockbezogene Einstellungen finden Sie in der Referenz für den Banner-Block.

Verwenden Sie den Blockhintergrund für den Slide selbst und legen Sie dann Text, Schaltflächen und optional Medien im Vordergrund darüber. Banner-Blöcke können außerdem über ihr ausgewähltes Seitenverhältnis hinaus erweitert werden, wenn der Inhalt mehr Platz benötigt.

Blogbeitrag

Blogbeitrag-Blöcke zeigen Artikelkarten innerhalb der Diashow an. Details finden Sie in der Referenz für den Blogbeitrag-Block.

Sie eignen sich gut für hervorgehobene redaktionelle Inhalte oder Journal-Highlights. Wenn Sie mehr visuelle Kontrolle benötigen, als eine Standard-Artikelkarte bietet, verwenden Sie stattdessen einen Banner-Block.

Bild

Bild-Blöcke sind eine einfache Möglichkeit, visuelle Slides mit optionalen Beschriftungen, Overlays, Links und Ausrichtungssteuerung hinzuzufügen. Details finden Sie in der Referenz für den Bild-Block.

Sie sind nützlich für Lookbooks, Kampagnenbilder, Logo-Slides oder leichte Promotions. Fügen Sie Beschriftungen nur hinzu, wenn sie einen klaren Kontext liefern.

Produkt

Produkt-Blöcke fügen der Diashow kaufbare Produktkarten hinzu. Details finden Sie in der Referenz für den Produkt-Block.

Verwenden Sie sie für hervorgehobene Artikel, kuratierte Reihen oder verwandte Empfehlungen. Wenn Sie mehr Produktdetails oder Variantensteuerungen anzeigen, verringern Sie die Anzahl der sichtbaren Spalten, damit jede Karte leicht zu erfassen bleibt.

Rich-Text

Rich-Text-Blöcke ermöglichen Ihnen, inhaltsgetriebene Slides mit Überschriften, Fließtext, Symbolen, Schaltflächen und optionalen Blockhintergründen hinzuzufügen. Details finden Sie in der Referenz für den Rich-Text-Block.

Sie eignen sich für Ankündigungen, Nutzenversprechen oder redaktionelle Unterbrechungen zwischen stärker visuellen Slides. Da sie ihren eigenen Hintergrund enthalten können, wirken sie fast wie ein Banner, bleiben dabei aber textorientiert.

Kundenstimme

Testimonial-Blöcke heben Kundenstimmen hervor und können die Aussage optional mit einem verwandten Produkt verknüpfen. Details finden Sie in der Referenz für den Kundenstimme.

Halten Sie den Testimonial-Text für beste Ergebnisse in einem bewegten Layout eher kurz. Wenn Sie Bildmaterial oder Video hinzufügen, stellen Sie sicher, dass das Zitat weiterhin wie die Hauptaussage wirkt.

Video

Video-Blöcke ermöglichen es Ihnen, gehostete oder eingebettete Videos direkt in die Diashow einzufügen. Details finden Sie in der Referenz für den Video-Block.

Verwenden Sie Video sparsam in automatisch abspielenden Karussells. Vorschaubilder, Beschriftungen und Overlays können helfen, dass der Slide vor dem Start der Wiedergabe ausgefeilter wirkt.

Achtung

Vermeiden Sie schnelles Autoplay der Diashow, wenn Video-Slides enthalten sind, da Besucher genügend Zeit brauchen, um sie wahrzunehmen und mit ihnen zu interagieren.

Standard-Abschnittseinstellungen

Header-Einstellungen

Verwenden Sie die gemeinsamen Header-Einstellungen, um die Diashow mit einer Beschriftung, Überschrift, unterstützendem Text, Symbol und optionaler Schaltfläche einzuleiten. Die vollständige Anleitung zum Header finden Sie in der Referenz für die Header-Einstellungen.

Ein Abschnitts-Header ist besonders hilfreich, wenn die Diashow weiter unten auf einer Seite erscheint oder mehrere Inhaltstypen kombiniert. Halten Sie ihn kurz, damit er den Inhalt rahmt, ohne mit den Slides zu konkurrieren.

Padding-Einstellungen

Verwenden Sie die gemeinsamen Padding-Steuerelemente, um den Abstand oberhalb und unterhalb des Abschnittsinhalts anzupassen. Die vollständige Padding-Referenz finden Sie in der Referenz für den Abschnitts-Padding.

Erhöhen Sie den Padding-Wert, wenn die Diashow wie ein eigenständiges Feature wirken soll. Verringern Sie ihn, wenn der Abschnitt enger in ein dichteres Seitenlayout eingebettet sein soll.

Abschnittshintergrund-Einstellungen

Verwenden Sie die gemeinsamen Steuerelemente für den Abschnittshintergrund, um Farbe, Verläufe, Bilder, Overlays oder Video hinter dem gesamten Abschnitt hinzuzufügen. Die vollständige Hintergrund-Referenz finden Sie in der Referenz für Abschnittshintergründe.

Diese Einstellungen betreffen den Abschnitts-Wrapper, nicht die einzelnen Slides. Starke Hintergründe können Tiefe erzeugen, machen aber auch Kontrast und Abstände wichtiger.

Wenn einzelne Slides bereits kräftige Bildwelten, Overlays oder Farbgestaltungen verwenden, nutzen Sie einen zurückhaltenderen Abschnittshintergrund, um visuelle Konkurrenz zu vermeiden.

Trennlinien-Einstellungen

Verwenden Sie die gemeinsamen Trennlinien-Steuerelemente, um eine Trennlinie oben oder unten hinzuzufügen. Die Trennlinien-Optionen werden in der Referenz für Trennlinien dokumentiert.

Trennlinien können dabei helfen, die Diashow zu definieren, wenn die umgebenden Abschnitte ähnliche Hintergründe verwenden. Setzen Sie sie sparsam ein, damit die Seite nicht zu stark gerahmt wirkt.

Sichtbarkeitseinstellungen

Verwenden Sie die gemeinsamen Sichtbarkeitssteuerelemente, um festzulegen, ob der Abschnitt auf Desktop, Mobilgeräten oder auf beiden angezeigt wird. Das Sichtbarkeitsverhalten wird in der Referenz für Sichtbarkeitseinstellungen dokumentiert.

Das ist nützlich, wenn Sie an anderer Stelle auf der Seite eine andere mobile Darstellung wünschen oder wenn ein komplexes Multi-Slide-Layout nur auf größeren Bildschirmen gut funktioniert.

Breiten-Einstellungen

Verwenden Sie die gemeinsamen Breiten-Steuerelemente, um sowohl die Inhaltsbreite als auch die Breite des Abschnitts-Wrapper zu steuern. Die Breitenoptionen werden in der Referenz für Layout-Breiten dokumentiert.

Die Inhaltsbreite steuert, wie weit der Inhalt der Diashow wachsen kann, während die Abschnittsbreite vor allem dann wichtig ist, wenn Hintergründe verwendet werden. Da der Editor beeinflussen kann, wie sich Breitenänderungen darstellen, lohnt es sich, die Live-Seitenansicht vor dem Finalisieren der Layoutentscheidungen zu überprüfen. Weitere Informationen zum Theme-Editor finden Sie in der Shopify-Dokumentation zum Funktionsüberblick des Theme-Editors

Nutzungshinweise

1. Spalten an Inhalte anpassen. Verwenden Sie weniger Spalten, wenn Slides Text, Schaltflächen, Bewertungen oder Video enthalten, damit jedes Element lesbar bleibt und sich leicht bedienen lässt.
2. Animation bewusst auswählen. Verwenden Sie die Standardanimation für das Durchsehen mehrerer Karten und Fade nur dann, wenn jeweils ein fokussierter Slide gezeigt werden soll.
3. Autoplay ruhig halten. Längere Autoplay-Verzögerungen funktionieren besser für Diashows mit gemischten Inhalten, besonders wenn Slides Produkte, Testimonials oder Video enthalten.
4. Konkurrierende Hintergründe vermeiden. Wenn Blöcke bereits starke Bildwelten oder Overlays verwenden, halten Sie den Abschnittshintergrund einfacher, um besseren Kontrast und mehr Klarheit zu erzielen.
5. Das Live-Layout prüfen. Überprüfen Sie vor der Veröffentlichung das Stapeln auf Mobilgeräten, das Spaltenverhalten auf Tablets, die Position der Navigation und Breitenänderungen im tatsächlichen Frontend.
6. Blockbasierte Änderungen prüfen. Das Hinzufügen oder Entfernen von Blöcken kann das Gesamtgefühl des Abschnitts verändern. Prüfen Sie daher nach dem Bearbeiten der Blockliste Abstände, Balance und den Nutzen der Navigation erneut.