Page Builder - Überblick

Einführung

Der Page Builder ist ein visueller Drag-and-Drop-Editor zum Erstellen aufwendiger, responsiver Slide-Layouts. Im Gegensatz zum Standard-Rich-Text-Editor gibt dir der Page Builder volle Kontrolle über das visuelle Design deiner Slides — du kannst Text, Bilder, Videos, Buttons und interaktive Elemente frei auf einer Arbeitsfläche anordnen und jedes Detail gestalten, ohne Code schreiben zu müssen.

Layout-Übersicht

Die Page-Builder-Oberfläche ist in mehrere Bereiche unterteilt:

Editor-Toolbar (oben) — Templates-Button, Template-Info und Speicherstatus
Linke Panels — Blöcke, Ebenen und KI-Assistent (über Symbolleiste umschaltbar)
Arbeitsfläche (Mitte) — Der Hauptbearbeitungsbereich, in dem du deine Slide gestaltest
Rechte Panels — Selektor, Stile und Eigenschaften (über Symbolleiste umschaltbar)
Arbeitsflächen-Toolbar — Rückgängig/Wiederholen, Gerätevorschau, Rastergenerator, Umrisse und Code-Editor

Bausteine

Klicke auf das Blöcke-Symbol in der linken Symbolleiste, um die Block-Bibliothek zu öffnen. Ziehe einen beliebigen Block auf die Arbeitsfläche, um ihn zu deiner Slide hinzuzufügen.

Layout-Blöcke

Flex-Container — Vorgefertigte Layout-Strukturen (z. B. 50/50-Aufteilung, Drei-Spalten, Seitenleisten-Layouts). Diese handhaben automatisch responsives Spacing und Ausrichtung. Du kannst Layouts ineinander verschachteln für komplexe Designs.

Text & Inhalt

Text — Ein Rich-Text-Block mit Formatierungsoptionen (Überschriften, Fett, Kursiv, Listen, Links usw.). Doppelklicke zum Bearbeiten.
HTML — Ein Block für HTML/CSS-Code für erweiterte Anpassungen. Verwende diesen, wenn die visuellen Werkzeuge nicht ausreichen. Du kannst sogar JavaScript darin schreiben. Verwende diesen Block nur, wenn du mit HTML, CSS und JavaScript vertraut bist.

Medien

Bild — Füge Bilder aus dem Asset Manager ein. Unterstützt Optionen für Bildanpassung und Positionierung.
Video-Player — Bette Videoinhalte mit eingebauten Wiedergabesteuerungen ein.
Audio-Player — Füge Audioinhalte mit eingebauten Wiedergabesteuerungen hinzu.

Interaktive Elemente

Button — Ein gestaltbarer klickbarer Button mit anpassbarem Text und Erscheinungsbild. Dies ist ein Experten-Feature, das von dir geschriebenen JavaScript-Code ausführt.
Link-Button — Ein Navigationsbutton, der auf andere Slides in deinem cBook verlinkt (verwendet Slide-Links).
Icon — Füge Icons aus der verfügbaren Icon-Bibliothek ein.
Akkordeon — Klappbare Panels, die Lernende auf- und zuklappen können. Ideal zum Organisieren von Inhalten in Abschnitten.
Flip-Card — Eine Karte mit Vorder- und Rückseite. Lernende klicken, um die Karte umzudrehen und den Rückseiteninhalt zu sehen.

Spezial

KI-Assistent — KI-gestützte Inhaltsvorschläge und Generierungswerkzeuge.

Arbeiten mit der Arbeitsfläche

Komponenten auswählen

Klicke auf ein beliebiges Element auf der Arbeitsfläche, um es auszuwählen. Ein blauer Rahmen erscheint um die ausgewählte Komponente, und ihre Eigenschaften werden in den rechten Panels verfügbar.

