> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/verschachtelte-layout-container-in-websites-und-funnels-nutzen.md).

# Verschachtelte Layout-Container in Websites und Funnels nutzen

Plane komplexe Bereiche in Websites und Funnels mit verschachtelten Layout-Containern – verständlich, mobil nachvollziehbar und ohne eigenen Code.

## Was du damit erreichst

Ein Layout-Container ist ein unsichtbarer Rahmen, der Inhalte auf einer Seite ordnet. Mit verschachtelten Layout-Containern legst du einen solchen Rahmen in einen anderen. So entstehen zum Beispiel ein zweispaltiger Abschnitt, in dessen rechter Spalte ein Bild, eine Überschrift und mehrere Vorteile sauber untereinander stehen.

Das hilft dir besonders bei Bereichen, die mehr brauchen als „Text unter Bild“. Du bestimmst für jede Ebene getrennt, ob Inhalte nebeneinander, untereinander oder als Collage angeordnet werden. Abstände und Ausrichtung lassen sich ebenfalls pro Ebene einstellen. Die Seite wird dadurch nicht automatisch schöner – aber ihre Struktur wird gezielt steuerbar, ohne dass du selbst Code schreiben musst.

> **Merke:** Verschachtelung ist ein Werkzeug für klare Gruppen. Lege nur dann eine weitere Ebene an, wenn sie einen sichtbaren Bereich sinnvoll zusammenhält.

## Bevor du beginnst

Öffne die Website- oder Funnel-Seite, die du bearbeiten möchtest, im Seiten-Editor. Überlege vorher kurz, welche Gruppen die Besuchenden sehen sollen. Eine einfache Skizze reicht oft:

* äußerer Container: der gesamte Bereich;
* innerer Container: eine Spalte oder eine zusammengehörende Gruppe;
* Inhalte: zum Beispiel Überschrift, Text, Bild, Schaltfläche oder Vorteilskarten.

Beginne mit einer einfachen Struktur. Die Originaloberfläche zeigt beim Hinzufügen zunächst eine einspaltige Layout-Variante. Das ist ein guter Ausgangspunkt, wenn innerhalb einer Spalte später weitere Inhalte geordnet werden sollen.

## Welche Elemente sich verschachteln lassen

Nur **Layout-Container** lassen sich ineinander ziehen. Abschnitte und Zeilen bleiben auf einer Ebene und können keinen verschachtelten Layout-Container aufnehmen.

Beim Ziehen zeigt der Editor eine blaue Markierung an einer gültigen Ablagestelle. Erst wenn du diese Markierung siehst, kannst du den Container dort loslassen. Fehlt sie, ziehst du vermutlich auf einen Abschnitt, eine Zeile oder ein gewöhnliches Inhaltselement statt auf einen Layout-Container.

## Struktur Schritt für Schritt aufbauen

1. Öffne die gewünschte Website- oder Funnel-Seite im Editor.
2. Füge einen **Layout-Container** auf der Arbeitsfläche ein. Dieser äußere Container bildet den Rahmen für den gesamten Bereich.
3. Ziehe einen zweiten **Layout-Container** in den ersten Container. Achte dabei auf die blaue Markierung für eine gültige Ablagestelle.
4. Klicke den äußeren oder inneren Container an, dessen Anordnung du gerade festlegen möchtest.
5. Öffne die **Layouteinstellungen** dieses Containers.
6. Wähle die passende Richtung:
   * **Reihe**, wenn die enthaltenen Bereiche nebeneinander stehen sollen;
   * **Spalte**, wenn sie untereinander angeordnet werden sollen;
   * **Collage**, wenn du eine freiere, überlagernde Anordnung brauchst.
7. Passe in **Abstand und Ausrichtung** die Außenabstände, Innenabstände und Position für genau diese Ebene an.
8. Wiederhole die Schritte nur für weitere Gruppen, die wirklich eine eigene Struktur brauchen.
9. Füge anschließend Text, Bilder, Schaltflächen oder andere Inhalte in die innersten Container ein.
10. Speichere die Seite.

Änderungen an der Richtung siehst du direkt auf der Arbeitsfläche. Nimm deshalb eine Einstellung nach der anderen vor: zuerst die Richtung, dann die Abstände. So erkennst du sofort, welche Änderung die Darstellung beeinflusst.

## Die drei Richtungen richtig einsetzen

### Reihe

Verwende **Reihe** für nebeneinanderliegende Inhalte: etwa eine linke Informationsspalte und eine rechte Spalte mit Bild. Ein äußerer Container in Reihenrichtung ist häufig die Basis eines zweispaltigen Bereichs.

### Spalte

Verwende **Spalte** innerhalb einer bereits vorhandenen Spalte, wenn mehrere Elemente untereinander eine Einheit bilden sollen. Das kann zum Beispiel ein Bild mit einer Überschrift, einem kurzen Text und einer Schaltfläche sein.

### Collage

Verwende **Collage** nur, wenn sich Bereiche bewusst überlappen oder frei positioniert werden sollen. Diese Variante braucht eine besonders sorgfältige Prüfung auf kleineren Bildschirmen, weil sich überlagernde Inhalte sonst gegenseitig verdecken können.

## Abstände und Ausrichtung pro Ebene verstehen

