Page Builder: Erste Schritte - Ein Layout erstellen

Powerspots und Aktionen

Barrierefreie Videoinhalte mit der Medien-Slide

Ein Akkordion mit mehreren gleichzeitig geöffneten Elementen bauen

Responsive Inhalte im Page Builder bauen

Externe Inhalte

Experten-Tools im Page Builder

Inhalte-Typen

Page Builder

Powerspots

Media-Slide

Wir empfehlen, eine neue Page Builder Slide immer mit dem Erstellen eines Layouts zu beginnen. So stellst du sicher, dass deine Inhalte übersichtlich angeordnet sind und sich an jede Bildschirmgröße problemlos anpassen.&nbsp;<h3>Das Flex-Layout</h3>Ein Flex-Layout ist die flexibelste Lösung für responsive Inhalte. Ziehe dafür einen der Bausteine aus dem Menüpunkt "Layout" auf deine leere Slide. Du kannst beliebig viele Flex-Bausteine ineinander verschachteln.<figure class="image"><img src="https://cdn-assets.productfruits.com/17a11f63-742d-49ab-b013-549e7e46aafa"></figure>Für jeden einzelnen Flex-Baustein kannst du festlegen, ob seine Inhalte neben- oder untereinander angeordnet werden sollen, wie viel Prozent in Breite und Höhe sie einnehmen sollen, die Ausrichtung der Inhalte sowie die Art des Overflows. Setze den Overflow auf "Automatisch", um Inhalte bei Bedarf scrollbar zu machen.<figure class="image"><img src="https://cdn-assets.productfruits.com/ffd298eb-bfdb-4c66-8705-b33400a4019d"></figure>Möchtest du auf unterschiedlichen Bildschirmgrößen deine Flex-Bausteine anders anzeigen lassen, kannst du das mithilfe der drei Buttons für die unterschiedlichen Bildschirmgrößen im linken Bereich der Toolbar tun. Erfahre hier mehr über <a href="https://help.cbook.de/de/article/responsive-inhalte-im-page-builder-bauen">Responsive Inhalte im Page Builder.</a><figure class="image"><img src="https://cdn-assets.productfruits.com/642f8f87-1999-4efd-be6d-30de9d16a7a6"></figure><h3>Das Grid-Layout</h3>Alternativ kannst du mithilfe unseres Grid-Generators ein Grid-Layout erstellen. Klicke dafür auf den Grid-Generator-Button im linken Bereich der Toolbar.<figure class="image"><img src="https://cdn-assets.productfruits.com/8639b5c6-1469-4f3a-807f-1c1f83871749"></figure>Im Grid-Generator kannst du festlegen, aus wie vielen Spalten und Reihen dein Grid bestehen soll. Als nächstes kannst du beliebig viele Zellen markieren und zu eigenen Bereichen innerhalb des Grids verbinden. Gib dem Bereich einen Namen und klicke auf "Speichern".&nbsp; Wenn du mit deinem Layout fertig bist, klicke auf den grünen Button "Layout benutzen" im oberen rechten Bereich des Layout Generators.<figure class="image"><img src="https://cdn-assets.productfruits.com/6ef39aad-1420-480f-a2b1-187677cabb0a"></figure>Nun kannst du dein Layout mit Inhalten füllen und es weiter stylen.<figure class="image"><img src="https://cdn-assets.productfruits.com/a5adfb08-ead0-4eba-bc1d-d559e0574ecb"></figure>

Abgesehen davon, dass die Powerspots wie normale Hotspots genutzt werden können, lassen sich mit ihnen vielfältige Interaktionen und Effekte erzeugen. Dies wird durch Aktionen ermöglicht. Um mit Aktionen zu arbeiten, wähle einen Hotspot oder eine Area aus und wechsle im Element-Editor auf den Reiter "Aktionen".<figure class="image image_resized" style="width:100%;"><img src="https://cdn-assets.productfruits.com/de1e3347-d264-4ea7-926a-a4982bc57723"></figure>Wähle zunächst einen Auslöser. Standardmäßig ist dies ein Klick auf das Element, das du gerade bearbeitest. Je nachdem, ob dein Element Zusatz-Inhalte oder ein Audio (für Hotspots) enthält, stehen als alternative Auslöser "Beim Schließen des Overlays/Popovers" oder "Wenn die Audiodatei endet" zur Verfügung.<h3>Was ist eine Aktion?&nbsp;</h3>Eine Aktion ist die Gesamtheit aller Änderungen an einem Element, die durch den Auslöser aktiviert werden. In einer Aktion kann prinzipiell alles verändert werden, was dir auch im Reiter "Erscheinungsbild" zur Verfügung steht. Dabei kannst du beliebig vielen Elementen durch denselben Auslöser (z.B. Klick auf "Hotspot 1") eine Aktion zuweisen. &nbsp; Ein Beispiel: Durch Klick auf Hotspot 1 soll Hotspot 1 blasser erscheinen, und Hotspot 2 soll aktiv gesetzt werden.Dazu prüfen wir zunächst im Reiter "Erscheinungsbild" von Hotspot 1, ob die Deckkraft auf 1 (= höchste Deckkraft) gesetzt ist und im Reiter "Erscheinungsbild" von Hotspot 2, ob "Element ist deaktiviert" aktiv geschaltet ist. Nun können wir die Aktionen für den Klick auf Hotspot 1 erstellen.Im "Aktionen"-Reiter von Hotspot 1 wählen wir "Hotspot 1 (dieses Element)" und klicken auf "Aktion hinzufügen". Nun können wir im Aktionen-Editor die Deckkraft auf 0,5 einstellen - dadurch erscheint Hotspot 1 blasser.Als nächstes wählen wir im Reiter "Aktionen" von Hotspot 1 "Hotspot 2" aus und klicken ebenfalls auf "Aktion hinzufügen". Anschließend deaktivieren wir die Option "Element ist deaktiviert" im Aktionen-Editor. Schließlich schließen wir den Element Editor, indem wir auf "Speichern" klicken.Nachdem wir unsere Powerspots-Slide abgespeichert haben, können wir die Vorschau öffnen und unsere Aktionen testen.<h3>Was ist noch mit Aktionen möglich?</h3><ul><li>Elemente an eine bestimmte Position bewegen</li><li>Größe und Seitenverhältnis der Elemente ändern</li><li>Hintergrundbilder von Areas ändern</li><li>Elemente ein- und ausblenden</li><li>Elemente aktivieren und deaktivieren</li><li>Elemente in den Vor- oder Hintergrund bringen</li><li>Bei am Raster ausgerichteten Elementen die Reihenfolge im Raster ändern</li><li>Die Deckkraft der Elemente ändern</li></ul><h3>Beispielhafte Use Cases</h3><ul><li>Lernpfade aufdecken</li><li>Richtige Reihenfolge von Elementen aufdecken</li><li>Durch Drücken auf "Knöpfe" (= Hotspots) einen "Bildschirminhalt" (= Area mit Hintergrundbild) ändern</li></ul>&nbsp;

