---
title: "Responsive Inhalte im Page Builder bauen"
url: "https://help.cbook.de/de/article/responsive-inhalte-im-page-builder-bauen"
language: "de"
last_updated: "2026-02-06T12:27:23.131Z"
---

# Responsive Inhalte im Page Builder bauen

Optimiere deine Inhalte für Desktop, Tablet und Smartphone.

Unser Page Builder erlaubt es dir, deine Inhalte für Desktop, Tablet und Smartphone zu optimieren.

### Bildschirmgrößen simulieren

![](https://cdn-assets.productfruits.com/4d51282d-79a5-454a-99ba-3f8fab208118)

Mithilfe der drei **Buttons für die unterschiedlichen Bildschirmgrößen** im linken Bereich der Toolbar kannst du bequem zwischen den unterschiedlichen Ansichten wechseln.

Dabei werden deine **Änderungen an Design- und Bausteineinstellungen** (Pinsel- und Zahnrad-Icon im rechten Bereich der Toolbar) jeweils **pro Bildschirmgröße gespeichert.** Du kannst also für jede Bildschirmgröße beispielsweise unterschiedliche Bausteine ein- oder ausblenden, die Ausrichtung der Flex-Layout-Bausteine anpassen, etc.

### Responsive Layouts erstellen

Für tolle responsive Inhalte empfehlen wir die Verwendung von **Flex-Layout-Bausteinen**. Diese lassen sich perfekt für unterschiedliche Bildschirmgrößen konfigurieren! Klicke dafür auf einen Flex-Layout-Baustein auf deiner Slide und danach auf das Zahnrad-Icon im rechten Bereich der Toolbar.

Alle Einstellungen kannst du für jede der drei Bildschirmgrößen unterschiedlich anpassen.

![](https://cdn-assets.productfruits.com/9c194264-2167-415c-a6fa-e54e1a402290)

### Bilder perfekt einpassen

Wenn du ein Bild in einen Flex-Layout-Baustein legst, hast du verschiedene Möglichkeiten, wie sich das Bild auf unterschiedlichen Bildschirmgrößen anpassen soll.

#### Einstellungsmenü (Zahnrad-Icon)

Hier kannst du neben Alt-Texten für Screenreader auch den **Fit** einstellen.

-   **None:** Das Bild wird nicht in seinen Container eingepasst, sondern berücksichtigt seine Originalgröße (nicht empfohlen für responsive Inhalte)
-   **Fill:** Das Bild füllt seinen gesamten Container aus. Dabei kann es proportional verzerrt werden.
-   **Contain:** Das Bild wird zur Gänze im Container dargestellt, ohne proportionale Verzerrungen. Teile des Containers werden möglicherweise nicht vom Bild ausgefüllt.
-   **Cover:** Das Bild bedeckt seinen Container vollständig, ohne proportionale Verzerrungen. Teile des Bildes werden möglicherweise nicht angezeigt.
-   **Scale Down:** verkleinert das Bild auf die kleinste Version von „none“ oder „contain“.

#### Style-Menü (Pinsel-Icon)

Passe hier Breite und Höhe an. Wir empfehlen folgende Kombinationen:

-   **Width 100%, Height auto** - dein Bild füllt die **gesamte Breite** des Flex-Bausteins aus, seine **Höhe skaliert proportional**.
-   **Height 100%, Width auto** - dein Bild füllt die **gesamte Höhe** des Flex-Bausteins aus, seine **Breite skaliert proportional**.