12 — Inhaltselemente
Mit aktivem Theme stehen 63 Inhaltselementtypen zur Verfügung. Zwei davon sind Yavis eigene (CTA und Portfolio); der Rest kommt von TYPO3 und Bootstrap Package und wird vom Theme überarbeitet — neue Layouts, neue Felder, eigene Templates. Dazu bekommt jedes Element einen Satz gemeinsamer Felder.
Dieses Kapitel behandelt, was neu ist. Eine vollständige Liste der Typen steht in der Referenz der Inhaltselemente.
Felder, die jedes Element bekommt
Gleich welcher Typ gewählt wird, diese Felder stehen bereit. Sie sind der Grund, warum eine Yavi-Seite komponiert wirkt statt zusammengesetzt.
Bereich der Überschrift
| Feld | Was es tut |
|---|---|
| Eyebrow – Vorüberschrift | Kleine Zeile über der Überschrift, meist in Versalien, mit einer kurzen Linie darunter |
| Farbe der Überschrift · Farbe der Unterüberschrift | Farbe für Überschrift und Unterüberschrift |
| Hintergrundband der Headline | Setzt die Überschrift auf ein farbiges Band (primär, sekundär, weiß, schwarz) |
| Überschrift links einrücken | Rückt die Überschrift ein |
| Abstand vor / nach der Überschrift | Raum um die Überschrift, unabhängig vom Abstand des Elements |
| Animierte Linie unter der Überschrift | Die Linie unter der Überschrift zeichnet sich, sobald sie ins Bild scrollt |
Syntax der Überschrift
Eckige Klammern markieren Wörter innerhalb einer Überschrift:
Building business [with purpose]Die geklammerten Wörter nehmen die Headline word color aus Design / Colors an. Dieselbe Syntax funktioniert in der Karussell-Überschrift und in Kartenüberschriften.
Text
| Feld | Was es tut |
|---|---|
| Textfarbe | Farbe des Fließtexts |
| Textbreite | Breite des Textbereichs in Bootstrap-Spalten — ein Element über die volle Breite mit einer halbbreiten Textspalte ist das häufigste redaktionelle Layout |
| Textposition | Links, mittig, rechts innerhalb der Zeile |
Symbol
| Feld | Was es tut |
|---|---|
| Inhaltssymbol | Ein Symbol aus dem Symbolsatz oder ein hochgeladenes SVG |
| Symbolfarbe | Farbe des Symbols |
| Icon-Position | Über, rechts von, unter oder links vom Text |
Die Ausrichtung des Symbols folgt der Textausrichtung; sie ist keine eigene Entscheidung. Ist kein Symbol gesetzt, bleibt das Layout unberührt — kein reservierter Platz, keine Lücke.
Buttons (Inhaltslink)
Elemente können beliebig viele Buttons tragen, jeder mit:
| Feld | Anmerkung |
|---|---|
| Link | Jeder TYPO3-Link: Seite, Datei, extern, E-Mail |
| Linktext | Fällt auf „Mehr erfahren“ zurück, wenn leer |
| Buttonfarbe | Primär, sekundär, … |
| Position | Wo die Buttonzeile sitzt |
Rahmen
| Feld | Was es tut |
|---|---|
| Feste Höhe | z. B. 800px, 100%, 80vh — für hero-artige Blöcke |
| Zusätzliche CSS-Klasse für den Rahmen | Eine freie Klasse für Einzelfälle |
| Eigene CSS-Klassen | Die Mehrfachauswahl, gespeist aus Custom CSS |
| Hintergrundbild, Verlaufsüberlagerung | Hintergrund des Rahmens, mit einem optionalen Verlauf darüber |
Sichtbarkeit nach Gerät
| Feld | Blendet das Element aus |
|---|---|
| Auf dem Desktop ausblenden | ab 992px |
| Auf dem Tablet ausblenden | 768–991px |
| Auf dem Smartphone ausblenden | unter 768px |
Das entfernt das Element in diesem Viewport tatsächlich aus dem Markup, statt es per CSS zu verbergen — ein nicht gezeigtes Bild ist ein nicht geladenes Bild.
Animation
Die Animationen beruhen auf AOS und werden je Teil des Elements konfiguriert: Überschrift, Unterüberschrift, Eyebrow, Text, Button, Bild, Symbol, Hauptbereich. Jeder nimmt eine Animationsart, eine Verzögerung und einen Spiegel-Schalter entgegen.
Zwei Hinweise aus der Praxis:
- Die Verzögerung ist es, die ein Element komponiert wirken lässt: Eyebrow bei
- 800 ms, Überschrift bei 950 ms, Buttons bei 1150 ms lesen sich als eine Bewegung, nicht als vier.
slide--Animationen bewegen das Element um seine eigene Breite und werden im Moment des Starts sichtbar. Im Karussell werden sie horizontal beschnitten, damit sie nicht aus der Seite ragen können; anderswo istfade-die bessere Wahl — es bewegt feste 100 px und startet vollständig transparent.
Die Elementfamilien
Karten (Card Group)
Ein Element, zwanzig Layouts. Jede Karte ist ein Datensatz im Element; die Redaktion sortiert also per Ziehen um.
| Layout | Charakter |
|---|---|
| Einfach · Karte linksbündig · Karte einfach, linksbündig | Textkarte, Bild optional |
| Hintergrundbild | Das Bild füllt die Karte, der Text liegt darüber |
| Leistung | Symbol, Überschrift, Text — die klassische dreispaltige Leistungszeile |
| Karte mit Video | Karte mit einem Video |
| Karte mit Zähler | Zählt zu einer Zahl hoch, sobald sie ins Bild scrollt |
| Karte Team | Porträt, Rolle, Social-Links |
| Karte mit Links | Eine Liste von Links in der Karte |
| Karte im Mauerwerk-Raster | Masonry-Raster, ungleiche Höhen |
| Karte mit Diagramm | Kreisdiagramm mit einem Wert |
| Karte mit Hover-Effekt | Inhalt, der beim Überfahren erscheint |
| Karte Preise | Preistabelle mit einem hervorgehobenen Tarif |
| Karte Partner | Logoraster |
| Karte Fallstudie | Referenz-Teaser |
| Karte Ablauf | Nummerierte Schritte |
| Fortschrittsbalken | Balken mit einem Prozentwert |
| Karte Neuigkeiten | News-Teaser |
| Karte mit Swiper | Karten in einem Slider |
Je Karte: Überschrift, Beschreibung, Bild, Link mit Symbol, Badge-Text („Am häufigsten gebucht“), Hervorhebungsschalter, Hintergrund- und Textklasse sowie ein eigener Eckenradius für vier Ecken.
Der Karteneintrag
Je Element: Spalten je Breakpoint, Intervall und Geschwindigkeit der automatischen Wiedergabe für die Slider-Layouts, Navigation ein/aus, Farben und Größen des Diagramms.
Karussell
Drei Elemente — Carousel, Carousel Small, Carousel Fullscreen —, die sich eine Slide-Tabelle teilen. Das ist das größte Element des Themes; es hat ein eigenes Kapitel: 13 — Hero und Karussell.
CTA (yavi_cta)
Ein Call-to-Action-Banner mit Eyebrow, Überschrift, wechselnden Wörtern, Buttons und einer frei gestaltbaren Infozeile (Telefon, E-Mail, Öffnungszeiten). Drei Layouts:
| Layout | Charakter |
|---|---|
| Aurora-Panel (randlos, animiert) | Randloser, animierter Hintergrund |
| Geteilte Karte | Text neben Kontaktchips |
| Panel | Überschrift, Buttons, Kontaktzeile |
Die wechselnden Wörter in der Überschrift werden als ein Feld eingegeben, mit Semikolon getrennt; sie laufen neben der Überschrift durch, darüber oder darunter, mit einer horizontalen, vertikalen oder überblendenden Animation.
Portfolio (yavi_portfolio)
Projektschau mit drei Layouts: Mauerwerk-Raster, hervorgehobenes Projekt + Raster sowie Filter-Seitenleiste + Raster. Jedes Projekt hat Titel, Untertitel, Beschreibung, Jahr, Link und Bild.
Projektdaten (yavi_panel_facts)
Eine strukturierte Liste aus Bezeichnung und Wert — für Projektdaten, Kennzahlen oder technische Angaben.
Zitat
Sechs Layouts: goldene Karte, Navy geteilt mit Porträt, minimal-redaktionell, helle Karte, geteilt mit Foto, dunkel mit mittigem Porträt. Jedes mit Name und Rolle der zitierten Person und einem optionalen Porträt.
Tab
Tabs in drei Layouts: goldene Unterstreichung, Pillen, vertikal.
Medien, Galerie, Audio, Video
| Element | Anmerkung |
|---|---|
| Medien | Zwei Layouts: Kartenraster oder hervorgehobener Eintrag plus Liste |
| Galerie | Raster mit optionalem Mauerwerk-Raster, Bildvergleich mit Schieberegler |
| Audio | Zwei Player: Hero-Player und kompakte Liste. Liest die Dauer aus der Datei. |
| Video | Eigener Player-Skin mit Vorschaubild, Endlosschleife und Bedienelementen; oder eine externe Medieneinbettung (YouTube, Vimeo) |
Symbolgruppe
Vier Layouts: Haftleiste, Symbolliste, Kopfleiste, Swiper. Verwendet für die Kontaktsymbole der Topbar und für Merkmalszeilen.
Container
Mehrspaltige Container (1, 2, 3, 4 Spalten sowie asymmetrische Raster 4/8 und 8/4), dazu die Container Modal und Offcanvas, deren Inhalt in einem Dialog oder in einem hereinfahrenden Panel öffnet.
Vorschau im Backend
Die meisten Elemente rendern im Seitenmodul eine echte Vorschau statt eines grauen Kastens — Karten zeigen ihre Karten, Karussells ihre Slides, das CTA sein Layout. Zeigt ein Element nur seine Überschrift, ist für diesen Typ kein Vorschau-Renderer registriert; das ist eine Lücke, kein Fehler.