Collage

Ausgewählte Links

1. Company XYZ-Dokumentation zum Collage-Abschnitt
2. Shopify-Dokumentation zu Abschnitten und Blöcken
3. Company XYZ-Dokumentation zum Banner-Block
4. Company XYZ-Dokumentation zum Blogbeitrags-Block
5. Company XYZ-Dokumentation zum Kontaktformular-Block
6. Company XYZ-Dokumentation zum Bild-Block
7. Company XYZ-Dokumentation zum Produkt-Block
8. Company XYZ-Dokumentation zum Rich-text-Block
9. Company XYZ-Dokumentation zum Testimonial-Block
10. Company XYZ-Dokumentation zum Video-Block
11. Company XYZ-Dokumentation zu Header-Einstellungen
12. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
13. Company XYZ-Dokumentation zu Abschnitts-Innenabstand-Einstellungen
14. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
15. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
16. Company XYZ-Dokumentation zu Einstellungen für Layout-Breiten

Hilfreiche Videos

Video der Shopify Academy: Ihren Shop anpassen

Video der Shopify Academy: Ihren Shop anpassen

Verwenden Sie Collage, um ein gemischtes zweispaltiges Layout mit einem stärker redaktionellen, Bento-artigen Charakter zu erstellen. Es ist eine starke Wahl für Landingpages und Storytelling-Layouts, bei denen Sie Aktionen, Medien, Produkte, Testimonials und unterstützenden Text in einem strukturierten Abschnitt kombinieren möchten. Für das breitere Abschnittsmodell hinter dieser Art von Layout siehe Shopify-Dokumentation zu Abschnitten und Blöcken

Das Layout verwendet automatisch den ersten Block als großen Block. Mehr über Abschnittsverhalten erfahren Sie hier.

Grundeinstellungen

Die wichtigsten Layout-Steuerelemente bestimmen, wie sich die Collage über Desktop und Mobile verteilt. Diese Einstellungen sind vor allem dann wichtig, wenn Sie verschiedene Blocktypen mischen und eine klare visuelle Hierarchie schaffen möchten.

1. Collage style steuert, ob der große hervorgehobene Block auf dem Desktop zuerst links oder zuletzt rechts angezeigt wird. Auf Mobile bestimmt dieselbe Auswahl außerdem, ob der erste Block oben oder unten erscheint.
2. Stack on mobile schaltet den Abschnitt auf ein einspaltiges Mobile-Layout um. Verwenden Sie dies, wenn nebeneinander angeordnete Blöcke zu stark komprimiert wirken oder wenn Sie einen einfacheren Lesefluss wünschen.
3. Stretch content vertically sorgt dafür, dass Blöcke in derselben Zeile die Höhe des höchsten Blocks erhalten. Dadurch entsteht normalerweise ein saubereres Raster, wenn Sie Text, Karten und Medien mit unterschiedlichen natürlichen Höhen kombinieren.

Der erste Block ist immer der große Block. Wenn ein bestimmtes Element das Layout anführen soll, platzieren Sie diesen Block zuerst.

Hinweis

Breitensteuerungen für Blöcke ändern in diesem Abschnitt nicht die Spaltenbreite. Jeder Block dehnt sich aus, um seine Spalte auszufüllen. Verwenden Sie daher stattdessen die Blockreihenfolge, das Seitenverhältnis und die Inhaltslänge, um das Layout zu gestalten.

Farbeinstellungen

Mit dieser Gruppe können Sie die Text-, Unterüberschriften- und Symbolfarben des Abschnitts überschreiben, ohne Ihre breitere Theme-Palette zu ändern. Sie ist besonders nützlich, wenn Sie einen benutzerdefinierten Abschnittshintergrund hinzufügen oder diesen Abschnitt visuell abheben möchten.

Prüfen Sie den Kontrast sorgfältig, wenn Sie ein Bild, einen Verlauf oder ein Video hinter dem Inhalt verwenden. Eine schnelle Farb-Überschreibung reicht hier oft aus, damit Überschriften und unterstützender Text lesbar bleiben.

Unterstützte Blocktypen

1. Banner
2. Blog post
3. Kontaktformular
4. Bild
5. Produkt
6. Rich text
7. Testimonial
8. Video

Banner

Verwenden Sie Banner für Aktionen, Kampagnenbotschaften oder eine visuell reichhaltige Feature-Kachel. Es unterstützt eigene Hintergrundmedien, Vordergrundinhalte, ein optionales Vordergrundbild und Linkverhalten und ist damit einer der flexibelsten Blöcke in diesem Abschnitt. Mehr über den Banner-Block erfahren Sie hier.

1. Verwenden Sie Banner zuerst, wenn Sie einen Hero-artigen Lead-Block möchten.
2. Halten Sie den Text knapp, wenn der Block eine stärker kontrollierte Form behalten soll.
3. Link-Stile über den gesamten Block funktionieren am besten, wenn das Banner ein klares Ziel hat.

Blogbeitrag

