Studio Editor: Zwischen Flexbox-basierten und rasterbasierten Tools wählen

Der Studio Editor bietet leistungsstarke Layout-Tools, um Elemente zu organisieren, die jeweils auf spezifische Designanforderungen zugeschnitten sind. Diese Tools basieren auf zwei gängigen CSS-Technologien – Raster und Flexbox. Wenn du den Unterschied zwischen beiden kennst, kannst du die besten responsiven Layouts planen, um die Inhalte deines Kunden zu präsentieren.

In diesem Artikel teilen wir die Layout-Tools nach Typ auf, erklären ihre wichtigsten Funktionen und helfen dir, zu entscheiden, welches am besten für deine Anforderungen geeignet ist.

Raster sind ein zweidimensionales CSS-Modell, das Zeilen und Spalten verwendet, um Elemente innerhalb vordefinierter Zellen anzuordnen. Sie sind besonders leistungsstark bei der Erstellung responsiver, flexibler Layouts mit präziser Steuerung.

Leere Abschnitte verfügen über ein integriertes Raster, das eine einzelne Zelle (mit dem gesamten Abschnitt) enthält. Teile das Raster nach Bedarf in weitere Zellen auf, um dem Inhalt eine responsive Struktur zu verleihen. Nachdem du dich für ein Layout für den Desktop entschieden hast, kannst du ein anderes für kleinere Breakpoints wählen.

Ein erweitertes CSS Grid bietet vollständige Freiheit bei der Erstellung komplexer Layouts in Abschnittsrastern, Containern, Lightboxen, Flexboxen und Repeater-Elementen. Du kannst die genaue Größe jeder Zelle an jedem Breakpoint mithilfe von responsiven Maßeinheiten festlegen (z. B. fr, Min./Max., %).

Geeignet für: komplexe Layouts, die pixelgenaue Anpassungen erfordern.

Ein Container ist ein einfaches, aber unverzichtbares Layout-Tool. Wenn du Elemente an die Container-Box anhängst, wird diese automatisch zum übergeordneten Element und definiert die Struktur der Elemente darunter.

Geeignet für: isolierte Standalone-Layouts innerhalb von Abschnitten.

Eine Flexbox ist ein eindimensionales CSS-Modell, das für Layouts optimiert ist, in denen Elemente innerhalb eines übergeordneten Containers dynamisch angepasst werden müssen. Mit Flexbox-Tools können Elemente nahtlos an den zugewiesenen Platz angepasst werden, egal ob sie sich vergrößern, verkleinern oder umbrechen.

Ein Stapel ist ein unsichtbarer Flex-Container, der die vertikale oder horizontale Ausrichtung der Elemente sicherstellt. Durch das Stapeln bleiben die Ränder zwischen den Elementen intakt und Elemente überlagern sich auf kleineren Bildschirmen nicht.

Zusätzlich kannst du die Reihenfolge der Stapelelemente pro Breakpoint festlegen, um sicherzustellen, dass das Layout auf allen Bildschirmgrößen gut aussieht.

Geeignet für: isolierte Standalone-Layouts innerhalb eines Abschnitts, in denen Elemente eine präzise Ausrichtung entlang einer einzigen horizontalen oder vertikalen Achse benötigen.

Eine Flexbox ist ein vorgefertigtes Flex-Layout, bei dem die Elemente automatisch an jeden Bildschirm angepasst werden. Sie besteht aus responsiven Containern mit verschiedenen Anzeigetypen, die zu deinen spezifischen Inhalten passen (z. B. Mosaik, Slider, Spalten).

Du kannst für jeden Viewport einen anderen Anzeigetyp wählen (z. B. eignen sich Schieberegler-Layouts hervorragend für Mobilgeräte) und eine bestimmte Elementreihenfolge festlegen.

Geeignet für: Eine große Menge an Inhalten in einem übersichtlichen, praktischen Layout ordnen.

Ein Repeater ist eine Liste von Elementen, die das gleiche Design und Layout, aber jeweils unterschiedliche Inhalte haben. Die Layout- und Designanpassungen erfolgen automatisch, sodass alles einheitlich ist.

Was Repeater wirklich einzigartig macht, ist die Möglichkeit, sie mit deinen Content-Sammlungen zu verknüpfen. Auf diese Weise kannst du die Inhalte vom Backend aus verwalten und aktualisieren, ohne das eigentliche Design zu beeinträchtigen. Das macht Repeater zum ultimativen datengesteuerten Layout-Tool.

Geeignet für: Listen oder jede Art von Inhalten, die du in Elemente aufteilen möchtest und die einheitlich aussehen sollen.

Plane das gewünschte Layout für jede Bildschirmgröße, bevor du eines unserer Tools auswählst. Dann kannst du ein Layout-Tool auswählen, das die Funktionen enthält, die du benötigst.

Jedes Layout-Tool ist für unterschiedliche Mengen und Arten von Inhalten entwickelt. Ein Container eignet sich beispielsweise gut für kleinere, gezielte Inhalte, während sich ein große Abschnittsraster besser zum Organisieren komplexer Layouts eignet.

Ebenso eignen sich Flexboxen und Repeater zwar hervorragend, um große Mengen an Inhalten auf organisierte Weise zu präsentieren, dienen jedoch unterschiedlichen Zwecken. Repeater optimieren die Einheitlichkeit, indem sie für alle Elemente das gleiche Layout und Design anwenden, während Flexboxen dir die Freiheit geben, jedes Element einzeln zu gestalten.

Flexboxen und Rasterelemente unterscheiden sich in der Art und Weise, wie sich der Inhalt an unterschiedliche Bildschirmgrößen anpasst. Raster zeigen eine unterschiedliche Anzahl von Zeilen und Spalten an, damit alles auch auf kleinere Bildschirme zu passt. In Flexbox-basierten Tools wird der Inhalt automatisch umgebrochen und/oder neu angeordnet, um an den Bildschirm des Besuchers angepasst zu werden.

Nur Repeater unterstützen diese Option. Wähle also dieses Tool, wenn du Inhalte aus CMS-Sammlungen anzeigen möchtest.

Alternativ kannst du bestimmte Elemente (z. B. Text, Bild) mit der Sammlung verknüpfen und sie zu einem Container oder Stapel hinzufügen, um das Layout zu organisieren.