Moodle Page Builder

💡 Der Hero-Header ist der große Einstiegsbereich ganz oben auf der Seite – mit Fach, Titel und kurzer Beschreibung.

💡 Füge eine optische Trennlinie zwischen Abschnitten ein, um die Struktur der Seite zu verdeutlichen.

💡 Begriff-Chips sind kleine Schlagwort-Etiketten – ideal für Schlüsselbegriffe, Themen oder Lernziele am Seitenanfang. Größe, Rahmen und ein Glaseffekt lassen sich frei einstellen.

💡 Eine gestaltete Abschnittsüberschrift mit optionalem Farbhintergrund – gibt jedem Abschnitt einen klaren Anfang.

💡 Die zweite Gliederungsebene: gliedert innerhalb eines Abschnitts, den die „Überschrift" eröffnet hat. Sie arbeitet mit Linien, Marken und Nummern statt mit einer Farbfläche – so bleibt die Hierarchie auf der Seite sichtbar. Dachzeile, Nummer und Unterzeile sind optional; leere Felder fallen aus dem Code.

💡 Die Abschnitts-Karte fasst Inhalte in einem strukturierten Block zusammen – mit Titel, Untertitel und Fließtext.

💡 Das Fakten-Raster zeigt mehrere Fakten oder Zahlen nebeneinander in einem übersichtlichen Kachelraster – ideal für kompakte Informationen.

💡 Eine vertikale Reihe nummerierter Aufgaben-Boxen. Jede Box kann freien HTML-Inhalt enthalten – auch Buttons, Links und Hervorhebungen. Pro Aufgabe lassen sich beliebig viele aufklappbare Elemente anlegen (Tipp, Hilfestellung, Lösung, Material …) – die Schüler:innen klicken sie bei Bedarf selbst auf.

🔷 Zeige Fakten, Begriffe oder Inhalte in hexagonalen Waben-Kacheln – wie ein Bienenwaben-Raster.

💡 Hebe wichtige Definitionen oder Kernsätze hervor – ideal für das, was Schülerinnen und Schüler sich merken sollen.

💡 Ein großer, gestalteter Anfangsbuchstabe (Drop-Cap) für einen Absatz – wie im klassischen Buchsatz.

💡 Eine Inhaltsbox mit diagonalem Eckbanner – ideal für Hinweise wie „NEU", „Wichtig" oder „Tipp".

💡 Neumorphismus: weicher Doppelschatten aus Licht und Schatten – erhaben oder eingedrückt.

💡 Heller Inhalt in einem farbigen Verlaufsrahmen – modern und trotzdem gut lesbar.

💡 Glasmorphismus-Optik: farbiger Untergrund, milchige Fläche und feine Lichtkante.

💡 Dezente L-förmige Eckwinkel in Akzentfarbe – ruhig, technisch, sehr aufgeräumt.

💡 Farbige Kopfleiste mit Icon, Titel und optionalem Badge über einem hellen Textkörper.

💡 Dunkle Konsolen-Optik mit Fensterleiste – für Code, Befehle und Merksätze mit Technik-Bezug.

💡 Comic-Sprechblase mit Zipfel – ideal für Dialoge, Zitate von Lernenden oder Denkanstöße. Optional mit Sprecher-Name und Avatar-Bild.

💡 Ein großes, hervorgehobenes Zitat mit Anführungszeichen-Symbol und Quellenangabe – ideal für Leitsätze, Statements oder Aussagen von Personen.

💡 Eine Aufgaben- oder Lernliste mit Fortschrittsbalken – ideal für To-do-Listen, Lernziele oder Checklisten.

💡 Ein Akkordeon zeigt Inhalte aufklappbar an – gut für FAQ, Zusammenfassungen oder schrittweise Erklärungen.

💡 Ein flexibler Textkasten mit optionalem Farbrand – für Hinweise, Zitate, Infokästen oder ergänzende Anmerkungen.

💡 Das Ampel-Grid ermöglicht Selbsteinschätzung: Schüler klicken auf ihr Level (z.B. Ich kann es / fast / noch nicht).

💡 Das Seitenkarussell zeigt Inhalte auf mehreren durchblätterbaren Seiten – gut für Schritt-für-Schritt-Erklärungen.

💡 Füge einen einzelnen Button oder eine Reihe von Schaltflächen ein, z.B. als Links zu weiterführenden Quellen oder Aufgaben.

💡 Eine Schaltfläche, die beim Klick Inhalte druckt – den Inhalt oberhalb des Buttons (z. B. das Textfeld, in dem er liegt), die ganze Seite oder die aktuell markierte Auswahl.

💡 Die Vergleichstabelle stellt mehrere Optionen, Methoden oder Konzepte übersichtlich nebeneinander dar.

💡 Erstelle responsive HTML-Tabellen mit Smart Import aus Excel, Click-to-Edit und Farb-Presets.

💡 Tabelle mit 4 Spalten-Modi: Sichtbar, Aufdecken per Klick, Eingabe-Feld und Eingabe mit Tipp. Für Vokabeln, Definitionen und Übungen.

💡 Der Schritt-Prozess zeigt eine nummerierte Abfolge von Schritten – ideal für Anleitungen oder Arbeitsabläufe.

💡 Ein Zeitstrahl zeigt Ereignisse chronologisch – ideal für Geschichte, Biologie oder Prozessabläufe.

