Level 3 · A single building block

Designing individual content elements

Every content element (text, image, headline, button …) has a collapsed Element Style panel (one of the grey section bars in the edit form). With it you frame just this one element – as a card, with a background, across several columns, with an image shape.

Element Style

An optional visual frame. The choices differ depending on the element type.

For text, image, list, table …

For buttons (Hyperlink element)

You create a button by inserting a content element of type Hyperlink and choosing the button look in the Element Style panel:

Width

Stretches an element across several columns of the section layout: Auto (one column), 2–5 tracks (4 and 5 only in the six-column layout) or Full width. Invalid combinations simply have no effect – the element never breaks out of the grid.

Background & text colour

Works exactly as on a section – just for this one element. Details and notes on overlays are under Sections & layout.

Alignment

Image: choosing a size

The image element has the Image size field with ready-made presets. They crop the image to a fixed ratio – so upload large images with the subject in the middle (rule of thumb: at least twice as many pixels as listed below).

Image: shape & border

On image elements and on the attached image of a text element:

Logo: colour from its surroundings

A logo in fixed colours doesn't look good on every background – on a coloured header or in dark mode it easily disappears. If you add logo-tint to the CSS class (the second box of the CSS ID/class field) of the element that shows the logo (Hyperlink, Image or Text with image), the logo takes on the colours of its surroundings: the word mark the text colour, the symbol the accent colour. In the header those are the header colours, in the footer the footer colours. That way it stays readable in every preset and in both colour schemes.

If you replace the logo with a colourful one that should keep its colours, remove the class again. How to name the parts of an SVG is described in the developer section.

Image: AI labelling

Images that were created fully or partly with AI can carry a visible notice. You set the checkbox on the file, not on the element: edit the file in the file manager and tick AI-generated. From then on the image carries the notice wherever it appears on the website – in the image and text elements, in galleries, in news and event lists, on the detail pages and as the background image of sections, element groups and elements (including the still image of a background video).

How and where the notice appears is set once for the whole website: in the website root of the site structure, section AI labelling.

The notice is real text, not an image – screen readers read it out. It sits on top of the image but does not catch clicks: a linked image stays clickable.

Machines can recognise the image too: in the page’s structured data (schema.org) it carries the property digitalSourceType. If the image generator marked the file itself as an AI image (IPTC “Digital Source Type”), that marking is kept in the resized versions Contao creates for the website. A C2PA signature, on the other hand, does not survive resizing – that applies to every CMS.

Should Contao or an extension take over the labelling one day, switch off AVE’s so the notice doesn’t appear twice: untick Output AI notices in the website root. The checkboxes on the files are kept. For all websites of an installation this also works in config.yaml: avando_ave: ai_label: false.

Headlines only

Buttons only

Space below

Additional margin below this element: Extra small to Huge. Available on all element types.

Inline styles

A text field in the Expert settings panel for small individual values that no select menu covers. It is a technical field – only use it if someone has given you the exact value. A few safe snippets to copy:

--av-gutter: 0            /* this area without left/right margin      */
--av-layout-gap: 3rem     /* larger gap between the columns           */
--av-el-color: #ffffff    /* text in this element white               */
--fund-pct: 62%           /* fill level of the donation bar (if used) */

The part in /* … */ is only an explanation – don't copy it. Separate several declarations with a semicolon (--av-gutter: 0; --av-el-color: #ffffff). What the design variables mean is explained on the For developers page.