Avando AVE · Help for editors

Overview: what this theme can do

Avando AVE – short for Advanced Variable Environment – is the design framework of this website. It defines how colours, fonts, spacing, cards, buttons and sections look – and instead of CSS it gives you simple sliders and select menus to control them. This help explains what it can do and how to use it.

The theme is a construction kit

You don't build pages from special elements, but from the ordinary Contao building blocks (text, image, headline, button, accordion, slider …). The theme sits on top of them and gives every block extra design fields. There are three levels at which you design:

Who can do what? Sections and content elements can be edited by every editor. The Design Studio is only visible to logged-in administrators – because a change there affects the entire website.

Before you start This help assumes that you can already create pages, articles and content elements in Contao. A quick orientation:

A page in the site structure contains one or more articles (stacked in the “Main column”).
Each article contains content elements (text, image, headline, button …).
An element group is itself a content element: you insert “Element group” and drag other elements into it – a box with its own layout and background, right inside the article.

In this help, “section” is the umbrella term for an article or an element group – both carry the same design fields.

Common tasks

Change the colours of the whole website. Design Studio → group “Base colours”.
Turn a section into a hero with an image. Recipe below · details: Sections & layout.
Frame something as a card. The “Element Style” panel on the element → Content elements.
Insert a button. Content element “Hyperlink”, then set “Element Style” to “Primary” → Button styles.
Create columns. On the article/element group: “Design” → “Layout” → Sections & layout.
Show drafts to a client. Share variants.

Up and running in five minutes

Log in to the Contao back end and open the website in the front end.
The Design Studio button appears at the bottom right. Open it, try a Preset and turn the Primary color. The page changes at once. Nothing happens until you click “Save” – not even when you close the Studio.
Close the Studio again. Edit an article in the back end and open the Design panel: this is where you set the layout and background of the section.
On a single content element you'll find the Element Style panel – e.g. “frame as a card”.

Recipe: a simple landing page

A walkthrough without CSS. Assume the page has one article in the “Main column”.

Hero. Open the article → panel Design: Background = “Background image — dark overlay”, choose an image in the field that appears; Minimum height = “Large (75%)”; Vertical alignment = “Centre”. Save. Put a headline, a short text and a hyperlink element (Element Style “Primary”) into the article.
Three benefit cards. Insert an Element group content element; its Design → Layout = “Three columns”. Drag a headline + text into the group three times and give each of these elements Element Style = “Card”.
Quote section. New element group; its Background = “Gradient” (the dark one), Text colour = “White”, Horizontal alignment = “Centre”. Inside it a text element with the quote (optionally pull-quote in the CSS class field).
Closing CTA. New element group; Background = “Primary colour”, Text colour = “White”. Inside it a headline + button.

The result is four stacked sections – no CSS at all, only the design fields.

The principle of design variables

At the heart of the theme is a list of named values – “design variables” or tokens. Hence the name Advanced Variable Environment: instead of entering a colour in a hundred places in the CSS, it is stored once under a name, and everything in the theme refers to that name.

Example: Primary color is such a name. Change it in the Design Studio, and everything that refers to it follows – at the same moment and consistently:

Primary color one setting

Buttons & links
Active menu item
Card borders & accents
Gradients
Secondary colour (calculated from it)

One named setting – many places. You maintain the value in one place, the theme distributes it.

Values that derive from each other

Many variables are calculated from others instead of being maintained individually. By default the Secondary colour is created from the primary colour – via two small sliders (“Hue rotation” and “Saturation”). Lighter and darker variants for hover states and borders follow automatically. Muted text and dark mode are derived values too.

Sliders instead of single values

Sizes come as a scale, not as individual pixel values. The Corner radius slider shifts the whole radius ramp (small / medium / large / extra large) together – the proportions stay consistent. The same goes for Density for all spacing and Shadow depth (box + text) for all shadows.

What you gain

Consistent design. Colour, spacing and radius are each stored once under a name – a change works the same everywhere, nothing is forgotten or overlooked.
Accessibility gets easier. When used as text, the brand colour is automatically lightened or darkened far enough to stay readable (WCAG AA). The built-in contrast check in the Studio (Contrast) measures the visible text of the open page and marks what misses the standard. It helps with checking, but does not replace a full accessibility audit.
Light and dark mode without double work. Surface, text and border colours switch automatically; you maintain just one set of values.
Two routes in the back end, cleanly separated. Most things are set via select menus (panels Design and Element Style). If that isn't enough, a developer adds project-wide rules in custom.css – or, for a single area, in the Inline styles field, if someone has given you the exact value.
No build step in daily work. These are real CSS variables in the browser: no preprocessor, no compiling. A change in the Studio is there immediately.
Ready-made looks instead of a blank page. Presets are just different numbers on the same sliders; 🎲 Random and – if set up – AI design give you a starting point in seconds.
Show variants without staging. Every saved state can be shared as a link – the client sees the whole site in this look without anything going live.
Privacy-friendly and fast. Fonts are served locally (no external font service), and the base CSS stays small.
Updates without regret. The theme framework can be updated; your project customisations are kept separate from it and are preserved.
Consideration is built in. Column layouts stack automatically on narrow screens, hero heights are adjusted for phones, and anyone who has enabled “Reduce motion” in their system gets no animations.

The Studio is optional The Design Studio is the convenient route, but it is optional – a separate add-on module; the theme works without it. An agency can set the same values by hand (in custom.css or in the theme defaults) and leave the Studio out entirely. Details: For developers.

Optional: AI design generation If you want the Design Studio to generate a look from a short text, you need an AI account. An administrator enters the provider and API key once in the back end under System → Settings, section Avando AVE Design Studio. Step by step: Design Studio → Setting up AI design.

Where to go next depends on your task:

The Design Studio – every slider explained.
Sections & layout – the “Design” panel.
Content elements – the “Element Style” panel.
Ready-made building blocks – media card, accordion styles, background video, one-page navigation.
Cheat sheet & glossary – classes and terms.
FAQ & pitfalls – common stumbling blocks.
For developers technical – structure, adjustment points, and why AVE suits AI agents well.