Studio Editor: Elemente stapeln
7 min
In diesem Artikel
- Einen Stack anwenden
- Zwischen horizontalem und vertikalem Stack wechseln
- Einen Stack verwalten
- Einen Stack gestalten
- Das Layout des Stacks anpassen
Elemente zu stapeln ist eine schnelle Methode, um dein Design mit einheitlichem Abstand zu organisieren und so ein sauberes und aufgeräumtes 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 Abstand) und sich nie überschneiden.
Abgesehen davon kannst du negative Margen verwenden, um Elemente absichtlich zu überlappen.
Probleme mit sich überlappenden Elementen?
Sieh dir unser Troubleshooting-Video an, um zu erfahren, was du überprüfen und wie du dieses Problem beheben kannst.
Einen Stack anwenden
Wenn Elemente nebeneinander platziert werden (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 werden (z. B. 2 x 2 Elemente), stehen dir sowohl die vertikalen als auch die horizontalen Stack-Optionen zur Auswahl.
- Du kannst den Responsivitätsprüfer verwenden, um Möglichkeiten zum Stapeln benachbarter Elemente zu erkennen und sicherzustellen, dass sie sich nie versehentlich überlappen.
Um einen Stack anzuwenden:
- Öffne deinen Editor.
- Richte die Elemente aus, die du stapeln möchtest.
- Wähle eines der Elemente aus.
- Fahre mit der Maus über das Symbol für Stack
(horizontal) /
(vertikal), um eine Vorschau anzuzeigen, wie der Stack aussehen wird.
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 Margen festzulegen.
Wusstest du schon?
Du kannst auch negative Margen erstellen, um Elemente absichtlich zu überlappen.
Zwischen horizontalem und vertikalem Stack wechseln
Gefällt dir das Layout eines Stacks nicht? Du kannst ihn jederzeit von horizontal nach vertikal (und umgekehrt) umschalten, um ihn nach deinen Wünschen auszurichten. Dadurch werden die Elemente automatisch neu angeordnet, sodass sie in der richtigen Reihenfolge sind.
Um das Layout eines Stacks zu wechseln:
- Wähle den Stack in deinem Editor aus.
- Klicke auf das Dropdown-Menü.
- Wähle Horizontal oder Vertikal aus.
Einen Stack verwalten
Du kannst den Stack an neue Inhalte und Anforderungen anpassen. Füge dem Stack weitere Elemente hinzu, verschiebe sie mit einem Klick 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 als Nächstes aus, was du tun möchtest:
Ein Element zum Stack hinzufügen
Ein Element vom Stack trennen
klicken. Klicke anschließend auf Vom Stack trennen.
Elemente im Stack neu anordnen
/ Nach unten verschieben 
oder die Symbole Nach links verschieben 
/ Nach rechts verschieben 
.
Stapelelemente auflösen
Einen Stack gestalten
Der Stack 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 die Ecken des Stacks auch runder oder eckiger gestalten.
Um einen Stack zu gestalten:
- Öffne deinen Editor.
- Wähle den entsprechenden Stack aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen
.
- Verwende die verfügbaren Optionen unter Design, um den Stack anzupassen:
- Lege die Hintergrundfarbe fest. Du kannst auch die Deckkraft anpassen und einen Glaseffekt hinzufügen.
- Füge einen Rand hinzu, um den Stack einzurahmen.
- Wähle einen Radius für die Ecken.
- Aktiviere den Schatten und verwalte Einstellungen wie Winkel, Entfernung, Größe usw.
Das Layout des Stacks anpassen
Passe das Stack-Layout an, um sicherzustellen, dass jedes Element so platziert, ausgerichtet und mit Abstand versehen ist, wie es deiner kreativen Vision oder den Anforderungen des Kunden entspricht.
Um das Stack-Layout anzupassen:
- Öffne deinen Editor.
- Wähle den entsprechenden Stack 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 Stack-Layout anzupassen:
- Wechsle das Stack-Layout von Horizontal zu Vertikal oder umgekehrt.
- (Nur horizontal) Wechsle die Ausrichtung von Links nach rechts zu Rechts nach links oder umgekehrt.
- Gib unter Elementabstand einen Wert ein, um gleiche Ränder zwischen den Stack-Elementen (d. h. Artikeln) zu erstellen.
- Wähle eine Ausrichtung für die Stack-Elemente: Links, Rechts, Zentrum oder Blocksatz.
- Füge den Seiten einen Abstand hinzu.
Wusstest du schon?
Du kannst den Abstand und die Zeichenabstände 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. Du kannst sogar die Größeneinheit wechseln, falls erforderlich.