💡 Statistik-Kacheln heben Kennzahlen & Fakten visuell hervor – ideal für Statistiken, Daten und wichtige Zahlen.

💡 Der Pro-Kontra-Block stellt Argumente gegenüber – ideal für kritisches Denken, Debatten und Analysen.

💡 Die Quellen-Liste strukturiert Literaturangaben & Quellenverweise – ideal für wissenschaftliche Unterrichtsmaterialien.

💡 Gliedere Inhalte in zwei nebeneinanderstehende Spalten – ideal für Vergleiche, Definitionen oder die Kombination von Text und Bildbeschreibungen.

Erstelle mehrere einzelne Textblöcke, die jeweils einen Rahmen und vertikalen Abstand haben – ideal für Informationsabschnitte, Definitionen oder strukturierte Inhalte.

Erstelle farbige Info-, Warn-, Tipp- oder Erfolgsboxen für Hinweise und wichtige Informationen im Unterrichtsmaterial.

Kombiniere ein großes Icon oder Emoji mit einem Titel und Beschreibungstext – ideal für Lernziele, Merkmale oder hervorgehobene Punkte.

Auffällige Box mit nach innen gewölbter Ecke und frei platzierbarem Font Awesome Icon – zieht Blicke an und hebt Inhalte hervor.

💡 Kreidetafel mit Holzrahmen, Schiefertafel oder modernes Whiteboard – jeweils mit passender Ablage. Ideal für Merksätze, Aufgaben und Tafelanschriebe. Tipp: Schriftart „Handschrift (Kreide/Tafel)" verstärkt den Tafel-Eindruck.

Erstelle eine Rahmenbox mit einem Bild (JPG, PNG, SVG, GIF) das oben links oder rechts auf dem Rahmen aufsitzt – ideal für Avatare, Portraits oder Icons.

💡 Bild links oder rechts neben einem Textblock. Die Bildbreite lässt sich in Prozent oder Pixel angeben – die Höhe folgt immer proportional dem Seitenverhältnis. Auf schmalen Displays rutscht der Text automatisch unter das Bild.

💡 Ein einzelnes Bild mit einer Quellen- oder Lizenzangabe darunter. Die Quellenzeile ist immer genau so breit wie das Bild und bricht darin um. Das Bild kann freistehend platziert oder in einen Text eingesetzt werden, der es umfließt.

💡 Abwechselnde Bild-Text-Blöcke im Zick-Zack-Muster – ideal für Lerngeschichten, Schritt-für-Schritt-Erklärungen oder Portfolios. Bildbreite in Prozent oder Pixel (Höhe bleibt proportional), Bildseite je Block überschreibbar, Alt-Text je Block.

Registerkarten / Tabbed Content: mehrere Inhalte auf einer Fläche, umschaltbar über Reiter – z.B. derselbe Text in zwei Niveaustufen. CSS-only (ohne JavaScript) – der Code braucht in Moodle aber seinen <style>-Block, siehe Hinweis unten.

Bette YouTube- oder Vimeo-Videos responsiv in deine Moodle-Seite ein – einfach URL einfügen, fertig.

Bette beliebige externe Inhalte per iframe in deine Moodle-Seite ein – Webseiten, Padlet, LearningApps, H5P und mehr.

Erstelle Lernkarten mit Vorder- und Rückseite – klicken zum Umdrehen, Pfeile zum Navigieren.

Text wird Wort für Wort per Klick aufgedeckt. Vorwärts- und Zurück-Buttons, verschiedene Wörter in verschiedenen Farben hervorheben.

Animierter Schreibmaschinen-Effekt – Text erscheint Buchstabe für Buchstabe, wie auf einer Schreibmaschine getippt.

3-stufiger Niveaus-Slider – zeige denselben Inhalt auf verschiedenen Schwierigkeitsstufen.

Canvas-Rubbelkarte – Schüler rubbeln den verdeckten Bereich frei, um die Lösung zu enthüllen.

Code-Eingabe Escape-Room Element – Schüler müssen den richtigen PIN eingeben, um den Inhalt freizuschalten.

Countdown-Timer, der nach Ablauf einen versteckten Inhalt enthüllt – ideal für zeitgesteuerte Aufgaben.

🃏 Erstelle Bootstrap-Karten mit Header, Bild, Liste und Button – einzeln oder bis zu 4 im Raster.

🕐 Echtzeit-Analoguhr mit Canvas – Zifferblatt, Zeiger und Sekundenzeiger frei gestaltbar.

🔢 LED-Display-Uhr mit optionalem Datum, Glow-Effekt und 12/24h-Format.

📝 Countdown bis zur Klausurendzeit mit Warnfarben und optionalem Fortschrittsbalken.

⏳ Frei einstellbarer Countdown mit Start/Pause/Reset, Alarm-Ton und Fortschrittsbalken.

⏱️ Präzise Stoppuhr mit optionalen Rundenzeiten und Millisekunden-Anzeige.

🍅 Pomodoro-Technik: Fokusphasen und Pausen mit SVG-Kreisanzeige, Zyklen und Ton.

🌍 Mehrere Zeitzonen gleichzeitig – ideal für Geografie und Zeitzonenkunde.

💡 Stelle hier alle erstellten Bausteine zur fertigen Moodle-Seite zusammen – dann Code kopieren & in Moodle einfügen.