Verwenden Sie Blog post, um redaktionelle Inhalte innerhalb der Collage hervorzuheben. Es bindet einen ausgewählten Artikel ein und ermöglicht Ihnen, die Kartendarstellung anzupassen, damit sie zum Rest des Layouts passt. Mehr über den Blogbeitrag erfahren Sie hier.

1. Verwenden Sie kompakte Texteinstellungen, wenn der Artikel ein unterstützendes Element und nicht der Hauptfokus ist.
2. Karten im Banner-Stil geben dem hervorgehobenen Bild mehr visuelles Gewicht.

Kontaktformular

Verwenden Sie Kontaktformular, wenn Sie einen auf Antworten ausgerichteten Block innerhalb der Collage wünschen, etwa für Anfragen, Support-Aufforderungen oder Lead-Erfassung. Es umfasst eigene Steuerelemente für Header, Schaltfläche, Hintergrund und Farben. Mehr über den Kontaktformular-Block erfahren Sie hier.

1. Halten Sie den einleitenden Text kurz, damit das Formular leicht zu erfassen bleibt.
2. Ein benutzerdefinierter Blockhintergrund kann helfen, das Formular vom Inhalt der umliegenden Blöcke abzuheben.

Bild

Verwenden Sie Bild für Fotografie, Markenassets, unterstützende Visuals oder verlinkte visuelle Kacheln. Es umfasst Steuerelemente für Seitenverhältnis, Beschriftung, Overlay, Ausrichtung und Farben für eine flexible Darstellung. Mehr über den Bild-Block erfahren Sie hier.

1. Wählen Sie Seitenverhältnisse sorgfältig aus, wenn Sie Bildblöcke neben textlastigen Inhalten platzieren.
2. Verwenden Sie Beschriftungen nur, wenn das Bild Kontext oder zusätzliche Bedeutung benötigt.

Produkt

Verwenden Sie Produkt, um kuratierte Ware zur Collage hinzuzufügen, ohne zu einem eigenen Produktabschnitt zu wechseln. Das eignet sich gut für storygetriebenes Merchandising, Geschenkeführer und Kampagnenseiten. Mehr über den Produkt-Block erfahren Sie hier.

1. Halten Sie die Stile der Produktkarten über mehrere Produktblöcke hinweg konsistent, damit das Layout sauberer wirkt.
2. Aktivieren Sie Variantenauswahlen nur dann, wenn diese zusätzliche Interaktion klaren Mehrwert bietet.

Rich text

Verwenden Sie Rich text für unterstützenden Text, Storytelling, Anweisungen oder kleine Hinweise zwischen stärker visuellen Blöcken. Es bietet Ihnen eine kompakte textbasierte Kachel mit optionalem Symbol, Überschrift, Fließtext, Schaltfläche, Hintergrund- und Farbsteuerungen. Mehr über den Rich text-Block erfahren Sie hier.

1. Kürzerer Text funktioniert in diesem Layout meist besser als lange Absätze.
2. Hintergrund- und Farbeinstellungen können helfen, den Block wie eine gestaltete Karte statt wie reinen Text wirken zu lassen.

Kundenstimme

Verwenden Sie Testimonial, um soziale Beweise neben Produkten, Medien oder Werbeinhalten hinzuzufügen. Sie können ein Zitat, eine Bewertung, eine Quelle, ein zugehöriges Produkt und optionale Bilder oder Videos einfügen. Mehr über den Kundenstimme erfahren Sie hier.

1. Kurze Zitate lassen sich im Raster leichter ausbalancieren.
2. Wenn Sie das Testimonial mit einem Produkt verknüpfen, unterstützt es Vertrauen und Conversion zugleich.

Video

Verwenden Sie Video für eingebettete oder gehostete Videoinhalte innerhalb der Collage. Es unterstützt Seitenverhältnis, Vorschaubild, Autoplay-Verhalten, Overlays, Beschriftungen und Ausrichtungsoptionen. Mehr über den Video-Block erfahren Sie hier.

1. Fügen Sie ein Vorschaubild hinzu, wenn Sie vor dem Start der Wiedergabe einen saubereren ersten Eindruck wünschen.
2. Prüfen Sie Autoplay- und Overlay-Optionen gemeinsam, damit sich das Wiedergabeverhalten bewusst anfühlt.

Tipp

Die ausgewogenste Collage kombiniert meist einen dominanten visuellen Block mit einfacheren unterstützenden Blöcken, etwa einem führenden Banner zusammen mit Produkt-, Rich text- oder Bild-Blöcken.

Standard-Abschnittseinstellungen

Header-Einstellungen

Verwenden Sie Header-Einstellungen, um oberhalb der Collage eine optionale Beschriftung, Überschrift, unterstützenden Text, ein Symbol und eine Schaltfläche hinzuzufügen. Das hilft, den Inhalt zu rahmen und dem Abschnitt auf längeren Seiten eine klarere Struktur zu geben.

Halten Sie die Überschrift knapp, damit sie den Abschnitt einführt, ohne mit den hervorgehobenen Blöcken zu konkurrieren. Wenn Sie eine Abschnittsschaltfläche hinzufügen, behandeln Sie sie als wichtigste Aktion auf Abschnittsebene.

