Header, Störer & Footer

Zur grafischen Gestaltung des Header-Bereichs von Hauptseiten (Weltkugeln im Backend) steht ein eigenes Element in verschiedenen Ausprägungen zur Verfügung. Es gibt eine Variante mit vollflächigem Header und großem Bild (Standard) und eine mit weniger hohem Header und kleinerem Bild (alternatives Layout). Außerdem kann die Textbox links, rechts oder zentral platziert und mit einem hellen oder dunklen Farbschema dargestellt werden. Sie verfügt prinzipiell über eine Headline, einen Subtext und einen Button. Diese können je nach Bedarf verwendet oder ausgeblendet werden. Im Hintergrund kann sowohl ein Bild als auch ein Video eingebunden werden. Hier einige Layout-Varianten (Screenshots):

• Standard-Layout mit Bild, Textbox links, heller Hintergrund, ohne Link
• Alternatives Layout mit Bild, Textbox links, heller Hintergrund, ohne Link
• Standard-Layout mit Bild, Textbox rechts, dunkler Hintergrund, mit Link
• Alternatives Layout mit Bild, Textbox rechts, dunkler Hintergrund, mit Link
• Standard-Layout mit Video, Textbox links, heller Hintergrund, ohne Link
• Alternatives Layout mit Video, Textbox rechts, dunkler Hintergrund, mit Link

Hinweise: Die Einstellungen für den Header sind im Backend unter den Seiteneigenschaften der Hauptseiten auswählbar. Die Höhe der Textbox richtet sich nach dem Inhalt, der eingegeben wird. Bei der mobilen Variante wird das Video-/Bildformat angepasst. Die Textbox hat mobil keine Transparenz mehr und wird direkt unter dem Bild platziert. Wird ein Video verwendet, wird automatisch ein “Pause/Play-Button” eingeblendet. Autoplay für Videos lässt sich manuell aktivieren.

Anleitung Header Hauptseiten

Pixelmaße für Headerfotos

Auf den Inhaltsseiten gibt es ebenfalls die Möglichkeit, ein großes Headerbild zu platzieren. Dieses kann optional mit einem farbigen Schatten hinterlegt werden. Hier zwei Layout-Beispiele (Screenshots):

• Header Contentseite, ohne Schatten
• Header Contentseite, blauer Schatten

Hinweise: Für den Schatten stehen insgesamt sieben Farben des Corporate Design zur Verfügung (Universitätsblau, Rot, Orange, Gelb, Hellgrün, Mintgrün und Lila). 

Anleitung Header Contentseiten

Um Nutzer*innen auf besonders wichtige aktuelle Inhalte, Themen, Events, etc. hinzuweisen, besteht die Möglichkeit, einen Störer im linken oberen Bereich des Headers einer Hauptseite (Weltkugel im Backend) anzuzeigen. Das ist sowohl auf Seiten mit großflächigem Headerbereich als auch auf Seiten mit kleinerem, alternativem Header-Layout möglich. Der Störer beinhaltet einen Titel, einen Text und einen Link.

• Störer in Header mit Standard-Layout
• Störer in Header mit alternativem Layout

Hinweise: Mobil wird der Störer aufklappbar unter der Navigation angezeigt. Wenn Benutzer*innen den Störer schließen, bleibt er für 24 Stunden geschlossen.

Anleitung Störer

Im Footer sind neben der Adresse der Universität, der Fakultät, des Instituts, der Forschungsgruppe, etc. auch die Social Media Icons platziert. Außerdem befinden sich dort verschiedene Links für einen schnellen Zugriff auf bestimmte Bereiche der Website, andere Websites oder Services. Ein Link kann zudem optional auch in Button-Form angezeigt werden. Ganz unten im Footer befindet sich das Copyright sowie Links zur Sitemap, der Datenschutzerkärung, der Barrierefreiheit und dem Impressum. Hier zwei Varianten (Screenshots):

• Footer ohne Button-Link
• Footer mit Button-Link

Hinweise: Die erste Link-Spalte mit den meistbesuchten Services wird universitätsweit standardmäßig gleich ausgespielt, die restlichen maximal 16 Linkplätze in den Spalten daneben können individuell gesetzt werden. Mobil werden die Bereiche Services und Links als Akkordeon dargestellt.

Anleitung Footer