Studio Editor: Elemente stapeln (Stacking)
6 min
In diesem Artikel
- Einen Stapel anwenden
- Zwischen horizontalem und vertikalem Stapel wechseln
- Einen Stapel verwalten
- Einen Stapel gestalten
- Das Stapellayout anpassen
Ein Stapel ist ein Flexbox-Container, der eine Gruppe von Elementen „umschließt“, unabhängig davon, ob sie sich in vertikaler oder horizontaler Reihenfolge befinden. Er sorgt dafür, dass die Elemente in dem von dir definierten Abstand in der entsprechenden Reihenfolge bleiben und sich nie überlagern.
Du kannst jedoch negative Ränder verwenden, damit Elemente sich absichtlich überlappen.
Hast du Probleme mit Elementen, die sich überlappen?
Sieh dir unseres Video zur Fehlerbehebung an, um zu erfahren, was du überprüfen kannst und wie du das Problem beheben kannst.
Einen Stapel anwenden
Über das Stapeln von Elementen kannst du dein Design mit einheitlichen Abständen organisieren und ein klares und ansprechendes Layout schaffen. Wenn du mehrere nebeneinanderliegende Elemente (innerhalb eines übergeordneten Elements) auswählst, wird die Option zum Stapeln angezeigt.
Verwende den Responsivitätsprüfer, um Möglichkeiten zum Stapeln verwandter Elemente zu erkennen, damit sie sich nicht versehentlich überlappen.
Um einen Stapel anzuwenden:
- Öffne deinen Editor.
- Klicke auf ein Element, das du im Stapel anordnen möchtest.
- Halte die Umschalttaste gedrückt und wähle die anderen Stapelelemente aus.
- Klicke auf Stapeln.
- (Optional) Ziehe die Linie zwischen den Elementen per Drag-and-Drop, um Ränder festzulegen.
Tipp:
Du kannst auch negative Ränder erstellen, damit Elemente sich absichtlich überlappen.
Zwischen horizontalem und vertikalem Stapel wechseln
Wenn du Elemente stapelst, ordnen sie sich automatisch horizontal oder vertikal an, basierend auf der Reihenfolge, in der du sie platzierst. Wenn die Elemente zum Beispiel untereinander platziert werden, erscheint der Stapel vertikal.
Du kannst jederzeit über das Dropdown-Menü, das beim Auswählen von Stapeln angezeigt wird, zwischen horizontal und vertikal wechseln. Dann werden die Elemente automatisch neu angeordnet, sodass sie in der richtigen Reihenfolge sind.
Einen Stapel verwalten
Du kannst den Stapel an neue Inhalte und Anforderungen anpassen. Füge weitere Elemente zum Stapel hinzu, verschiebe sie mit einem Klick auf einen Button und trenne Elemente, die nicht mehr benötigt werden.
Um einen Stapel zu verwalten:
- Öffne deinen Editor.
- Wähle den entsprechenden Stapel aus.
- Wähle aus, was du als Nächstes tun möchtest:
Ein Element zum Stapel hinzufügen
Ein Element vom Stapel trennen
. Klicke dann auf Vom Stapel trennen.
Elemente im Stapel neu anordnen
/ Nach unten verschieben 
, oder das Symbol für Nach links verschieben 
/ Nach rechts verschieben 
.
Stapel von Elementen auflösen
Einen Stapel gestalten
Der Stapel muss nicht transparent sein, du kannst ihn so gestalten, dass der Inhalt auf der Seite hervorsticht. Füge eine Hintergrundfarbe, einen Rand und einen Schatten hinzu. Du kannst auch die Stapelecken runder oder eckiger gestalten.
Um einen Stapel zu gestalten:
- Öffne deinen Editor.
- Wähle den entsprechenden Stapel aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen
.
- Verwende die unter Design verfügbaren Optionen, um den Stapel anzupassen:
- Lege die Hintergrundfarbe und die Deckkraft fest.
- Füge einen Rand hinzu, um den Stapel zu umrahmen.
- Wähle einen Radius für die Ecken.
- Aktiviere die Option Schattierung und verwalte Einstellungen wie Winkel, Abstand, Größe usw.
Das Stapellayout anpassen
Passe das Stapellayout an. So wird jedes Element so angeordnet, ausgerichtet und mit Abstand versehen, wie es deiner kreativen Vision oder den Anforderungen deines Kunden entspricht.
Um das Stapellayout anzupassen:
- Öffne deinen Editor.
- Wähle den entsprechenden Stapel aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Scrolle nach unten zu Layout.
- Verwende die verfügbaren Optionen, um das Stapellayout anzupassen:
- Ändere das Stapel-Layout von Horizontal zu Vertikal oder umgekehrt.
- (Nur horizontal) Ändere die Ausrichtung von links nach rechts nach rechts nach links oder umgekehrt.
- Gib unter Elementabstand einen Wert ein, um gleiche Ränder zwischen den Stapelelementen zu erstellen (z. B. zwischen Artikeln).
- Wähle eine Ausrichtung für die Stapelelemente aus: Links, Rechts, Zentriert oder Justieren.
- Füge an den Seiten Abstände hinzu.
Schon gewusst?
Du kannst Abstand und Anordnung direkt auf der Arbeitsfläche anpassen. Ziehe die Linie zwischen den Elementen oder doppelklicke auf die Linie, wenn du lieber einen genauen Wert eingeben möchtest. Bei Bedarf kannst du sogar die Größeneinheit wechseln.