Abschnittshintergrund-Einstellungen

Verwenden Sie Abschnittshintergrund-Einstellungen, um eine Farbe, einen Verlauf, ein Bild oder ein Video hinter dem gesamten Abschnitt hinzuzufügen. Das ist nützlich, wenn sich die Collage vom umgebenden Inhalt abheben soll.

Hintergrundmedien können den Abschnitt dramatischer wirken lassen, sie können aber auch die Lesbarkeit und den wahrgenommenen Abstand beeinflussen. Verwenden Sie Overlays, wenn Sie stärkeren Kontrast benötigen, ohne die Hintergrundgestaltung zu verlieren.

Padding-Einstellungen

Verwenden Sie Padding-Einstellungen, um den Abstand oberhalb und unterhalb der Collage zu steuern. Kleine Änderungen hier können den Abschnitt entweder kompakter und stärker auf Funktion ausgerichtet oder großzügiger und hochwertiger wirken lassen.

Größerer Padding funktioniert oft am besten, wenn der Abschnitt einen eigenen Hintergrund hat. Kompakteres Padding kann helfen, wenn dieser Abschnitt in einem dichten Seitenverlauf liegt.

Trennlinien-Einstellungen

Verwenden Sie Trennlinien-Einstellungen, um oben oder unten im Abschnitt eine Linie hinzuzufügen. Dadurch erhält die Collage eine klarere Begrenzung, ohne ihre Abstände oder ihren Hintergrund zu ändern.

Eine dezente Trennlinie reicht normalerweise aus. Wenn die Trennlinienfarbe transparent ist, verwendet der Abschnitt die Standard-Randfarbe aus Ihren Theme-Einstellungen.

Sichtbarkeitseinstellungen

Verwenden Sie Sichtbarkeitseinstellungen, um den Abschnitt je nach Gerätegröße ein- oder auszublenden. Das ist hilfreich, wenn Sie auf kleineren Bildschirmen eine andere Inhaltsanordnung wünschen.

Verwenden Sie gerätespezifische Sichtbarkeit mit Bedacht, damit Sie keine unnötigen doppelten Inhalte erzeugen. Wenn Sie separate Versionen erstellen, halten Sie die Botschaften und Links abgestimmt.

Breiten-Einstellungen

Verwenden Sie Breiten-Einstellungen, um sowohl die Inhaltsbreite als auch die äußere Abschnittsbreite zu steuern. In Collage können Breitenänderungen stark beeinflussen, wie offen, dicht oder redaktionell das Layout wirkt.

Die Inhaltsbreite ist die wichtigste Layout-Einschränkung, während die Abschnittsbreite vor allem dann relevant ist, wenn Sie eine Hintergrundgestaltung verwenden. Prüfen Sie Breitenänderungen möglichst im Live-Storefront, da der Editor den Abstand enger erscheinen lassen kann, als er auf der Seite wirkt.

Nutzungshinweise

1. Mit Absicht beginnen. Platzieren Sie Ihren wichtigsten oder visuell stärksten Block zuerst, da er immer zum großen Feature-Block wird.
2. Die mobile Reihenfolge planen. Wenn der mobile Ablauf wichtig ist, testen Sie beide Collage-style-Optionen und entscheiden Sie, ob Stacking eine klarere Story von oben nach unten ergibt.
3. Schwere und leichte Blöcke ausbalancieren. Mischen Sie textlastige Blöcke mit einfacheren visuellen Blöcken, damit eine Seite des Layouts nicht überladen wirkt.
4. Gleiche Höhen gezielt einsetzen. Vertikales Strecken hilft, ein ordentlicheres Raster zu schaffen, prüfen Sie es aber, wenn ein Block deutlich mehr Inhalt enthält als die anderen.
5. Kontrast nach dem Styling prüfen. Immer wenn Sie benutzerdefinierte Hintergründe oder Farb-Überschreibungen hinzufügen, prüfen Sie die Lesbarkeit erneut auf Desktop und Mobile.
6. Beide Haltepunkte prüfen. Desktop- und Mobile-Steuerelemente können unterschiedliches Layout-, Ausrichtungs-, Sichtbarkeits- oder Medienverhalten erzeugen. Bestätigen Sie daher den Abschnitt in beiden Ansichtsgrößen.
7. Formulare und Produkte als interaktiv behandeln. Kontakt- und Produktblöcke können sich je nach Kundeneingaben, Validierungsstatus, ausgewählten Varianten, Menge und Verfügbarkeit ändern. Prüfen Sie daher auch leere, erfolgreiche und Fehlerzustände sowie Commerce-Aktionen.
8. Medien-Überschreibungen sparsam verwenden. Leere oder Standardwerte bewahren in der Regel das Fallback-Styling, während explizite Farben, Verläufe oder separate Desktop- und Mobile-Medienauswahlen den jeweiligen Bereich unabhängiger verhalten lassen und Zuschnitt, Ladeverhalten und Lesbarkeit beeinflussen können.