zum Inhalt springen

UzK News Teaser

Der News-Teaser ist einer von mehreren Teasern, welche Ihnen im Rahmen des Universitätsdesign UzK-2015 zur Verfügung stehen. Er ist primär dafür gedacht auf der Startseite Ihrer Website Neuigkeiten unterstützt von Bildern anzuzeigen. Eine Besonderheit ist, dass er zunächst nur eine begrenzte Zahl von Meldungen anzeigt. Unterhalb der Box befindet sich ein Button um weitere Neuigkeiten einzublenden.

Einen News-Teaser anlegen

Um einen News-Teaser anzulegen, gehen Sie wie folgt vor:

  • Loggen Sie sich im Backend Ihrer Seite ein.
  • Öffnen Sie im Seiten-Modul die Seite auf welcher Sie den Teaser einfügen möchten. Am Sinnvollsten ist dies die Startseite Ihrer Webseite.
  • Fügen Sie ein neues Element hinzu indem Sie an geeigneter Stelle in der Hauptspalte den Button "Neues Inhaltselement erstellen" betätigen. Es öffnet sich ein Dialog.
  • Nun wählen Sie aus dem Tab "UzK-Hauptspalte" das Element "UzK News-Teaser".
vergrößern:
Wählen Sie im Tab "UzK Hauptspalte" das Element "UzK News Teaser" aus.
  • Nach dem Klick öffnet sich ein Dialog in welchem Sie dem Teaser Inhalte geben.
  • Sie müssen dem Teaser einen Header / eine Überschrift geben. Dies hilft die Elemente der Webseite im Backend auseinander zu halten. Über das Dropdown-Menü "Type" können Sie einstellen, ob diese Übersicht auf der Webseite sichtbar sein soll, oder nicht.
  • Das Standard-Verhalten des News-Teaser ist, dass zunächst nur drei Meldungen angezeigt werden und Besuchende der Seite mehr Inhalte über einen Button einblenden können. Sie können dieses Standardverhalten ändern indem Sie einen Haken bei "Show all elements" setzen. Dann werden direkt alle Meldungen angezeigt.
  • Speichern Sie.
  • Jetzt können Sie über den "Add Teaser" Button dem News-Einträge hinzufügen.

  • Für jedes einzelen Teaser-Element müssen Sie folgende Felder ausfüllen:

    • Teaser caption: Die Bildunterschrift. Optisch hervorgehoben eine Art Überschrift für die Meldung
    • Teaser text: Der Beschreibungstext des Teasers.
    • Teaser image: wählen Sie hiermit für jeden Eintrag des Teaser ein Bild aus. Alle im selben Teaser verwendeten Bilder sollten das gleiche Seitenverhältnis haben.
    • Teaser URL: hiermit verlinken Sie den Titel des Teaser zum Beispiel auf eine Seite, die Hintergrundinformationen zum Thema liefert.

  • Vergessen Sie nicht zu speichern.

Reihenfolge der Elemente nachträglich ändern

Sie können die Reihenfolge der Meldungen noch nachträglich ändern:

  • Wenn Sie die einzelnen Elemente zuklappen, sehen Sie neben jedem Einzelnem ein Icon mit drei Strichen übereinander und dem Tooltip "Drag to Move".
  • Wenn Sie dieses anklicken und die Taste gedrückt halten, können Sie das Element an eine andere Stelle verschieben.
  • Nach dem Ändern der Reihenfolge müssen Sie erneut speichern.

Beispiel für einen News-Teaser

In der zweiten Reihe, die Sie über den Button "weitere anzeigen" einblenden, sind zwecks Illustration bewusst einige Fehler eingebaut.

News-Teaser Beispiel

Teaser Caption

Teaser Caption

Teaser Text: Das gewählte Bild hat nicht das gleiche Seitenverhältnis wie die anderen und fällt deshalb negativ auf. Beachten Sie die Anzeige des Urhebers am rechten Rand.

viertes Element

viertes Element

Erst sichtbar nachdem der Button betätigt wurde

Element mit Caption ohne Bild

Wenn Sie kein Bild verknüpfen wird die entsprechende Meldung falsch angezeigt.

langer Text ohne Bild

langer Text ohne Bild

Ein viel zu langer Text, den Besuchende Ihrer Seite wahrscheinlich eh nicht zuende lesen werden. Weil dieser Muster-Text so lang ist, reicht der vorgesehene Platz nicht mehr aus. Als Resultat wächst diese einzelne Box mit während der Rest der Boxen gleich bleibt. Schreiben Sie also in diesem Element keinen Roman, sondern verlinken Sie eine Seite mit allen Detailinformationen. Hier sollten Sie nur anreißen worum es geht um diesen unschönen optischen Effekt zu vermeiden.

Kontakt
Bei Fragen und für eine individuelle Beratung wenden Sie sich bitte an TYPO3-Master.
Bei Fragen speziell zu unserem Angebot UniTy3, verwenden Sie bitte dieses Kontaktformular: UniTy3-Support.