Muster aus Standard-Elementen

Fertige Bausteine

Diese Muster brauchen kein Sonder-Element. Du nimmst ein ganz normales Contao-Element und gibst ihm eine Einstellung oder eine CSS-Klasse. Die Klasse trägst du im Feld CSS-Klasse des Elements ein (Register Experte).

Media-Karte

Eine Elementgruppe, die mit einem Bild-Element beginnt: setze ihren Element-Stil auf Media-Karte. Das Bild läuft randlos bis an die Kartenkanten, alles danach (Überschrift, Text, Button) wird zum gepolsterten Körper.

Akkordeon-Stile

Das normale Akkordeon-Element bekommt über eine CSS-Klasse einen anderen Look:

Klasse	Aussehen
`accordion--cards`	Jeder Eintrag eine gerundete Box.
`accordion--filled`	Farbiger Balken je Titel, Inhalt eingerückt.
`accordion--accent`	Farbstreifen an der Startkante jedes Eintrags.

Ein Akkordeon im Stil „cards“: jeder Eintrag eine gerundete Box — Akkordeon mit der Klasse `accordion--cards` – jeder Eintrag eine gerundete Box, der offene zeigt Bild, Text und Button.

Die Klasse kommt ins Feld CSS-Klasse (Register Experte) des Akkordeon-Elements selbst, nicht in den Inhaltstext.

Slider mit Steuerung über den Folien

Beim normalen Bild-Slider legt die Klasse slider--overlay (ins Feld CSS-Klasse des Slider-Elements) die Pfeile/Punkte über die Folien statt darunter. Bei Text-Slidern besser ohne – dort steht die Steuerung sicherer als eigene Zeile darunter.

Beschreibungslisten

Das Element „Beschreibungsliste“ steht standardmäßig zweispaltig mit einer Linie über jedem Paar. Modifikatoren (ins Feld CSS-Klasse):

`description-list--plain`	ohne Trennlinien – für kurze Faktenblöcke.
`description-list--stacked`	immer gestapelt, auch auf breiten Bildschirmen.

Hintergrundvideo

Kein Element, sondern eine Sektions-Einstellung: im Design-Register des Artikels Hintergrund auf eine „Hintergrundvideo …“-Option stellen, dann Video und Standbild wählen. Das Video läuft stumm in Schleife; ein Pause-Knopf wird automatisch eingeblendet. Bei reduzierter Bewegung, ohne JavaScript oder bei nicht unterstütztem Format wird das Standbild gezeigt – ohne Standbild bleibt die Sektion in diesen Fällen leer. Details: Sektionen & Layout.

Onepage-Navigation

Ein Modul für Seiten, bei denen die Navigation zu Ankern auf derselben Seite springt. Es listet automatisch jeden veröffentlichten Artikel der Seite, der eine CSS-ID hat (Artikeltitel = Label, die ID = Sprungziel). Alternativ trägst du eine eigene Liste im Format Beschriftung | anker-id ein. Beim Scrollen wird der aktuell sichtbare Abschnitt in der Navigation hervorgehoben.

Einrichten

Das Onepage-Navigation-Modul muss auf der Seite liegen – meist bindet die Agentur es einmal ins Seitenlayout ein (Kopfbereich). Ob es schon da ist, siehst du daran, dass die Navigation beim Scrollen mitwandert.
Damit ein Artikel darin auftaucht, gib ihm im Register Experte eine CSS-ID (z. B. leistungen). Der Artikeltitel wird zum Menüpunkt, die ID zum Sprungziel.

Blog & Termine

News- und Event-Einträge tragen dieselben Design-Felder wie ein Artikel (Layout, Hintergrund, Ausrichtung … für den Einzel-Beitrag). Wie die Übersichtslisten aussehen (Karten, Zeilen, „nächste Termine“), steckt in der Konfiguration des jeweiligen Listen-Moduls – das richtet die Agentur ein. Du pflegst nur die Inhalte; die Kartendarstellung kommt automatisch.

Projekt-Muster (optional)

Manche Projekte bringen zusätzliche Muster in files/theme/CSS/custom.css mit. Sie sind nicht Teil des Kern-Themes und nur dort aktiv, wo sie gebraucht werden:

Klasse	Muster
`fund-progress`	Spendenbalken: ein einziges Text-Element mit der Klasse, dazu Inline-Style `--fund-pct: 62%` für den Füllstand; die Zahlen stehen als normaler Text daneben.
`donate-amounts`	Betrags-Chips: die Klasse auf ein Contao-Formularfeld „Radio-Button-Menü“ – die Labels werden zu anklickbaren Chips.
`cap-row`	Nummerierte Schritt-/Leistungsliste (Nummer groß links, Titel + Text rechts).

Ob diese Klassen in deinem Projekt vorhanden sind, hängt von custom.css ab. Im Zweifel bei der Entwicklung nachfragen.