Highlight-Diashow

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. MDN Web Docs
3. Company XYZ-Dokumentation zum Slide-Block
4. Company XYZ-Dokumentation zu Header-Einstellungen
5. Company XYZ-Dokumentation zu Einstellungen für den Innenabstand von Abschnitten
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 Layout-Breiten-Einstellungen

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Verwenden Sie diesen Abschnitt, um eine Liste von Funktionen, Details oder Verkaufsargumenten in eine geführte Diashow zu verwandeln. Sie funktioniert am besten, wenn sich jede Folie auf eine Idee konzentriert und von einer kurzen Überschrift, prägnantem Text und optionalen Medien unterstützt wird. Einen umfassenderen Überblick darüber, wie Abschnitte und Blöcke im Editor funktionieren, finden Sie in Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Diashow-Einstellungen

Diese Einstellungen steuern, wie sich die Diashow bewegt, wie viel der nächsten Folie sichtbar ist und wie Besucher zwischen den Folien navigieren. Beginnen Sie hier, bevor Sie das Styling anpassen, da der Animationstyp das Verhalten des gesamten Abschnitts verändert.

Der Standard-Animationstyp unterstützt ein eher karussellartiges Layout, einschließlich Teilvorschauen kommender Folien. Fade stellt den Abschnitt auf eine Ein-Folien-Präsentation um, was besser ist, wenn Besucher sich jeweils auf eine Nachricht konzentrieren sollen.

Fade erzwingt ein Ein-Folien-Layout und entfernt die Vorschau der nächsten Folien. Die Seitennavigation wird bei aktivem Fade ebenfalls nicht angezeigt.

Die Animationsgeschwindigkeit beeinflusst, wie ausgefeilt oder dynamisch sich der Abschnitt anfühlt. Schnellere Übergänge eignen sich für kurze, visuelle Folien, während langsamere Übergänge in der Regel leichter zu verfolgen sind, wenn die Folien mehr Lesetext enthalten.

Das Seitenverhältnis steuert die Form des Medienbereichs der Folie. Verwenden Sie ein festes Verhältnis für ein klareres, konsistenteres Layout über alle Folien hinweg, oder lassen Sie es auf Default, wenn Ihre Medien ihre natürlichen Proportionen beibehalten sollen. Das separate mobile Verhältnis ist nützlich, wenn der Zuschnitt auf Desktop auf kleineren Bildschirmen zu breit oder zu eng wirkt.

Autoplay kann hilfreich sein, wenn Folien eine kurze, einfache Geschichte erzählen. Wenn die Folien längeren Text enthalten, lassen Sie Autoplay langsamer laufen oder schalten Sie es aus, damit Besucher lesen können, ohne sich gehetzt zu fühlen. Pause on hover gilt nur auf Desktop, daher verlassen sich Mobilnutzer weiterhin auf die Verzögerung und manuelle Steuerungen.

Navigation und Seitennavigation beeinflussen, wie klar die Diashow die Abfolge vermittelt. Navigation reicht oft aus, wenn die Folienüberschriften oder Symbole eindeutig sind, während die Seitennavigation nützlicher ist, wenn die Reihenfolge der Folien wichtig ist.

Die Einstellungen zur Position der Steuerelemente helfen Ihnen, die Oberfläche geräteübergreifend auszugleichen. Auf dem Desktop verändert die Platzierung links oder rechts die visuelle Gewichtung des Layouts; auf Mobilgeräten beeinflusst die Platzierung oben oder unten vor allem das Scannen und die Tipp-Bedienung.

Farbeinstellungen

Diese Einstellungen überschreiben die Farben der Abschnittsüberschrift, die für das Symbol, die Überschrift und den unterstützenden Text oberhalb der Diashow verwendet werden. Sie sind besonders nützlich, wenn der Abschnitt auf einem benutzerdefinierten Hintergrund liegt oder einen stärkeren Kontrast benötigt, als die umgebenden Seitenstile bieten.

Verwenden Sie Farb-Overrides sparsam. Eine einfache kontrastreiche Kombination ist in der Regel leichter zu lesen als stark gestalteter Text, besonders wenn die Folien selbst Bilder oder Videos enthalten.

Tipp

Wenn Sie dem Abschnitt ein Hintergrundbild oder -video hinzufügen, prüfen Sie vor dem Veröffentlichen den Kontrast des Header-Texts auf Desktop und Mobilgeräten. Allgemeine Hinweise zur Barrierefreiheit finden Sie in MDN Web Docs

Unterstützte Blocktypen

1. Slide

Diashow-Folie

Jeder Slide-Block fügt der Abfolge eine Folie hinzu und trägt zur text- oder iconbasierten Navigation bei. Mehr über den Diashow-Folie erfahren Sie hier.

Verwenden Sie jede Folie für einen einzelnen klaren Punkt. Kurze Überschriften funktionieren am besten, weil sie die Navigation leicht überblickbar halten.

1. Verwenden Sie die Überschrift als zentrale Aussage.
2. Verwenden Sie das Inhaltsfeld für eine kurze Erklärung, nicht für eine zweite Überschrift.
3. Fügen Sie ein Symbol nur hinzu, wenn es Besuchern hilft, Folien schneller zu unterscheiden.

Bild- und Videoeinstellungen

Eine Folie kann nur Text enthalten, bildbasiert oder videobasiert sein. Wenn sowohl Bild als auch Video hinzugefügt werden, hat das Video Vorrang und wird abgespielt, wenn die Folie aktiv wird.

