Multicolumn

Erstellen Sie flexible Grids mit gemischten Inhalten, die auf Mobilgeräten zu einer wischbaren Diashow werden können.

Ausgewählte Links

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Verwenden Sie Multicolumn, um flexible Layouts mit gemischten Inhalten in einem einzelnen Abschnitt zu erstellen. Sie können Text, Medien, Werbeinhalte, Karten und Utility-Blöcke kombinieren und dann steuern, wie viele Spalten auf jedem Gerät angezeigt werden und ob mobile Besucher statt eines Standard-Grids eine wischbare Diashow sehen. Einen breiteren Ü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 bestimmen das gesamte Layout, bevor Sie einzelne Blöcke fein abstimmen. Beginnen Sie hier, um festzulegen, wie dicht, großzügig oder interaktiv sich der Abschnitt anfühlen soll.

Layout und Ausrichtung

Verwenden Sie die Inhaltsausrichtung, um zu steuern, wie Blöcke innerhalb jeder Zeile angeordnet werden, wenn sie unterschiedliche Höhen haben. Das ist vor allem dann wichtig, wenn Sie kurze Textblöcke mit höheren Bannern, Bildern oder Videos kombinieren.

Die Anzahl der Spalten für Desktop, Tablet und Mobilgerät definiert das Raster für jede Bildschirmgröße. Tablet kann den Desktop-Wert übernehmen, wenn 0 eingetragen ist. Das ist nützlich, wenn Sie weniger gerätespezifische Anpassungen wünschen.

Verhalten der mobilen Diashow

Aktivieren Sie Als Diashow auf Mobilgeräten anzeigen, wenn der Abschnitt auf kleineren Bildschirmen zu hoch oder zu dicht wirkt. Dadurch ändert sich das mobile Erlebnis von einem gescannten Grid zu einer wischbaren Abfolge.

Wenn Sie die mobile Diashow aktivieren, überprüfen Sie die Reihenfolge der Blöcke sorgfältig. Besucher erleben den Abschnitt dann Slide für Slide, statt das gesamte Layout auf einmal zu sehen.

Zeilen mit gleicher Höhe

Verwenden Sie Inhalt vertikal strecken, wenn Sie ein saubereres, gleichmäßigeres Grid wünschen. Blöcke werden so gestreckt, dass sie der Höhe des höchsten Blocks in derselben Zeile entsprechen. Das funktioniert besonders gut für Karten, Testimonials und Banner.

Lassen Sie die Option deaktiviert, wenn jeder Block seine natürliche Höhe behalten soll.

Diashow-Einstellungen

Wenn das Diashow-Verhalten aktiv ist, steuern diese Einstellungen, wie Besucher durch die Inhalte navigieren. Weitere Details finden Sie in der Referenz zu Diashow-Steuerelementen.

Der Animationsstil hat die größte visuelle Wirkung. Der Standardstil sorgt für ein eher karussellartiges Layout, während Fade eine Darstellung mit jeweils einem Element erzeugt.

Autoplay, Verzögerung, Endlosschleife und Pause bei Hover helfen Ihnen dabei zu entscheiden, ob sich der Abschnitt eher wie ein passiver Promo-Slider oder wie eine manuelle Inhaltsgalerie anfühlen soll. Pause bei Hover gilt nur auf Desktop, daher sollte sich Autoplay auf Touch-Geräten dennoch angenehm anfühlen.

Position der Navigation, Navigationssteuerung und Paginierungseinstellungen helfen Besuchern zu erkennen, dass weitere Inhalte verfügbar sind. Die Vorschau der nächsten Slides ist nützlich, wenn Sie auf zusätzliche Inhalte hinweisen möchten, eignet sich jedoch weniger für kompaktere oder stärker zentrierte Layouts.

Farbeinstellungen

Mit dieser Gruppe können Sie die Text- und Symbolfarben des Abschnitts überschreiben, ohne Ihr allgemeines Theme-Styling zu ändern. Das ist besonders nützlich, wenn der Abschnittshintergrund oder die Blockmischung einen anderen Kontrast benötigen, um gut lesbar zu bleiben.

Wenn einzelne Blöcke außerdem eigene Farbeinstellungen verwenden, achten Sie auf eine klare Hierarchie. Farben auf Abschnittsebene funktionieren am besten, wenn der gesamte Abschnitt einen einheitlichen Ton haben soll.

