Designbestandteil "Teaser"
Anleitung mit Übung, Lesezeit 7-10 Minuten
Über Teaser als Teil des Aufbaus der RPTU Webseiten
Teaser bieten einen Navigationsweg in die Unterseiten einer Webseite. Dieser Weg wird besonders von Besuchern mit Mobilgeräten favorisiert. Deshalb müssen Sie als Redakteur*innen immer sicherstellen, dass die Unterseiten im Inhalt der Seite gut auffindbar verlinkt sind.
- Das Teaser Plugin von pw_teaser erstellt automatisch jeweils einen Teaser aus den Eigenschaften aller verlinkten Seiten
- Es gibt drei unterschiedliche Erscheinungsbilder (Layouts) für Teaser
- Das Bild wird in den Seiteneigenschaften unter "Teaser" angelegt.
- Der Teaser-Text wird der Beschreibung in den Seiteneigenschaften unter "SEO" entnommen.
- Teaser der Unterseiten erscheinen i.d.R. überall am unteren Ende einer Seite automatisch im Layout "klein 25%"
- Das wird über die Seiteneigenschaft Backendlayout unter "Erscheinungsbild" gesteuert.
Verwendung:
- Notwendige Verlinkung von Unterseiten im Inhalt der Seite
- Teasertext bereitet auf Inhalt der verlinkten Seite vor
- nicht verwenden in Gridelementen
- nicht verwenden mit Hintergrundfarben oder -bildern
Kurz und knapp
Vorbereitung der Seiten, die angeteasert werden:
- Teaserbild einstellen unter Seiteneigenschaften -> Teaser
- Teasertext einstellen unter Seiteneigenschaften -> SEO ->Beschreibung
- Zeichenanzahl: 50-160 Zeichen
- Inhalt: Prägnant, relevant und ansprechend
- Einzigartigkeit: eigene Beschreibung f. jede Seite
Einstellung der Seite, auf der die Teaser angezeigt werden:
- Seiteneigenschaften -> Erscheinungsbild -> Backendlayout "Standardseite mit Teaser RPTU" zeigt Teaser automatisch an
- Seiteneigenschaften -> Erscheinungsbild -> Backendlayout "Standardseite RPTU" ohne Teaser
Sonderwünsche -> siehe ab Schritt 5
Tipps für effektive Teasertexte
- Länge beachten: Halten Sie die Seitenbeschreibung zwischen 50 und 160 Zeichen.
- Relevanz: Stellen Sie sicher, dass die Beschreibung den Inhalt der Seite genau widerspiegelt.
- Einzigartigkeit: Jede Seite Ihrer Website sollte eine einzigartige Beschreibung haben.
- Schlüsselwörter einfügen: Verwenden Sie relevante Schlüsselwörter, die den Inhalt der Seite beschreiben und die Suchanfragen der Nutzer ansprechen.
- Handlungsaufforderung: Fügen Sie eine klare Handlungsaufforderung hinzu, um Nutzer zum Klicken zu ermutigen.
- Leserfreundlichkeit: Schreiben Sie in einer klaren, prägnanten und ansprechenden Sprache.
Info: In unserem Template nutzen wir die Beschreibung einer Seite als Teasertext. Die Beschreibung wird unter anderem auch bei Suchmaschinen unter dem Suchtreffer angezeigt.
So sieht es aus
Live Ansicht des Inhaltselements
Teaser groß 100%
Teaser klein, horizontal 50%, 1 Element mit Highlight schwarz
Teaser vertikal, klein 25%
Schritt für Schritt
Bebilderte Anleitung: Teasertext und -bild einrichten
Schritt 1: Seiteneigenschaften öffnen
- Klicken Sie im Seitenbaum auf die betreffende Seite
- Klicken Sie im Bearbeitungsbereich oben auf das Stiftsymbol
Schritt 2: Teasertext festlegen
- Klicken Sie auf den Tab "SEO" in den Seiteneigenschaften
- Schreiben Sie den Teasertext in das Feld "Beschreibung"
Schritt 3: Teaserbild und optionale Einstellungen
- A Bild auswählen
- öffnen Sie den Tab "Teaser"
- klicken Sie auf "Bild hinzufügen"
- wählen Sie das gewünschte Bild aus
- B Teaser aus dem Content automatisch generieren
(Nicht empfohlen: funktioniert leider nicht immer zuverlässig) - C Teaser High-Light: Heben sie alle Teaser für diese Seite hervor, indem Sie den Schalter umlegen. Der Hintergrund der Teaser für diese Seite wird schwarz anstelle weiß.
- D Top-Line: Wenn diese Seite mit einem Teaser des Layouts "Big 100%" angezeigt wird, wird der Inhalt der Top-Line oberhalb der Überschrift ausgegeben.
Info zum High-Light: Seitenbesucher auf RPTU Seiten gewöhnen sich an diese Art der Hervorhebung. Nutzen Sie diese Option tatsächlich zum Hervorheben und nicht zum Umfärben Ihrer Webseiten.
Schritt 4: Überprüfen des Ergebnisses
Die Änderungen an den Einstellungen der Seite sehen Sie ausnahmsweise nicht beim Betrachten der Seite selbst.
- klicken Sie im Seitenbaum auf die übergeordnete Seite
- lassen Sie sich die Seite anzeigen
- kontrollieren Sie Ihre Teaser
Sollten Sie keine Änderung sehen, leeren Sie bitte den Cache dieser Seite über das Blitzsymbol.
Sollten Sie keine Teaser sehen, hat diese Seite evtl. nicht das richtige Backendlayout. Siehe Über Teaser als Teil des Aufbaus der RPTU Webseiten.
Weiterer Schritt
Bebilderte Anleitung: Teaser per Plugin selbst konfigurieren
Schritt 5: Inhaltselement Plugin pw_teaser anlegen
- Erstellen Sie ein neues Inhaltselement
- Klicken Sie auf den Reiter "Plug-Ins"
- Klicken Sie auf das Icon "Seiten-Teaser"
Schritt 6: Auswahl der Teaserquelle
wählen Sie im Tab "Allgemeine Einstellungen" die Quelle für Ihre Teaser
- alle Unterseiten der aktuellen Seite
- alle Unterseiten der aktuellen Seite (rekursiv)
- einzeln selektierte Seiten
- alle Unterseiten von selektierten Seiten
- alle Unterseiten von selektierten Seiten (rekursiv)
Info: Rekursiv ist selten sinnvoll. Es bedeutet eine Ausgabe von Unterseiten und Unterseiten der Unterseiten. Dabei sieht eins dem Teaser nicht an, aus welcher Seitenbaumtiefe er stammt. Die Rekursionstiefe können Sie angeben. Beschränken Sie sich bitte auf max. 2 Ebenen.
Schritt 7: Auswahl des Teaserlayouts
Wählen Sie das Teaserlayout entsprechend für Ihren Anwendungszweck:
Teaser small (25%): Es werden jeweils 4 Teaser nebeneinander angezeigt. Jeder Teaser ist in Desktopansicht 25% der Seite breit.
Teaser small (50%): Es werden jeweils 2 Teaser nebeneinander angezeigt. Die Ausrichtung ist horizontal. Jeder Teaser ist in Desktopansicht 50% der Seite breit.
Teaser big (100%): Es wird jeweils nur ein Teaser pro "Zeile" angezeigt und benötigt 100% der Seite. Bei mehreren Teasern untereinander werden die Teaserbilder abwechselnd rechts/links angezeigt. Wenn Sie große Teaser nutzen, können Sie auch eine Top-Line, eine Zeile über der Überschrift, nutzen. Dies ist das einzige Layout, in dem die Topline ausgegeben wird.
Optional Schritt 8: Individuelle Anpassungen
- A Sortierung anpassen nach
- Titel
- Sortierung im Seitenbaum
- Erstellungs-, Änderungs-, Veröffentlichungs-, Ablauf- oder Neu-Datum
- zufällig
Info: Es ist keine individuelle Sortierung der Teaser möglich. Bitte greifen Sie im Notfall auf den Umweg zurück, für jeden einzelnen Teaser ein Plugin anzulegen und diese durch Anordnung in Rastern/Containern nach Wunsch zu sortieren.
- B Anzeigen von Seiten, die sonst nicht in Menüs angezeigt werden (ja/nein)
- C Verstecken der aktuellen Seite aus der Anzeige
- D Seiten bestimmten Typs einblenden - Eingabe mit Kommata getrennt:
- 1 - Standardseite
- 3 - Seite vom Typ Link auf externe URL
- 4 - Verweisseite
Info: Seiten vom Typ Externer Link sollten nur in Ausnahmefällen angelegt werden. Eine SEO Beschreibung ist für diese Seiten nicht verfügbar und wird deshalb auch nicht im Teaser angezeigt. Bitte "verstecken" Sie keine Verlinkungen auf externe Seiten in Menü oder Seiteninhalt. Seitenbesucher sollten einen Wechsel auf eine ganz andere Website immer bewusst entscheiden können.
TYPO3 Selbststudium
Übung
- Erstellen Sie eine Seite mit dem Backendlayout "Standard mit Teaser RPTU"
- Erstellen Sie die erste Unterseite mit:
- Titel: Publikationen
- Teaserbild: nach Ihrer Wahl, aber mit Alternativtext
- Teasertext: "Alle Publikationen der Arbeitsgruppe Muster unter der Leitung von Prof. A. Muster"
- Erstellen Sie eine zweite Unterseite mit:
- Titel: Mitglieder
- Teaserbild: nach Ihrer Wahl, aber mit Alternativtext
- Teasertext: "Lernen Sie die Mitglieder der Arbeitsgruppe AG Muster kennen."
- Löschen Sie den Seiten-Cache der ersten Seite mit dem Butten mit dem Blitzsymbol
- Betrachten Sie die Seite im Frontend
- Wie wirken sich besonders lange Seitentitel aus? Probieren Sie.
- Wie wirken sich sehr kurze oder sehr lange Teasertexte aus? Probieren Sie.
- Erstellen Sie nun ein Inhaltselement vom Typ "Plugin pw_teaser" auf der ersten Seite.
- Stellen Sie das Plugin so ein, dass die Unterseiten der aktuellen Seite angeteasert werden.
- Wählen Sie als Layout große Teaser aus.
- Betrachten Sie die Seite im Frontend