Einstellungen für inaktive Overlays helfen, die Ablenkung durch benachbarte Folien zu verringern, wenn Vorschauen sichtbar sind. Erhöhen Sie das Overlay, wenn benachbarte Folien mit der aktiven Folie zu sehr konkurrieren, und verringern Sie es, wenn der Abschnitt zu dunkel wirkt.

Blocksichtbarkeit

Sie können einzelne Folien auf Desktop oder Mobilgeräten ausblenden. Das ist nützlich, wenn eine Folie für kleinere Bildschirme zu detailliert ist oder wenn Sie eine kürzere mobile Abfolge wünschen, ohne die Folie vollständig zu entfernen.

Standard-Abschnittseinstellungen

Header-Einstellungen

Header-Einstellungen ermöglichen es Ihnen, die Diashow mit einer Beschriftung, Überschrift, unterstützendem Text und optionaler Schaltfläche einzuleiten. Das ist ein guter Ort, um zu erklären, worum es in der Diashow geht, und Besuchern einen klaren nächsten Schritt zu geben.

Die Schaltfläche funktioniert am besten als einzelne Folgemaßnahme, etwa zum Anzeigen eines Produkts oder einer zugehörigen Seite. Die Position der Schaltfläche auf Mobilgeräten und das Verhalten über die gesamte Breite sind hilfreich, wenn die Aktion leicht antippbar bleiben soll.

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb des Abschnitts. Verwenden Sie sie, um die Diashow vom Inhalt in der Nähe zu trennen, besonders wenn die Seite andere medienstarke Abschnitte enthält.

Engerer Abstand kann den Abschnitt stärker mit dem umliegenden Layout verbinden. Größerer Abstand verleiht der Diashow mehr Betonung und Luft zum Atmen.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, eine Farbe, einen Farbverlauf, ein Bild oder ein Video hinter dem gesamten Abschnitt zu platzieren. Diese Optionen können die Diashow immersiver wirken lassen, beeinflussen aber auch die Lesbarkeit und die wahrgenommene Tiefe des Layouts.

Overlays sind besonders nützlich, wenn der Header über Hintergrundmedien liegt. Wenn Sie sowohl Hintergrundmedien als auch Medien in den Folien verwenden, halten Sie eine Ebene visuell ruhiger, damit der Abschnitt nicht überladen wirkt.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen oben oder unten im Abschnitt eine Linie hinzu. Das kann helfen, die Diashow abzugrenzen, wenn sie zwischen Abschnitten mit ähnlichen Hintergründen steht.

Zurückhaltende Trennlinien funktionieren in der Regel am besten. Verwenden Sie sie als Struktur, nicht als Dekoration.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob der gesamte Abschnitt auf Desktop, Mobilgeräten oder auf beiden angezeigt wird. Das ist nützlich, wenn Sie auf kleineren Bildschirmen einen anderen Seitenverlauf wünschen.

Wenn Sie den Abschnitt auf einem Gerät ausblenden, stellen Sie sicher, dass dieselbe Kernbotschaft an anderer Stelle erscheint, damit wichtige Details nicht verloren gehen.

Breiten-Einstellungen

Breiten-Einstellungen steuern die Gesamtbreite des Abschnitts und die maximale Breite des darin enthaltenen Inhalts. In dieser Diashow bestimmt die Breite, wie großzügig die Medien wirken und wie leicht die Navigation zu überblicken ist.

Schmalere Breiten eignen sich in der Regel für textlastige Folien, während breitere Layouts Bildern und Videos mehr Wirkung verleihen. Prüfen Sie Änderungen möglichst auf der Live-Seite, da die Einrahmung im Editor die Breite anders wirken lassen kann als das Endergebnis.

Nutzungshinweise

1. Halten Sie die Folien fokussiert. Geben Sie jeder Folie eine Hauptidee, damit Überschrift, Symbol, Text und Medien dieselbe Botschaft unterstützen.
2. Wählen Sie die Animation bewusst. Verwenden Sie den Standardstil für ein stärker visuelles Karussellgefühl, und verwenden Sie Fade, wenn sich Besucher auf eine Folie nach der anderen konzentrieren sollen.
3. Halten Sie die Medienproportionen konsistent. Gleiche Seitenverhältnisse über alle Folien hinweg sorgen in der Regel für ein klareres, ruhigeres Layout.
4. Setzen Sie Autoplay sparsam ein. Aktivieren Sie es nur, wenn die Folien schnell verständlich sind und die manuellen Steuerungen klar erkennbar bleiben.
5. Prüfen Sie Mobilgeräte sorgfältig. Überprüfen Sie Zuschnitt, Position der Steuerelemente und Textkontrast auf kleineren Bildschirmen immer dann, wenn Sie benutzerdefinierte Farben, Hintergrundmedien oder mobile spezifische Seitenverhältnisse verwenden.
6. Prüfen Sie beide Darstellungsbereiche. Desktop- und Mobilsteuerungen können Ausrichtung, Sichtbarkeit und den sichtbaren Anteil jeder Folie verändern. Bestätigen Sie daher beide Versionen vor dem Veröffentlichen.
7. Betrachten Sie Standardwerte als Fallback. Leere oder transparente Farben bewahren in der Regel das umliegende Styling, während explizite Farben, Farbverläufe oder separate Medienauswahlen für Desktop und Mobilgeräte den Diashow-Bereich eigenständiger machen.