Unser Page Builder erlaubt es dir, deine Inhalte für Desktop, Tablet und Smartphone zu optimieren.<h3>Bildschirmgrößen simulieren</h3><figure class="image"><img src="https://cdn-assets.productfruits.com/4d51282d-79a5-454a-99ba-3f8fab208118"></figure>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.<h3>Responsive Layouts erstellen</h3>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.<figure class="image"><img src="https://cdn-assets.productfruits.com/9c194264-2167-415c-a6fa-e54e1a402290"></figure>

Mit diesem Feature lassen sich so ziemlich alle Inhalte nahtlos ins cBook einbinden.<h3>Technische Voraussetzungen</h3>Es gibt nur eine einzige Bedingung:Lade eine ZIP-Datei hoch, die zumindest eine index.html-Datei enthält. Alles weitere ist dir völlig freigestellt!<h3>Was kannst du beispielsweise einbinden?</h3><ul><li>Exporte aus anderen Autorentools, wie z.B. Storyline</li><li>Selbst programmierte Mini-Websites mit HTML, CSS und JavaScript</li><li><a href="https://h5p.org/" target="_blank" rel="noopener noreferrer">H5P-Inhalte</a></li></ul>Bitte beachte, dass es sich um ein experimentelles Feature handelt. Aus diesem Grund stehen das Kopieren und Importieren von Slides mit externen Inhalten aktuell noch nicht zur Verfügung.

Wenn du HTML, CSS und vielleicht auch JavaScript beherrschst, bietet dir der Page Builder mehrere Möglichkeiten, Inhalte komplett nach deinen Vorstellungen zu gestalten.<h3>Custom CSS für einzelne Elemente</h3>Du kannst jedem Baustein sowie seinen auswählbaren Unterelementen eigene Styles mittels CSS hinzufügen.Du findest diese Option in den Design-Einstellungen (das Pinsel-Icon im rechten Bereich der Toolbar) des ausgewählten Bausteins. Innerhalb des Code-Editors kannst du sowohl CSS-Regeln für das ausgewählte Element via id festlegen, als auch Regeln für CSS-Klassen und so beispielsweise das Aussehen für eine bestimmte Art von Baustein festlegen.<figure class="image"><img src="https://cdn-assets.productfruits.com/744d12ba-1b27-45b4-afc9-1b52fe90edfb"></figure><h3>HTML-Code innerhalb des Text-Bausteins ändern</h3>Der Text-Baustein verfügt ebenfalls über einen Code-Editor. Du kannst diesen über das Code-Icon öffnen und vom Texteditor generierte HTML weiter anpassen.&nbsp;<figure class="image"><img src="https://cdn-assets.productfruits.com/cf257d07-4048-4145-908a-bf45f0cc801f"></figure>Bitte beachte, dass nur HTML-Tags akzeptiert werden, die der Texteditor auch als Optionen zur Verfügung stellt. <code>script</code>-Tags werden in diesem Editor ebenfalls nicht akzeptiert.<figure class="image"><img src="https://cdn-assets.productfruits.com/33f79161-3ba6-4701-a71f-be8858743067"></figure><h3>HTML-Baustein</h3>Diesen Baustein kannst du wie jede andere Art von Baustein an den gewünschten Platz auf der Slide ziehen. Über das Code-Icon wird der Code-Editor geöffnet.&nbsp;<figure class="image"><img src="https://cdn-assets.productfruits.com/9c101c52-229e-43e9-8231-6f0556c0960a"></figure>Hier kannst du nun nach Belieben deinen eigenen HTML-Code, Inline-CSS-Styles sowie innerhalb eines <code>script</code>-Tags dein eigenes JavaScript einfügen. Der Scope für den JavaScript-Code ist dabei der HTML-Baustein selbst.Bitte beachte, dass aus Sicherheitsgründen bestimmte Zugriffe auf <code>window</code> und <code>document</code> nicht zulässig sind.<figure class="image"><img src="https://cdn-assets.productfruits.com/cbdef220-ea66-4376-88a0-d210d0ab7bdb"></figure>

War dieser Artikel hilfreich?

You recently requested to reset your password for your account. Use the button below to reset it. This password reset is only valid for the next 24 hours.

If you’re having trouble with the button above, copy and paste the URL below into your web browser.

cBook Creator Help Center