Unterstützte Blocktypen

Banner
Blogbeitrag
Breadcrumbs
Kontaktformular
Überschrift
Bild
Produkt
Rich Text
Testimonial
Video

Verwenden Sie Banner-Blöcke für Aktionen, hervorgehobene Nachrichten oder visuelle Calls to Action. Sie unterstützen eigene Hintergrundmedien, Vordergrundinhalte, ein optionales Vordergrundbild und benutzerdefinierte Spaltenüberspannungen.

Weitere Blockdetails finden Sie im Banner-Block.

Verwenden Sie größere Spannweiten, wenn der Banner sowohl Medien als auch Text enthält.
Feste Seitenverhältnisse helfen, ein ordentlicheres Grid zu erstellen.
Verlinkungsstile für den gesamten Block eignen sich am besten, wenn der gesamte Banner als ein einzelnes Klickziel dienen soll.

Blogbeitrag und Produkt

Diese Blöcke fügen kuratierte Artikel- und Produktkarten zum Layout hinzu. Beide unterstützen benutzerdefinierte Spannweiten und blockbasierte Karten-Styling-Optionen. Dadurch eignen sie sich gut, wenn Sie einen gemischten redaktionellen und verkaufsorientierten Abschnitt erstellen möchten.

Weitere Einrichtungsdetails finden Sie im Blogbeitrag-Block und im Produkt-Block.

Halten Sie die Kartenstile konsistent, wenn der Abschnitt als eine einzige Sammlung wirken soll.
Verwenden Sie größere Spannweiten gezielt, um ein einzelnes Element hervorzuheben.
Im mobilen Diashow-Modus ist die Blockreihenfolge wichtiger als die Blockbreite.

Bild und Video

Verwenden Sie Medienblöcke, um visuelle Anker zwischen textlastigen oder kartenlastigen Inhalten einzufügen. Beide unterstützen Seitenverhältnisse, Bildunterschriften, Overlays, Ausrichtungssteuerungen und benutzerdefinierte Spannweiten.

Medien-spezifische Optionen finden Sie im Bild-Block und im Video-Block.

Stimmen Sie die Seitenverhältnisse benachbarter Medienblöcke aufeinander ab, um ein saubereres Layout zu erhalten.
Verwenden Sie Overlays nur dann, wenn sie die Lesbarkeit oder Konsistenz verbessern.
Fügen Sie ein Posterbild hinzu, wenn ein gehostetes Video ein stärkeres erstes Bild benötigt.

Rich Text und Überschrift

Diese Blöcke helfen dabei, längere Layouts zu strukturieren und Inhaltsgruppen einzuführen. Verwenden Sie sie, um dichte Grids aufzulockern, kurze redaktionelle Inhalte hinzuzufügen oder fokussierte Calls to Action innerhalb des Abschnitts zu platzieren.

Formatierungsoptionen für Inhalte finden Sie im Rich Text-Block.

Verwenden Sie Überschrift-Blöcke, um in längeren Abschnitten eine interne Struktur zu schaffen.
Halten Sie den Einsatz von Schaltflächen gezielt, damit Aktionen nicht konkurrieren.
Vermeiden Sie mehrere H1-Überschriften auf derselben Seite.

Kundenstimme

Testimonial-Blöcke kombinieren Zitatinhalte mit optionalem Produktkontext und optionalen unterstützenden Medien. Sie eignen sich gut, wenn Sie Social Proof in ein gemischtes Werbelayout integrieren möchten.

Zitat- und Medieneinstellungen finden Sie im Kundenstimme.

Halten Sie Zitate kurz, damit der Block ausgewogen bleibt.
Verlinken Sie ein zugehöriges Produkt, wenn das Testimonial ein bestimmtes Produkt unterstützt.
Wenn Sie ein Video hinzufügen, halten Sie benachbarte Blöcke visuell einfacher.

Kontaktformular und Breadcrumbs

Mit diesen Utility-Blöcken kann Multicolumn mehr als nur Werbeinhalte darstellen. Verwenden Sie das Kontaktformular für flexible Landingpage-Layouts und Breadcrumbs, wenn Sie in einer benutzerdefinierten Komposition Navigationskontext benötigen.

Optionen für Utility-Blöcke finden Sie im Kontaktformular-Block und im Breadcrumbs-Block.

