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

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.

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: