> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Landingpages mit Boxen strukturieren

> Nutzen Sie Boxen, um Elemente zu gruppieren, das Layout zu steuern und strukturierte, flexible Landingpage-Designs mit präzisen Abständen zu gestalten.

Das Box-Element ist eines der wichtigsten Layout-Werkzeuge in LanderLab.

Damit gruppieren, organisieren und steuern Sie Elemente innerhalb Ihrer Seite präziser.

***

## Was ist eine Box?

Eine Box ist ein Container, der andere Elemente aufnimmt.

In eine Box können Sie platzieren:

* Text
* Bilder
* Schaltflächen
* Listen
* Weitere Boxen

👉 Stellen Sie sich eine Box als Hülle vor, die Ihnen hilft, Inhalte zu strukturieren.

<Note>
  Wichtige Hinweise

  * Boxen sind unverzichtbar für die Strukturierung von Layouts
  * Sie können Boxen verschachteln, um mehr Flexibilität zu erhalten
  * Sie lösen die meisten Probleme mit Ausrichtung und Abständen
</Note>

### So fügen Sie eine Box hinzu

* Öffnen Sie die linke Seitenleiste
* Wechseln Sie zu **Layout**
* Ziehen Sie **Box** in eine Section oder Spalte

***

## Warum Boxen wichtig sind

Boxen geben Ihnen mehr Kontrolle darüber, wie Elemente angeordnet werden.

Sie nutzen sie, um:

* Zusammengehörende Elemente zu gruppieren
* Elemente sauber auszurichten
* Anspruchsvollere Layouts zu erstellen
* Abstände und Positionierung fein abzustimmen

👉 Die meisten detaillierten Layouts sind auf Boxen angewiesen, um korrekt zu funktionieren.

***

## So funktionieren Boxen

Strukturbeispiel:<br />Section → Spalten → Box → Elemente

* Eine Box liegt innerhalb von Spalten oder Sections
* Die Elemente liegen in der Box
* Sie können Boxen in andere Boxen setzen, um noch mehr Kontrolle zu erhalten

***

## Layout-Steuerung

Bei ausgewählter Box steuern Sie:

* **Direction** → Layout als Zeile oder Spalte
* **Alignment** → Elemente positionieren (links, zentriert, rechts)
* **Distribution** → Elemente gleichmäßig verteilen
* **Gap** → Abstand zwischen Elementen

Hier finden die meisten Layout-Anpassungen statt.

***

## Gestaltungsoptionen

Boxen unterstützen außerdem:

* Hintergründe (Farbe oder Verlauf)
* Abstände (Padding und Margin)
* Rahmen und Eckenradius
* Schatten
* Breite und Höhe