.. include:: /Includes.rst.txt
.. index:: Topic-Teaser

.. _topic-teaser:

============================
Topic-Teaser (Themen-Teaser)
============================

.. versionadded:: 12

Der **Topic Teaser** (Themen-Teaser) ist ein nützliches Inhaltselement der DRK-Musterwebseiten. Mit ihm können Sie wichtige Inhalte visuell ansprechend hervorheben. Der Topic-Teaser ist standardmäßig in allen Vorlagen der TYPO3-Mustersites integriert.

   .. figure:: Images/topic-teaser-01.png
      :alt:  Topic-Teaser (Themen-Teaser)
      :class: with-shadow


Topic-Teaser erstellen
----------------------

1. Erstellen Sie an der gewünschten Stelle ein neues Seiteninhaltselement **„Topic Teaser“**

.. figure:: Images/topic-teaser-erstellen-01.png
      :alt:  Topic-Teaser erstellen
      :class: with-shadow

2. Klicken Sie auf **„Neu anlegen“** um einen Themenkachel zu erstellen.

.. figure:: Images/topic-teaser-erstellen-02.png
      :alt:  Topic-Teaser erstellen
      :class: with-shadow

3. Hier legen Sie das Aussehen und die Inhalte des Teasers fest. Folgende Angaben sind erforderlich:
   
   - Kachelaussehen
   - Bild
   - Titel
   - Text
   - Textfarbe: dunkel oder weiß
   - Primärer und sekundärer Button: jeweils mit und ohne Spendenoptik

.. figure:: Images/topic-teaser-erstellen-03.png
      :alt:  Topic-Teaser erstellen
      :class: with-shadow

Nach dem Speichern sieht unser Topic-Taeser wie folgt aus:

.. figure:: Images/topic-teaser-erstellen-04.png
      :alt:  Topic-Teaser erstellen
      :class: with-shadow



Der **Topic-Teaser** ist in sechs verschiedenen Varianten verfügbar. Damit können Sie Ihre Website ansprechender, vielseitiger und schöner gestalten.

Folgende Varianten stehen zur Auswahl:

**50% - Text unten auf Bild [50-bottom]** und **50% - Text oben auf Bild [50-top]**

.. figure:: Images/topic-teaser-02.png
      :alt:  50% - Text unten auf Bild [50-bottom]** und **50% - Text oben auf Bild [50-top]
      :class: with-shadow


**50% - Text unterhalb mit Box [50-below-white]**

.. figure:: Images/topic-teaser-03.png
      :alt:  50% - Text unterhalb mit Box [50-below-white]
      :class: with-shadow

**100% - Text links auf Bild [100-left]**

.. figure:: Images/topic-teaser-04.png
      :alt:  100% - Text links auf Bild [100-left]
      :class: with-shadow

**33/66% - Text links mit Box [66-left]**

.. figure:: Images/topic-teaser-05.png
      :alt:  33/66% - Text links mit Box [66-left]
      :class: with-shadow

**66/33% - Text rechts mit Box [66-right]**

.. figure:: Images/topic-teaser-06.png
      :alt:  66/33% - Text rechts mit Box [66-right]
      :class: with-shadow

**Stand:** 22 September 2026