Ebene 3 · Ein einzelner Baustein

Einzelne Inhaltselemente gestalten

Jedes Inhaltselement (Text, Bild, Überschrift, Button …) hat ein eingeklapptes Register Element-Stil (einen der grauen Abschnitts-Balken im Bearbeitungsformular). Damit rahmst du nur dieses eine Element – als Karte, mit Hintergrund, über mehrere Spalten, mit einer Bildform.

Element-Stil

Ein optionaler visueller Rahmen. Die Auswahl unterscheidet sich je nach Elementtyp.

Bei Text, Bild, Liste, Tabelle …

Beim Button (Hyperlink-Element)

Einen Button erstellst du, indem du ein Inhaltselement vom Typ Hyperlink einfügst und im Register Element-Stil das Button-Aussehen wählst:

Breite

Zieht ein Element über mehrere Spalten des Sektions-Layouts: Auto (eine Spalte), 2–5 Tracks (4 und 5 nur im sechsspaltigen Layout) oder Volle Breite. Ungültige Kombinationen bleiben wirkungslos – das Element bricht nie aus dem Raster.

Hintergrund & Textfarbe

Funktioniert genauso wie bei einer Sektion – nur eben für dieses eine Element. Details und Overlay-Hinweise stehen unter Sektionen & Layout.

Ausrichtung

Bild: Größe wählen

Im Bild-Element gibt es das Feld Bildgröße mit fertigen Vorgaben. Sie schneiden das Bild auf ein festes Verhältnis zu – lade also groß und mit Motiv in der Mitte hoch (Faustregel: mindestens doppelt so viele Pixel wie unten angegeben).

Bild: Form & Rahmen

Bei Bild-Elementen und beim angehängten Bild eines Text-Elements:

Logo: Farbe aus der Umgebung

Ein Logo in festen Farben sieht nicht auf jedem Hintergrund gut aus – auf einem farbigen Kopf oder im Dunkelmodus verschwindet es leicht. Trägst du beim Element, das das Logo zeigt (Hyperlink, Bild oder Text mit Bild), im Feld CSS-Klasse zusätzlich logo-tint ein, übernimmt das Logo die Farben seiner Umgebung: der Schriftzug die Textfarbe, das Zeichen die Akzentfarbe. Im Kopf sind das die Kopf-Farben, im Fuß die Fuß-Farben. So bleibt es in jeder Vorlage und in beiden Farbschemata lesbar.

Tauschst du das Logo gegen ein buntes aus, das seine Farben behalten soll, nimm die Klasse wieder heraus. Wie man die Teile einer SVG benennt, steht im Entwickler-Teil.

Bild: KI-Kennzeichnung

Bilder, die ganz oder teilweise mit KI erstellt wurden, kannst du mit einem sichtbaren Hinweis versehen. Den Haken setzt du an der Datei, nicht am Element: In der Dateiverwaltung die Datei bearbeiten und KI-generiert ankreuzen. Danach trägt das Bild den Hinweis überall, wo es auf der Website vorkommt – im Bild- und Text-Element, in Galerien, in News- und Event-Listen, auf den Detailseiten und als Hintergrundbild von Sektionen, Elementgruppen und Elementen (auch als Standbild eines Hintergrundvideos).

Wie und wo der Hinweis erscheint, stellst du einmal für die ganze Website ein: im Startpunkt der Seitenstruktur, Bereich KI-Kennzeichnung.

Der Hinweis ist echter Text, kein Bild – Screenreader lesen ihn vor. Er liegt über dem Bild, fängt aber keine Klicks ab: Ein verlinktes Bild bleibt anklickbar.

Auch für Maschinen bleibt das Bild erkennbar: Im strukturierten Datenblock der Seite (schema.org) trägt es die Angabe digitalSourceType. Hat der Bildgenerator die Datei selbst als KI-Bild markiert (IPTC-Angabe „Digital Source Type“), bleibt diese Markierung auch in den verkleinerten Fassungen erhalten, die Contao für die Website erzeugt. Eine C2PA-Signatur übersteht das Verkleinern dagegen nicht – das gilt für jedes CMS.

Übernehmen einmal Contao oder eine Erweiterung die Kennzeichnung selbst, schaltest du die von AVE ab, damit der Hinweis nicht doppelt erscheint: im Startpunkt den Haken KI-Hinweise ausgeben entfernen. Die Haken an den Dateien bleiben dabei erhalten. Für alle Websites einer Installation geht das auch in der config.yaml: avando_ave: ai_label: false.

Nur bei Überschriften

Nur beim Button

Abstand nach unten

Zusätzlicher Außenabstand unter diesem Element: Sehr klein bis Riesig. Bei allen Elementtypen verfügbar.

Inline-Styles

Ein Textfeld im Register Experte für kleine Einzelwerte, die kein Auswahlfeld abdeckt. Das ist ein technisches Feld – nutze es nur, wenn dir jemand den genauen Wert genannt hat. Ein paar unbedenkliche Schnipsel zum Kopieren:

--av-gutter: 0            /* dieser Bereich ohne linken/rechten Rand   */
--av-layout-gap: 3rem     /* größerer Abstand zwischen den Spalten     */
--av-el-color: #ffffff    /* Text in diesem Element weiß               */
--fund-pct: 62%           /* Füllstand des Spendenbalkens (falls genutzt) */

Der Teil in /* … */ ist nur Erklärung – nicht mitkopieren. Mehrere Angaben mit Semikolon trennen (--av-gutter: 0; --av-el-color: #ffffff). Was die Design-Variablen bedeuten, steht auf der Seite Für Entwickler.