Studio Editor: Elemente stapeln
8 Min.
In diesem Artikel
- Einen Stack anwenden
- Zwischen horizontalem und vertikalem Stack wechseln
- Einen Stack verwalten
- Einen Stack gestalten
- Das Layout des Stacks anpassen
Das Stapeln von Elementen ist eine schnelle Möglichkeit, dein Design mit konsistentem Zeichenabstand zu organisieren und ein sauberes und poliertes Layout zu erstellen. Ein Stack ist ein Flexbox-Container, der eine Gruppe von Elementen „umschließt“ – so wird sichergestellt, dass sie in der richtigen Reihenfolge bleiben (mit dem von dir definierten Zeichenabstand) und sich nie überschneiden.
Davon abgesehen kannst du negative Margen verwenden, damit sich Elemente absichtlich überschneiden.
Sich überschneidende Elemente verwalten?
Sieh dir unser Video zur Fehlerbehebung an, um zu erfahren, was du überprüfen musst und wie du dieses Problem beheben kannst.
Einen Stack anwenden
Wenn Elemente nebeneinander platziert sind (im selben Parent-Element), erscheint die Option, sie zu stapeln. Basierend auf der Reihenfolge, in der du Elemente platzierst, kannst du sie entweder horizontal oder vertikal stapeln.
Gut zu wissen:
- Wenn die Elemente in einer quadratischen Form platziert sind (z. B. 2 x 2 Elemente), stehen dir sowohl die vertikalen als auch die horizontalen Stack-Optionen zur Auswahl.
- Du kannst den Responsive Checker verwenden, um Möglichkeiten zum Stapeln benachbarter Elemente zu finden und sicherzustellen, dass sie sich nie versehentlich überschneiden.
Um einen Stack anzuwenden:
- Öffne deinen Editor.
- Richte die Elemente aus, die du zusammenfügen möchtest.
- Wähle eines der Elemente aus.
- Fahre mit der Maus über das Symbol für Stack
(horizontal) /
(vertikal), um eine Vorschau des Stacks zu sehen.
Hinweis: Die verfügbaren Stack-Symbole (horizontal oder vertikal) hängen davon ab, wie du die Elemente ausgerichtet hast. - Klicke auf das Symbol für Stack, um es anzuwenden.
- (Optional) Ziehe die Linie zwischen den Elementen, um die Margen festzulegen.
Wusstest du schon?
- Du kannst Elemente auch stapeln, indem du sie auf der Arbeitsfläche mehrfach auswählst und im Inspektor auf Stack klickst.
- Du kannst negative Margen erstellen, damit sich Elemente absichtlich überschneiden.
Zwischen horizontalem und vertikalem Stack wechseln
Gefällt dir das Layout eines Stacks nicht? Du kannst es jederzeit von horizontal auf vertikal (und umgekehrt) umstellen, um sie so auszurichten, wie du möchtest. Dies ordnet die Elemente automatisch neu an, sodass sie in der richtigen Reihenfolge sind.
Um das Layout eines Stacks zu ändern:
- Wähle den Stack in deinem Editor aus.
- Klicke auf das Dropdown.
- Wähle Horizontal oder Vertikal aus.
Einen Stack verwalten
Du kannst den Stack anpassen, um ihn an neuen Content und neue Anforderungen anzupassen. Füge dem Stack weitere Elemente hinzu, verschiebe sie mit einem Klick auf einen Button und trenne Elemente, die nicht mehr benötigt werden.
Um einen Stack zu verwalten:
- Öffne deinen Editor.
- Wähle den entsprechenden Stack aus.
- Wähle aus, was du als Nächstes tun möchtest:
Ein Element zum Stack hinzufügen
Ein Element vom Stack trennen
klicken. Klicke dann auf Vom Stapel trennen.
Elemente im Stack neu anordnen
/ Nach unten verschieben 
oder Nach links verschieben 
/ Nach rechts verschieben 
.
Stapel auflösen
Einen Stack gestalten
Der Stack muss nicht transparent sein – du kannst ihn so gestalten, dass der Content auf der Seite hervorsticht. Füge eine Hintergrundfarbe, einen Rand und einen Schatten hinzu. Du kannst die Ecken des Stacks auch runder oder quadratischer machen.
Um einen Stack zu gestalten:
- Öffne deinen Editor.
- Wähle den relevanten Stack aus.
- Klicke auf das Symbol für Inspektor öffnen
oben rechts im Editor.
- Verwende die verfügbaren Optionen unter Design, um den Stack anzupassen:
- Lege die Hintergrundfarbe fest. Du kannst auch die Deckkraft anpassen und einen Glas-Effekt hinzufügen.
- Füge einen Rand hinzu, um den Stack zu rahmen.
- Wähle einen Radius für die Ecken.
- Aktiviere den Schatten und verwalte Einstellungen wie Winkel, Entfernung, Größe usw.
Tipp:
Du kannst die Ecken des Stacks auch anpassen, indem du den Radius-Anfasser auf der Arbeitsfläche ziehst.
Das Layout des Stacks anpassen
Passe das Stack-Layout an, um sicherzustellen, dass jedes Element so angeordnet, ausgerichtet und mit Abständen versehen ist, dass es deiner kreativen Vision oder den Bedürfnissen deines Kunden entspricht.
Um das Layout des Stacks anzupassen:
- Öffne deinen Editor.
- Wähle den relevanten Stack aus.
- Klicke auf das Symbol für Inspektor öffnen oben rechts im Editor.
- Scrolle nach unten zu Layout.
- Verwende die verfügbaren Optionen, um das Layout des Stacks anzupassen:
- Wechsle das Layout des Stacks von Horizontal zu Vertikal oder umgekehrt.
- (Nur bei horizontaler Ausrichtung) Ändere die Ausrichtung von Links nach rechts zu Rechts nach links oder umgekehrt.
- Gib unter Elementabstand einen Wert ein, um gleiche Abstände zwischen den Elementen des Stacks (d. h. Artikel) zu erstellen.
- Wähle eine Ausrichtung für die Elemente des Stacks: Links, Rechts, Zentrum oder Blocksatz.
- Füge an den Seiten Innenabstand hinzu.
Wusstest du schon? 
Du kannst den Innenabstand und den Abstand direkt auf der Arbeitsfläche anpassen. Ziehe die Linie zwischen den Elementen oder mache einen Doppelklick auf die Linie, wenn du lieber einen genauen Wert eingeben möchtest. Du kannst bei Bedarf sogar die Größeneinheit ändern.