Avando AVE · Hilfe für Redakteure

Überblick: Was dieses Theme kann

Avando AVE – kurz für Advanced Variable Environment – ist der Gestaltungsrahmen für diese Website. Es legt fest, wie Farben, Schriften, Abstände, Karten, Buttons und Bereiche aussehen – und es gibt dir dafür einfache Regler und Auswahlfelder statt CSS. Diese Hilfe erklärt, was es kann und wie du es bedienst.

Das Theme ist ein Baukasten

Du baust Seiten nicht aus Spezial-Elementen, sondern aus den ganz normalen Contao-Bausteinen (Text, Bild, Überschrift, Button, Akkordeon, Slider …). Das Theme legt sich darüber und gibt jedem Baustein zusätzliche Design-Felder. Es gibt drei Ebenen, auf denen du gestaltest:

Wer darf was? Sektionen und Inhaltselemente können alle Redakteurinnen und Redakteure bearbeiten. Das Design Studio sehen nur angemeldete Administratoren – weil eine Änderung dort die komplette Website betrifft.

Bevor du loslegst Diese Hilfe setzt voraus, dass du in Contao schon Seiten, Artikel und Inhaltselemente anlegen kannst. Kurz zur Einordnung:

Eine Seite in der Seitenstruktur enthält einen oder mehrere Artikel (untereinander in der Spalte „Haupt“).
Jeder Artikel enthält Inhaltselemente (Text, Bild, Überschrift, Button …).
Eine Elementgruppe ist selbst ein Inhaltselement: Du fügst „Elementgruppe“ ein und ziehst andere Elemente hinein – ein Kasten mit eigenem Layout und Hintergrund, mitten im Artikel.

In dieser Hilfe heißt „Sektion“ zusammenfassend: ein Artikel oder eine Elementgruppe – beide tragen dieselben Design-Felder.

Häufige Aufgaben

Farben der ganzen Website ändern. Design Studio → Gruppe „Grundfarben“.
Einen Abschnitt zum Hero mit Bild machen. Rezept unten · Details: Sektionen & Layout.
Etwas als Karte rahmen. Am Element das Register „Element-Stil“ → Inhaltselemente.
Einen Button einfügen. Inhaltselement „Hyperlink“, dann „Element-Stil“ auf „Primär-Button“ → Button-Stile.
Spalten anlegen. Am Artikel/der Elementgruppe „Design“ → „Layout“ → Sektionen & Layout.
Dem Kunden Entwürfe zeigen. Varianten teilen.

In fünf Minuten loslegen

Melde dich im Contao-Backend an und öffne die Website im Frontend.
Unten rechts erscheint der Knopf Design Studio. Öffne ihn, probiere eine Vorlage und drehe an der Primärfarbe. Die Seite ändert sich sofort. Solange du nicht auf „Speichern“ klickst, passiert nichts – auch beim Schließen des Studios nicht.
Schließe das Studio wieder. Bearbeite einen Artikel im Backend und öffne das Register Design: dort stellst du Layout und Hintergrund der Sektion ein.
An einem einzelnen Inhaltselement findest du das Register Element-Stil – z. B. „als Karte rahmen“.

Rezept: eine einfache Landingpage

Ein Durchlauf ohne CSS. Angenommen, die Seite hat einen Artikel in der Spalte „Haupt“.

Hero. Artikel öffnen → Register Design: Hintergrund = „Hintergrundbild – Overlay dunkel“, im erscheinenden Feld ein Bild wählen; Mindesthöhe = „Groß“; Ausrichtung vertikal = „Mittig“. Speichern. In den Artikel eine Überschrift, einen kurzen Text und ein Hyperlink-Element (Element-Stil „Primär-Button“) legen.
Drei Vorteils-Karten. Ein Inhaltselement Elementgruppe einfügen; ihr Design → Layout = „Dreispaltig“. In die Gruppe dreimal je Überschrift + Text ziehen und jedem dieser Elemente Element-Stil = „Karte“ geben.
Zitat-Abschnitt. Neue Elementgruppe; ihr Hintergrund = „Farbverlauf“ (der dunkle), Textfarbe = „Weiß“, Ausrichtung horizontal = „Mittig“. Darin ein Text-Element mit dem Zitat (im CSS-Klasse-Feld optional pull-quote).
Abschluss-CTA. Neue Elementgruppe; Hintergrund = „Primärfarbe“, Textfarbe = „Weiß“. Darin Überschrift + Button.

Fertig sind vier gestapelte Sektionen – ganz ohne CSS, nur über die Design-Felder.

Das Prinzip der Design-Variablen

Der Kern des Themes ist eine Liste benannter Werte – „Design-Variablen“ oder Tokens. Daher der Name Advanced Variable Environment: Statt an hundert Stellen im CSS eine Farbe einzutragen, steht sie einmal unter einem Namen, und alles im Theme verweist auf diesen Namen.