Eine Breadcrumb-Leiste oben auf der Arbeitsfläche zeigt die Position der ausgewählten Komponente in der Hierarchie (z. B. Body > Flex-Container > Text). Klicke auf ein Breadcrumb-Element, um die übergeordnete Komponente auszuwählen.

Drag and Drop

Ziehe Blöcke aus dem linken Panel auf die Arbeitsfläche. Du kannst auch bestehende Komponenten auf der Arbeitsfläche ziehen, um sie innerhalb ihrer Container neu anzuordnen.

Rückgängig und Wiederholen

Verwende die Buttons Rückgängig und Wiederholen in der Arbeitsflächen-Toolbar (oder Strg+Z / Cmd+Z), um Änderungen rückgängig zu machen oder wiederherzustellen.

Umrisse anzeigen

Schalte Umrisse anzeigen in der Arbeitsflächen-Toolbar um, um die Grenzen aller Komponenten zu sehen. Das ist hilfreich beim Arbeiten mit unsichtbaren Containern oder beim Beheben von Layout-Problemen.

Responsives Design

Gerätevorschau

Verwende das Geräte-Dropdown in der Arbeitsflächen-Toolbar, um zwischen folgenden Ansichten zu wechseln:

Desktop — Volle Breite
Tablet — Mittlere Breite
Mobil — Schmale Breite

So siehst du, wie sich dein Layout an verschiedene Bildschirmgrößen anpasst.

Responsives Styling

Du kannst für jede Gerätegröße unterschiedliche Stile festlegen. Wechsle im Dropdown zu einem Gerät und passe dann die Stile im rechten Panel an. Deine Änderungen gelten nur für diese Gerätegröße und kleiner, sodass du das Erlebnis für jeden Bildschirm fein abstimmen kannst.

Komponenten gestalten

Wähle eine Komponente aus und klicke auf das Stile-Symbol (Palette) in der rechten Symbolleiste. Das Stil-Panel ist in Abschnitte unterteilt:

Layout

Steuere, wie die Komponente angezeigt wird: Block, Inline, Flex oder Grid. Lege Breite, Höhe und Überlauf-Verhalten fest. Für Flex-Container konfiguriere Richtung, Ausrichtung und Abstände zwischen Elementen.

Abstände

Passe Innenabstand (Padding) und Außenabstand (Margin) für jede Seite des Elements einzeln an, oder klicke auf das Ketten-Symbol, um alle Seiten gleichzeitig zu ändern.

Typografie

Lege Schriftfamilie, -größe, -stärke, Zeilenhöhe, Textausrichtung, Farbe, Dekoration (Unterstrichen, Durchgestrichen), Buchstabenabstand und Texttransformation (Großbuchstaben, Kleinbuchstaben, Kapitalisiert) fest. Achtung: Teste diese Anpassungen unbedingt mit den Schriftgrößen-Einstellungen im Barrierefreiheitsmenü im Player!

Farben & Hintergründe

Setze Hintergrundfarben, Hintergrundbilder (mit Wiederholungs-, Positions-, Größen- und Anhang-Optionen) und Rahmen-Eigenschaften (Breite, Stil, Farbe, Rahmenradius für abgerundete Ecken). Achtung: Teste diese Anpassungen unbedingt mit den Farbkontrast-Einstellungen im Barrierefreiheitsmenü im Player!

Effekte

Steuere Deckkraft, Box-Schatten und Text-Schatten.

Animationen

Füge CSS-Animationen zu Komponenten hinzu:

Animationsname — Wähle aus verfügbaren Animationstypen
Dauer — Wie lange die Animation dauert
Timing-Funktion — Die Geschwindigkeitskurve (ease, linear, ease-in, ease-out oder verschiedene kubische Bezier-Optionen)
Verzögerung — Wartezeit vor dem Start der Animation
Wiederholungsanzahl — Wie oft wiederholen (oder unendlich)
Richtung — Normal, umgekehrt oder alternierend
Füllmodus — Wie Stile vor/nach der Animation angewendet werden

