Teaser-Karte

Die alten Elemente Artikelteaser, Seitenteaser und Freitext mit Grafik werden durch die neue Teaser-Karte ersetzt. Diese bündelt die Funktionen der drei Elemente in einer modernen, übersichtlichen Darstellung. Dazu steht nun auch in diesem Element die Funktion zur Bildbearbeitung zur Verfügung., d.h. der angezeigte Bildausschnitt kann direkt im TYPO3-Element festgelegt werden.

Teaser-Karten im TYPO3-CMS sind eine effektive Möglichkeit, kurze Vorschauen oder „Teaser“ zu wichtigen Inhalten auf Ihrer Website zu erstellen. Sie werden häufig eingesetzt, um interessante Artikel, Veranstaltungen oder Services in einer kompakten und ansprechenden Form zu präsentieren. Diese Karten kombinieren Bild (optional), Text und einen Link (optional), um Nutzer dazu einzuladen, mehr über den dargestellten Inhalt zu erfahren. Dazu können Bannerbilder (Bilder ohne Angaben von Quellenangaben) genutzt werden um Logos darzustellen.

Die Vorteile von Teaser-Karten sind vielfältig:

1. Prägnante Präsentation: Teaser-Karten ermöglichen es Ihnen, eine kurze Vorschau auf Inhalte zu zeigen, die die Neugier der Besucher wecken. Dies hilft, wichtige Informationen auf den Punkt zu bringen und Nutzer dazu zu motivieren, weiterzuklicken, um mehr zu erfahren.
2. Visuelle Attraktivität: Durch die Kombination von Bildern und Text schaffen Teaser-Karten ein visuell ansprechendes Element auf Ihrer Website. Dies zieht die Aufmerksamkeit der Besucher auf wichtige Inhalte und verbessert das allgemeine Erscheinungsbild Ihrer Seite.
3. Einfache Navigation: Teaser-Karten erleichtern die Navigation, indem sie relevante Inhalte in einer zugänglichen und einladenden Weise präsentieren. Dies verbessert die Benutzererfahrung und hilft den Besuchern, schnell und einfach durch Ihre Website zu navigieren.
4. Flexibilität: Unser TYPO3-System bietet eine Vielzahl von Varianten, wie Teaser-Karten gestaltet werden können. Sie können die Karten mit oder ohne Bild, mit oder ohne Link, in unterschiedlichen Farben und mit bis zu 5 Karten nebeneinander in einem Container darstellen.
5. Mobile Responsiveness: Moderne Teaser-Karten sind responsiv und funktionieren auf verschiedenen Gerätetypen, einschließlich Smartphones und Tablets, einwandfrei. Dies gewährleistet eine konsistente Benutzererfahrung über alle Plattformen hinweg.
6. Erhöhte Interaktivität: Indem sie visuell und inhaltlich ansprechend gestaltet sind, steigern Teaser-Karten die Interaktion auf Ihrer Website und erhöhen die Klickrate.

Insgesamt sind Teaser-Karten im TYPO3 eine leistungsstarke Methode, um wichtige Inhalte zu betonen und die Benutzererfahrung zu verbessern. Sie kombinieren Design und Funktionalität auf effektive Weise und tragen dazu bei, die Besucher Ihrer Website zielgerichtet durch Ihre Inhalte zu führen.

• Variante 1: Teaser-Karte in der Inhaltsspalte mit einer spaltenbreiten Box
• Variante 2: Teaser-Karte in der Inhaltsspalte mit zwei gleich breiten Boxen in einem Container
• Variante 3: Teaser-Karte in der Inhaltsspalte mit zwei Boxen (33:66) in einem Container
• Variante 4: Teaser-Karte in der Inhaltsspalte mit zwei Boxen (66:33) in einem Container
• Variante 5: Teaser-Karte in der Inhaltsspalte mit drei gleich breiten Boxen in einem Container
• Variante 6: Teaser-Karte in der Inhaltsspalte mit vier gleich breiten Boxen in einem Container
• Variante 7: Teaser-Karte in der Inhaltsspalte mit fünf gleich breiten Boxen in einem Container
• Variante 8: Teaser-Karte in der Inhaltsspalte mit fünf gleich breiten Boxen und mehrfarbigen Teasern in einem Container
• Variante 9: Teaser-Karte in der Nachrichtenspalte mit einer spaltenbreiten Box
• Variante 10: Teaser-Karten in Containern in der Inhaltsspalte mit der Darstellungsvariante "Bannerbild"

Unsere Teaser-Karten im TYPO3-System sind ein vielseitiges Werkzeug, um Inhalte auf Ihrer Website kompakt und ansprechend darzustellen. Mit diesen Richtlinien können Sie effektiv Teaser-Karten in TYPO3 verwenden, um Ihre Inhalte übersichtlich und interaktiv zu gestalten und dabei die Flexibilität des Systems voll auszuschöpfen:

• Überschrift: Jede Teaser-Karte benötigt eine Überschrift als Pflichtfeld. Diese hat eine Zeichenbegrenzung von 100 Zeichen. Im Frontend kann die Überschrift entweder ausgeblendet werden oder als H2-Überschrift (Standard) angezeigt werden.
• Linkfeld: Das Linkfeld ist optional. Jede Teaser-Karte kann maximal einen Link enthalten, wobei dann immer die ganze Karte verlinkt ist. Tragen Sie Links mithilfe des Link-Browsers ein. Sie können interne Links, externe Links sowie Verlinkungen zu Dateien, Ordnern, E-Mail-Adressen, Telefonnummern und News hinzufügen.
• Textfeld: Das Textfeld ist ebenfalls optional und sollte für den Teasertext genutzt werden, der den Inhalt kurz erläutert. Ein Rich Text Editor (RTE) steht dafür zur Verfügung. Es wird empfohlen, maximal 500 Zeichen für den Teasertext zu verwenden.
• Bild: Ein Bild kann optional im Reiter Medien eingebunden werden, um Ihre Teaser-Karte visuell zu ergänzen. Im Punkt "Bildbearbeitung" können Sie den gewünschten Bildausschnitt direkt im TYPO3-System bestimmen. Im Punkt "Quelle verstecken" können Sie die Bildquelle ausblenden um Bannerbilder zu generieren, zum Beispiel zum Einbinden von Logos.
• Hintergrundfarbe: Unter dem Reiter „Erscheinungsbild“ kann die Hintergrundfarbe der Teaser-Karte festgelegt werden. Zur Auswahl stehen keine Farbe, hellgrau (Standard), hellblau, gelb oder dunkelblau.
• Layout: Innerhalb von Containern werden Teaser-Karten, unabhängig von ihrer Länge, optisch gleich hoch dargestellt. Container ermöglichen es, bis zu fünf Teaser-Karten nebeneinander zu platzieren oder neben anderen Elementen darzustellen.
• Spaltennutzung: Teaser-Karten können sowohl in Inhalts- und Nachrichtenspalten als auch innerhalb von Containern verwendet werden.
• ToTop-Links: Teaser-Karten sind nicht für ToTop-Links geeignet, da ihre Größe dies nicht sinnvoll zulässt.
• Features: Wenn Teaser-Karten in mehreren Containern untereinander eingesetzt werden, können sie durch Drag & Drop über die Container hinweg verschoben werden, was eine einfachere und flexiblere Anpassung der Anordnung ermöglicht.