Strategie & Kommunikation. Trainingsunterlagen TYPO3: Teaser und Seitenlayout Stand

Transkript

1 Trainingsunterlagen TYPO3: Teaser und Seitenlayout Stand Seite 1 / Maud Mergard /

2 Umgang mit Teasern und Seitenlayout in TYPO3 Stand Ein Teaser ([ti?z?(r)]) (von engl. tease = reizen, necken) ist in der Werbesprache ein Anreißer, der zum Weiterlesen, -hören, -sehen, - klicken verlocken soll. [Wikipedia] Teaser waren unter bisher bekannt bei den News. Dies Konzept wurde jetzt noch erweitert und biete jetzt mehr Möglichkeiten, die hier in ihrer Funktionalität vorgestellt werden. Seite 2 / Maud Mergard /

3 Teaser-Konzept Jeder Teaser hat vier Elemente: 1. eine Überschrift 2. eine Dachzeile* 3. ein kurzer Text, der zum weiterlesen anregt (Teaser-Text) 4. ein Bild Alle vier Elemente sind verlinkt mit dem eigentlichen (langen) Text. * ein kurzes Stichwort noch vor dem eigentlichen Titel, das die Meldung grob thematisch einsortiert. Seite 3 / Maud Mergard /

4 News: Erscheinung im Frontend (4.) (1.) (2.) (3.) 1. Überschrift 2. Dachzeile 3. Teaser 4. Bild Seite 4 / Maud Mergard /

5 Links Bei den Teaser wird nicht mehr das Wort mehr verlinkt. Dieses ist ganz verschwunden. Links sollten immer kontext-unabhängig verständlich sein. Auch das Wort hier zu verlinken ist nicht günstig. Der Benutzer bekommt so schneller eine Übersicht über die eigentlich klickbaren Inhalte. Die Klicks erhöhen sich dadurch in der Regel, die Orientierung wird schneller. Zudem ist die Seite dadurch einen Schritt weiter in Richtung Barrierefreiheit. Menschen, die sich vom Browser die Inhalte vorlesen lassen müssen, können mit einem Link mehr nichts anfangen, schon gar nicht, wenn er vier, fünf mal auf der Seite erscheint. Ein Link engineering card ist viel sprechender. Seite 5 / Maud Mergard /

6 Teaser in News und Seiten Um mehr Gestaltungsmöglichkeiten zu haben, können jetzt Teaser in News, aber auch in Seiten verwendet werden. So ist der Redakteur nicht auf die Gestaltungsmöglichkeiten von News beschränkt, sondern kann alle Freiheiten der Seitengestaltung nutzen. Bei den Seiten, werden die Teaser-Informationen in den Seiteneigenschaften bearbeitet. Seite 6 / Maud Mergard /

7 Seiteneigenschaften Titel, Untertitel Titel: Überschrift Untertitel: Dachzeile Seite 7 / Maud Mergard /

8 Seiteneigenschaften - Inhaltsangabe Teaser-Text Seite 8 / Maud Mergard /

9 Seiteneigenschaften - Bild Teaser-Bild Seite 9 / Maud Mergard /

10 News 1. Überschrift 2. Teaser 3. gesamter Text Seite 10 / Maud Mergard /

11 News 4. Bild einstellen unter durch Dateien browsen Seite 11 / Maud Mergard /

12 News - Shorttitle Bei den News wurde für die Dachzeile das neue Feld Shorttitle innerhalb des Reiters Presse eingefügt. Ist dieser nicht ausgefüllt, erscheint die Dachzeile nicht. Seite 12 / Maud Mergard /

13 Inhaltspflege von hinten nach vorne Um auf einer Seite einen Teaser anzulegen, wird also zunächst eine News oder eine Seite mit Teaser-Informationen in den Seiteneigenschaften angelegt. Erfasst wird also zunächst der komplette Inhalt. Danach wird dieser Inhalt über die Teaser-Inhaltselemente auf der gewünschten Seite eingepflegt. Man pflegt also quasi von hinten nach vorne oder von unten nach oben. Also erst das Anlegen der Details, dann der Verweis darauf. Seite 13 / Maud Mergard /

14 Teaser und Seitenlayout Nicht alle Teaser können überall verwendet werden. Die Verwendungsmöglichkeiten hängen von dem gewählten Seitenlayout ab. Die Orange Box z.b. kann ausschließlich an erster Stelle der sogenannten Leitseiten stehen. Das ist z.b. die Startseite und jeweils die erste Seite der Navigation. Die Einstellung wählen Sie unter den Seiteneigenschaften unter Layout aus. Das Bild muss vor dem Hochladen auf 483 * 241 Pixel angepasst werden. Seite 14 / Maud Mergard /

15 Seitenlayout der Leitseiten Leitseiten haben immer eine Spalte, die sich über die gesamte Breite zieht (nur oben oder auch ganz unten) sowie eine rechte Spalte. Seite 15 / Maud Mergard /

