# Layouts / Blöcke erstellen

Um deine Seite mit Inhalt zu befüllen, öffne diese in der Administration und klicke unter "Seiteninhalt" auf "Keine Layouts". Es öffnet sich sich ein Pop-Up Menü, in welchem du ein Layout auswählen kannst.

<figure><img src="/files/eqHcRAIVptQ7hmZN0Gy5" alt=""><figcaption></figcaption></figure>

Das Layout bestimmt die Größe und die Menge der Spalten in diesem Bereich deiner Seite. In dem Beispiel haben wir ein zweispaltiges Layout gewählt, um links ein Bild anzuzeigen und rechts etwas Text. Möchtest du ein weiteres Layout hinzufügen, klicke unten auf das Plus. Hast du mehrere Layouts, kannst du über das 6-Punkte Icon rechts die Position / Anordnung verändern.

<figure><img src="/files/BFa9JLHDMtdMfpWO2Jk3" alt=""><figcaption></figcaption></figure>

Neben jedem Layout findest du einen Pfeil, über welchen du das Kontextmenü öffnen kannst. Auch darüber kannst du vor oder nach dem Layout ein weiteres erstellen. Du kannst das Layout duplizieren oder Löschen und die Einstellungen öffnen.

<figure><img src="/files/5r7gKzduVfuk9EizOESk" alt=""><figcaption></figcaption></figure>

In diesen Sektionseinstellungen hast du folgende Möglichkeiten:

**Volle Breite:** Normalerweise hat dein Inhalt links und rechts einen Abstand zum Rand. Mit dieser EInstellung erstreckt sich die ganze Sektion über die volle Breite.

**Volle Breite (nur Hintergrundfarbe):** Der Abstand für den Inhalt bleibt bestehen. Die Hintergrundfarbe (wenn gesetzt) erstreckt sich über die volle Breite.

**Hintergrundfarbe:** Hier kannst du deine Sektion mit einer Hintergrundfarbe versehen.

**Zusätzliche CSS-Klassen:** Hier musst du in der Regel nichts eintragen. Mit Klassen kannst du zusätzliche Design-Attribute auf die Sektion legen. Sowas verwenden wir um z.B. der Startseite eine besondere Optik zu geben.

**Animation:** hier kannst du festlegen, ob die Sektion eine Erscheinungsanimation haben soll, wenn du besucher zu dieser scrollt (fade-in, zoom-in, slide-up, slide-down, slide-left, slide-right). Probiere hier einfach aus.

<figure><img src="/files/uvTFoBILwmYUY3DXNwgI" alt=""><figcaption></figcaption></figure>

Du hast nun ein Layout angelegt und somit den ersten Schritt gemeistert. Je nachdem was du für ein Layout gewählt hast, wird dir unter "Seiteninhalt" einer oder mehrere weiße Bereiche angezeigt. Klickst du in einen Bereich hinein, öffnet sich ein Pop-Up Menü. In diesem kannst du einen der verschiedenen Blöcke auswählen. Diese Blöcke sind für deinen Seiteninhalt zuständig. Jeder funktioniert anders. Was du mit den einzelnen Blöcken tun kannst, erfährst du auf den nächsten Seiten.

<figure><img src="/files/TKtLok6dKG4dBEajlFAB" alt=""><figcaption></figcaption></figure>

Egal welchen Block du erstellt hast, du kannst diesen mit einem Klick auswählen und weitere Aktion mit Hilfe des Kontextmenüs durchführen:

<figure><img src="/files/xANUvq66R53GRX1e3v9d" alt=""><figcaption></figcaption></figure>

**Stift:** Öffnet die Konfiguration des Blockes. Diese ist je nach Blocktyp unterschiedlich und wird auf den nachfolgenden Seiten beschrieben. Die meisten Blöcke kannst du auch mit einem simplen Doppelklick auf den Inhalt öffnen.

**Plus:** Du kannst einen weiteren Blocktyp auswählen, welcher unter dem ausgewählten Block erscheint.

**Papierkorb:** Löscht den ausgewählten Block.

**3-Punkt:** Detailliertes Kontextmenü - Du kannst den Block z.B. ausblenden ohne ihn löschen zu müssen oder duplizieren.

**6-Punkte:** Wie gewohnt kannst du auch Blöcke per Ziehen beliebig verschieben.


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.khepri.design/seiten-pflegen-pagebuilder/layouts-blocke-erstellen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.