Spezielle Teaser-Elemente
Diese Anleitung unterstützt Redakteur*innen bei der Erstellung und Pflege spezieller Teaser-Elemente in TYPO3 V12 für die Webseiten der Universität Wien. Teaser-Elemente fassen Inhalte kompakt zusammen, verlinken auf weiterführende Informationen und kombinieren in der Regel Bild, kurzen Text und Link. Die Anleitung beschreibt Aufbau, Bearbeitung und optimalen Einsatz dieser Elemente, um eine einheitliche, barrierefreie und wirkungsvolle Präsentation im Redaktionsalltag sicherzustellen.
Aktuelles Teaser
Das Inhaltselement Aktuelles Teaser dient dazu, aktuelle Meldungen, Nachrichten oder Ankündigungen auf einer Seite hervorzuheben und mit weiterführenden Inhalten zu verlinken.
Aktuelles Teaser - Anleitung
- Überschrift: Geben Sie im Tab Allgemein bei Überschrift den gewünschten Text ein und legen Sie die Hierarchie-Ebene fest (H2, H3 etc.).
- Bei Aktuelles Teaser Einträge + Neu anlegen klicken
- Titel: Kurze, prägnante Aussage, die Interesse weckt.
- Text (Maximal 300 Zeichen): Kurzbeschreibung oder Zusammenfassung des Inhalts. Sie können den Text im Textfeld erstellen und bearbeiten. Mit den Schaltflächen können Sie Zeichenformatierungen (fett, kursiv), Verlinkungen oder Absatzformatierungen (Aufzählung, Einrückung) vornehmen.
- Link: Fügen Sie eine interne oder externe URL ein.
Info: In der Desktopansicht wird die Überschrift neben dem Element dargestellt – daher sollte sie möglichst kurz gehalten werden.
Weitere Einstellungsmöglichkeiten
Das Aussehen des jeweiligen Elements kann im Reiter Erscheinungsbild angepasst werden. Die verfügbaren Optionen variieren je nach Elementtyp:
- Abstand danach (nur bei Text & Medien Element ohne alternativen Hintergrundmöglich): Verringert den Abstand zwischen dem aktuellen und dem darauffolgenden Inhaltselement
- Links in Menü anzeigen: zeigt den Titel des Elements im Inhaltsverzeichnis an, wenn dieses auf der Seite eingefügt wird.
- Alternativer Hintergrund: Hinterlegt das Element mit hellgrauem Hintergrund
- Link zum Seitenanfang anfügen: Fügt einen Nach oben-Link am Ende des Elements ein
- Layout
- Infobox:
- grauer Hintergrund (selbes grau wie Alternativer Hintergrund)
- blauer Hintergrund
- blauer Rahmen
- Galerie & Slider:
- Ansicht Galerie
- Ansicht Slider
- Teaser:
- Anzahl der Spalten: Gibt an wie viele Teaser am Desktop nebeneinanderstehen, dies wirkt sich auch auf ihre Größe aus. Auf mobilen Endgeräten wird nur ein Teaser pro Zeile angezeigt
- Kontaktbox:
- Standard (eckiges Bild)
- Rundes Bild
- Banner:
- Standard (einzelne Kästchen mit Farbakzenten oder vollflächig universitätsblau)
- Banner (mit Hintergrundbild)
- Tabelle:
- Tabellenlayout
- Spalten (Auto, 1-9)
- Tabellen-Stil: (Standard / Gestreift / Umrahmt)
- Position des Tabellenkopfes (keine Kopfzeile / oben / links)
- Tabellenfuß verwenden (letzte Zeile in <tfoot>-Tags einschließen)
- Tabellenlayout
- Infobox:
- Dateilinklayout (nur bei Download Element):
- Informationen zur Dateigröße anzeigen: Die Downloadgröße wird in KB angezeigt
- Beschreibung anzeigen: Zusätzlich zum Dateinamen kann eine Beschreibung / ein Titel hinzugefügt werden
Teaser Banner
Das Inhaltselement Teaser Banner dient dazu, Links für definierte Zielgruppen übersichtlich und optisch hervorgehoben darzustellen. Es kombiniert kurze Linktexte mit einem optionalen Hintergrundbild und kann in verschiedenen Designvarianten angezeigt werden. Das Element eignet sich besonders für zentrale Einstiegsbereiche, Themenseiten oder Serviceübersichten.
Anleitung - Teaser Banner
- Überschrift: Geben Sie im Tab Allgemein bei Überschrift den gewünschten Text ein und legen Sie die Hierarchie-Ebene fest (H2, H3 etc.).
- Hintergrundbild einfügen:
- Wählen Sie unter Bild hinzufügen ein Bild aus der Dateiiliste
- Beachten Sie dazu die separate Anleitung „Bilder hinzufügen und verwalten“.
- Teaser Banner Einträge: Auf + Neu anlegen klicken
- Sie können bis zu 6 Link-Einträge in einem Teaser-Banner anlegen.
- Linktext: Kurzer, prägnanter Titel (insbesondere in der Desktopansicht, da die Überschrift neben dem Element steht).
- Link: Ziel-URL oder interne Seite auswählen.
Weitere Einstellungsmöglichkeiten
Das Aussehen des jeweiligen Elements kann im Reiter Erscheinungsbild angepasst werden. Die verfügbaren Optionen variieren je nach Elementtyp:
- Abstand danach (nur bei Text & Medien Element ohne alternativen Hintergrundmöglich): Verringert den Abstand zwischen dem aktuellen und dem darauffolgenden Inhaltselement
- Links in Menü anzeigen: zeigt den Titel des Elements im Inhaltsverzeichnis an, wenn dieses auf der Seite eingefügt wird.
- Alternativer Hintergrund: Hinterlegt das Element mit hellgrauem Hintergrund
- Link zum Seitenanfang anfügen: Fügt einen Nach oben-Link am Ende des Elements ein
- Layout
- Infobox:
- grauer Hintergrund (selbes grau wie Alternativer Hintergrund)
- blauer Hintergrund
- blauer Rahmen
- Galerie & Slider:
- Ansicht Galerie
- Ansicht Slider
- Teaser:
- Anzahl der Spalten: Gibt an wie viele Teaser am Desktop nebeneinanderstehen, dies wirkt sich auch auf ihre Größe aus. Auf mobilen Endgeräten wird nur ein Teaser pro Zeile angezeigt
- Kontaktbox:
- Standard (eckiges Bild)
- Rundes Bild
- Banner:
- Standard (einzelne Kästchen mit Farbakzenten oder vollflächig universitätsblau)
- Banner (mit Hintergrundbild)
- Tabelle:
- Tabellenlayout
- Spalten (Auto, 1-9)
- Tabellen-Stil: (Standard / Gestreift / Umrahmt)
- Position des Tabellenkopfes (keine Kopfzeile / oben / links)
- Tabellenfuß verwenden (letzte Zeile in <tfoot>-Tags einschließen)
- Tabellenlayout
- Infobox:
- Dateilinklayout (nur bei Download Element):
- Informationen zur Dateigröße anzeigen: Die Downloadgröße wird in KB angezeigt
- Beschreibung anzeigen: Zusätzlich zum Dateinamen kann eine Beschreibung / ein Titel hinzugefügt werden
Video Teaser
Dieses Inhaltselement ermöglicht es Ihnen, kleine Videos auf der Webseite einzubinden.
Das „Video Teaser“-Element enthält:
- Titel
- Video
- Vorschaubild
Designvariationen zum Element Video Teaser
Die Einträge können Sie direkt im Inhaltselement anlegen, maximal 3 Einträge pro Inhaltselement sind hierbei möglich.
Jeder Eintrag besitzt einen eigenen Link.
Um ein Vorschaubild einzufügen, befolgen Sie bitte unsere Anleitung:
Bilder hinzufügen und verwalten
Das Video können Sie per URL von YouTube oder Vimeo einbinden.
Im neuen TYPO3 ist es auch möglich YouTube-URL in der Dateiliste zu hinterlegen - daher können Sie hier auch eine neue Relation zu einem Video erstellen, wie Sie es von den Bildern gewohnt sind.
Anleitung - Video Teaser
Die Einträge können Sie direkt im Inhaltselement anlegen, maximal 3 Einträge pro Inhaltselement sind hierbei möglich.
Jeder Eintrag besitzt einen eigenen Link.
Um ein Vorschaubild einzufügen, befolgen Sie bitte unsere Anleitung:
Bilder hinzufügen und verwalten
Das Video können Sie per URL von YouTube oder Vimeo einbinden.
Im neuen TYPO3 ist es auch möglich YouTube-URL in der Dateiliste zu hinterlegen - daher können Sie hier auch eine neue Relation zu einem Video erstellen, wie Sie es von den Bildern gewohnt sind.
Weitere Einstellungsmöglichkeiten
Das Aussehen des jeweiligen Elements kann im Reiter Erscheinungsbild angepasst werden. Die verfügbaren Optionen variieren je nach Elementtyp:
- Abstand danach (nur bei Text & Medien Element ohne alternativen Hintergrundmöglich): Verringert den Abstand zwischen dem aktuellen und dem darauffolgenden Inhaltselement
- Links in Menü anzeigen: zeigt den Titel des Elements im Inhaltsverzeichnis an, wenn dieses auf der Seite eingefügt wird.
- Alternativer Hintergrund: Hinterlegt das Element mit hellgrauem Hintergrund
- Link zum Seitenanfang anfügen: Fügt einen Nach oben-Link am Ende des Elements ein
- Layout
- Infobox:
- grauer Hintergrund (selbes grau wie Alternativer Hintergrund)
- blauer Hintergrund
- blauer Rahmen
- Galerie & Slider:
- Ansicht Galerie
- Ansicht Slider
- Teaser:
- Anzahl der Spalten: Gibt an wie viele Teaser am Desktop nebeneinanderstehen, dies wirkt sich auch auf ihre Größe aus. Auf mobilen Endgeräten wird nur ein Teaser pro Zeile angezeigt
- Kontaktbox:
- Standard (eckiges Bild)
- Rundes Bild
- Banner:
- Standard (einzelne Kästchen mit Farbakzenten oder vollflächig universitätsblau)
- Banner (mit Hintergrundbild)
- Tabelle:
- Tabellenlayout
- Spalten (Auto, 1-9)
- Tabellen-Stil: (Standard / Gestreift / Umrahmt)
- Position des Tabellenkopfes (keine Kopfzeile / oben / links)
- Tabellenfuß verwenden (letzte Zeile in <tfoot>-Tags einschließen)
- Tabellenlayout
- Infobox:
- Dateilinklayout (nur bei Download Element):
- Informationen zur Dateigröße anzeigen: Die Downloadgröße wird in KB angezeigt
- Beschreibung anzeigen: Zusätzlich zum Dateinamen kann eine Beschreibung / ein Titel hinzugefügt werden