16 Seitenlayout übrige Seiten Um Inhalte in der rechten Spalte sichtbar zu machen, muss ein zweispaltiges Seitenlayout gewählt werden. Seite 16 / Maud Mergard /

17 Seitenlayout-Einstellung in TYPO3 Das Seitenlayout kann unter Seiteneigenschaften ausgewählt werden. Seite 17 / Maud Mergard /

18 Leitseite 3-spaltig TYPO3-Ansicht einer Leitseite: Spalte Links: erster Inhalt über die ganze Breite Spalte Normal: Haupt- Inhaltsspalte Spalte Rechts: Inhalt in rechter schmaleren Spalte Spalte Rand: letzter Inhalt über die ganze Breite der Seite Seite 18 / Maud Mergard /

19 Pflege der verschiedenen Teaser in TYPO3 Nachdem Sie die eigentliche News oder Seite erstellt haben, die Sie anteasern wollen, wählen Sie auf der gewünschten Seite das Inhaltselement Plugin aus. Tragen Sie zur Orientierung eine Überschrift ein, die Sie in jedem Fall verstecken. Somit wird sie nicht nach außen sichtbar, innerhalb von TYPO3 erkennen Sie die Inhalte aber so besser wieder. Dies gilt für alle Teaser! Seite 19 / Maud Mergard /

20 Rahmen in Teasern In Teasern kann man Rahmen einstellen, z.b. Rahmen 2. Dieser sorgt für 10 Pixel Abstand am rechten Rand und hilft ggf. um eine Bündigkeit mit anderen Inhalten zu erreichen. Achten Sie auf einheitliche Einstellungen, damit das Layout nicht flatter. Seite 20 / Maud Mergard /

21 VDI-Teaser 1. unter Erweiterung den gewünschten Typ wählen (hier VDI Teaser ) und speichern 2. Layout wählen 3. Newsdateien oder Seiten auswählen über durch Dateien browsen 4. Details-Seite auswählen 5. speichern Seite 21 / Maud Mergard /

22 Ablage der News Es können beliebige Seiten in dem Teaser ausgewählt werden, solange auf diesen Seiten die entsprechenden Inhalte unter Seiteneigenschaften erfasst wurden. News müssen immer in dem Ordner eingestellt werden, der auch im Plugin auf der Detailseite als Quelle angegeben ist. Seite 22 / Maud Mergard /

23 Frontend Plugin VDI Teaser VDI Teaser mit Layout Bild links, Text umfliessend mit einem Inhalt VDI Teaser mit Layout Bild links, Text umfliessend mit vier Inhalten VDI Teaser mit Layout Big Headline, Block rechts mit vier Inhalten Seite 23 / Maud Mergard /

24 Layout VDI Teaser Der VDI Teaser kann unterschiedliche Layouts annehmen. Die Layouts müssen mit der Positionierung des Teasers harmonieren. So kann der Große orange Kasten nur in Spalte Links auf einer Leitseite stehen. In der rechten Spalte sollte immer Bild oben, Block unten gewählt werden. Seite 24 / Maud Mergard /

25 Frontend VDI Tabbed Teaser Überschrift Drei Tabs Seite 25 / Maud Mergard / gut geeignet für zusammen hängende Inhalte

26 VDI Tabbed Teaser 1. Überschrift 2. Detailseite wählen 3. Titel des Tabs 4. Layout wählen 5. News oder Seiten auswählen Tabs verschieben Tabs löschen Neue Tabs einfügen Seite 26 / Maud Mergard /

27 Frontend VDI Select Teaser Der Select Teaser bietet die Möglichkeit, mehrere Inhalte mit den Pfeilsymbolen durchzublättern. Angezeigt wird jeweils Bild, Dachzeile und Überschrift (kein Teaser-Text). Seite 27 / Maud Mergard /

28 VDI Select Teaser 1. Typ Select Teaser wählen 2. News oder Seiten wählen 3. Detailseite wählen Seite 28 / Maud Mergard /

29 Frontend Picture Teaser Der Picture Teaser bietet die Möglichkeit, mehrere Bilder mit den Pfeilsymbolen durchzublättern und per Klick zu vergrößern. Angezeigt wird jeweils nur das Bild. Gewünschter Text muss separat erfasst werden. Seite 29 / Maud Mergard /

30 Light Box Picture Teaser Auch in der Vergrößerungs- Ansicht können die Bilder durchgeblättert werden. Hier erscheint zusätzlich der Bildtitel. Seite 30 / Maud Mergard /

31 VDI Picture Teaser 1. Typ wählen 2. Anzahl und Größe bleibt in der Regel wie voreingestellt 3. Bilder auswählen Seite 31 / Maud Mergard /

32 Titel der Bilder Der Titel der Bilder wird über Medien > Datei und das Stiftsymbol gepflegt. Seite 32 / Maud Mergard /

33 Ausloggen Bitte denken Sie daran, sich nach Beendigung Ihrer Arbeit in TYPO3 auszuloggen. Das Logout finden Sie jetzt oben rechts. Seite 33 / Maud Mergard /