Ebene 1 · Die ganze Website

Das Design Studio

Das Design Studio ist ein Schiebe-Panel, das über der laufenden Website liegt. Damit stellst du das Gesamt­aussehen ein – Marken­farbe, Schriften, Ecken, Header, Karten, Schatten – und siehst jede Änderung sofort. Nichts wird gespeichert, bis du es ausdrücklich tust.

Öffnen

1. Als Administrator im Contao-Backend anmelden.
2. Die Website im Frontend öffnen (eine ganz normale Seite).
3. Unten rechts auf den Knopf Design Studio klicken.

Live-Vorschau

Solange das Studio offen ist, wirken die Regler nur in der Vorschau. Erst Speichern übernimmt sie für alle Besucher. Mit Änderungen verwerfen springst du auf den zuletzt gespeicherten Stand zurück.

Der Drawer von oben nach unten: die Vorschau-Schalter, dann Vorlagen und KI-Design, darunter die Regler-Gruppen (Grundfarben … Effekte), unten Speichern und Versionen.

Vorlagen: der Startpunkt

Ganz oben im Drawer stehen die Vorlagen – fertige Gesamt-Looks als Kacheln (Corporate, Gediegen, Midnight, Plakat …). Sie sind als Ausgangspunkt für eine Richtung gedacht, nicht als Endzustand:

1. Eine Vorlage wählen, die grob in die gewünschte Richtung geht. Die Vorschau springt sofort um – Farben, Schriften, Ecken, Abstände auf einmal.
2. Mit den Regler-Gruppen darunter fein abstimmen: die Primärfarbe genau auf die Marke ziehen, den Eckenradius anpassen, die Dichte nach Geschmack – nur die Stellen, die noch nicht passen.
3. Wenn es sitzt: Speichern. (Bis dahin ist nichts festgelegt.)

🎲 Zufall würfelt eine stimmige Kombination als Ausgangspunkt, wenn keine Vorlage passt. Es ist dieselbe Liste, die auch als ?persona=name in der Adresszeile funktioniert (siehe Varianten zeigen).

Die Regler-Gruppen

In der Reihenfolge, wie sie im Drawer stehen. Jede Gruppe klappt einzeln auf; die Namen unten sind die aus dem Studio.

Grundfarben

Text

Überschriften

Layout & Proportionen

Header & Navigation

Buttons & Formulare

Karten

Ein Satz Regler für alle Kartenarten: Kartenfläche, Kartenrahmen, Eckenradius, Innenabstand, Schatten (Ruhe), Schatten beim Überfahren, Textausrichtung. „Wie Theme“ lässt jede Kartenart bei ihrem eigenen Standard; jede andere Wahl gilt für alle gemeinsam.

Footer

Footer-Fläche bietet zehn fertige Flächen (Standard, abgesetzt, Verläufe, Primär/Sekundär, Dunkel) plus Eigene Farben mit drei Pickern (Fläche, Schrift, Akzent). Dazu Rahmen oben.

Effekte

Mehr als Regler

KI-Design einrichten (API-Schlüssel)

Die KI-Designerzeugung ist optional und standardmäßig aus. Ein Administrator schaltet sie einmalig im Contao-Backend frei – hier wird auch der API-Schlüssel hinterlegt:

1. Backend öffnen, oben im Menü System → Einstellungen.
2. Auf der Einstellungsseite zum Abschnitt Avando AVE Design Studio scrollen.
3. KI-Editor aktivieren anhaken.
4. Anbieter wählen und den API-Schlüssel in das gleichnamige Feld einfügen; dazu eine Modell-Bezeichnung (z. B. OpenAI mit einem aktuellen GPT-Modell) und – nur bei einem eigenen Endpunkt – die Basis-URL. Welcher Zugang und welches Modell konkret, klärt im Zweifel eure Entwicklung. Der Schlüssel wird verschlüsselt gespeichert und nie wieder im Formular angezeigt.
5. Einstellungen speichern. Ab jetzt zeigt das Design Studio den Abschnitt KI-Design.

Danach erscheint im Design Studio der Abschnitt KI-Design mit Stimmungs- und Farb-Chips, einem Freitextfeld und einem Regler Kreativität. Ein Vorschlag wird nur angewendet, nicht gespeichert – erst dein Speichern übernimmt ihn. Ohne hinterlegten Schlüssel bleibt der Abschnitt unsichtbar.

Speichern & zurücksetzen

• Speichern fragt einmal nach (Wirklich überschreiben? – ein zweiter Klick bestätigt), schreibt den Look für alle Besucher und legt automatisch eine Version an. Die Historie fasst 20 Einträge; angeheftete und geteilte Stände zählen nicht mit und bleiben immer erhalten.
• Änderungen verwerfen wirkt nur bei dir im Browser – die Regler springen auf den gespeicherten Stand zurück, am Server ändert sich nichts.
• Zurück auf den Theme-Standard: Vorlage Basis wählen und speichern. Danach kommt wieder alles aus den Theme-Vorgaben.

Varianten zeigen, ohne dich festzulegen

Genau dafür ist das Studio in einer Agentur gebaut: mehrere Richtungen für einen Kunden entwerfen, jede als Version sichern und dem Kunden per Link am echten, kompletten Auftritt zeigen – ohne Staging-Kopie, ohne dass etwas live geht, solange der Kunde nicht entschieden hat.

1 · Richtungen als Versionen sichern

Bau eine Richtung fertig und Speichern – das ist die Version. Wiederhole das für jede Alternative. In der Versionen-Liste kannst du jede Version umbenennen („Richtung A – wärmer“, „Freigabe Kunde“) und wichtige mit Anheften sichern: angeheftete Stände (bis zu 10) werden nie gelöscht, auch wenn die 20er-Historie voll ist.

2 · Link zum Teilen an den Kunden

Bei einer Version auf Link zum Teilen klicken. Das ergibt einen normalen Frontend-Link mit ?version=<kennung>. Wer ihn öffnet:

• sieht die ganze Website in genau diesem Look – auf jeder Seite, mit echten Inhalten, kein Login nötig;
• bekommt oben den Hinweis Du siehst diese Version: – es ist klar eine Vorschau, kein Live-Stand;
• ändert damit nichts am gespeicherten Auftritt. Du kannst dem Kunden drei Links für drei Richtungen schicken.

Link zum Teilen heftet die Version automatisch an, damit der Link nicht ins Leere läuft, wenn die Historie später voll wird.

3 · Entscheidung übernehmen

Der Kunde nennt seine Wahl. Im Studio die passende Version Wiederherstellen und Speichern – ab jetzt ist sie der Live-Auftritt. Verworfene Richtungen bleiben als Version erhalten, falls der Kunde es sich anders überlegt.

Schnelle Demo-Varianten: Personas

Für einen ersten Eindruck – „so könnte es in bunt / seriös / dunkel aussehen“ – gibt es die eingebauten Vorlagen auch als Adress-Parameter: ?persona=<name> (dieselbe Liste wie die Vorlagen-Kacheln im Studio, nur über die URL) färbt einen einzelnen Seitenaufruf um, ganz ohne dass jemand etwas entwerfen muss. ?persona=basic zeigt den Theme-Standard.

Der Unterschied: ?version=… ist ein echter, gespeicherter Entwurf zur Kundenfreigabe; ?persona=… ist ein Vorschau-Anstrich aus dem Baukasten. Beide sind standardmäßig aus und gehören nicht auf die öffentliche Kundenseite – sonst könnte jeder Besucher die Seite über die Adresszeile umfärben.