Geben Sie funktionalen Blöcken genug Breite, damit sie leicht zu verwenden bleiben.
Platzieren Sie Breadcrumbs nahe am Anfang des Inhaltsflusses.
Vermeiden Sie, zu viele Utility-Blöcke in einen kleinen Abschnitt zu mischen.

Standard-Abschnittseinstellungen

Header-Einstellungen

Verwenden Sie die gemeinsamen Header-Einstellungen, um den Abschnitt mit einer Überschrift, einer Beschriftung, unterstützendem Text, einem Symbol und einer optionalen Schaltfläche einzuführen. In Multicolumn ist das besonders hilfreich, wenn das Layout mehrere Inhaltstypen mischt und eine klare Einleitung oder Aktion benötigt.

Padding-Einstellungen

Verwenden Sie die gemeinsamen Padding-Einstellungen, um den Abstand oberhalb und unterhalb des Abschnitts zu steuern. Vergrößern Sie den Abstand, wenn das Layout mehr Luft benötigt, und reduzieren Sie ihn, wenn die Seite dichter wirken soll.

Abschnittshintergrund-Einstellungen

Verwenden Sie die gemeinsamen Abschnittshintergrund-Einstellungen, um Farbe, Verlauf, Bild oder Video hinter dem gesamten Abschnitt hinzuzufügen. Starke Hintergründe können Kontrast und wahrgenommenen Abstand verändern, daher sollten Sie sie zusammen mit Ihren Text- und Blockfarben prüfen. Wenn Sie im Theme-Editor Hilfe zur Einrichtung benötigen, sehen Sie sich die Shopify-Dokumentation zum Anpassen von Abschnitten an.

Trennlinien-Einstellungen

Verwenden Sie die gemeinsamen Trennlinien-Einstellungen, um oberhalb oder unterhalb des Abschnitts eine Linie hinzuzufügen. Das ist hilfreich, wenn Multicolumn zwischen optisch ähnlichen Abschnitten steht und eine klarere Abgrenzung benötigt.

Sichtbarkeitseinstellungen

Verwenden Sie die gemeinsamen Sichtbarkeitseinstellungen, um den Abschnitt je nach Gerät ein- oder auszublenden. Das ist nützlich, wenn Sie ein Layout für größere Bildschirme und eine andere Abschnittskonfiguration für Mobilgeräte möchten.

Breiten-Einstellungen

Verwenden Sie die gemeinsamen Breiten-Einstellungen, um sowohl die Inhaltsbreite als auch die äußere Abschnittsbreite zu steuern. In Multicolumn beeinflussen Breiten-Einstellungen stark, wie dicht sich das Grid anfühlt, besonders wenn Sie viele Spalten verwenden oder einen Abschnittshintergrund hinzufügen.

Nutzungshinweise

Überprüfen Sie den Abschnitt nach dem Hinzufügen von Blöcken. Neue Blöcke können die Balance und Wirkung des gesamten Layouts verändern. Prüfen Sie die Komposition daher nach jeder größeren Inhaltsänderung erneut.
Testen Sie beide Geräteerlebnisse. Desktop- und Mobile-Steuerelemente können Layout, Ausrichtung und Navigation verändern. Überprüfen Sie den Abschnitt daher vor der Veröffentlichung in beiden Größen.
Verwenden Sie Überschreibungen bewusst. Leere Werte oder Werte im Standardstil erhalten in der Regel das Fallback-Styling des Themes, während explizite Farben, Verläufe oder separate Medien den Abschnitt unabhängiger machen.
Prüfen Sie die Lesbarkeit von Medien auf jedem Gerät. Wenn Desktop- und Mobile-Medien separat konfiguriert sind, können Zuschnitt und Overlays variieren. Stellen Sie daher sicher, dass Bildunterschriften, Fokusbereiche und Text klar bleiben.
Halten Sie Formulare leicht erfassbar. Wenn Sie einen Kontaktformular-Block verwenden, stellen Sie sicher, dass Erfolgsmeldungen und Fehlermeldungen vor den umliegenden Inhalten gut lesbar bleiben.
Betrachten Sie den mobilen Diashow-Modus als Abfolge. Ordnen Sie die Blöcke in der Reihenfolge an, in der Besucher durch sie wischen sollen, da das Layout nicht mehr als vollständiges Grid wahrgenommen wird.

Align v2.0