Jeder Layout-Container besitzt eigene Einstellungen für Abstände und Ausrichtung. Das ist der Hauptgrund für die Verschachtelung: Der äußere Container kann den Abstand zum Rest der Seite steuern, während der innere Container nur seine eigenen Inhalte ordnet.

* **Außenabstand** trennt den Container von den Bereichen außerhalb.
* **Innenabstand** schafft Luft zwischen dem Rand des Containers und seinen Inhalten.
* **Ausrichtung** bestimmt, wie die enthaltenen Bereiche innerhalb dieser Ebene angeordnet werden.
* **Position** beeinflusst die Platzierung innerhalb des übergeordneten Containers.

Wenn ein Textblock zu nah am Bild steht, ändere zuerst den Innenabstand des Containers, der genau diese beiden Elemente enthält. Ändere nicht sofort den äußeren Bereich – sonst verschiebst du möglicherweise auch andere Inhalte.

## Auf kleinen Bildschirmen prüfen

Verschachtelte Bereiche sind für anpassungsfähige Seiten gedacht. Trotzdem beeinflusst jede Ebene die verfügbare Breite der darunterliegenden Inhalte. Prüfe nach dem Aufbau besonders sorgfältig:

1. Werden nebeneinanderliegende Bereiche auf schmalen Bildschirmen in einer sinnvollen Reihenfolge dargestellt?
2. Bleiben Überschriften, Bilder und Schaltflächen gut lesbar und erreichbar?
3. Sind Innen- und Außenabstände noch angemessen, oder wird der Bereich unnötig lang?
4. Überdeckt bei einer Collage kein Element ein anderes?

Ändere immer nur eine Ebene und kontrolliere danach die Darstellung erneut. Arbeite dabei von außen nach innen: erst der gesamte Bereich, dann die Spalte, dann die darin enthaltene Gruppe.

## Wiederverwenden statt neu bauen

Du kannst einen aufgebauten Bereich duplizieren oder als gespeicherten Abschnitt sichern. Die verschachtelte Struktur bleibt dabei erhalten. Wird ein gespeicherter Abschnitt zentral aktualisiert, bleibt auch seine innere Struktur bei den verwendeten Versionen erhalten.

Passe eine Kopie bewusst an, wenn sie auf einer anderen Seite einen anderen Zweck hat. Das spart Zeit, ohne dass eine Änderung an einem einzelnen Bereich versehentlich eine unpassende Struktur auf einer anderen Seite erzeugt.

## Realistisches Praxisbeispiel

Du möchtest auf einer Leistungsseite einen Einstiegsbereich bauen:

1. Lege einen äußeren Layout-Container in **Reihenrichtung** an.
2. In die linke Hälfte kommen Überschrift, kurze Erklärung und eine Schaltfläche.
3. Ziehe in die rechte Hälfte einen zweiten Layout-Container.
4. Stelle den inneren Container auf **Spaltenrichtung**.
5. Füge dort ein Bild und darunter drei kurze Vorteile ein.
6. Gib dem inneren Container einen eigenen Innenabstand, damit Bild und Vorteile nicht am Rand kleben.
7. Prüfe die Darstellung auf schmalem Bildschirm: Die linke und rechte Hälfte sollen in einer verständlichen Reihenfolge erscheinen.
8. Speichere die Seite und kontrolliere die veröffentlichte Seite als Besucherin oder Besucher.

Das Ergebnis ist ein zusammenhängender Bereich, den du später ändern kannst, ohne die Abstände der übrigen Seite mitzuverändern.

## Grenzen und typische Probleme

### Ein Container lässt sich nicht im Zielbereich ablegen

Prüfe, ob der Zielbereich ein Layout-Container ist. Nur dort erscheint die blaue Markierung für eine gültige Ablage. Abschnitte und Zeilen können keine verschachtelten Layout-Container aufnehmen.

### Die Seite wird nach mehreren Ebenen schwer zu bearbeiten

Es gibt praktisch keine starre technische Grenze. Für eine gut wartbare und schnell ladende Seite sind jedoch meist höchstens drei bis vier Ebenen sinnvoll. Wenn du die Struktur nicht mehr auf einen Blick erklären kannst, vereinfache sie.

### Eine Änderung verschiebt zu viele Inhalte

Wahrscheinlich wurde eine Einstellung am äußeren Container verändert, obwohl nur eine innere Gruppe angepasst werden sollte. Wähle den kleinsten Container, der die betroffenen Inhalte enthält, und ändere dort zuerst Richtung oder Abstand.

### Die mobile Darstellung wirkt unruhig

Reduziere die Verschachtelung oder ändere die Richtung der betroffenen Ebene. Besonders bei freien Überlagerungen solltest du kontrollieren, ob Inhalte sich noch vollständig sehen und bedienen lassen.

## Ergebnis sicher kontrollieren

Nach dem Speichern solltest du drei Dinge sehen können:

* Der innere Container liegt eindeutig innerhalb des äußeren Containers.
* Die gewählte Richtung ordnet die Inhalte wie geplant an.
* Abstände und Ausrichtung bleiben auf großen und kleinen Bildschirmen verständlich.

Wenn diese drei Punkte stimmen, ist die Struktur nicht nur aufgebaut, sondern auch im Alltag gut weiterbearbeitbar.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/verschachtelte-layout-container-in-websites-und-funnels-nutzen.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.