Komponenten-Eigenschaften (Traits)

Wähle eine Komponente aus und klicke auf das Eigenschaften-Symbol in der rechten Symbolleiste, um komponentenspezifische Einstellungen zu konfigurieren.

Eigenschaften variieren je nach Komponententyp. Häufige Eigenschaften umfassen:

ID und Klassen — Zum Identifizieren und Gestalten von Komponenten
Link-Einstellungen — URL, Ziel und Zielseite für Buttons und Links
Bild-Einstellungen — Quelle, Alt-Text, Bildanpassung und Position
Icon-Einstellungen — Icon-Auswahl aus der Bibliothek
Flex-Einstellungen — Richtung, Ausrichtung, Umbruch und Abstand für Layout-Container
Barrierefreiheit — ARIA-Labels und Rollen

Selektor-Panel

Klicke auf das Selektor-Symbol für erweiterte CSS-Klassenverwaltung:

Wechsle zwischen Styling nach Komponente (einzigartig für dieses Element) oder nach Selektor (geteilte CSS-Klasse)
Füge CSS-Klassen hinzu oder entferne sie
Gestalte Pseudo-Zustände wie Hover, Aktiv und Fokus

Ebenen-Panel

Klicke auf das Ebenen-Symbol in der linken Symbolleiste, um eine Baumansicht aller Komponenten auf deiner Arbeitsfläche zu sehen. Das gibt dir einen hierarchischen Überblick über die Struktur deiner Slide. Klicke auf ein Element im Baum, um es auf der Arbeitsfläche auszuwählen — nützlich für Komponenten, die schwer direkt anklickbar sind.

Templates

Mit Templates speicherst und verwendest du Seitendesigns in deinem gesamten cBook wieder.

Ein Template anwenden

Klicke auf den Templates-Button in der Editor-Toolbar
Durchsuche die Template-Bibliothek — nutze das Suchfeld oder klicke auf Tag-Chips zum Filtern
Schalte Nur aktive anzeigen um, um veraltete Templates auszublenden
Klicke auf ein Template, um es in einem Seitenpanel als Vorschau anzuzeigen
Klicke auf Anwenden, um den aktuellen Slide-Inhalt durch das Template zu ersetzen

Ein Template erstellen

Gestalte deinen Slide-Inhalt im Page Builder
Speichere die Slide zuerst — du kannst nur aus gespeichertem Inhalt ein Template erstellen
Klicke auf den Template erstellen-Button in der Editor-Toolbar
Gib einen Template-Namen ein (mindestens 3 Zeichen)
Füge Tags hinzu, um das Template zu kategorisieren (mindestens 3 Zeichen pro Tag)
Markiere es optional als KI-Template
Klicke auf Template erstellen

Das Template ist jetzt für alle Slides in deinem cBook verfügbar.

Rastergenerator

Klicke auf den Rastergenerator-Button in der Arbeitsflächen-Toolbar, um automatisch rasterbasierte Layouts zu erstellen. Lege die Anzahl der Zeilen, Spalten und Abstände fest, und der Generator erstellt ein strukturiertes Layout für dich — das spart Zeit im Vergleich zum manuellen Aufbau von Flex-Containern.

Code-Editor

Für fortgeschrittene Benutzer: Klicke auf den HTML/CSS bearbeiten-Button in der Arbeitsflächen-Toolbar, um den Code-Editor zu öffnen. Du kannst die HTML-Struktur und CSS-Stile deiner Slide direkt bearbeiten. Änderungen werden sofort auf der Arbeitsfläche angezeigt.

KI-Assistent

Klicke auf das KI-Assistent-Symbol (Sternchen) in der linken Symbolleiste, um den KI-Inhaltsgenerator zu öffnen. Er bietet KI-gestützte Vorschläge für die Inhaltserstellung und -verfeinerung.