Typo3-Referenzen Mask Elemente

Mask Elemente sind in Typo3 Elemente, die es ermöglichen, Inhalte auf ganz unterschiedliche Art und Weise benutzerfreundlich zu bündeln und einzubinden. Folgende Mask Elemente stehen zur Verfügung:

• Buttons
• Starbild Übersichtsseiten
• Teaserbox
• Themen-Boxen
• Video-Content
• Zitatboxen

Im Folgenden werden einzelne Mask Elemente erklärt, die wir als Typo3-Anwender in der täglichen Arbeit gebrauchn. Es stehen noch weitere Mask Elemente zur Verfügung, die aber nur einmalig in der Erstellung von statischen Inhalten Anwendung gefunden haben. Dies betrifft z. B. das HÄBL-Startbild oder den Slider, der die aktuelle HÄBL-Ausgabe enthält, sowie die Teaserbox Newsletteranmeldung, die einmalig für die Einbindung in die Website angelegt wurde.

Buttons können je nach Verwendungszweck in den Farben Rot, Blau und Grau angewendet werden:

In diesen Beispielbuttons ist vermerkt, welches Design man in Typo3 beim Anlegen des Buttons auswählen muss (default, primary, Rot). Die Größe der Buttons variiert je nach der Länge des Beschriftungstexts.

Je nachdem wie auffällig ein Button sein soll, wird die Farbe gewählt. Auf Seiten, die viele Buttons enthalten, wird standardmäßig das Mittelgrau #999999 verwendet. Wenn Buttons stark herausstechen und auffallen sollen, wird je nach Bedarf Blau oder Rot eingesetzt.

Das Mask Element "Startbild Übersichtsseiten" wird angewendet, wenn eine neue Seite eingerichtet wird, die ein Startbild enthält. Ein Beispiel dafür ist auf der Typo3-Referenzseite Seitenlayout Standardseite zu sehen.

Teaserboxen können sowohl im Content-Bereich als auch in der Teasergasse rechts neben dem Content-Bereich angewendet werden. Je nachdem, wo sie erscheinen, passen sie ihre Breite automatisch an den jeweiligen Bereich an. Soll eine Teaserbox schmaler dargestellt werden, kann sie in einen Container eingefügt werden, der dann 2- oder mehrspaltig angelegt wird. Über den Container kann dann die Größe der Spalte definiert werden, in die die Teaserbox eingebunden wird. 

Teaserboxen können mit grauem Hintergrund oder nur mit Kontur angelegt werden. Die Wahl der Darstellung orientiert sich daran, wie auffällig die Teaserbox auf der Seite sein soll:

Alle vier Beispiele sind zusätzlich nochmal rechts in die Teasergasse eingefügt, um die Unterschied zu verdeutlichen.

Themen-Boxen sind ein äußerst nützliches Tool, um sog. Doorwaypages (Übersichtsseiten) übersichtlich anzulegen. Sie können je nach Bedarf 1- bis 4-spaltig angelegt werden und passen sich automatisch der vordefinierten Content-Breite an. Themenboxen enthalten immer ein kleines Bild oben, einen kurzen Infotext und einen weiterführenden Button.

In der Regel empfiehlt es sich, eine Doorwaypage ohne Teasergasse rechts zu definieren, sodass die Container dann auch die komplette Seitenbreite einnehmen können. Es gibt aber auch Seiten, die sehr viel Inhalt bündeln müssen und auf eine Teasergasse rechts angewiesen sind, wie z. B. die Seite der Akademie. Auch hier lassen sich Themenboxen so einbinden, dass sie sich in das Gesamtbild der Seite harmonisch einpassen.  

Beispiele:

• Seite Fortbildung für MFA (3-spaltig)
• Seite Weiterbildung (4-spaltig)
• Seite Akademie (2-spaltig mit Teasergasse rechts)

Mit dem Mask Element "Video-Content" können Videos nur aus Youtube oder solche, die in Typo3 hochgeladen wurden, eingebunden werden. Die Videos auf www.laekh.de werden alle ausschließlich in Youtube veröffentlicht und dann in über dieses Mask Element in die Seiten eingebunden. Es kann im Mask Element eingestellt werden, ob das Video sich automatisch oder erst nach Anklicken öffnen soll (Autoplay).

Zitatboxen wurden ursprünglich für die Darstellung auf den neuen Seiten MFA - Beruf mit Zukunft - Stimmen aus der Praxis erstellt, könnten aber auch auf anderen Seiten Anwendung finden. Sie wurden im CSS so definiert, dass sie für die Darstellung auf der gesamten Seitenbreite optimiert sind. Wenn sie auf anderen Seiten in einem Seitenlayout mit Teasergasse verwendet werden sollen, muss Schaffrath hier nochmal die Gestaltung anpassen, wie folgende Beispiele zeigen:

Es ist bereits im CSS so voreingestellt, dass die Ausrichtung links automatisch einen Zitatkasten mit weißem Hintergrund hat und die Ausrichtung rechts automatisch mit einem grauen Hintergrund hinterlegt ist. Diese Hintergründe können wir händisch nicht anpassen. 

Es ist aber möglich, den Ring um das Foto in einer anderen Farbe einzustellen: