Video mit Text

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zum Rich text-Block
3. Company XYZ-Dokumentation zum Video-Block
4. Company XYZ-Dokumentation zu Header-Einstellungen
5. Company XYZ-Dokumentation zu Abschnitts-Padding-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

Verwenden Sie diesen Abschnitt, um ein Video mit ergänzendem Text in einem übersichtlichen zweiteiligen Layout zu kombinieren. Er eignet sich besonders für Produkterklärungen, Markengeschichten, Tutorials und Kampagneninhalte, bei denen das Video Kontext, eine Überschrift und einen klaren nächsten Schritt benötigt. Eine umfassendere Übersicht darüber, wie Theme-Inhalte organisiert sind, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Diese Einstellungen steuern das allgemeine Verhältnis zwischen den Video- und Textblöcken. Sie können auch die Reihenfolge der Blöcke ändern, um festzulegen, welche Seite zuerst angezeigt wird.

1. Inhalt ausrichten legt fest, wie die beiden Seiten vertikal ausgerichtet werden, wenn sie nebeneinander angezeigt werden. Eine Ausrichtung am oberen Rand eignet sich für redaktionelle Inhalte, die mittlere Ausrichtung wirkt ausgeglichener und die Ausrichtung am unteren Rand kann dabei helfen, beide Seiten auf einer ähnlichen visuellen Linie enden zu lassen.
2. Sticky-Inhalt aktivieren hält die kürzere Seite nahe am oberen Rand fixiert, während Besucher durch die längere Seite scrollen. Dies ist besonders nützlich, wenn ein Block deutlich länger ist als der andere.
3. Auf Mobilgeräten stapeln stellt den Abschnitt auf kleineren Bildschirmen auf eine einzelne Spalte um. Verwenden Sie diese Option, wenn nebeneinander angeordnete Inhalte beengt wirken oder das Video mehr Platz benötigt.
4. Auf Desktop stapeln wandelt das Layout auch auf größeren Bildschirmen in eine vertikale Abfolge um. Dies eignet sich am besten, wenn die Inhalte natürlicher nacheinander als in zwei Spalten gelesen werden.

Sticky-Inhalte funktionieren nur auf Desktop-Geräten und werden nicht angewendet, wenn gestapelte Layouts aktiv sind.

Farbeinstellungen

Mit diesen abschnittsbezogenen Farbsteuerelementen können Sie die standardmäßige Textgestaltung für diesen Abschnitt überschreiben. Sie sind hilfreich, wenn der Abschnitt einen benutzerdefinierten Hintergrund verwendet oder wenn Sie einen stärkeren Kontrast rund um die Medien benötigen.

Verwenden Sie diese Einstellungen mit Bedacht, wenn Ihr Video oder Abschnittshintergrund bereits visuell unruhig ist. Kleine Farbänderungen können die Lesbarkeit oft wirksamer verbessern als zusätzliche Gestaltungselemente.

Unterstützte Blocktypen

1. Rich text
2. Video

Rich text-Block

Der Rich text-Block stellt die Textseite des Layouts bereit, einschließlich Überschrift, Fließtext, Symbol und einer optionalen Schaltfläche. Weitere Informationen finden Sie in der Company XYZ-Dokumentation zum Rich text-Block.

1. Verwenden Sie ihn für die zentrale Erklärung, eine ergänzende Geschichte oder eine Handlungsaufforderung, die dem Video Kontext gibt.
2. Halten Sie die Aussage fokussiert, wenn das Video den größten Teil der visuellen Arbeit übernimmt.
3. Dieser Block verfügt außerdem über eigene Einstellungen für Hintergrund, Farben und Sichtbarkeit. Damit kann die Textseite stärker wie ein umrahmtes Inhaltsfeld wirken.

Video-Block

Der Video-Block zeigt gehostete Videos oder einen Vimeo- bzw. YouTube-Link an und bietet Einstellungen für Seitenverhältnis, Wiedergabe, Breite, Untertitel, Overlay-Gestaltung und Ausrichtung. Weitere Informationen finden Sie in der Company XYZ-Dokumentation zum Video-Block.

