Moodle Advanced Gestaltungs-Toolbox v3.14.1

Story-Block Gestalter

Abschnitte / Blöcke

Globales Design

Layout-Fluss

Bildform

Bildgröße (px)

Akzentfarbe

Rahmen (px)

Schattenstärke

Mobil: Bilder oben stapeln

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Bild & Text-Fluss Gestalter

Layout & Inhalt

Layout-Modus

Inhalt

Fett

Kursiv

Blocksatz

Alternativtext

Bild-URL (Quelle) Ersetzt den Platzhalter im Code.

Position & Größe

Bild-Position

Vertikale Ausr.

Bildbreite

Abstand zum Text (px)

Mobil optimieren (Umbruch)

Design (Rahmen, Farbe)

Bildform

Rahmen (px)

Farbe

Textfarbe

Schatten hinzufügen

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Tabellen-Gestalter (Smart Import & Edit)

Daten & Import

🚀 Smart Import (Excel / HTML)

Zeilen

Spalten

Inhalt (Klicken zum Bearbeiten):

Klicke auf eine Zelle zum Bearbeiten. Nutze die roten Buttons zum Löschen von Zeilen/Spalten.

Caption (Barrierefreiheit)

Design & Farben

Farb-Presets

Breite

Textausrichtung

Scrollbar auf Handy

Gestreifte Zeilen (Zebra)

Header Bg

Header Text

Zeilen Bg

Inhalt Text

Rahmen

Padding (px)

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Hinweisbox-Gestalter

Basis-Einstellungen

Art der Box

Titel der Box

Inhalt

Design

Schatten

Rahmenbreite (px)

Stil

Farbe (Überschreibt Typ)

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Icon & Text-Generator

Inhalt & Icon

Text

Icon-Voreinstellung

Font Awesome Klasse

Icon-Größe (px)

Farben & Design

Farb-Schema

Hintergrund

Farbe

Icon-Farbe

Rahmen

Position

Padding (px)

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Hingucker-Box Gestalter

Inhalt & Szenario

Szenario

Titel

Inhalt

Icon & Stil

Nischen-Position

Icon-Klasse

Hintergrund

Farbe

Titel

Icon-Akzent

Nischen-Größe (px)

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Zwei-Spalten-Layout Gestalter

Inhalt der Spalten

Inhalt Spalte 1 (links)

Inhalt Spalte 2 (rechts)

Layout & Design

Spaltenverhältnis

Abstand außen (px)

Abstand innen (px)

Hintergrundfarben anwenden

Textfarbe Spalte 1

Textfarbe Spalte 2

Rahmen & Ecken anwenden

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Prozess-Schritte Gestalter

Inhalt

Schritte (ein Schritt pro Zeile)

Fett

Kursiv

Design & Farben

Bg Schritt

Text Schritt

Bg Nummer

Text Nummer

Form der Nummerierung

Schriftgröße (px)

Padding

Radius

Rahmen anwenden

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Zeitstrahl / Timeline-Gestalter

Inhalt

Meilensteine (Format: ZEITPUNKT :: TITEL :: TEXT) Jeder Eintrag in einer neuen Zeile.

Titel-Formatierung:

Fett

Kursiv

Text-Formatierung:

Fett

Kursiv

Design

Ausrichtung

Linienfarbe

Punktfarbe

Liniendicke (px)

Punktgröße (px)

Textfarbe

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Aufklappbares Element (Akkordeon)

Inhalt

Titel (sichtbarer Teil)

Fett

Kursiv

Inhalt (versteckter Teil)

Fett

Kursiv

Design

Titel Bg

Titel Text

Inhalt Text

Schriftgröße Titel (px)

Schriftgröße Inhalt (px)

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Video-Einbetter

Video-Quelle

Datenschutz-Modus (YouTube)

Start bei (Sek):

Seitenverhältnis

Kontext & Aufgabe

Titel (Optional)

Arbeitsauftrag / Beschreibung

Ausklappbares Transkript / Notizen hinzufügen

Design & Farben

Design-Preset

Hintergrund

Textfarbe

Rahmen

Dicke (px)

Radius (px)

Max. Breite (px)

Schatten anwenden

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Tab-Reiter (Karteikarten)

Allgemeines Design

Farb-Schema

Aktiver Tab

Hintergrund

Inaktiver Tab (Text)

Inaktiver Tab (Bg)

Rahmenfarbe

Reiter 1

Titel Inhalt

Willkommen zu diesem Thema.

Reiter 2

Titel Inhalt

Hier steht die Aufgabe.

Reiter 3

Titel Inhalt

Reiter 4

