Überblick

Das Problem

Eine neue Landingpage soll online. In einer Standard-Contao-Installation heißt das: Seite anlegen, Artikel anlegen, dann Inhaltselement für Inhaltselement über Formulare eintragen — jedes in einer eigenen Maske, ohne zu sehen, wie es am Ende aussieht. Wie die Seite wirklich wirkt, zeigt sich erst nach dem Speichern, in einem zweiten Browser-Tab.

• Jede Gestaltungsentscheidung kostet einen Umweg. Abstand zu groß, Hintergrund zu dunkel, Überschrift zu klein: Formular öffnen, Wert ändern, speichern, Frontend neu laden, beurteilen — und beim nächsten Versuch wieder von vorn.
• Mehrspaltige Abschnitte brauchen Theme-Wissen. Zwei Spalten nebeneinander, auf dem Tablet gestapelt: das ist eine Frage an die Agentur, keine Aufgabe für die Redaktion.
• Wiederkehrende Bausteine werden jedes Mal neu gebaut. Der gleiche Call-to-Action-Block auf zwölf Seiten heißt zwölf Mal die gleiche Klickarbeit — und zwölf Stellen, die beim nächsten Relaunch auseinanderlaufen.
• Header und Footer liegen im Layout, nicht im Inhalt. Eine Telefonnummer im Footer zu ändern ist eine Aufgabe für jemanden mit Zugriff auf Module und Seitenlayouts.
• Farben und Abstände leben verstreut. Die Hausfarbe steht im Theme-CSS, in einzelnen Elementen und in der Erinnerung der Person, die die Seite gebaut hat. Eine Korrektur erwischt selten alles.
• Ein Fehlgriff ist schwer rückgängig zu machen. Wer einen ganzen Abschnitt umbaut und dann doch den alten Stand will, hat keinen bequemen Weg zurück.

Am stärksten spürt das die Redaktion, die schnell etwas veröffentlichen soll, aber für jede gestalterische Kleinigkeit auf die Agentur angewiesen ist — und die Agentur, die Zeit in Änderungswünsche steckt, die eigentlich niemand beauftragen wollte.

Die Lösung

Draggo ersetzt die Formularmasken durch eine Arbeitsfläche, auf der die Seite so gebaut wird, wie sie später aussieht — und speichert das Ergebnis in Contaos eigenen Artikeln und Inhaltselementen.

Draggo legt keine Parallelwelt an. Was im Editor entsteht, sind ganz normale Contao-Artikel (tl_article) mit ganz normalen Inhaltselementen (tl_content). Der Seitenbaum, die Veröffentlichungssteuerung, die Suche, die Rechteverwaltung und die Contao-Formular-Engine bleiben, wie sie sind. Draggo fügt eine zweite, visuelle Oberfläche auf denselben Daten hinzu — und eine KI-Assistenz, die ganze Abschnitte und eigene Elementtypen erzeugt.

Aufgabe	Ohne Draggo	Mit Draggo
Abstand oder Hintergrund eines Abschnitts ändern	Formular öffnen, speichern, Frontend neu laden, beurteilen	Abschnitt anklicken, Wert ändern, Ergebnis sofort auf der Arbeitsfläche
Zwei- oder dreispaltigen Abschnitt anlegen	Theme-Klassen oder ein Grid-Modul kennen	Spalten-Layout aus dem Reiter Strukturen anklicken
Darstellung auf Tablet und Mobil	Im Theme hinterlegt, in der Redaktion nicht änderbar	Eigene Spalten-Aufteilung je Breakpoint, Vorschau über die Geräte-Umschalter
Denselben Baustein mehrfach verwenden	Jedes Mal neu zusammenklicken	Einmal als Komponente speichern, überall einfügen
Header oder Footer ändern	Module und Seitenlayouts bearbeiten	Globale Einheit im Draggo-Editor bearbeiten; wirkt auf allen Seiten
Hausfarbe website-weit ändern	Theme-CSS und einzelne Elemente durchsuchen	Einen Design-Wert im Reiter Globals ändern
Einen verunglückten Umbau zurücknehmen	Contao-Versionierung einzelner Elemente, mühsam	Wiederherstellungspunkt des ganzen Containers einspielen
Ein Element, das es im Baukasten nicht gibt	Eigenes Contao-Bundle entwickeln lassen	Im KI-Element-Generator beschreiben, Vorschau prüfen, übernehmen

Den oben genannten Problemen stehen konkret gegenüber:

• der visuelle Editor mit Arbeitsfläche, Geräte-Umschaltern und Live-Vorschau statt Formular-und-Neuladen;
• das Grid aus Container, Reihe und Spalte mit fertigen Spalten-Layouts und eigenen Aufteilungen für Tablet und Mobil;
• Container-Vorlagen und Komponenten gegen das wiederholte Neubauen;
• globale Einheiten für Header, Footer und wiederverwendbare Sektionen;
• Design-Werte („Globals") als eine Stelle für Farben, Abstände, Schriften, Eckenradien und Schatten;
• Wiederherstellungspunkte je Container;
• der KI-Element-Generator und der Landingpage-Aufbau aus einem Brief oder aus eigenen Inhalten.

Wann Draggo passt

Situation	Einschätzung
Die Redaktion soll Landingpages, Kampagnenseiten und Aktionsseiten selbst gestalten	Der Kernfall. Genau dafür ist Draggo gebaut.
Agentur und Kunde teilen sich die Pflege: Theme von der Agentur, Inhalte vom Kunden	Passt. Draggo-Inhalte liegen in Contaos eigenen Tabellen, das Theme bleibt unberührt.
Viele Seiten mit gleichem Aufbau, aber unterschiedlichen Texten	Passt. Container-Vorlagen und Komponenten sind dafür da.
Es soll erst einmal unverbindlich ausprobiert werden	Passt nicht. Draggo hat keine kostenlose Stufe und keine Testphase. Ohne gültige Lizenz ist es gesperrt.
Die Website besteht fast nur aus News, Terminen und Formularen in festen Theme-Templates	Eher nicht. Dort entsteht wenig frei gestaltete Fläche — der Nutzen bleibt klein.
Redaktionelle Inhalte sollen in mehreren Sprachen gepflegt werden	Draggo bringt dafür nichts Eigenes mit. Mehrsprachigkeit bleibt Sache von Contao bzw. eines dafür gedachten Pakets.
Der Editor soll auch von Redakteuren ohne Vertrauensstellung genutzt werden	Mit Einschränkung. Der KI-Generator erzeugt ausführbaren Code für eigene Elementtypen — siehe Bekannte Einschränkungen. Das Recht dafür wird pro Benutzergruppe vergeben.

Teil 1 — Einrichtung

Der Weg von der leeren Installation bis zur ersten gebauten Seite:

1. Voraussetzungen prüfen
2. Vor der Installation: Sicherung und Entscheidungen
3. Installation über den Contao Manager — oder über Composer
4. Installation überprüfen
5. Lizenz aktivieren
6. Draggo-Einstellungen ausfüllen
7. Die erste Seite bauen

Voraussetzungen

Die Werte stammen aus der composer.json des Pakets:

Anforderung	Version
PHP	^8.2
Contao	contao/core-bundle ^5.3
PHP-Erweiterung json	erforderlich
PHP-Erweiterung sodium	erforderlich
Doctrine DBAL	^3.6 oder ^4.0
Symfony Console / HTTP-Client / HTTP-Foundation	^6.4 oder ^7.0
Twig	^3.0

Zusätzlich erforderlich:

• eine gültige Draggo-Pro-Lizenz;
• ein Administrator-Zugang zum Contao-Backend für die Aktivierung;
• eine ausgehende HTTPS-Verbindung vom Server (nicht vom Browser) für die Aktivierung;
• Schreibrechte des Webserver-Prozesses auf ein privates Verzeichnis unterhalb von var/, auf assets/ und auf files/.

Optional, je nach genutzter Funktion:

• ein Claude-API-Schlüssel (Anthropic) für den KI-Element-Generator, den Landingpage-Aufbau und den Doku-Chat;
• ein API-Schlüssel für Unsplash, Pexels oder OpenAI, wenn der Landingpage-Aufbau automatisch Bilder besorgen soll;
• die Contao-Pakete News bzw. Kalender, wenn das Loop-Grid oder das Reader-Feld-Element genutzt werden sollen.

Vor der Installation

1. Datensicherung anlegen. Datenbank und Dateisystem. Draggo legt bei der ersten Migration neue Tabellen an und ergänzt Spalten an tl_content, tl_article, tl_module und tl_user_group.
2. Wenn möglich zuerst auf einer Testinstanz installieren. Das gilt besonders für gewachsene Installationen mit eigenem Theme: Draggo bringt ein eigenes Grid mit, das sich mit einem vorhandenen Bootstrap im Theme überschneiden kann.
3. Grid-Modus vorab entscheiden. Standard ist grid: Draggo liefert ein eigenes, schlankes Grid-Stylesheet aus. Liefert das Theme bereits Bootstrap, ist off richtig. Siehe Bundle-Konfiguration.
4. Domain im Startpunkt der Website eintragen. Die Lizenz wird an die Domains dieser Installation gebunden. Ist im Seitenbaum unter dem Startpunkt keine Domain hinterlegt, meldet die Aktivierung: „Für diese Installation ist keine Domain hinterlegt. Bitte im Startpunkt der Website eine Domain eintragen."
5. Schreibrechte prüfen (siehe Tabelle).

Verzeichnis	Zweck	Datensicherung
Ein privates Verzeichnis unterhalb von var/	Lizenzdaten dieser Installation. Liegt außerhalb des öffentlichen Webverzeichnisses und ist nicht über HTTP erreichbar. Muss für den Webserver beschreibbar sein.	Ja
assets/draggo/	Automatisch erzeugtes Seiten-CSS. Muss beschreibbar sein.	Nein — wird bei Bedarf neu erzeugt
files/draggo/ai/	Bilder, die der Landingpage-Aufbau von Unsplash, Pexels oder OpenAI holt. Muss beschreibbar sein.	Ja — gehört zur Mediathek

Installation über den Contao Manager

Der empfohlene Weg für Managed Editions.

1. Contao Manager öffnen und anmelden.
2. Bereich Entdecken öffnen. Neue Pakete werden immer dort gesucht und hinzugefügt; der Bereich Pakete daneben zeigt unter Installierte Pakete nur, was bereits vorhanden ist. Entdecken ist zugleich die Startansicht.
3. Über Pakete suchen nach vtinnovations/draggo suchen und beim Treffer Paket hinzufügen wählen.
4. Änderungen anwenden. Der Contao Manager installiert das Paket und aktualisiert den Autoloader.
5. Bereich Systemwartung → Datenbank-Migrationen und -Backups → Datenbank prüfen; die angezeigten Datenbank-Änderungen bestätigen. Dabei entstehen die Draggo-Tabellen und die zusätzlichen Spalten.
6. Unter Systemwartung den Anwendungs-Cache leeren (in der Navigation auch als Cache erneuern).

Installation über Composer

Die Alternative für Installationen ohne Contao Manager.

composer require vtinnovations/draggo
vendor/bin/contao-console contao:migrate
vendor/bin/contao-console cache:clear --env=prod

Bei einer Managed Edition richtet contao:setup die öffentlichen Bundle-Dateien ein — ohne diesen Schritt fehlen der Editor sowie die Stylesheets unter bundles/draggo/:

vendor/bin/contao-console contao:setup

Ein späteres Update:

composer update vtinnovations/draggo
vendor/bin/contao-console contao:migrate
vendor/bin/contao-console cache:clear --env=prod

Installation überprüfen

Dass das Bundle registriert ist, zeigt die Liste der Konsolenbefehle:

vendor/bin/contao-console list contao

Erscheinen müssen die beiden Draggo-Befehle contao:draggo:consolidate-props und contao:draggo:demo. Fehlen sie, ist das Bundle nicht geladen — dann cache:clear wiederholen.

Im Backend erscheint anschließend in der Navigation die Gruppe Draggo mit drei Modulen:

Modul	Beschreibung laut Oberfläche
Globale Einheiten	„Header, Footer und globale Sektionen verwalten"
KI-Element-Typen	„Per KI generierte eigene Content-Elemente verwalten"
Einstellungen	„KI-API-Schlüssel, Modell und Telemetrie für Draggo"

Lizenz aktivieren

Draggo ist ein reines Pro-Produkt: genau eine Lizenzstufe, keine kostenlose Stufe, keine Testphase, kein Rückfall nach Ablauf. Ohne gültige Lizenz sind der Editor, die Draggo-Inhaltselemente, die globalen Einheiten, die Design-Werte und die KI-Funktionen gesperrt; Contao selbst und alle Inhalte, die nicht von Draggo stammen, arbeiten unverändert weiter.

Die Lizenz wird an genau einer Stelle verwaltet: Contao → Einstellungen, Abschnitt V-T.ONE Licence management, Überschrift Draggo („Draggo-Lizenz für diese Installation aktivieren, aktualisieren oder entfernen."). Es gibt keinen zweiten Ort dafür.

So aktivieren Sie die Lizenz

1. Als Administrator im Contao-Backend anmelden. Andere Benutzer sehen an dieser Stelle nur den Hinweis „Nur Administratoren können die Lizenz verwalten."
2. Einstellungen öffnen. Der Abschnitt V-T.ONE Licence management steht ganz oben, vor Contaos eigenen Abschnitten.
3. Den Lizenzschlüssel in das Feld Lizenzschlüssel eintragen. Der Platzhalter zeigt die Form: XXXXX-XXXXX-XXXXX-XXXXX.
4. Prüfen und aktivieren wählen. Der Server nimmt dafür selbst eine ausgehende HTTPS-Verbindung auf; der Browser hat zu keinem Zeitpunkt Kontakt dorthin. Der Vorgang läuft synchron: die Seite lädt neu, sobald er abgeschlossen ist — den Tab bis dahin offen lassen.
5. Die Meldung oben auf der Seite lesen. Bei Erfolg: „Lizenz aktiv. Draggo ist freigeschaltet."
6. Den Statusblock prüfen. Bei aktiver Lizenz steht dort „Pro-Lizenz aktiv. Alle Funktionen freigeschaltet." und darunter eine Detailzeile mit fünf Angaben: Schlüssel (nur maskiert), Paket, Gültig ab, Gültig bis (bei einer unbefristeten Lizenz: unbegrenzt) und Zuletzt geprüft.
7. Zur Gegenprobe eine Seite im Seitenbaum öffnen: die Schaltfläche Mit Draggo bearbeiten ist jetzt vorhanden.

Die drei Schaltflächen

Schaltfläche	Wirkung
Prüfen und aktivieren	Aktiviert den im Feld eingetragenen Schlüssel für diese Installation. Ohne Eingabe: „Bitte einen Lizenzschlüssel eingeben."
Lizenz aktualisieren	Prüft den bereits hinterlegten Schlüssel erneut — etwa nach einer Verlängerung. Erscheint erst, wenn eine Lizenz hinterlegt ist.
Lizenz entfernen	Löscht die Aktivierung. Rückfrage: „Lizenz wirklich entfernen? Draggo wird dadurch gesperrt." Danach: „Lizenz entfernt. Draggo ist gesperrt, Ihre Inhalte bleiben unverändert."

Domainbindung

Die Lizenz gilt für die Domains dieser Installation, genau so wie eingetragen. Es gibt keine Platzhalter: example.com und www.example.com sind zwei verschiedene Angaben. Passt keine davon, zeigt der Statusblock „Die Lizenz gilt nicht für eine der hier eingerichteten Domains." und darunter die Zeile Domains dieser Installation mit dem, was Contao gerade kennt — das ist die Liste, die mit der Lizenz übereinstimmen muss.

Statusmeldungen

Ist keine Lizenz aktiv, nennt der Statusblock den Grund. Die Sätze stehen so auf dem Bildschirm und eignen sich zum wörtlichen Weitergeben an den Support:

Angezeigter Satz	Was zu tun ist
„Nicht lizenziert. Draggo ist gesperrt, Contao arbeitet unverändert weiter."	Es ist noch kein Schlüssel hinterlegt. Schlüssel eintragen und aktivieren.
„Lizenz abgelaufen. Bitte verlängern und anschließend „Lizenz aktualisieren" wählen."	Lizenz verlängern, danach Lizenz aktualisieren.
„Die Lizenz gilt nicht für eine der hier eingerichteten Domains."	Domain im Startpunkt der Website mit der lizenzierten Domain abgleichen.
„Das hinterlegte Paket berechtigt nicht zur Nutzung von Draggo."	Der Schlüssel gehört zu einem anderen V-T.ONE-Produkt. Richtigen Schlüssel eintragen.
„Die Lizenz ist noch nicht gültig."	Der Gültigkeitsbeginn liegt in der Zukunft. Datum in der Detailzeile prüfen.
„Die gespeicherte Lizenz muss einmalig aktualisiert werden."	Lizenz aktualisieren wählen.
„Die gespeicherte Lizenz gehört nicht zu diesem Produkt."	Schlüssel prüfen; gegebenenfalls entfernen und neu aktivieren.
„Die gespeicherte Lizenz konnte nicht verifiziert werden."	Erneut aktualisieren. Bleibt es dabei, den Support kontaktieren.

Draggo-Einstellungen ausfüllen

Unter Draggo → Einstellungen liegen die Zugangsdaten für die KI-Funktionen, die Bildquelle des Landingpage-Aufbaus und die Telemetrie. Das Modul springt direkt in das Formular des einen Datensatzes — eine Liste gibt es nicht. Für reines Seitenbauen ohne KI kann das Formular leer bleiben.

So richten Sie die KI-Funktionen ein

1. Bei Anthropic einen API-Schlüssel für Claude erzeugen.
2. Im Backend Draggo → Einstellungen öffnen.
3. Im Abschnitt KI (Claude) den Schlüssel in Claude API-Schlüssel eintragen. Die Eingabe wird im Formular maskiert dargestellt.
4. Modell leer lassen, außer ein bestimmtes Modell ist gewünscht.
5. Speichern.
6. Eine Seite im Draggo-Editor öffnen und den Reiter KI in der Werkzeugleiste anklicken. Erscheint die Begrüßung des Generators statt des Hinweises „KI ist nicht konfiguriert", ist alles richtig hinterlegt.

Abschnitt „KI (Claude)"

Feld	Hilfetext in der Oberfläche	Standard
Claude API-Schlüssel	„Dein Anthropic/Claude API-Key. Wird sicher in der Datenbank gespeichert."	leer
Modell	„Standard: claude-opus-4-8. Leer lassen für Standard."	leer (wirkt wie claude-opus-4-8)
Max. Rückfragen	„Wie viele Frage-Runden der Agent maximal stellt (Standard 8)."	leer (wirkt wie 8)
Selbst-Review deaktivieren	„Standardmäßig prüft & verbessert die KI jeden Entwurf automatisch (1 Extra-Aufruf). Hier abschaltbar, um Kosten zu sparen."	aus (Selbst-Review also aktiv)

Abschnitt „Bilder (Landingpage-Builder)"

Feld	Hilfetext in der Oberfläche	Standard
Bildquelle	„Woher der Landingpage-Builder Bilder holt. Claude kann KEINE Bilder erzeugen – dafür ist OpenAI da. Leer = keine Auto-Bilder (Mediathek-Picker)."	Aus (keine Auto-Bilder)
Unsplash Access-Key	„Gratis unter unsplash.com/developers. Eigener Key = eigenes Limit."	leer
Pexels API-Key	„Gratis unter pexels.com/api."	leer
OpenAI API-Key	„Für KI-Bildgenerierung (kostet pro Bild). platform.openai.com."	leer
OpenAI Bild-Modell	„Standard: gpt-image-1. Leer lassen für Standard."	leer

Die Auswahl der Bildquelle umfasst: Aus (keine Auto-Bilder), Unsplash (Stockfotos), Pexels (Stockfotos) und OpenAI (KI-Bildgenerierung).

Abschnitt „Telemetrie (optional)"

Feld	Hilfetext in der Oberfläche	Standard
Telemetrie aktivieren	„Sendet anonym NUR die Struktur erstellter Elemente (keine Inhalte) an die zentrale URL."	aus
Telemetrie-URL	„Ziel-Endpoint für die anonyme Struktur-Meldung."	leer

Die erste Seite bauen

So gehen Sie vor

1. Im Backend den Seitenbaum öffnen und eine reguläre Seite auswählen — oder eine neue anlegen und veröffentlichen.
2. In der Symbolleiste der Zeile die Schaltfläche Mit Draggo bearbeiten anklicken. Der Editor öffnet sich für die ganze Seite, also für alle Artikel dieser Seite samt ihrer Inhaltselemente.
3. Ist die Seite noch leer, in der Werkzeugleiste Container am Ende anklicken. Ein Container entspricht einem Contao-Artikel und bildet einen Abschnitt der Seite.
4. In der linken Leiste den Reiter Inhalt öffnen, dort den Unterreiter Strukturen, und unter Spalten-Layouts eine Aufteilung anklicken — zum Einstieg 2 Spalten (50 / 50). Der Hinweis dort lautet: „Klick = in aktive Spalte/Container · oder auf eine Spalte ziehen."
5. Auf der Arbeitsfläche eine Spalte anklicken, damit sie aktiv ist.
6. Zurück in den Unterreiter Elemente wechseln und ein Element anklicken — zum Beispiel Überschrift aus der Gruppe Text oder Button (Draggo) aus der Gruppe Draggo. Elemente lassen sich auch per Ziehen auf eine Spalte ablegen.
7. Das eingefügte Element auf der Arbeitsfläche anklicken. Rechts erscheint der Reiter Element mit den drei Unterreitern Inhalt, Stil und Erweitert. Text eintragen, Aussehen anpassen.
8. Über die Geräte-Umschalter in der Werkzeugleiste zwischen Desktop, Tablet und Mobil wechseln und das Ergebnis prüfen.
9. Mit Vorschau die echte Frontend-Adresse der Seite in einem neuen Tab öffnen und gegenprüfen.

Teil 2 — Funktionen im Detail

Alle Funktionen dieses Teils setzen eine aktive Pro-Lizenz voraus. Eine Abstufung innerhalb von Draggo gibt es nicht: entweder alles oder nichts.

Der visuelle Editor

Der Editor ist eine eigene Backend-Seite, die eine Seite oder eine globale Einheit im Ganzen bearbeitet. Er ist über drei Wege erreichbar.

Einstieg	Wo	Öffnet
Mit Draggo bearbeiten	Seitenbaum, Symbolleiste der Seitenzeile	Die ganze Seite mit allen Artikeln
Inhalt bearbeiten	Draggo → Globale Einheiten, Symbolleiste der Zeile	Die Einheit („Inhalt dieser Einheit mit Draggo bearbeiten")
Schwebende Draggo-Schaltfläche	Im Frontend, solange ein Backend-Benutzer angemeldet ist	Die gerade betrachtete Seite

So öffnen Sie den Editor

1. Im Backend den Seitenbaum öffnen.
2. In der Zeile der gewünschten Seite die Schaltfläche Mit Draggo bearbeiten anklicken.
3. Der Editor öffnet die ganze Seite. Bearbeitet werden alle Artikel dieser Seite samt ihrer Inhaltselemente — nicht nur ein einzelner Artikel.
4. Über die Auswahlliste in der Werkzeugleiste lässt sich ohne Umweg über den Seitenbaum zu einer anderen Seite im selben Website-Startpunkt springen.
5. Zum Verlassen den Browser-Zurück-Knopf nutzen oder das Contao-Backend in einem anderen Tab öffnen. Alles Bearbeitete ist bereits gespeichert.

Die Oberfläche

Links die Arbeitsleiste mit vier Reitern, rechts die Arbeitsfläche mit der Werkzeugleiste darüber.

Reiter	Inhalt
Inhalt	Die Palette mit den Unterreitern Elemente, Strukturen und Komponenten
Layout	Gestaltung des angeklickten Containers, der Reihe oder der Spalte
Globals	Website-weite Design-Werte und Standard-Stile
Element	Erscheint erst, sobald ein Element angeklickt ist

In der Werkzeugleiste über der Arbeitsfläche:

Bedienelement	Funktion
Doppelpfeil links	„Leiste einklappen" — schafft Platz für die Arbeitsfläche
Auswahlliste	„Seite wechseln" — springt zu einer anderen Seite im selben Website-Startpunkt, ohne den Editor zu verlassen
Container am Ende	Hängt einen neuen Container unten an (nur im Seitenmodus)
Einfügen-Symbol	„Kopierten Container einfügen"
Desktop / Tablet / Mobil	Wechselt die Arbeitsbreite; rechts daneben steht die aktive Ansicht
Vorschau	„Live-Vorschau in neuem Tab" — nur im Seitenmodus
Baum	„Struktur-Baum" — Gliederung der Seite; „Klick = im Editor anspringen & auswählen."
KI	„KI-Element-Generator"
Kontrast-Symbol	„Hell / Dunkel / Automatisch" für die Editoroberfläche selbst
Hilfe	„Hilfe & Doku" — durchsuchbare Doku und KI-Chat

Container, Reihen und Spalten

Draggo baut Seiten in drei Ebenen: Container (ein Contao-Artikel, also ein Abschnitt der Seite), darin Reihen mit einer Spaltenaufteilung, darin Spalten mit den Elementen. Technisch sind Reihen und Spalten Contao-Wrapper-Elemente: Grid: Reihe Anfang, Grid: Spalte und Grid: Reihe Ende.

So legen Sie einen mehrspaltigen Abschnitt an

1. Falls noch kein Abschnitt existiert: Container am Ende anklicken.
2. Den Container-Kopf anklicken, damit er aktiv ist.
3. Reiter Inhalt → Unterreiter Strukturen öffnen.
4. Unter Spalten-Layouts die gewünschte Aufteilung anklicken — oder mit der Maus auf die Zielspalte ziehen.
5. Eine Spalte anklicken und über den Unterreiter Elemente befüllen.
6. Für das Aussehen des Abschnitts den Container-Kopf, den Reihen-Kopf oder eine Spalte anklicken und in den Reiter Layout wechseln. Ist nichts ausgewählt, steht dort: „Container-Kopf, Reihen-Kopf oder eine Spalte anklicken, um Hintergrund, Bild, Abstand, Farbe & Ausrichtung zu setzen."
7. Für die Reihenfolge der Container den Baum nutzen oder die Container-Köpfe mit der Maus verschieben.

Verfügbare Spalten-Layouts

Bezeichnung	Aufteilung (von zwölf)
1 Spalte	12
2 Spalten (50 / 50)	6 · 6
Sidebar links (33 / 66)	4 · 8
Sidebar rechts (66 / 33)	8 · 4
3 Spalten (Drittel)	4 · 4 · 4
3 Spalten (schmal/breit/schmal)	3 · 6 · 3
4 Spalten (Viertel)	3 · 3 · 3 · 3
Zentriert (schmaler Inhalt)	2 · 8 · 2
Benutzerdefiniert	Eigene Breiten, z. B. 6,6 oder 4,4,4

Breite des Abschnitts

Jede Reihe hat eine Einstellung Container („Breitenbegrenzung der Reihe") mit drei Werten:

Wert	Wirkung
Container (begrenzt)	Inhalt auf die übliche Maximalbreite begrenzt und zentriert
Vollbreite (fluid)	Inhalt nutzt die ganze Fensterbreite
Kein Container	Keine Breitenbegrenzung durch Draggo

Auf Container-Ebene steht zusätzlich Inhaltsbreite zur Wahl: Vollbreite oder Boxed (zentriert). Der Hinweis in der Oberfläche: „Container/Hintergrund immer voll breit. „Boxed" zentriert nur den Inhalt (max. 1140px)." Daneben lässt sich ein Container-Name (intern – kein Frontend) vergeben — er dient nur der Orientierung im Editor und im Seitenbaum.

Elemente einfügen und gestalten

Die Palette im Unterreiter Elemente zeigt alle in Contao registrierten Inhaltselemente, nicht nur die von Draggo — gruppiert nach Draggo, Text, Links, Medien, Dateien und Einbindungen. Die Gruppe Draggo steht oben und ist aufgeklappt. Ein Suchfeld („Element suchen …") filtert innerhalb dieser Ansicht.

So fügen Sie ein Element ein und gestalten es

1. Auf der Arbeitsfläche die Spalte oder Sektion anklicken, in die das Element soll. Ohne Auswahl meldet der Editor: „Bitte zuerst eine Spalte oder Sektion anklicken."
2. Im Unterreiter Elemente das gewünschte Element anklicken — oder es mit der Maus an die Zielstelle ziehen.
3. Das Element auf der Arbeitsfläche anklicken. Rechts öffnet sich der Reiter Element.
4. Unterreiter Inhalt: Texte, Bilder, Links und die elementeigenen Optionen. Hat ein Element keine Inhaltsfelder, steht dort: „Dieses Element hat keine Inhalts-Felder — über „Stil" und „Erweitert" gestalten und positionieren."
5. Unterreiter Stil: Typografie, Farben, Rahmen, Schatten, Abstände. Änderungen erscheinen sofort auf der Arbeitsfläche.
6. Unterreiter Erweitert: allgemeine Gestaltung, eigene CSS-Klassen und das Verbergen auf einzelnen Gerätebreiten.
7. Für Reihenfolge, Duplikate oder Löschen das Element mit der rechten Maustaste anklicken.

Das Kontextmenü eines Elements

Eintrag	Wirkung
Duplizieren	Kopie direkt darunter
Kopieren	Legt das Element in die Zwischenablage des Editors
Einfügen	Fügt das zuletzt kopierte Element unterhalb ein
Als Komponente speichern	Nimmt das Element in die Komponenten-Bibliothek auf
Löschen	Rückfrage „Element löschen?", dann endgültig

Die Draggo-eigenen Elemente

Zusätzlich zu allem, was Contao und andere Erweiterungen mitbringen, stellt Draggo eigene Elemente bereit. Ihre Beschreibungen stammen unverändert aus der Oberfläche:

Bereich	Elemente
Grundbausteine	Button, Icon, Abstand („Vertikaler Leerraum."), Trennlinie, Icon-Box („Icon + Titel + Text."), Bild-Box, Icon-Liste, Hinweisbox („Info-/Erfolg-/Warnung-/Fehler-Box, optional schließbar."), Zitat, Code-Block
Interaktion	Akkordeon, Tabs, Bild-Karussell, Galerie („Bildergalerie mit Grid/Masonry/Kacheln, Hover-Effekten + Lightbox."), Flip-Box, Hotspot-Bild, Video-Playlist („Player + Liste; YouTube/Vimeo/MP4, lädt erst bei Klick (DSGVO).")
Aufmerksamkeit	Call to Action, Zähler („Animierte Zahl, zählt beim Scrollen hoch."), Fortschrittsbalken, Animierte Überschrift, Countdown, Preistabelle, Preisliste, Ablauf-Schritte
Scroll-Effekte	Stack-Reveal, Horizontal-Pin, Sticky-Split Story, Text-Highlight, Scroll-Zoom, Parallax-Layers, Pinned-Timeline, Before/After, Reveal-Grid, SVG-Path-Draw, Scroll-Progress, Curtain-Cover, Text-Mask, Tilt-3D Cards
Seitenstruktur	Navigation („Seitenbaum-Navigation mit Design-Preset (horizontal / Seiten-Navi / Hamburger)."), Logo, Seitentitel, Breadcrumb, Sitemap, Inhaltsverzeichnis, Suche, Teilen-Buttons
Datengetrieben	Loop-Grid („Unterseiten einer Seite als Karten (datengetrieben)."), Reader-Feld, Insert-Tag, Globaler Block, Formular
Sonstiges	Google Maps („Karte für eine Adresse, DSGVO-konform (Klick zum Laden)."), Öffnungsstatus, Hell/Dunkel-Umschalter, Social-Icons, KI-Element

Tablet und Mobil

Draggo trennt Desktop, Tablet und Mobil an einer festen Grenze: 768 Pixel.

So passen Sie eine Reihe für kleinere Geräte an

1. Auf der Arbeitsfläche den Reihen-Kopf anklicken.
2. In der Werkzeugleiste auf Tablet umschalten. Rechts neben den Symbolen steht jetzt „Tablet".
3. Im Reiter Layout unter Struktur · Tablet (≥768px) eine eigene Aufteilung wählen, oder Wie Desktop stehen lassen.
4. Auf Mobil umschalten und unter Struktur · Mobil (<768px) das Gleiche tun. Bleibt das Feld leer, werden die Spalten gestapelt und nehmen die volle Breite ein.
5. Abstände, Ausrichtung und Hintergrund lassen sich je Gerätebreite getrennt setzen: Was Sie einstellen, während Tablet oder Mobil aktiv ist, gilt nur dort; Desktop bleibt die Grundeinstellung.
6. Einzelne Elemente lassen sich gezielt verbergen — im Reiter Erweitert über Auf Tablet verstecken bzw. Auf Mobil verbergen.
7. Abschließend im Frontend über Vorschau gegenprüfen.

Dieselben Angaben stehen auch in der klassischen Contao-Maske des Elements Grid: Reihe Anfang, im Abschnitt Responsive (Tablet / Mobil): Struktur (Tablet) („Spalten-Aufteilung ab 768px. Leer = wie Desktop.") und Struktur (Mobil) („Spalten-Aufteilung unter 768px. Leer = gestapelt (volle Breite).").

Container-Vorlagen

Vorlagen sind fertig aufgebaute Abschnitte: Struktur, Elemente und Gestaltung in einem Schritt. Sie liegen im Unterreiter Strukturen unterhalb der Spalten-Layouts, nach Kategorien gruppiert.

So setzen Sie eine Vorlage ein

1. Reiter Inhalt → Unterreiter Strukturen öffnen.
2. Unterhalb von Spalten-Layouts die passende Kategorie aufklappen.
3. Die Vorlage anklicken — dann entsteht ein vollständiger neuer Container. Der Hinweis dort: „Klick = fertiger Container · oder in eine Spalte ziehen (nur Inhalt)."
4. Soll nur der Inhalt in eine bestehende Spalte, die Vorlage stattdessen auf diese Spalte ziehen.
5. Die Platzhaltertexte und -bilder durch die eigenen ersetzen: Element anklicken, Reiter Element → Inhalt.
6. Gestaltung im Reiter Layout anpassen — die Vorlagen bringen Hintergründe und Abstände bereits mit.

Vorlage	Kategorie	Beschreibung in der Oberfläche
Hero-Container	Held	„Vollbreiter Container mit dunklem Hintergrund + Overlay, großer Überschrift, Text und Button."
Text-Bild-Container (Bild links)	Text & Bild	„Container mit 2 Spalten: Bild links, Überschrift + Text rechts."
Text-Bild-Container (Bild rechts)	Text & Bild	„Container mit 2 Spalten: Überschrift + Text links, Bild rechts."
Feature-Container (Bild + Liste)	Text & Bild	„Zwei Spalten: Bild links, Überschrift + Vorteils-Liste rechts."
Feature-Container (3 Boxen)	Features	„Container mit drei gleich breiten Icon-Boxen nebeneinander."
Call-to-Action-Container	Call-to-Action	„Farbiger Vollbreite-Container mit Titel, Text und Button."
Newsletter-Container	Call-to-Action	„Heller zentrierter Container: Titel, Text und Abonnieren-Button."
Team-Container (3 Personen)	Team	„Drei Spalten mit Foto, Name und Rolle."
FAQ-Container (Akkordeon)	FAQ	„Überschrift + aufklappbares Frage-Antwort-Akkordeon."
Bewertungen-Container (3 Zitate)	Bewertungen	„Drei Kunden-Zitate nebeneinander."
Preis-Container (3 Tarife)	Preise	„Drei Preistabellen, mittlerer Tarif hervorgehoben."
Kontakt-Container (Split)	Kontakt	„Zwei Spalten: Text links, Kontaktdaten-Liste rechts."
Logo-Leiste	Logos	„Galerie-Leiste für Partner-/Kundenlogos (Graustufen, 5 pro Reihe)."
Zahlen-Container (4 Counter)	Zahlen	„Vier animierte Zähler nebeneinander (Statistik-Band)."
Galerie-Grid-Container	Galerie	„Bilderraster (3 Spalten) mit Lightbox und Zoom-Hover."
Ablauf-Container (Schritte)	Ablauf	„Überschrift + nummerierte Schritt-für-Schritt-Liste."

Komponenten

Eine Komponente ist ein selbst gebauter Baustein, der in der Bibliothek liegt und überall wieder eingefügt werden kann. Anders als eine globale Einheit ist eine eingefügte Komponente eine eigenständige Kopie: Wer sie später ändert, ändert nur dieses eine Vorkommen.

So speichern und verwenden Sie eine Komponente

1. Das fertig gestaltete Element auf der Arbeitsfläche mit der rechten Maustaste anklicken und Als Komponente speichern wählen. Für eine ganze Reihe steht im Reihen-Kopf die Schaltfläche Als Komponente.
2. Einen Namen vergeben und bestätigen. Der Editor meldet „Als Komponente gespeichert."
3. Zum Einfügen zuerst die Zielspalte oder -sektion anklicken.
4. Reiter Inhalt → Unterreiter Komponenten öffnen. Der Hinweis dort: „Spalte/Sektion wählen, dann klicken zum Einfügen."
5. Die Komponente anklicken — oder sie in eine Spalte ziehen.
6. Die eingefügte Kopie wie jedes andere Element anpassen.
7. Nicht mehr benötigte Einträge über das Kreuz neben dem Namen aus der Bibliothek entfernen.

Globale Einheiten

Eine globale Einheit ist ein Inhaltsbereich, der nicht zu einer einzelnen Seite gehört: Header, Footer oder eine wiederverwendbare Sektion. Sie wird einmal gepflegt und wirkt überall — anders als eine Komponente, die als Kopie eingefügt wird.

So legen Sie einen Header an

1. Draggo → Globale Einheiten öffnen und Neue Einheit wählen („Eine neue Draggo-Einheit anlegen").
2. Im Abschnitt Titel & Typ einen Titel eintragen („Interner Name der Einheit.") und als Typ Header wählen.
3. Im Abschnitt Optionen bei Bedarf Sticky aktivieren („Einheit beim Scrollen oben fixieren (sticky).").
4. Noch nicht veröffentlichen — erst den Inhalt bauen.
5. Speichern und zur Liste zurückkehren.
6. In der Zeile der Einheit die Schaltfläche Inhalt bearbeiten anklicken. Der Draggo-Editor öffnet sich für diese Einheit; Container, Reihen, Spalten und Elemente funktionieren genauso wie auf einer Seite.
7. Zurück in die Liste, die Einheit bearbeiten und im Abschnitt Veröffentlichung Veröffentlicht setzen („Einheit im Frontend ausgeben.").
8. Eine beliebige Frontend-Seite aufrufen: Der Header erscheint automatisch ganz oben, ohne dass im Seitenlayout etwas geändert werden muss.

Drei Wege, eine Einheit auszugeben

Weg	Wann
Automatisch	Veröffentlichte Einheiten vom Typ Header werden auf jeder Frontend-Seite direkt nach dem Seitenbeginn ausgegeben, Einheiten vom Typ Footer ganz am Ende. Ohne jede Konfiguration.
Frontend-Modul Draggo-Einheit	„Eine globale Draggo-Einheit (Header/Footer/Sektion) ausgeben." Für den Fall, dass die Einheit an einer bestimmten Stelle im Seitenlayout stehen soll. Feld: Draggo-Einheit („Die global auszugebende Einheit wählen.")
Inhaltselement Globaler Block (Draggo)	„Bindet eine wiederverwendbare „Sektion"-Einheit ein — zentral editierbar (Live-Link)." Feld Einheit: „Welche Einheit (Draggo → Einheiten) hier eingebunden wird. Änderungen dort wirken auf allen Seiten."

Design-Werte und Standard-Stile

Der Reiter Globals ist die eine Stelle für alles, was auf der ganzen Website gleich aussehen soll. Der Hinweis dort: „Lege Farben und Werte einmal an und nutze sie überall. Änderst du einen Wert hier, ändert er sich auf der ganzen Website."

So legen Sie eine Hausfarbe an und verwenden sie

1. Im Editor den Reiter Globals öffnen.
2. Unter Neuen Wert anlegen als Art Farbe wählen.
3. Einen Namen vergeben — der Platzhalter schlägt „z. B. Primärfarbe" vor.
4. Den Wert über den Farbwähler festlegen.
5. Hinzufügen anklicken. Der Wert erscheint in der Gruppe Farben.
6. Für den Dunkelmodus in der Zeile des Werts den zweiten Farbwähler („Dunkel-Modus-Farbe") setzen. Bleibt er auf derselben Farbe, gilt sie in beiden Modi.
7. Die Farbe verwenden: Beim Gestalten eines Elements oder eines Containers steht neben dem Farbwähler eine Auswahlliste Globale Farbe mit allen angelegten Werten.
8. Ändert sich die Hausfarbe später, genügt eine Änderung hier — sie schlägt überall durch, wo der Wert verwendet wird.

Art des Design-Werts	Beispiel
Farbe	#0a66ff
Abstand	1.5rem
Schrift	Arial, sans-serif
Eckenradius	8px
Schatten	0 4px 12px rgba(0,0,0,.15)

Standard-Stile (global)

Unterhalb der Design-Werte steht der Abschnitt Standard-Stile (global). Dort werden Fließtext und die Überschriftenebenen H1 bis H6 sowie Links einmal festgelegt — Schriftfamilie, Größe, Gewicht, Stil, Zeilenhöhe und Farbe, jeweils auch getrennt je Gerätebreite. Die Einstellungen werden mit Standard-Stile speichern übernommen und gelten für die ganze Website, ohne dass einzelne Elemente angefasst werden müssen.

Formulare

Das Element Formular (Draggo) („Visuell gebautes Formular — Versand, Validierung & Spamschutz übernimmt Contao.") bindet ein echtes Contao-Formular ein. Draggo baut die Felder; alles Sicherheitsrelevante — Validierung, Versand, Spamschutz — bleibt bei Contaos eigener Formular-Engine.

So bauen Sie ein Kontaktformular

1. Eine Spalte anklicken und das Element Formular (Draggo) einfügen.
2. Das Element anklicken; im Reiter Element → Inhalt steht das Feld Formular („Im Draggo-Editor anlegen oder ein bestehendes Contao-Formular wählen.").
3. Für ein neues Formular daneben + Neues Formular anklicken und auf die Frage „Name des Formulars:" einen Namen eintragen. Das Formular wird sofort angelegt und mit dem Element verbunden.
4. Unterhalb erscheint der Formularbaukasten. Unter Feld hinzufügen die gewünschten Feldarten anklicken — jedes Feld wird sofort gespeichert.
5. Unter Felder Beschriftungen, Pflichtangaben und Reihenfolge festlegen; Felder lassen sich duplizieren und löschen.
6. Im Abschnitt Versand & Einstellungen Per E-Mail versenden aktivieren und unter Empfänger (E-Mail, mit Komma trennen) die Zieladresse eintragen.
7. Betreff und Bestätigungstext (nach dem Absenden) ausfüllen.
8. Die Seite im Frontend aufrufen und eine Testeinsendung schicken.

KI-Element-Generator

Der Generator erzeugt eigene Inhaltselement-Typen: Sie beschreiben im Gespräch, was das Element können soll, prüfen die Vorschau und übernehmen das Ergebnis. Danach steht der neue Typ dauerhaft in der Palette unter KI-Elemente und lässt sich beliebig oft platzieren.

Voraussetzungen: hinterlegter Claude-API-Schlüssel unter Draggo → Einstellungen und das Recht KI-Element-Generator nutzen für die eigene Benutzergruppe (Administratoren immer).

So erzeugen Sie ein eigenes Element

1. Im Editor in der Werkzeugleiste KI anklicken.
2. Neues Element wählen. Der Generator begrüßt Sie und fragt, was gebaut werden soll.
3. Im Eingabefeld unten beschreiben, was das Element sein soll — etwa „Team-Karten" oder „Logo-Carousel". Strg + Enter sendet, ebenso die Schaltfläche Senden.
4. Alternativ oder zusätzlich über die Büroklammer einen Screenshot anhängen, der nachgebaut werden soll — bis zu 4 Bilder, je höchstens 5 MB, als PNG, JPEG, GIF oder WebP.
5. Die Rückfragen beantworten. Der Aufruf läuft synchron — während der Punkte-Anzeige den Tab offen lassen.
6. Sobald ein Entwurf vorliegt, erscheint der Block Vorschau mit dem gerenderten Element.
7. Passt es, Übernehmen wählen. Der Generator bestätigt und verweist auf den Fundort: in der Palette (Reiter Inhalt) unter KI-Elemente. Passt es nicht, Verwerfen wählen und weiter beschreiben.
8. Das neue Element wie jedes andere in eine Spalte einfügen.

Vorhandene KI-Elemente ändern oder löschen

1. Im Reiter KI den Abschnitt Meine KI-Elemente aufklappen.
2. Das Stift-Symbol öffnet den Bearbeitungsmodus für diesen Typ; der Generator fragt, was geändert werden soll. Der Ablauf ist derselbe: beschreiben, Vorschau prüfen, Übernehmen.
3. Das Kreuz-Symbol löscht den Typ — es erscheint nur für Benutzer mit dem Recht KI-Element-Typen löschen. Rückfrage: „Diesen KI-Element-Typ löschen? Bereits platzierte Instanzen werden dann nicht mehr gerendert."
4. Zur Übersicht über alle erzeugten Typen — auch ohne den Editor zu öffnen — dient das Backend-Modul Draggo → KI-Element-Typen. Dort lassen sich Name („Anzeigename im Editor.") und Kategorie („Gruppierung in der Palette.") ändern und der Typ über Veröffentlicht aus dem Editor nehmen („Nur veröffentlichte Typen erscheinen im Editor.").

Ganze Seiten per KI

Zusätzlich zum einzelnen Element baut der Generator ganze Seiten — aus einem kurzen Auftrag oder aus Ihren eigenen Texten. Beides steht im Reiter KI und nur im Seitenmodus, nicht beim Bearbeiten einer Einheit.

So bauen Sie eine Seite aus einem Brief

1. Eine leere oder neue Seite im Draggo-Editor öffnen.
2. In der Werkzeugleiste KI anklicken.
3. Den Abschnitt Ganze Seite aus Brief aufklappen.
4. Im Textfeld den Auftrag beschreiben — der Platzhalter schlägt vor: „z. B. Landingpage für ein Fitnessstudio mit Angeboten, Preisen, Team und Kontakt".
5. Seite generieren anklicken. Die Schaltfläche wechselt auf „Generiere …"; der Vorgang läuft synchron und kann bei mehreren Abschnitten dauern — den Tab offen lassen.
6. Nach Abschluss meldet der Editor die Zahl der erstellten Container und wechselt zurück in den Reiter Inhalt.
7. Texte und Bilder durchgehen und anpassen. Der Hinweis in der Oberfläche: „KI wählt passende Vorlagen UND schreibt echte Texte. Inhalte danach anpassen."

So bauen Sie eine Seite aus eigenen Inhalten

1. Reiter KI → Abschnitt Seite aus eigenen Inhalten aufklappen.
2. Die eigenen Texte in das Feld einfügen und beschriften. Das Beispiel im Platzhalter zeigt die erwartete Form, etwa „Überschrift: …", „Über uns: …", „Leistungen: …", „Kontakt: …".
3. Aus meinen Inhalten bauen anklicken.
4. Das Ergebnis prüfen. Der Hinweis: „Die KI ordnet GENAU deine Inhalte passenden Sektionen zu — erfindet nichts dazu."
5. Bleibt das Ergebnis leer, meldet der Editor „Konnte keine Seite bauen — bitte Inhalte deutlicher beschriften." — dann die Beschriftungen eindeutiger fassen und erneut versuchen.

Doku-Suche und KI-Hilfe

Der Reiter Hilfe in der Werkzeugleiste („Hilfe & Doku") enthält zwei Dinge: eine durchsuchbare Kurzdokumentation zu den Funktionen des Editors und einen Chat, der Fragen auf Grundlage genau dieser Dokumentation beantwortet.

So nutzen Sie die Hilfe

1. In der Werkzeugleiste Hilfe anklicken.
2. Oben in das Feld „Doku durchsuchen …" einen Begriff eintippen. Die Abschnitte darunter werden sofort gefiltert; gibt es keinen Treffer, steht dort „Nichts gefunden."
3. Einen Abschnitt anklicken, um ihn aufzuklappen.
4. Für eine freie Frage unten in das Chatfeld schreiben — der Platzhalter schlägt vor: „Frag die KI – z. B. wie baue ich einen Horizontal-Scroll?".
5. Fragen anklicken oder Strg + Enter drücken.
6. Die Antwort nennt unter Quellen die Doku-Abschnitte, auf die sie sich stützt.

Wiederherstellungspunkte

Ein Wiederherstellungspunkt ist eine vollständige Momentaufnahme eines Containers — Inhalt und Gestaltung. Das ist kein Rückgängig für einzelne Schritte, sondern eine bewusst ausgelöste Sicherung vor größeren Umbauten.

So sichern Sie einen Stand und spielen ihn zurück

1. Auf der Arbeitsfläche den Container-Kopf anklicken.
2. Den Bereich Wiederherstellungspunkte aufklappen.
3. Punkt sichern anklicken.
4. Auf die Frage „Name des Wiederherstellungspunkts:" eine Bezeichnung eintragen, an der Sie den Stand später wiedererkennen — etwa „vor Umbau Hero". Der Editor meldet „Punkt gesichert."
5. Den Umbau durchführen.
6. Soll der alte Stand zurück: denselben Bereich aufklappen. Jeder Eintrag zeigt Bezeichnung und Zeitpunkt.
7. Beim gewünschten Eintrag Wiederherstellen anklicken. Rückfrage: „Diesen Stand wiederherstellen? Der aktuelle Stand wird vorher gesichert."
8. Bestätigen. Der Editor meldet „Wiederhergestellt." und lädt den Container neu.

Berechtigungen

Draggo bringt keine eigene Benutzerverwaltung mit. Wer im Editor arbeiten darf, ergibt sich aus Contaos Rechten; nur für die KI-Funktionen gibt es zwei zusätzliche Rechte.

Aufgabe	Erforderlich
Lizenz verwalten	Administrator. Andere sehen nur „Nur Administratoren können die Lizenz verwalten."
Editor öffnen und Elemente bearbeiten	Zugriff auf die Tabelle tl_content und das Recht, Artikel der betreffenden Seite zu bearbeiten (Seitenzuordnung)
Formulare anlegen oder ändern	Zusätzlich Zugriff auf die Tabelle tl_form
KI-Element-Generator und KI-Seitenaufbau nutzen	Draggo-Recht KI-Element-Generator nutzen
KI-Element-Typen löschen	Draggo-Recht KI-Element-Typen löschen

So vergeben Sie die KI-Rechte

1. Im Backend Benutzergruppen öffnen und die gewünschte Gruppe bearbeiten.
2. Zum Abschnitt Draggo blättern — er steht oberhalb der Dateirechte.
3. Beim Feld Draggo-Rechte („Welche Draggo-KI-Funktionen diese Gruppe nutzen darf.") die gewünschten Einträge ankreuzen: KI-Element-Generator nutzen und/oder KI-Element-Typen löschen.
4. Speichern.
5. Sicherstellen, dass die Gruppe außerdem Zugriff auf tl_content und auf die betreffenden Seiten hat — ohne das öffnet sich der Editor gar nicht.
6. Mit einem Testkonto dieser Gruppe prüfen: Der Reiter KI erscheint nur bei vergebenem Recht, das Löschsymbol bei den KI-Elementen nur mit dem zweiten Recht.

Icons, Schriften und Bilder

So wählen Sie ein Icon

1. Ein Element mit Icon einfügen — etwa Icon (Draggo), Icon-Box, Icon-Liste oder Social-Icons.
2. Das Element anklicken und im Reiter Element → Inhalt die Schaltfläche Icon wählen anklicken.
3. Im Auswahlfenster zwischen den beiden Quellen umschalten: Draggo (die eingebaute SVG-Bibliothek) und Font Awesome.
4. Oben in das Feld „Icon suchen …" einen Begriff eintippen. Bei Font Awesome ist das nötig: ohne Suche wird die Liste gekürzt und darauf hingewiesen („… Icons — tippe zum Suchen.").
5. Das gewünschte Icon anklicken. Das Fenster schließt sich, das Icon ist gesetzt.
6. Größe und Farbe stellen Sie anschließend im Unterreiter Stil ein.

Bereich	Was Draggo mitbringt
Icons	Eine eingebaute SVG-Icon-Bibliothek ohne externe Abhängigkeit. Zusätzlich liegt Font Awesome Free bei und wird lokal ausgeliefert — ohne Anfrage an einen fremden Server. Die Font-Awesome-Dateien unterliegen ihrer eigenen, mitgelieferten Lizenz. Im Editor wählen Sie Icons über einen Picker; beide Quellen stehen nebeneinander.
Schriften	Eine kuratierte Auswahl gängiger Google-Schriften. Geladen wird je Seite nur, was dort tatsächlich verwendet wird.
Bilder	Für den KI-Seitenaufbau wahlweise Unsplash, Pexels oder OpenAI-Bildgenerierung — jeweils mit eigenem API-Schlüssel — oder Aus; dann wählen Sie Bilder von Hand aus der Mediathek. Bezogene Bilder landen in files/draggo/ai/ und stehen danach wie jede andere Datei in der Mediathek.

Teil 3 — Für Entwickler

Konsolenbefehle

contao:draggo:consolidate-props

„Konsolidiert die Draggo-Inhaltsspalten in tl_content.draggo_props (JSON)." — verschiebt die Inhaltsfelder der Draggo-Elemente aus einzelnen Spalten in eine JSON-Spalte und entlastet damit die gemeinsam genutzte Tabelle tl_content.

Option	Beschreibung	Standard
--dry-run	„Nur berichten, nichts schreiben."	aus
--drop	„Inhaltsspalten nach dem Kopieren droppen."	aus

# Nur berichten
vendor/bin/contao-console contao:draggo:consolidate-props --dry-run

# Werte in die JSON-Spalte kopieren
vendor/bin/contao-console contao:draggo:consolidate-props

# Kopieren und die alten Spalten entfernen
vendor/bin/contao-console contao:draggo:consolidate-props --drop

Fehlt die Zielspalte, bricht der Befehl mit einem klaren Hinweis ab: „Spalte draggo_props fehlt — erst contao:migrate ausführen (legt sie aus dem DCA an)." Ist bereits konsolidiert, meldet er „Keine Draggo-Inhaltsspalten gefunden — bereits konsolidiert."

contao:draggo:demo

„Seedet einen Demo-Artikel mit allen Draggo-Elementen (Smoke-Test)." — legt auf einer Seite einen Artikel „Draggo Demo" an und füllt ihn mit je einem Exemplar jedes Elements sowie einer Grid-Reihe. Nützlich, um nach Installation oder Update die ganze Palette auf Desktop, Tablet und Mobil in einem Rutsch anzusehen.

Argument / Option	Beschreibung	Standard
page (optional)	„Ziel-Seiten-ID (regular). Standard: erste veröffentlichte regular-Seite."	erste veröffentlichte reguläre Seite
--keep	„Bestehende Inhalte des Demo-Artikels NICHT löschen."	aus — der Demo-Artikel wird vorher geleert

vendor/bin/contao-console contao:draggo:demo
vendor/bin/contao-console contao:draggo:demo 12
vendor/bin/contao-console cache:clear

Bilder werden aus files/demo*.png übernommen, sofern vorhanden; andernfalls bleiben die bildabhängigen Elemente leer. Gibt es keine reguläre Seite, bricht der Befehl mit „Keine regular-Seite gefunden. Lege erst eine veröffentlichte Seite an." ab.

Tabellen und Verzeichnisse

Eigene Tabellen

Tabelle	Zweck	Backend-Oberfläche
tl_draggo_unit	Globale Einheiten (Header, Footer, Sektion)	Ja — Draggo → Globale Einheiten
tl_draggo_blocktype	Definitionen der per KI erzeugten Elementtypen	Ja — Draggo → KI-Element-Typen (Übersicht, Veröffentlichen, Löschen)
tl_draggo_settings	Draggo-Einstellungen, genau ein Datensatz	Ja — Draggo → Einstellungen (springt direkt in das Formular)
tl_draggo_token	Design-Werte (Farben, Abstände, Schriften, Radien, Schatten)	Nein — Reiter Globals im Editor
tl_draggo_setting	Schlüssel-Wert-Speicher für die globalen Standard-Stile	Nein
tl_draggo_component	Komponenten-Bibliothek	Nein — Unterreiter Komponenten im Editor
tl_draggo_history	Wiederherstellungspunkte je Container	Nein — nicht editierbar, geschlossen

Ergänzungen an Contao-Tabellen

Tabelle	Feld	Zweck
tl_content	draggo_props	Sämtliche Inhaltsfelder der Draggo-Elemente als JSON — statt rund 145 Einzelspalten
	draggo_managed, draggo_layout	Kennzeichnung und Gestaltung eines von Draggo verwalteten Elements
	draggo_blocktype, draggo_data	Typ und Feldwerte eines KI-Elements
	draggo_grid_preset, draggo_grid_custom, draggo_grid_tablet, draggo_grid_mobile, draggo_container	Spaltenaufteilung je Gerätebreite und Breitenbegrenzung der Reihe
tl_article	draggo_layout	Gestaltung des Containers
tl_module	draggo_unit	Ausgewählte Einheit des Frontend-Moduls Draggo-Einheit
tl_user_group	draggo_perms	Die beiden KI-Rechte je Benutzergruppe
tl_settings	draggo_licence	Intern — kein von Hand zu setzender Wert.

Verzeichnisse zur Laufzeit

Verzeichnis	Zweck	Schreibbar
Ein privates Verzeichnis unterhalb von var/	Lizenzdaten dieser Installation. Außerhalb des öffentlichen Webverzeichnisses, nicht über HTTP erreichbar. Gehört in die Datensicherung.	Ja
assets/draggo/	Erzeugtes Seiten-CSS, inhaltsadressiert: gleicher Inhalt ergibt dieselbe Datei, jede Änderung eine neue.	Ja
files/draggo/ai/	Bilder aus dem KI-Seitenaufbau.	Ja

Routen

Alle Backend-Routen liegen unter /contao und erben damit Contaos Backend-Firewall; ändernde Aufrufe prüfen zusätzlich den Anfrage-Token. Der Editor ist seitenbezogen: eine Sitzung bearbeitet eine ganze tl_page mit allen Artikeln.

Name	Pfad	Methode
Editor-Oberfläche
draggo_editor	/contao/draggo/edit/{page}	GET
draggo_editor_unit	/contao/draggo/edit-unit/{unit}	GET
Seiten und Container
draggo_api_page_elements	/contao/draggo/api/page/{id}/elements	GET
draggo_api_page_frame	/contao/draggo/api/page/{id}/frame	GET
draggo_api_page_siblings	/contao/draggo/api/page/{id}/siblings	GET
draggo_api_create_article	/contao/draggo/api/page/{id}/article	POST
draggo_api_reorder_articles	/contao/draggo/api/page/{id}/articles/reorder	POST
draggo_api_paste_article	/contao/draggo/api/page/{id}/paste-container	POST
draggo_api_container_template	/contao/draggo/api/page/{id}/container-template	POST
draggo_api_duplicate_article	/contao/draggo/api/article/{id}/duplicate	POST
draggo_api_delete_article	/contao/draggo/api/article/{id}	DELETE
draggo_api_article_rename	/contao/draggo/api/article/{id}/rename	POST
draggo_api_container_layout	/contao/draggo/api/article/{id}/layout	POST
Elemente
draggo_api_elements	/contao/draggo/api/article/{id}/elements	GET
draggo_api_element_create	/contao/draggo/api/article/{id}/element	POST
draggo_api_reorder	/contao/draggo/api/article/{id}/reorder	POST
draggo_api_structure	/contao/draggo/api/article/{id}/structure	POST
draggo_api_article_paste	/contao/draggo/api/article/{id}/paste	POST
draggo_api_element_update	/contao/draggo/api/element/{id}	PATCH
draggo_api_element_delete	/contao/draggo/api/element/{id}	DELETE
draggo_api_element_fields	/contao/draggo/api/element/{id}/fields	GET, POST
draggo_api_element_layout	/contao/draggo/api/element/{id}/layout	POST
draggo_api_element_preview	/contao/draggo/api/element/{id}/preview	GET
draggo_api_element_duplicate	/contao/draggo/api/element/{id}/duplicate	POST
draggo_api_element_convert_grid	/contao/draggo/api/element/{id}/convert-grid	POST
draggo_api_element_restructure	/contao/draggo/api/element/{id}/restructure	POST
Globale Einheiten
draggo_api_unit_elements	/contao/draggo/api/unit/{id}/elements	GET
draggo_api_unit_element	/contao/draggo/api/unit/{id}/element	POST
draggo_api_unit_reorder	/contao/draggo/api/unit/{id}/reorder	POST
draggo_api_unit_structure	/contao/draggo/api/unit/{id}/structure	POST
draggo_api_unit_layout	/contao/draggo/api/unit/{id}/layout	POST
draggo_api_unit_paste	/contao/draggo/api/unit/{id}/paste	POST
Komponenten und Vorlagen
draggo_api_components	/contao/draggo/api/components	GET
draggo_api_component_save	/contao/draggo/api/element/{id}/save-component	POST
draggo_api_component_delete	/contao/draggo/api/component/{id}	DELETE
draggo_api_component_insert_article	/contao/draggo/api/article/{id}/component	POST
draggo_api_component_insert_unit	/contao/draggo/api/unit/{id}/component	POST
draggo_api_template_insert_article	/contao/draggo/api/article/{id}/template	POST
draggo_api_template_insert_unit	/contao/draggo/api/unit/{id}/template	POST
Wiederherstellungspunkte
draggo_api_history_list	/contao/draggo/api/article/{id}/history	GET
draggo_api_history_snapshot	/contao/draggo/api/article/{id}/history/snapshot	POST
draggo_api_history_restore	/contao/draggo/api/history/{id}/restore	POST
KI
draggo_api_agent_status	/contao/draggo/api/agent/status	GET
draggo_api_agent_chat	/contao/draggo/api/agent/chat	POST
draggo_api_agent_commit	/contao/draggo/api/agent/commit	POST
draggo_api_agent_delete	/contao/draggo/api/agent/type/{type}	DELETE
draggo_api_agent_frombrief	/contao/draggo/api/page/{id}/from-brief	POST
draggo_api_agent_fromcontent	/contao/draggo/api/page/{id}/from-content	POST
Design-Werte, Dateien, Formulare, Hilfe
draggo_api_tokens	/contao/draggo/api/tokens	GET, POST
draggo_api_tokens_delete	/contao/draggo/api/tokens/{id}	DELETE
draggo_api_defaults	/contao/draggo/api/defaults	GET, POST
draggo_api_palette	/contao/draggo/api/palette	GET
draggo_api_files	/contao/draggo/api/files	GET
draggo_api_files_upload	/contao/draggo/api/files/upload	POST
draggo_api_files_folder	/contao/draggo/api/files/folder	POST
draggo_api_forms	/contao/draggo/api/forms	GET, POST
draggo_api_form_show	/contao/draggo/api/form/{id}	GET
draggo_api_form_meta	/contao/draggo/api/form/{id}/meta	POST
draggo_api_form_field_add	/contao/draggo/api/form/{id}/field	POST
draggo_api_form_reorder	/contao/draggo/api/form/{id}/reorder	POST
draggo_api_form_field_update	/contao/draggo/api/form-field/{id}	POST
draggo_api_form_field_delete	/contao/draggo/api/form-field/{id}	DELETE
draggo_api_form_field_duplicate	/contao/draggo/api/form-field/{id}/duplicate	POST
draggo_api_docs	/contao/draggo/api/docs	GET
draggo_api_docs_chat	/contao/draggo/api/docs/chat	POST

Hooks und Callbacks

Hook / Callback	Klasse	Aufgabe
outputFrontendTemplate	FrontendToolbarListener	Schwebende Draggo-Schaltfläche im Frontend, nur für angemeldete Backend-Benutzer
outputFrontendTemplate	FrontendInjectListener	Gibt veröffentlichte Header- und Footer-Einheiten automatisch aus
outputFrontendTemplate	ElementStyleListener	Bindet Stylesheets, Skripte, Design-Werte und globale Standard-Stile ein — unabhängig davon, ob das Seitentemplate die üblichen Platzhalter ausgibt
generatePage	BootstrapAssetsListener	Bindet je nach Grid-Modus das Bootstrap- bzw. Grid-Stylesheet ein
generatePage	GoogleFontsListener	Lädt genau die Google-Schriften, die auf dieser Seite verwendet werden
generatePage	TokenCssListener	Stellt die Design-Werte als CSS-Variablen bereit
generatePage	ContainerLayoutListener	Erzeugt das Container-CSS je Artikel
loadDataContainer	BackendAssetsListener	Bindet die Draggo-Backend-Assets ein
tl_page · list.operations.draggo.button	PageOperationListener	Zeichnet die Schaltfläche Mit Draggo bearbeiten im Seitenbaum
tl_draggo_unit · list.operations.draggo.button	UnitOperationListener	Zeichnet die Schaltfläche Inhalt bearbeiten in der Einheitenliste
tl_draggo_settings · config.onload	SettingsSingletonListener	Stellt genau einen Datensatz sicher und springt direkt in dessen Formular
tl_content · config.onsubmit	GridSyncListener	Hält die Spaltenstruktur einer Reihe konsistent, wenn sie in der klassischen Contao-Maske geändert wird
tl_module · fields.draggo_unit.options	UnitOptionsListener	Füllt die Auswahlliste des Frontend-Moduls mit den vorhandenen Einheiten

Erweiterungspunkte

Für eigene Anpassungen sind gedacht:

• Eigene Inhaltselemente. Jedes per #[AsContentElement] registrierte Element erscheint in der Draggo-Palette. Draggo erfindet keine Elementtypen, sondern liest Contaos eigene Registrierung — ein Element, das Contao kennt, kennt auch Draggo.
• Templates. Die Draggo-Elemente rendern über Contaos normale Template-Auflösung und lassen sich wie gewohnt überschreiben.
• CSS. Jedes Element trägt eine eigene Scope-Klasse (draggo-el-{id}), jeder Container eine eigene (draggo-art-{id}). Damit lässt sich gezielt nachsteuern, ohne die Editor-Einstellungen zu verlieren.
• Bundle-Konfiguration. Siehe unten.

Nicht als Erweiterungspunkt gedacht: die JSON-Routen des Editors, die Tabellen ohne Backend-Oberfläche, das Format der JSON-Spalten und der Definitionen der KI-Elementtypen. Sie können sich mit jeder Version ändern.

Bundle-Konfiguration

Alle Werte lassen sich in config/config.yaml unter dem Schlüssel draggo setzen. Die KI-Werte aus dem Backend-Modul Einstellungen haben Vorrang vor den hier gesetzten.

draggo:
    ai:
        provider: claude
        model: 'claude-opus-4-8'
        api_key: '%env(DRAGGO_AI_KEY)%'
        max_tokens: 4096
        max_rounds: 8
        rate_limit_per_hour: 30
        cost_cap_deci_cents: 5000
        telemetry: false
        telemetry_url: ''
    editor:
        max_columns: 6
    bootstrap:
        mode: grid

Schlüssel	Werte	Standard
ai.provider	claude, openai, gemini	claude
ai.model	Modellbezeichnung	claude-opus-4-8
ai.api_key	Zeichenkette	leer
ai.max_tokens	ganze Zahl, mindestens 256	4096
ai.max_rounds	ganze Zahl, 1 bis 30	8
ai.rate_limit_per_hour	ganze Zahl, mindestens 1	30
ai.cost_cap_deci_cents	ganze Zahl, mindestens 0	5000
ai.telemetry	true / false	false
ai.telemetry_url	URL	leer
editor.max_columns	ganze Zahl, 1 bis 12	6
bootstrap.mode	grid, full, off	grid
bootstrap.css_url	URL	Bootstrap 5.3.3 über jsDelivr
bootstrap.js_url	URL	Bootstrap 5.3.3 über jsDelivr

Der Grid-Modus

Modus	Wirkung	Wann
grid	Draggo liefert ein eigenes, schlankes Grid-Stylesheet aus — kein CDN, kein JavaScript.	Standard. Passt für die meisten Themes.
full	Lädt vollständiges Bootstrap von der konfigurierten Adresse.	Wenn die Seite Bootstrap-Komponenten über das Grid hinaus braucht.
off	Draggo liefert nichts aus.	Wenn das Theme Bootstrap bereits einbindet.

Ausgehende Verbindungen

Je nach Konfiguration und Nutzung nimmt der Server folgende ausgehenden HTTPS-Verbindungen auf. Alle gehen vom Server aus, nicht vom Browser des Besuchers.

Ziel	Wann	Zweck
V-T.ONE	Bei Aktivierung, beim Aktualisieren und bei der täglichen Hintergrundprüfung	Lizenzprüfung
Anthropic (Claude)	Bei Nutzung des KI-Generators, des KI-Seitenaufbaus oder des Doku-Chats	KI-Anfragen
Unsplash, Pexels oder OpenAI	Nur wenn als Bildquelle eingestellt	Bilder für den KI-Seitenaufbau
jsDelivr	Nur im Grid-Modus full	Bootstrap CSS und JS
Google Fonts	Wenn auf der Seite eine Google-Schrift verwendet wird	Schriftdateien
Konfigurierter Telemetrie-Endpunkt	Nur bei aktivierter Telemetrie (standardmäßig aus)	Anonyme Strukturangaben zu erzeugten Elementtypen — niemals Inhalte

Deployment und Cache

composer require vtinnovations/draggo
vendor/bin/contao-console contao:migrate
vendor/bin/contao-console cache:clear --env=prod

• Das erzeugte Seiten-CSS unter assets/draggo/ ist inhaltsadressiert: gleicher Inhalt ergibt dieselbe Datei, jede Änderung erzeugt automatisch eine neue. Ein Leeren dieses Verzeichnisses ist im Normalbetrieb nicht nötig.
• Nach einem Bundle-Update genügt das reguläre Leeren des Contao-Caches. Bei einer Managed Edition zusätzlich contao:setup, damit geänderte Editor-Assets unter bundles/draggo/ veröffentlicht werden.
• Die Editor-Assets tragen eine Versionskennung in der URL; ein hartes Neuladen im Browser ist nach einem Update normalerweise nicht erforderlich.
• Beim Umzug auf eine andere Domain muss die Lizenz für die neue Domain gelten — sonst sperrt sich Draggo dort. Siehe Lizenz aktivieren.

Fehlerbehebung

Symptom	Ursache und Prüfung
Die Gruppe Draggo fehlt in der Backend-Navigation	Das Bundle ist nicht geladen. vendor/bin/contao-console list contao ausführen — fehlen contao:draggo:demo und contao:draggo:consolidate-props, den Cache leeren und bei einer Managed Edition contao:setup nachholen. Siehe Installation überprüfen.
Beim Öffnen eines Draggo-Moduls erscheint „Draggo ist nicht lizenziert"	Keine aktive Lizenz. Status unter Einstellungen → V-T.ONE Licence management prüfen.
Beim Öffnen des Editors erscheint „Draggo-Lizenz abgelaufen"	Die Lizenz ist ausgelaufen. Verlängern und anschließend Lizenz aktualisieren wählen. Die Inhalte in der Datenbank bleiben unverändert.
Die Schaltfläche Mit Draggo bearbeiten fehlt im Seitenbaum	Keine aktive Lizenz — ohne sie erscheint der Einstieg nirgends. Andernfalls fehlt dem Benutzer das Recht an tl_content oder an den Artikeln dieser Seite.
Der Aufruf endet mit „No permission to edit content on page …"	Die Seite liegt außerhalb der Seitenzuordnung des Benutzers oder das Recht zum Bearbeiten von Artikeln fehlt. In der Benutzergruppe prüfen.
Ein Aufruf endet mit „Draggo ist nicht lizenziert. Lizenzschlüssel unter Einstellungen → Draggo Licence management eintragen (v-t.one)."	Die Lizenz ist zwischenzeitlich ungültig geworden. Statusblock prüfen und gegebenenfalls aktualisieren.
Meldung „Das Element „…" erfordert eine gültige Draggo-Lizenz."	Es wurde versucht, ein Draggo-Element ohne aktive Lizenz einzufügen. Elemente aus dem Contao-Kern sind davon nicht betroffen.
Die Aktivierung meldet „Der Lizenzschlüssel wurde nicht akzeptiert. Bitte Schlüssel und Domain prüfen (v-t.one)."	Schlüssel falsch abgetippt, oder die Domain dieser Installation ist nicht die lizenzierte. Die Zeile Domains dieser Installation im Statusblock zeigt, was Contao kennt.
Die Aktivierung meldet „Für diese Installation ist keine Domain hinterlegt. Bitte im Startpunkt der Website eine Domain eintragen."	Im Seitenbaum ist beim Startpunkt der Website kein Domainname gesetzt. Dort eintragen und erneut aktivieren.
Die Aktivierung meldet „Lizenzserver derzeit nicht erreichbar. Die bestehende Lizenz bleibt unverändert."	Der Server kommt nicht nach außen. Ausgehende HTTPS-Verbindungen, Firewall und gegebenenfalls den Proxy prüfen. Der gespeicherte Stand bleibt unangetastet.
Die Lizenz lässt sich nicht aktivieren, der Status nennt eine fehlende PHP-Erweiterung	Die PHP-Erweiterung sodium ist auf dem Server nicht aktiv. Sie steht in den Voraussetzungen; der Hoster muss sie einschalten.
Die Draggo-Abschnitte in den Einstellungen sind sichtbar, aber die Schaltflächen fehlen	Der angemeldete Benutzer ist kein Administrator. Der Abschnitt zeigt dann nur „Nur Administratoren können die Lizenz verwalten."
Der Reiter KI ist im Editor nicht vorhanden	Der Benutzergruppe fehlt das Recht KI-Element-Generator nutzen. Siehe Berechtigungen.
Im Reiter KI steht „KI ist nicht konfiguriert."	Es ist kein Claude-API-Schlüssel hinterlegt. Unter Draggo → Einstellungen eintragen.
Der Generator antwortet „Entwurf abgelehnt: …"	Der erzeugte Entwurf hat die Prüfung nicht bestanden. Anforderungen genauer beschreiben und erneut senden — die genannte Ursache steht in der Meldung.
Der KI-Seitenaufbau legt keine Abschnitte an	Beim Brief: „Konnte keine Seite planen — bitte Brief konkreter formulieren." Bei eigenen Inhalten: „Konnte keine Seite bauen — bitte Inhalte deutlicher beschriften." In beiden Fällen die Eingabe klarer gliedern.
Der Seitenaufbau erzeugt Abschnitte, aber keine Bilder	Bildquelle steht auf Aus, oder der API-Schlüssel der gewählten Quelle ist ungültig. Bilder lassen sich danach von Hand aus der Mediathek einsetzen.
Statt der Wiederherstellungspunkte steht „Verlauf nicht verfügbar (contao:migrate?)."	Die Tabelle fehlt. vendor/bin/contao-console contao:migrate ausführen.
Im Formularbaukasten lässt sich kein Formular anlegen	Dem Benutzer fehlt der Zugriff auf die Tabelle tl_form. Siehe Formulare.
Mehrspaltige Reihen stapeln sich im Frontend statt nebeneinander zu stehen	Die Grid-Styles fehlen. Grid-Modus prüfen: steht er auf off, muss das Theme Bootstrap liefern. Bei full prüfen, ob das CDN erreichbar ist. Siehe Bundle-Konfiguration.
Das Grid des Themes und das von Draggo überschneiden sich	Grid-Modus auf off stellen, wenn das Theme bereits Bootstrap einbindet.
Header oder Footer erscheinen doppelt	Die Einheit ist veröffentlicht und zusätzlich über das Frontend-Modul im Seitenlayout eingebunden. Einen der beiden Wege entfernen. Siehe Globale Einheiten.
Ein KI-Element gibt im Frontend nichts mehr aus	Der Elementtyp wurde gelöscht oder ist nicht veröffentlicht. Unter Draggo → KI-Element-Typen prüfen.
Das Reader-Feld-Element bleibt leer	Es setzt eine Detailseite von News oder Terminen voraus und braucht das entsprechende Contao-Paket. Auf einer normalen Seite hat es keine Datenquelle.
Änderungen an Design-Werten wirken im Frontend nicht	Contao-Cache leeren und die Seite neu laden. Bleibt es dabei, prüfen, ob das Seitentemplate überhaupt eigene Stylesheets zulässt.
Der Editor lädt nicht, die Oberfläche bleibt leer	Die Bundle-Assets unter bundles/draggo/ fehlen. contao:setup ausführen und den Cache leeren.

Bekannte Einschränkungen

• Keine kostenlose Stufe. Ohne aktive Pro-Lizenz sind alle Draggo-Funktionen gesperrt und Draggo-Elemente geben im Frontend nichts aus. Es gibt keine Testphase und keinen Rückfall nach Ablauf.
• Als KI-Anbieter ist derzeit nur Claude (Anthropic) einsetzbar. Die Konfiguration kennt weitere Werte, praktisch nutzbar ist Claude.
• Keine Schwärzung vor dem Versand an die KI. Texte, eingefügte Inhalte und Screenshots gehen unverändert an den KI-Anbieter.
• Das JavaScript KI-erzeugter Elemente läuft ohne Sandbox. Vorlage und CSS werden geprüft und eingegrenzt, das erzeugte JavaScript nicht. Das Recht KI-Element-Generator nutzen gehört deshalb nur an Benutzer, denen Sie auch Code anvertrauen würden.
• Wiederherstellungspunkte sind kein Rückgängig. Sie sichern einen ganzen Container auf Zuruf, nicht einzelne Bearbeitungsschritte.
• Keine Mehrsprachigkeit. Draggo bringt für übersetzte Inhalte nichts Eigenes mit; das bleibt Sache von Contao beziehungsweise eines dafür gedachten Pakets.
• Das Reader-Feld-Element setzt eine installierte News- oder Terminverwaltung von Contao voraus und bleibt sonst leer.
• Der News-Kategorie-Filter des Loop-Grids benötigt zusätzlich codefog/contao-news_categories.
• Font Awesome liegt bei, wird aber erst nach der Asset-Veröffentlichung geladen. Ohne contao:setup beziehungsweise assets:install fehlen die Dateien, und Font-Awesome-Icons bleiben leer.
• Die Editor-Oberfläche gibt es auf Deutsch und Englisch. Andere Backend-Sprachen fallen auf Englisch zurück.
• Der Editor bearbeitet eine Seite zur Zeit. Es gibt keine Sperre gegen gleichzeitiges Bearbeiten durch mehrere Redakteure — wer zuletzt speichert, gewinnt.

Deinstallation

So entfernen Sie Draggo vollständig

1. Datensicherung anlegen — Datenbank und Dateisystem.
2. Lizenz entfernen, solange das Bundle noch installiert ist: Contao → Einstellungen → V-T.ONE Licence management → Lizenz entfernen. Das gibt die Aktivierung frei, damit der Schlüssel später auf einer anderen Installation genutzt werden kann.
3. Paket entfernen. Im Contao Manager unter Pakete bei Installierte Pakete — oder auf der Konsole:

   composer remove vtinnovations/draggo

4. Cache leeren:

   vendor/bin/contao-console cache:clear --env=prod

5. Laufzeitdaten entfernen. Löschen Sie das Verzeichnis var/draggo/ — dort liegen die Lizenzdaten dieser Installation. Ohne diesen Schritt bleiben sie auf der Platte zurück.
6. Erzeugte Dateien aufräumen. assets/draggo/ kann gelöscht werden. files/draggo/ai/ enthält Bilder aus Ihrer Mediathek — prüfen Sie vor dem Löschen, ob sie noch anderswo verwendet werden.
7. Datenbank aufräumen (optional). Die Tabellen tl_draggo_unit, tl_draggo_blocktype, tl_draggo_settings, tl_draggo_token, tl_draggo_setting, tl_draggo_component und tl_draggo_history sowie die draggo_*-Spalten an tl_content, tl_article, tl_module und tl_user_group bleiben bestehen. Contao entfernt sie nicht von selbst; sie stören auch nicht. Wer aufräumen will, entfernt sie von Hand — und nur nach einer Sicherung.