Beispiel: Primärfarbe ist so ein Name. Ändere ihn im Design Studio, und alles, was sich darauf bezieht, zieht mit – im selben Moment und einheitlich:

Primärfarbe eine Einstellung

Buttons & Links
Aktiver Menüpunkt
Rahmen & Akzente der Karten
Farbverläufe
Sekundärfarbe (daraus errechnet)

Eine benannte Einstellung – viele Stellen. Du pflegst den Wert an einer Stelle, das Theme verteilt ihn.

Werte, die sich gegenseitig ergeben

Viele Variablen werden aus anderen berechnet statt einzeln gepflegt. Die Sekundärfarbe entsteht standardmäßig aus der Primärfarbe – über zwei kleine Regler („Farbdrehung“ und „Sättigung“). Hellere und dunklere Varianten für Hover und Ränder fallen automatisch ab. Auch der gedämpfte Text und der Dunkelmodus sind solche abgeleiteten Werte.

Regler statt Einzelwerte

Größen kommen als Skala, nicht als einzelne Pixelzahlen. Der Regler Eckenradius verschiebt die ganze Radius-Rampe (klein / mittel / groß / sehr groß) gemeinsam – die Verhältnisse bleiben stimmig. Genauso Dichte für alle Abstände oder Schatten-Tiefe für alle Schatten.

Was dir das bringt

Konsistentes Design. Farbe, Abstand und Radius stehen je einmal unter einem Namen – eine Änderung wirkt überall gleich, nichts wird vergessen oder übersehen.
Barrierefreiheit fällt leichter. Die Markenfarbe wird als Text automatisch so weit aufgehellt oder abgedunkelt, dass sie lesbar bleibt (WCAG AA). Der eingebaute Kontrast-Check im Studio (Kontraste) misst den sichtbaren Text der geöffneten Seite und markiert, was den Standard verfehlt. Er hilft beim Prüfen, ersetzt aber keine vollständige Barrierefreiheitsprüfung.
Hell- und Dunkelmodus ohne Doppelarbeit. Flächen-, Text- und Rahmenfarben schalten automatisch um; du pflegst nur einen Satz Werte.
Zwei Wege im Backend, sauber getrennt. Das meiste stellst du über Auswahlfelder ein (Register Design und Element-Stil). Reicht das nicht, ergänzt ein Entwickler projektweit in custom.css – oder, für einen einzelnen Bereich, im Feld Inline-Styles, wenn dir jemand den genauen Wert gegeben hat.
Kein Build im Alltag. Es sind echte CSS-Variablen im Browser: kein Vorprozessor, kein Kompilieren. Eine Änderung im Studio ist sofort da.
Fertige Looks statt Blankoseite. Vorlagen sind nur andere Zahlen an denselben Reglern; 🎲 Zufall und – wenn eingerichtet – KI-Design liefern in Sekunden einen Startpunkt.
Varianten zeigen ohne Staging. Jeder gespeicherte Stand lässt sich als Link teilen – der Kunde sieht den ganzen Auftritt in diesem Look, ohne dass etwas live geht.
Datenschutzfreundlich und schnell. Schriften werden lokal ausgeliefert (kein externer Font-Dienst), das Grundgerüst-CSS bleibt klein.
Updates ohne Reue. Das Theme-Framework kann aktualisiert werden; deine Projekt-Anpassungen liegen getrennt davon und bleiben erhalten.
Rücksicht ist eingebaut. Spalten-Layouts stapeln auf schmalen Bildschirmen automatisch, Hero-Höhen sind fürs Handy angepasst, und wer im System „Bewegung reduzieren“ aktiviert hat, bekommt keine Animationen.

Das Studio ist kein Muss Das Design Studio ist der bequeme Weg, aber optional – ein separates Zusatzmodul; das Theme läuft auch ohne. Eine Agentur kann dieselben Werte genauso von Hand setzen (in custom.css oder in den Theme-Vorgaben) und das Studio ganz weglassen. Details: Für Entwickler.

Optional: KI-Designerzeugung Wer im Design Studio aus einem kurzen Text einen Look erzeugen lassen will, braucht dafür einen KI-Zugang. Ein Administrator hinterlegt einmalig Anbieter und API-Schlüssel im Backend unter System → Einstellungen, Abschnitt Avando AVE Design Studio. Schritt-für-Schritt: Design Studio → KI-Design einrichten.

Weiter geht es je nach Aufgabe:

Das Design Studio – alle Regler erklärt.
Sektionen & Layout – das „Design“-Register.
Inhaltselemente – das „Element-Stil“-Register.
Fertige Bausteine – Media-Karte, Akkordeon-Stile, Hintergrundvideo, Onepage-Navigation.
Spickzettel & Glossar – Klassen und Begriffe.
FAQ & Fallstricke – häufige Stolpersteine.
Für Entwickler technisch – Aufbau, Stellschrauben, und warum AVE gut zu KI-Agenten passt.