Gestalten mit Flexbox-Technologie

Hinweis: Dieser Inhalt gilt sowohl für den Flex-Modus im Classic Editor als auch für den Editor 2.0. Welche Editor-Version du nutzt, erfährst du unter „Editor-Versionen".

Die Flexbox-Technologie (kurz „Flex") ist ein CSS-Layout-Modul, um Elemente in Abschnitten und Spalten anzuordnen. Elemente können damit flexen (wachsen/schrumpfen) und sich perfekt innerhalb eines Containers ausrichten. So gestaltest du pixelgenaue, responsive Abschnitte, die sich an jede Bildschirmgröße anpassen. Im Classic Editor wechselst du in den Flex-Modus, um mit Flexbox-Technologie zu gestalten. Im Editor 2.0 nutzt du Flexbox-Technologie standardmäßig.

Flex-Design-Panel

Das Design-Panel erscheint im Flex-Modus auf der rechten Seite und enthält die Design-Eigenschaften für das ausgewählte Element (Abschnitt, Spalte, Widget, innere Spalte oder erweitertes Raster). Jedes Element hat andere Eigenschaften, die sich im Design-Panel anpassen lassen. Die Design-Eigenschaften unterscheiden sich also je nachdem, welches Element ausgewählt ist. Zu den Design-Eigenschaften gehören je nach ausgewähltem Element Ausrichtung, Layout, Abstand, Größe und mehr.

Um das Design-Panel zu öffnen, klicke im Flex-Modus auf ein Element und dann auf Design bearbeiten (den Flex-Modus brauchst du nur, wenn du den Classic Editor nutzt). Das Design-Panel öffnet sich auf der rechten Seite des Flex-Modus, damit es dich beim Ansehen und Bearbeiten deines Designs nicht stört. Nachdem du das Design-Panel geschlossen hast, öffnest du es erneut, indem du oben rechts auf das Design-Panel-Symbol klickst.

Bereiche des Design-Panels

Das Design-Panel besteht aus 5 Bereichen: Ausrichtung, Layout, Abstand, Größe sowie Animation and Background. Hier erfährst du, was jeder Bereich kann und wofür du ihn nutzt.

Ausrichtung

Verfügbar für einzelne Elemente in einer Spalte oder inneren Spalte. Einzelne Elemente in einer Spalte oder vertikalen inneren Spalte mit vertikalem Auto-Layout lassen sich links, mittig, rechts ausrichten oder horizontal strecken, sodass sie 100 % der Container-Breite einnehmen.

Elemente lassen sich auch über das schwebende Menü ausrichten, indem du auf das Ausrichtung-Symbol klickst.

Layout

Voreinstellungen. Wähle ein voreingestelltes Layout für Elemente in einem Abschnitt. Die Optionen umfassen vertikale oder horizontale Ausrichtung.

Elemente pro Zeile. Wenn dein Inhalt über mehr als eine Zeile reicht, kannst du über das Dropdown-Menü wählen, wie viele Elemente pro Zeile erscheinen.

Artikel passen. Erscheint, wenn du Inhaltszeilen hast, und legt fest, wie die Elemente in die Zeilen passen. Das kann hilfreich sein, wenn du eine ungerade Anzahl an Elementen hast.

Volle Breite. Früher „full bleed" genannt, ist Volle Breite nur für Abschnitte verfügbar und lässt sich nur vom Desktop-Haupt-Breakpoint aus ändern. Auf Ein gestellt, reicht der Inhalt über die gesamte Bildschirmbreite. Auf Off gestellt, kann die Inhaltsbreite höchstens 1920 Pixel betragen. Standardmäßig ist Volle Breite auf Off gestellt. Mehr über Breakpoints erfährst du unter „Bildschirmgrößen und Geräte".

Ausrichtung des Inhalts. Damit richtest du mehrere Elemente in einer Spalte oder inneren Spalte gleichzeitig vertikal oder horizontal aus. Im Classic Editor lassen sich Elemente nur einzeln und horizontal ausrichten. Mehr dazu im Abschnitt „Flex-Ausrichtung und -Abstand" weiter unten.

Zeilen ausrichten. Damit legst du die Ausrichtung von Zeilen innerhalb einer Spalte oder inneren Spalte fest. Diese Einstellung wirkt sich nicht auf die Ausrichtung von Elementen innerhalb der Zeilen aus, sondern nur auf die Zeilen selbst.

Abstand

Abstand zwischen Spalten. Damit legst du den Abstand zwischen Spalten oder Widgets einmalig fest, und er gilt für alle Spalten in einem Abschnitt oder alle Widgets in einer Spalte. Bei Spalten wird der Abstand zwischen Widgets in Pixeln gemessen, wenn die Auto-Layout-Eigenschaft auf vertikal steht. Steht das Auto-Layout auf horizontal, wird der Abstand zwischen Widgets in Prozent gemessen. Diese Eigenschaft gilt nicht für Elemente in inneren Spalten oder erweiterten Rastern.

Ränder und Abstände festlegen. Margins sind der Abstand zwischen dem Rand des Elements und der Kante des Abschnitts, der Spalte, der inneren Spalte oder des erweiterten Rasters, in dem es enthalten ist. Standardmäßig sind die horizontalen Werte für Margin und Padding verknüpft. Wenn du den linken Wert anpasst, wird der rechte Wert automatisch angeglichen. Möchtest du die Werte nicht verknüpfen, klicke auf das Verknüpfungs-Symbol.

Beachte, dass sich Inline-Margins für Elemente in Spalten oder inneren Spalten direkt auf dem Canvas anpassen lassen. Mehr dazu unter „Äußerer und innerer Abstand".

Padding ist der innere Abstand des Elements. Klicke auf die Margin- oder Padding-Zahl, um einen neuen Wert einzugeben, und wähle dann über das Dropdown-Menü die Einheit, in der der Abstand gemessen wird (px, %, vh, vw oder A). Standardmäßig wird der horizontale Abstand in Prozent und der vertikale Abstand in Pixeln gemessen.

Wenn du zum Beispiel eine Spalte auswählst und das linke Padding auf 5 px setzt, entstehen 5 px Abstand zwischen der linken Kante der Spalte und der äußeren Kante der Elemente in der Spalte. Setzt du für dieselbe Spalte den linken Margin auf 5 px, entstehen 5 px Abstand zwischen der Kante der Spalte und der Kante des Abschnitts, der sie enthält.

Abstand oder Rand zurücksetzen. Ein Klick darauf im Design-Panel oder schwebenden Menü setzt das Padding oder die Margins des ausgewählten Elements auf null zurück.

Größe

Je nach ausgewähltem Element kannst du Höhe und Breite sowie den maximalen und minimalen Wert anpassen. Im Flex-Modus lässt sich die Höhe in px, vh, Prozent und A messen. Die Höhe von Flex-Spalten und der Abstand zwischen Spalten lassen sich jedoch nur in Prozent messen. Mehr zu Größeneinheiten findest du im Abschnitt „Größeneinheiten" weiter unten.

Die Standard-Größeneinheiten sind für jedes Element unterschiedlich. Textfelder sind zum Beispiel standardmäßig 100 % breit und Buttons 280px breit.

Bei Abschnitten kannst du nur die Höhe ändern. Die Breite eines Abschnitts wird durch das Gerät bestimmt, während die Breite des Inhalts im Abschnitt durch die Einstellung „Inhaltsbreite" im Website-Thema festgelegt wird. Bei Spalten kannst du nur die Breite ändern; die Höhe ergibt sich aus der Abschnittshöhe oder aus den inneren Elementen. Bei inneren Spalten und Widgets kannst du Höhe und Breite sowie den jeweiligen minimalen und maximalen Wert festlegen. Jede Größeneinheit ist möglich.

Animation and Background

Die Eigenschaften für Animation und Hintergrund sind im Flex-Modus ähnlich wie im Classic Editor.

Diese Auslöser und Animationen stehen zur Verfügung:

• Animationen für den Auslöser „Scroll":
  • Fade
  • Slide
  • Bounce
  • Roll
  • Rotate
  • Zoom
  • Flip
• Animationen für den Auslöser „Start":
  • Fade in
  • Slide in
  • Bounce in
  • Rotate in
  • Roll in
  • Zoom in
  • Flip in
  • Flash
  • Pulse
  • Rubber band
  • Shake
  • Swing
  • Tada
  • Wobble

Hinweis: Parallax ist für alle Widgets und Container verfügbar und lässt sich auf allen Bildschirmgrößen anwenden. Um Parallax zu aktivieren, klicke auf das Bild, wähle Design bearbeiten, scrolle zum Bereich Stil des Design-Panels und öffne das Menü Image Position.

Die Möglichkeit, ein Hintergrundbild statisch zu halten, ist auf Tablet, Mobil und Mac OS aufgrund einer iOS-Einschränkung nicht verfügbar.

Design-Panel für erweiterte Raster

Erweiterte Raster haben Design-Panel-Eigenschaften, die es für andere Elementtypen nicht gibt, weil sich damit freie Kompositionen und überlappende Elemente erstellen lassen. Wir empfehlen, dein Design bei verschiedenen Breakpoints zu prüfen.

Ausrichtung. Einzelne Elemente in einem erweiterten Raster lassen sich in jede Richtung ausrichten und strecken, weil sie nicht durch das Auto-Layout eingeschränkt sind.

Order. Im Bereich Arrangement des Design-Panels lässt sich diese Eigenschaft nur nutzen, wenn mehrere Elemente in einem erweiterten Raster liegen. Damit holst du ein ausgewähltes Element nach vorne, weiter nach vorne, nach hinten oder weiter nach hinten. Mehr dazu im Abschnitt „Überlappende Elemente erstellen" weiter unten.

Layout neu anordnen. Damit wählst du, wie die Spalten und Zeilen im erweiterten Raster angeordnet sind, um ein Layout zu erstellen.

Layout anpassen. Damit wählst du, wie die Spalten und Zeilen im erweiterten Raster angeordnet sind, um ein Layout zu erstellen.

Pin. Damit legst du die Position des Elements innerhalb des Rasters fest. Einmal gesetzt, bleibt das Element an derselben Position, auch wenn sich die Rastergröße ändert.

Netzstandort Verfügbar für Elemente in erweiterten Rastern, die in Spalten und/oder Zeilen aufgeteilt wurden, um ein Layout zu erstellen. Zeigt, wo das Element im Raster liegt.

Proportionen halten. Auf Ein gestellt, behalten die Elemente in einem erweiterten Raster ihre Proportionen, auch wenn sich die Rastergröße ändert.

Das Bild-Widget enthält ebenfalls einen Proportionen halten-Schalter, der seine ursprünglichen Proportionen beibehält.

Größeneinheiten

Hinweis: Dieser Inhalt gilt sowohl für den Flex-Modus im Classic Editor als auch für den Editor 2.0. Welche Editor-Version du nutzt, erfährst du unter „Editor-Versionen".

Größeneinheiten zu verstehen und wirksam einzusetzen ist entscheidend, um Layouts zu erstellen, die nicht nur ansprechend aussehen, sondern auch auf verschiedenen Geräten und Bildschirmgrößen responsiv sind. Das Design-Panel, im Editor 2.0 auf der rechten Seite des Editor-Canvas oder im Flex-Modus des Classic Editor, ist die Steuerzentrale für die Design-Eigenschaften ausgewählter Elemente, darunter Abschnitte, Spalten, Widgets, innere Spalten und erweiterte Raster. Dieser Artikel geht die im Design-Panel verfügbaren Größeneinheiten durch und bietet praktische Beispiele für ihre Nutzung.

Außerdem kannst du im Editor 2.0 Größeneinheiten vom Haupt-Breakpoint (Desktop) aus einrichten, sodass sie über alle Bildschirmgrößen hinweg skalieren. Größeneinheiten lassen sich auf Tablet- und Mobil-Breakpoints anpassen, ohne andere Breakpoints zu beeinflussen. Mehr dazu unter „Bildschirmgrößen und Geräte".

Prozent (%) für flexibles, proportionales Skalieren

Prozent (%) ist eine dynamische Größeneinheit, die bestimmt, welchen Anteil des Containers (Abschnitt, Spalte, innere Spalte oder erweitertes Raster) das Element über verschiedene Bildschirmgrößen hinweg einnimmt. Typischerweise stehen die Breiten von Flex-Elementen standardmäßig in Prozent. Prozent empfiehlt sich, wenn du Design-Konsistenz über Bildschirmgrößen hinweg halten willst, ohne bei jedem Breakpoint manuell Pixel anpassen zu müssen.

Setzt du zum Beispiel beide Spalten in einem Zwei-Spalten-Layout auf 50 % Breite, skalieren sie auf allen Bildschirmgrößen automatisch auf 50 %.

Prozent ist nützlich, um die relativen Elementgrößen über verschiedene Bildschirmmaße hinweg zu erhalten. Das heißt, Elemente skalieren proportional zu ihrem übergeordneten Container (Abschnitt oder Spalte) und sorgen so für ein einheitliches Layout-Bild.

Ein Bild mit 50 % Breite in einer Spalte nimmt zum Beispiel immer die Hälfte der Spaltenbreite ein, unabhängig von der Bildschirmgröße. Während Spalte und Bild auf Mobilgeräten schmaler wirken als auf dem Desktop, behält das Bild also seine proportionale Breite. Ebenso sorgt ein Padding von 4 % zwischen Spalten für gleichmäßige Abstände relativ zu den Spalten und anderen Bildschirmelementen, angepasst über verschiedene Bildschirmgrößen hinweg.

Pixel (px) für stabile, feste Maße

Pixel (px) sind eine feste Maßeinheit, die von Gerätegrößen unabhängig ist. Ein Button mit 250px behält seine Größe zum Beispiel auf Mobil-, Tablet- und Desktop-Geräten.

Sich allein auf Pixel zu verlassen, kann die Responsivität jedoch beeinträchtigen und manuelle Anpassungen bei jedem Breakpoint nötig machen. Während Pixel also für eine gleichbleibende Elementgröße sorgen, empfiehlt sich Prozent, um responsives Design zu fördern. Dieser Ansatz verringert den Bedarf an einzelnen Pixel-Anpassungen bei Breakpoints, vereinfacht den Gestaltungsprozess und verbessert die Responsivität insgesamt.

Viewport-Breite (vw) für responsives Skalieren nach Bildschirmbreite

Die Viewport-Breite (vw) passt Elemente dynamisch anhand der Bildschirmbreite (Viewport) an und sorgt so für proportionales Skalieren über verschiedene Geräte hinweg. Weist du einem Element zum Beispiel 50 vw zu, belegt es die Hälfte der Bildschirmbreite.

Viewport-Höhe (vh) für responsives Skalieren nach Bildschirmhöhe

Die Viewport-Höhe (vh) skaliert Elemente dynamisch im Verhältnis zur Bildschirmhöhe (Viewport). Weist du einem Element zum Beispiel 25 vh zu, reserviert es ein Viertel der Bildschirmhöhe. Das ist besonders nützlich für bildschirmfüllende Hintergründe (100 % vh) oder für Elemente, die sich an der Bildschirmhöhe orientieren müssen.

Automatisch (A) für inhaltsgesteuerte Anpassung

Die automatische Einheit passt sich dynamisch an die Inhaltshöhe an und eignet sich damit für Textblöcke und Spaltenhöhen, die sich nach ihrem Inhalt richten. Typischerweise stehen Textblöcke standardmäßig auf automatischen Einheiten. So können sich Elemente nahtlos ausdehnen oder zusammenziehen und behalten ein proportionales Layout bei.

Das Eltern-Kind-Konzept verschachtelter Elemente verstehen

Das Eltern-Kind-Konzept bestimmt die Organisation der Elemente: Primäre Elemente wie Header, Textkörper, Menüs und Footer enthalten mindestens einen Abschnitt. Jeder Abschnitt wiederum beherbergt mindestens eine Spalte, die als Container für verschiedene Elemente dient, etwa Text, Bilder oder Widgets wie innere Spalten und erweiterte Raster.

Übergeordnete Elemente behalten ihre Design-Einstellungen und erlauben so eine zentrale Steuerung ihres Erscheinungsbilds. Hat ein Abschnitt innerhalb eines übergeordneten Elements jedoch eigene Hintergrundfarben-Einstellungen, bildet der Hintergrund des übergeordneten Elements diese Anpassung womöglich nicht ab. Diese hierarchische Struktur sorgt für einen systematischen Aufbau der Website und ermöglicht effiziente Design-Abläufe und eine stimmige Darstellung der Inhalte.

Flex-Elemente auf dem Canvas auswählen und darin navigieren

Die Hierarchie der Elemente folgt einer Standardstruktur: Abschnitte enthalten Spalten und Spalten enthalten Widgets. Diese hierarchische Anordnung sorgt dafür, dass du ein Widget nicht direkt zu einem Abschnitt hinzufügen kannst, ohne dass es in eine Spalte eingebettet ist. Es gibt mehrere Wege, ein Element (Abschnitt, Spalte oder Widget) auszuwählen:

• Objekte direkt im Editor-Canvas auswählen: Du kannst direkt mit Elementen auf dem Editor-Canvas interagieren. Das macht es einfacher, bestimmte Komponenten zu erkennen und zu ändern, ohne aufwendig durch Panels oder Menüs zu navigieren. Sobald du ein Objekt auswählst, erscheint rechts das Design-Panel mit allen relevanten Design-Optionen für dieses Element.
• Breadcrumbs im schwebenden Menü: Über Breadcrumbs im schwebenden Menü navigierst du zurück zu übergeordneten Containern. Wenn du ein bestimmtes Element auswählst, klickst du einfach oben am Element auf die blauen Breadcrumbs, um zu seinem übergeordneten Container zurückzukehren.
• Breadcrumbs oben im Design-Panel: Das Design-Panel bietet oben ebenfalls Navigationsoptionen in Form von Breadcrumbs. Über diese Breadcrumbs springst du schnell zwischen verschiedenen Abschnitten oder Elementen auf dem Canvas.
• Ebenen-Panel: Wenn ein Element ausgewählt ist, hebt das Ebenen-Panel die zugehörigen Ebenen hervor. Gleichzeitig gibt der Editor visuelles Feedback, das dir die Navigation auf dem Canvas erleichtert.

Flex-Abschnitte

Flex-Abschnitte sind Zeilen mit zwei standardmäßigen Flex-Spalten, die ein einfaches Layout bilden. Sobald du einen Abschnitt hinzugefügt hast, kannst du weitere Spalten, innere Spalten oder erweiterte Raster hinzufügen, entfernen oder umsortieren, um dein gewünschtes Layout zu erstellen. Anschließend fügst du diesem Layout Widgets hinzu.

Einen Flex-Abschnitt hinzufügen

So fügst du einen Abschnitt hinzu:

1. Bewege den Mauszeiger zwischen zwei Zeilen und klicke auf Abschnitt hinzufügen. Oder klicke mit der rechten Maustaste, um das Kontextmenü zu öffnen, klicke auf Hinzufügen und wähle dann Flex-Abschnitt.
2. Klicke in der Seitenleiste auf Flex-Bereiche.
3. Wähle den gewünschten Flex-Abschnitt.
4. Klicke auf Speichern.

Hinweis: Die Möglichkeit, ein Hintergrundbild statisch zu halten, ist auf Tablet und Mobil aufgrund einer iOS-Einschränkung nicht verfügbar.

Einen Flex-Abschnitt speichern

So speicherst du einen Abschnitt:

1. Bewege den Mauszeiger über den gewünschten Abschnitt und klicke oben links im Abschnitt auf Flex-Abschnitt.
2. Klicke auf Als Abschnitt speichern und dann auf Nur diese Zeile auswählen.
3. Gib einen Abschnittsnamen ein, wähle die Kategorie, unter der der Abschnitt gespeichert wird, und lege die Freigaben für den Abschnitt fest.
4. Klicke auf Erstellen.
5. Klicke auf Fertig.

Einen Flex-Abschnitt löschen

Um einen Abschnitt zu löschen, klicke mit der rechten Maustaste, um das Kontextmenü zu öffnen, und wähle Löschen. Oder klicke im schwebenden Menü auf das Lösch-Symbol.

Flex-Spalten

Sobald du einen Abschnitt zu deiner Website hinzugefügt hast, kannst du Spalten hinzufügen, um Widgets im Abschnitt unterzubringen. Alle Abschnitte enthalten standardmäßig Spalten, du kannst aber weitere Spalten hinzufügen.

Beachte: Mehr als 8 Spalten sind nicht möglich.

Hinweis: Wenn du ein Element zu einer Spalte hinzufügst, bestimmt die Auto-Layout-Einstellung die Position. Um die Richtung des Auto-Layouts zu ändern, öffne das Design-Panel und wähle im Bereich Layout horizontal oder vertikal für das Auto-Layout.

Eine Flex-Spalte hinzufügen

So fügst du eine Spalte hinzu:

1. Klicke, um eine bestehende Spalte auszuwählen.
2. Klicke im schwebenden Menü auf das Symbol mit den drei waagerechten Punkten und wähle dann Spalte hinzufügen. Oder klicke auf das Plus-Symbol am linken oder rechten Rand der Spalte.

Eine Flex-Spalte duplizieren

Du kannst eine Spalte duplizieren, und sie wird rechts neben der ursprünglichen Karte hinzugefügt. Du kannst keine Spalten hinzufügen, die zusammen mehr als 100 % der Breite ergeben.

So duplizierst du eine Spalte:

1. Klicke, um eine Spalte auszuwählen.
2. Klicke im schwebenden Menü auf das Duplizieren-Symbol. Oder klicke mit der rechten Maustaste auf die Spalte, um das Kontextmenü zu öffnen, und wähle Duplizieren.

Eine Flex-Spalte löschen

Du kannst eine Spalte löschen, um sie aus dem Abschnitt zu entfernen. Jeder Abschnitt muss aber mindestens eine Spalte enthalten, das heißt, die letzte Spalte eines Abschnitts kannst du nicht löschen.

So löschst du eine Spalte:

1. Klicke, um die Spalte auszuwählen.
2. Klicke im schwebenden Menü auf das Löschen-Symbol. Oder klicke mit der rechten Maustaste auf die Spalte, um das Kontextmenü zu öffnen, und wähle Löschen.

Widgets in Flex hinzufügen

Du kannst Widgets auf mehrere Arten zu Spalten, inneren Spalten oder erweiterten Rastern hinzufügen. Wenn du bereits im Flex-Modus bist, fügst du Widgets direkt aus der Seitenleiste hinzu, indem du auf Widgets klickst und dann das gewünschte Widget wählst.

Hinweis: Wenn du den Flex-Modus im Classic Editor nutzt, kannst du ein Widget nicht per Drag-and-drop aus der Seitenleiste in eine Flex-Spalte ziehen.

So fügst du ein Widget hinzu:

1. Klicke auf eine Spalte, innere Spalte oder ein erweitertes Raster, um sie auszuwählen.
2. Klicke auf das Plus-Symbol in der Mitte der Spalte, inneren Spalte oder des erweiterten Rasters. Oder klicke auf das Plus-Symbol im schwebenden Menü.
3. Wähle ein Widget.

Du kannst Widgets auch über das Ebenen-Panel hinzufügen.

So fügst du ein Widget über das Ebenen-Panel hinzu:

1. Klicke, um eine Spalte auszuwählen.
2. Klicke in der Seitenleiste auf Ebenen.
3. Bewege im Ebenen-Panel den Mauszeiger über die Spalte, innere Spalte oder das erweiterte Raster, dem du ein Widget hinzufügen willst, und klicke auf das Plus-Symbol.
4. Wähle ein Widget.

Flex-Ausrichtung und -Abstand

Ausrichtung und Abstand lassen sich zusammen nutzen, um deine Designs umzusetzen.

Mehrere Elemente ausrichten

Beim Gestalten mit Flex sparst du Zeit, indem du mehrere Elemente innerhalb desselben Abschnitts, derselben Spalte oder inneren Spalte gleichzeitig ausrichtest.

So richtest du mehrere Elemente aus:

1. Wähle den Abschnitt, die Spalte oder die innere Spalte und klicke im schwebenden Menü auf das Ausrichtungs-Symbol.
2. Wähle die gewünschte Ausrichtung.

Das Design-Panel bietet zusätzliche Ausrichtungsoptionen, etwa die Richtung des Auto-Layouts zu ändern, zu strecken und mehr.

So richtest du Elemente über das Design-Panel aus:

1. Klicke mit der rechten Maustaste auf den gewünschten Abschnitt, die Spalte oder innere Spalte und wähle Design bearbeiten.
2. Wähle im Bereich Layout des Design-Panels unter Ausrichtung des Inhalts die gewünschte vertikale und horizontale Inhaltsausrichtung.

Wenn du Text über das schwebende Menü oder Design-Panel ausrichtest, richtet es sowohl den Text als auch das div-Tag aus.

Einzelne Elemente ausrichten

Zwar kannst du mehrere Elemente auf einmal ausrichten, manchmal willst du aber nur die Ausrichtung eines einzelnen Elements in einer Flex-Spalte ändern, ohne die anderen Elemente zu beeinflussen.

So richtest du ein einzelnes Element aus:

1. Wähle das gewünschte Element.
2. Klicke im schwebenden Menü auf das Ausrichtungs-Symbol und wähle die gewünschte Ausrichtung. Oder klicke mit der rechten Maustaste auf das Element und wähle Design bearbeiten. Das öffnet das Design-Panel, in dem du die Ausrichtung im Bereich Ausrichtung wählst.

Abstand zwischen Elementen

Du kannst den horizontalen oder vertikalen Abstand zwischen Spalten innerhalb desselben Flex-Abschnitts oder zwischen Widgets in einer Spalte, inneren Spalte oder einem erweiterten Raster festlegen.

So legst du den Abstand zwischen Elementen fest:

1. Klicke mit der rechten Maustaste auf den gewünschten Abschnitt, die Spalte, innere Spalte oder das erweiterte Raster und wähle Design bearbeiten.
2. Gib im Bereich Abstand des Design-Panels unter Abstand zwischen Elementen den Prozentwert für den horizontalen oder den Pixelwert für den vertikalen Abstand ein, den du zwischen Elementen haben möchtest, oder nutze den Schieberegler im Feld Abstand zwischen Elementen.

Du kannst das Padding für Abschnitte und Spalten zurücksetzen, indem du im schwebenden Menü auf das Abstand zurücksetzen-Symbol klickst.

Überlappende Elemente in Flex erstellen

Flex-Abschnitte erstellen ein Layout und richten Objekte automatisch aus, was dir hilft, schnell und einfach ansprechende Abschnitte zu gestalten. Bei einem komplexeren Design mit überlappenden Objekten oder freier Komposition brauchst du jedoch ein erweitertes Raster. Erweiterte Raster erlauben es, Elemente in freier Komposition ohne automatisches Layout zu platzieren. Deshalb empfehlen wir, dein Design bei allen Breakpoints zu prüfen.

So erstellst du überlappende Elemente:

1. Klicke, um eine Flex-Spalte auszuwählen.
2. Klicke im schwebenden Menü oder in der Flex-Spalte auf das Plus-Symbol.
3. Wähle im Bereich der Flex-Elemente Erweitertes Raster (früher „containers" genannt). Damit du Best Practices folgst, ziehe die Kanten des erweiterten Rasters so, dass es die gesamte Breite der Flex-Spalte einnimmt.
4. Wähle im Bereich Layout des Design-Panels ein vorgefertigtes Raster unter Layout neu anordnen. Oder nutze die Dropdown-Menüs Spalten und Zeilen unter „Layout anpassen, um Spalten und/oder Zeilen hinzuzufügen, wenn du dein eigenes Raster erstellen willst.
5. Klicke im schwebenden Menü auf das Plus-Symbol, wähle dann die gewünschten Widgets und ordne sie im erweiterten Raster an.
6. Klicke, um ein Element auszuwählen, und wähle im Bereich Anordnen des Design-Panels In den Vordergrund bringen, Nach vorne bringen, Nach hinten verschieben oder In den Hintergrund verschieben.

Wir empfehlen, dein Design bei jedem Breakpoint zu prüfen, wenn du erweiterte Raster nutzt. Bei überlappenden Elementen musst du das Design bei bestimmten Breakpoints womöglich anpassen.

Innere Spalten und Widgets für erweiterte Raster

Im Webdesign beeinflusst die Wahl des passenden Layout-Systems das Nutzererlebnis maßgeblich, besonders wenn du Layout-Elemente wie innere Spalte und erweitertes Raster in eine Website einbindest.

Das Widget innere Spalte empfiehlt sich für:

• Modulare Layouts: Perfekt für modulare Layouts, in denen Inhalte linear fließen, ideal für Navigationsmenüs, Karten oder listenartige Layouts.
• Responsives Design: Glänzt beim Erstellen responsiver Designs, die sich nahtlos an verschiedene Bildschirmgrößen und Geräte anpassen und für optimale Ausrichtung und Lesbarkeit sorgen.
• Dynamische Inhalte: Gut geeignet für dynamische Inhalte, die in Länge oder Größe variieren können, sodass du das Verhalten und die Größe von Elementen innerhalb eines Containers dynamisch steuerst.
• Verschachtelte Layouts: Durch ihre Verschachtelungsfähigkeit eignen sich innere Spalten für komplexe verschachtelte Layouts. Du kannst nach Bedarf weitere innere Spalten in den äußeren Container verschachteln und so Inhaltshierarchien flexibel und anpassungsfähig anordnen. Ebenso bietet das erweiterte Raster die Möglichkeit, Widgets, innere Spalten und sogar weitere erweiterte Raster in seiner Layout-Struktur zu verschachteln.

Das Widget erweitertes Raster empfiehlt sich für:

• Komplexe Layout-Strukturen: Unverzichtbar für aufwendige Layouts mit mehreren Zeilen und Spalten, mit präziser Kontrolle über Platzierung und Größe der Elemente.
• Nicht-lineare Designs: Perfekt für nicht-lineare Layouts, in denen Elemente unabhängig von ihrer Quellreihenfolge platziert werden müssen, für kreative Kompositionen und asymmetrische Anordnungen. Elemente lassen sich also nach Design-Anforderungen platzieren und anordnen.
• Responsives Webdesign: Auch wenn es sorgfältige Planung erfordert, bietet das erweiterte Raster robuste Werkzeuge für responsive Designs. Du kannst bei verschiedenen Viewport-Größen bestimmte Layout-Anpassungen festlegen, etwa Spalten neu ordnen, Elemente über mehrere Felder spannen und Rasterabstände setzen, für eine optimale Darstellung auf verschiedenen Geräten.

Wann nutzt du besser eine innere Spalte und wann ein erweitertes Raster?

Innere Spalten eignen sich am besten für modulare Layouts, besonders wenn du präzise Kontrolle über einzelne Elemente in einem Abschnitt brauchst oder ein automatisches Layout möchtest. Beachte aber: Während innere Spalten die Integrität des Abschnitts bewahren, ist das Verschieben von Widgets darin weniger flexibel als bei erweiterten Rastern.

Innere Spalten erlauben die Kontrolle über Zeilen oder Spalten einzeln, ideal für eindimensionale Layouts. Erweiterte Raster erlauben es, Zeilen und Spalten gleichzeitig zu bearbeiten, mit umfassender Kontrolle über die gesamte Layout-Struktur, ideal für zweidimensionale Layouts.

Das erweiterte Raster (CSS Grid) hat bei komplexen Layouts womöglich einen kleinen Vorteil, weil es DOM-Struktur, Rendering-Effizienz, das Laden von Ressourcen, Responsivität und die Zahl der HTTP-Anfragen optimiert. Innere Spalten funktionieren gut, bringen aber unter Umständen mehr verschachtelte HTML-Elemente mit sich und rendern dadurch etwas langsamer als erweiterte Raster.

Du kannst das Widget innere Spalte und das Widget erweitertes Raster auch im selben Abschnitt und überall auf der Website nutzen, um deine gewünschten Designs umzusetzen. Dabei findest du eine Balance zwischen der Gesamtstruktur des Layouts und den feineren Details der Inhaltsorganisation.

Eltern-Kind-Beziehungen zwischen Widget-Elementen

Eltern-Kind-Beziehungen zu verstehen ist grundlegend, um innere Spalten und erweiterte Raster sinnvoll einzusetzen. In diesen Layout-Systemen dient die Spalte, die Elemente enthält, als Elternteil, während die Elemente darin, etwa weitere Widgets, als Kinder gelten. Diese Beziehung bestimmt, wie Elemente innerhalb des Layouts positioniert und ausgerichtet werden, und sorgt für Stimmigkeit und strukturelle Integrität in deinem Webdesign.

Wichtig zu wissen: Du musst nicht immer innere Spalten hinzufügen. Oft reicht eine einzige Spalte für viele Anwendungsfälle. Die innere Spalte erlaubt es, Elemente einfach horizontal oder vertikal zu platzieren. Nötig sind ein Abschnitt als Flex-Container und eine Spalte, die innere Spalten beherbergt, wobei beide Spaltentypen als Flex-Items dienen und Eltern- und Kind-Element darstellen.

Das erweiterte Raster erlaubt die Platzierung von Elementen in vertikaler und horizontaler Richtung. Nötig sind ein Abschnitt als Container und ein erweitertes Raster, das das Rasterlayout auf dem übergeordneten Element oder Container deklariert, sodass alle seine Kinder zu Rasterelementen werden.