Titel Inhalt

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Überschriften-Gestalter

Inhalt & Typografie

Überschriftentext

Font Awesome Icon-Klasse (Optional)

Schriftart

Text-Stil

Zeichenabstand (px)

Fett

Kursiv

Design & Layout

Größe / HTML-Tag

Textausrichtung

Hintergrund-Modus

Hintergrund / Startfarbe

Textfarbe

Rahmen & Effekte

Innenabstand (px)

Ecken-Rundung (px)

Rahmen anwenden

Rahmenbreite (px)

Rahmenfarbe

Farbe von Hintergrund übernehmen

3D-Effekt

Weicher Schatten

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Flashcard-Karussell

Allgemeines Design

Farbschema

Titel Vorderseite

Wird mit Zähler angezeigt (z.B. These 1/5). Leer lassen, um Titel auszublenden.

Titel Rückseite

Leer lassen, um Titel auszublenden.

Rahmendicke (px)

Rahmenstil

Schatteneffekt

Karteninhalte

Daten importieren (Optional)

.txt oder .csv Datei mit dem Format These;Erläuterung pro Zeile.

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Interaktive Tabelle

Daten & Import

🚀 Smart Import (Excel / HTML)

Zeilen

Spalten

Inhalt & Modus-Wahl:

Klicke auf das Symbol über einer Spalte:
Sichtbar (Standard)
Aufdecken (Klick)
Eingabe (Tippen)
Eingabe + Tipp

Klicke auf eine Zelle, um Inhalt und Tipps zu bearbeiten.

Design

Farb-Presets

Kopfzeile Farbe

Kopfzeile Text

Gestreifte Zeilen (Zebra)

Inhalt zentrieren

Vorschau

WICHTIG: Bitte schalten Sie in Moodle den Editor auf "Einfacher Text" um und wählen sie "HTML-Format", bevor Sie diesen Code einfügen. Der Standard-Editor löscht sonst die Darstellung und Funktionalität.

Moodle HTML-Code:

Schrittweiser Text-Einblender

Sätze (Ein Satz pro Zeile)

Hervorhebungen

Design

Größe (px)

Fett

Btn: Zurück

Btn: Weiter

Btn Bg

Btn Text

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Schreibmaschinen-Effekt

Inhalt

Text

Design & Verhalten

Schriftgröße (px)

Geschwindigkeit (ms)

Schriftfarbe

Cursor-Farbe

Cursor anzeigen

Start-Button verwenden

Button-Text

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Text-Slider (Niveaus)

💡 Zeilenumbrüche werden automatisch übernommen.

Allgemein

Start-Level (1-3)

Slider Farbe

Rahmen & Hintergrund aktivieren

Level 1 (Einfach / Links)

Beschriftung Überschrift (Opt.) Inhalt

Level 2 (Mitte)

Überschrift (Opt.) Inhalt

Level 3 (Schwer / Rechts)

Beschriftung Überschrift (Opt.) Inhalt

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Rubbelfeld (Vollautomatisch & Responsiv)

Inhalt

Versteckter Inhalt

Hier kann etwas Text stehen.

Verstecktes Bild (URL, optional)

Bildgröße (Max. Breite)

Deckschicht

Beschriftung Deckschicht

Farb-Schema

Eigene Farbe

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Tresor (Escape-Room Lite)

Logik & Codes

Richtiger Code (Lösung)

Text auf der Tür (Hinweis)

Versteckter Inhalt

Glückwunsch! Dies ist der geheime Inhalt.

Design

Farbe

Icon

Vorschau

Vorlage laden

Vorlagen-Name

HTML-Code:

Moodle Smart Timer (Student-First)

Zeit & Inhalt

Minuten

Sekunden

Bei > 10 Min. nur Balken.

Versteckter Inhalt (Lösung)

Lösung

Inhalt nach Ablauf der Zeit.

Warte-Text

Design

Hintergrund

Bg

Text

Akzentfarbe

Rahmen

Farbe

Radius

Padding

Schatten

Vorschau

Vorlage laden

Vorlagen-Name

Moodle Advanced Gestaltungs-Toolbox

HTML-Code:

HTML-Code:

HTML-Code:

HTML-Code:

HTML-Code:

HTML-Code:

HTML-Code:

HTML-Code:

HTML-Code:

HTML-Code:

HTML-Code:

HTML-Code:

HTML-Code:

HTML-Code:

Moodle HTML-Code:

HTML-Code:

HTML-Code:

HTML-Code:

Vorschau

HTML-Code:

HTML-Code:

Lösung

Vorschau

HTML-Code:

Icon auswählen