header-logo
Erfahre, wie du Wix für den Aufbau deiner Website und deines Unternehmens nutzen kannst
Gestalte und verwalte deine Website mit Wix.
Verwalte Premiumpakete, Abos und Rechnungen
Führe dein Unternehmen und vernetze dich mit Mitgliedern.
Kaufe, verknüpfe oder übertrage eine Domain.
Stärke dein Unternehmen und deine Webpräsenz.
Steigere deine Sichtbarkeit mit SEO und Marketing.
Nutze erweiterte Funktionen für mehr Effizienz.
Finde Lösungen oder kontaktiere uns.
placeholder-preview-image
Verbessere deine Kenntnisse mit unseren Tutorials.
Erhalte Tipps für Webdesign, Marketing und mehr.
Erfahre, wie du den organischen Traffic steigerst.
Erstelle eine Website mit unserer Full-Stack-Plattform.
Finde einen Spezialisten, der dir hilft, deine Ziele zu erreichen.
placeholder-preview-image

Studio Editor: Elemente stapeln (Stacking)

6 min
In diesem Artikel
  • Einen Stapel anwenden
  • Die Stapelrichtung ändern
  • 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 stellt sicher, 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.
Arbeitest du mit überlappenden Elementen?
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

Elemente stapeln ist eine schnelle Möglichkeit, über die du dein Design mit einheitlichen Abständen organisieren und ein klares und ansprechendes Layout zu schaffen. Wenn du (innerhalb eines übergeordneten Elements) mehrere nebeneinanderliegende Elemente auswählst, wird die Option zum Stapeln angezeigt. 

Einen Stapel anwenden:

  1. Öffne deinen Editor.
  2. Klicke auf ein Element, das du im Stapel anordnen möchtest.
  3. Halte die Umschalttaste gedrückt und wähle die anderen Stapelelemente aus.
  4. Klicke auf Stapeln.
  5. (Optional) Ziehe die Linie zwischen den Elementen, um Ränder festzulegen.
Die Abstände zwischen den Stapelelementen ziehen, um die Ränder zu vergrößern
Tipp:
Du kannst auch negative Ränder erstellen, damit Elemente sich absichtlich überlappen.
Die Stapelränder in die entgegengesetzte Richtung ziehen, um eine Überlappung zwischen Bild und Text zu erstellen

Die Stapelrichtung ändern

Wenn du Elemente stapelst, wird die Richtung automatisch durch die Reihenfolge der Elemente bestimmt. Wenn die Elemente zum Beispiel vertikal angeordnet sind, ist der Stapel vertikal.
So oder so, du kannst die Richtung jederzeit ändern, indem du das Dropdown-Menü verwendest. Dadurch werden die Elemente automatisch neu angeordnet, damit sie sich in der richtigen Reihenfolge befinden.
Beispiel für einen horizontalen Stapel, der in einen vertikalen Stapel umgewandelt wurde. Die Elemente sind jetzt in vertikaler Reihenfolge.

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:

  1. Öffne deinen Editor.
  2. Wähle den entsprechenden Stapel aus.
  3. Wähle aus, was du als Nächstes tun möchtest:

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:

  1. Öffne deinen Editor.
  2. Wähle den entsprechenden Stapel aus.
  3. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
Screenshot, der zeigt, wie das Inspektor-Panel im Studio Editor geöffnet wird.
  1. 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.
Screenshot des Inspektor-Panels und eines auf der Arbeitsfläche ausgewählten Stapels mit den Designoptionen

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. 

Das Stapellayout anpassen:

  1. Öffne deinen Editor.
  2. Wähle den entsprechenden Stapel aus.
  3. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
Screenshot, der zeigt, wie das Inspektor-Panel im Studio Editor geöffnet wird.
  1. Scrolle nach unten zu Layout.
  2. Verwende die verfügbaren Optionen, um das Stapellayout anzupassen:
    • Ändere die Richtung von Horizontal auf Vertikal 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. 
Ein Stapel auf der Arbeitsfläche neben dem Inspektor-Panel, der den Layout-Abschnitt hervorhebt
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.