1. Verwenden Sie bei Bedarf ein Posterbild, damit der Abschnitt vor dem Start der Wiedergabe einen hochwertigen Eindruck macht.
2. Wählen Sie für größere und kleinere Bildschirme separate Seitenverhältnisse, wenn der Standardausschnitt unpassend wirkt.
3. Legen Sie eine maximale Breite fest, wenn der gesamte Abschnitt breit ist, das Video jedoch visuell begrenzt bleiben soll.

Wenn das Video-Overlay auf Always show eingestellt ist, werden die Steuerelemente des Videoplayers deaktiviert, selbst wenn sie an anderer Stelle aktiviert sind.

Standard-Abschnittseinstellungen

Header-Einstellungen

Verwenden Sie die Header-Einstellungen, um eine optionale Einleitung über dem Inhalt nebeneinander hinzuzufügen. Dieser Bereich eignet sich für einen Abschnittstitel, ergänzenden Text und eine Schaltfläche, wenn das Video mehr Einführung oder eine stärkere Handlungsaufforderung benötigt.

Padding-Einstellungen

Verwenden Sie die Padding-Einstellungen, um den Abstand über und unter dem Abschnitt zu steuern. Verringern Sie den Abstand, wenn dieser Abschnitt eng mit angrenzenden Inhalten verbunden wirken soll, oder vergrößern Sie ihn, wenn das Video mehr visuelle Trennung benötigt.

Abschnittshintergrund-Einstellungen

Verwenden Sie die Abschnittshintergrund-Einstellungen, um eine Farbe, einen Verlauf, ein Bild oder ein Video hinter dem gesamten Abschnitt hinzuzufügen. Hintergründe können die Stimmung des Abschnitts verstärken, bei übermäßiger Verwendung jedoch auch mit Video und Text konkurrieren.

Achtung

Wenn der Abschnitt bereits ein visuell aufwendiges Video enthält, kann ein starkes Hintergrundbild oder -video das Layout überladen wirken lassen und die Textklarheit beeinträchtigen.

Trennlinien-Einstellungen

Verwenden Sie die Trennlinien-Einstellungen, um eine Linie über oder unter dem Abschnitt hinzuzufügen. Dies kann helfen, den Abschnitt von angrenzenden Inhalten abzugrenzen, wenn die Seite unmittelbar hintereinander ähnliche Layouts verwendet.

Sichtbarkeitseinstellungen

Verwenden Sie die Sichtbarkeitseinstellungen, um den Abschnitt abhängig von der Gerätegröße ein- oder auszublenden. Dies ist nützlich, wenn der Inhaltsfluss auf Mobilgeräten anders als auf Desktop-Geräten gestaltet werden soll.

Breiten-Einstellungen

Verwenden Sie die Breiten-Einstellungen, um sowohl den Abschnitts-Container als auch die Breite des inneren Inhalts zu steuern. Größere Einstellungen verleihen dem Video mehr Präsenz, während schmalere Inhaltsbreiten die Lesbarkeit der Textseite verbessern können.

Nutzungshinweise

1. Setzen Sie einen Schwerpunkt. Entscheiden Sie, ob das Video oder der Text im Mittelpunkt stehen soll, und halten Sie die jeweils andere Seite unterstützend, damit der Abschnitt nicht überladen wirkt.
2. Prüfen Sie beide Ansichten. Desktop- und Mobilgeräteinstellungen können Ausrichtung, Sichtbarkeit und Medienverhalten ändern. Überprüfen Sie daher vor der Veröffentlichung beide Größen.
3. Setzen Sie Blockinhalte gezielt ein. Das Hinzufügen von Blöcken kann den Abschnitt erheblich verändern. Stellen Sie daher sicher, dass neue Video- oder Textblöcke weiterhin die ursprüngliche Aussage unterstützen.
4. Halten Sie die Standardeinstellungen einfach. Leere oder transparente Gestaltung bewahrt in der Regel das Fallback-Erscheinungsbild, während starke Farben, Verläufe oder Medienüberschreibungen den Abschnitt unabhängiger wirken lassen.
5. Prüfen Sie den Medienausschnitt. Separate Desktop- und Mobilmedien können unterschiedlich zugeschnitten und dargestellt werden. Vergewissern Sie sich daher, dass beide Versionen klar und gut lesbar bleiben.
6. Testen Sie Sticky-Layouts im Kontext. Sticky-Inhalte funktionieren am besten, wenn eine Seite deutlich kürzer ist und das Desktop-Layout nicht gestapelt wird.