Bildgrößen

Empfohlene Bildgrößen für folgende Elemente
Generell gilt: Je Größer/hochauflösender das Bild, desto besser. (Dabei darauf achten, das die Datei nicht zu groß ist)

Hero-Bühne ohne Inhalt:

Mindestens: 1920x1080px (HD) Besser: 3840x2160px (Ultra HD)

Wird eine Hero-Bühne bzw. eine Hero-Sektion OHNE Inhalt (Text, Tabelle, Bilder, etc.) angelegt, muss das Bild für die Sektion mit dem "Bild-Modul" eingesetzt werden. Außerdem muss das Raster so eingestellt werden, das es nicht im Container eingebettet ist damit es auf voller Breite angezeigt wird. 

Das Bild sollte mindestens eine HD Qualität haben (1920x1080px). Besser wäre es aber, wenn eine noch höhere Auflösung hat, da das Bild auf diese Weise auch auf breiteren bzw. hochauflösenderen Geräten bis zum Bildschirmrand geht. (Im Beispiel 3840x2160px Ultra HD)

Im Beispiel unten wurde das Bild nachträglich oben und unten noch zugeschnitten. Das kann jederzeit über den Inspektor (rechte Seite) angepasst werden.

Hero-Bühne mit Inhalt:

Mindestens: 1920x1080px (HD) Besser: 3840x2160px (Ultra HD)

Bei einer Bühne MIT Inhalt muss nur ein einfaches Raster erstellt- und Hintergrund gewählt werden. Wichtig hierbei zu wissen ist, dass sich die Höhe des Bildes nach dem Content richtet, der sich im Raster befindet.

Wählt man ein Bild als Hintergrund aus, wird es, unabhängig von der Auflösung, immer auf die volle Breite gezogen. Das hat den Vorteil, das es auf allen Geräten bis zum Rand angezeigt wird. Dadurch kann die Qualität des Bildes aber bei breiten Geräten nachlassen. Daher gilt:
Das Bild sollte mindestens eine HD Qualität haben (1920x1080px). Besser wäre es aber auch hier, wenn eine noch höhere Auflösung hat. (3840x2160px Ultra H

Beispielüberschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Button-Text

Content-Teaser:

Auflösung/Größe: 1920x1080px (HD)

Beim Content-Teaser-Element wird das Bild auf die Größe des Teaser-Elements zugeschnitten. Unten im Beispiel sind zwei Teaser Elemente mit einer unterschiedlichen Größe gepflegt. Das Bild in den Teasern ist aber dasselbe.

Bei der Bildwahl sollte daher darauf geachtet werden, dass sich der wichtige Inhalt des Bildes in der Mitte befindet. Hier reicht eine Auflösung von 1920x1080px völlig aus.

Veranstaltungen:

Auflösung/Größe: 1920x1080px (HD)

Bilder für die Veranstaltungen werden immer auf der entsprechenden Detailseite gepflegt. Im Teaser wird das Bild dann automatisch ausgegeben und zugeschnitten.

Hier reicht eine Auflösung von 1920x1080px aus.

News:

Auflösung/Größe: 1920x1080px (HD)

Bilder für die News werden immer auf der entsprechenden Detailseite gepflegt. Im Teaser wird das Bild dann automatisch ausgegeben und zugeschnitten.

Unabhängig davon, ob die News als Karte oder Tile angezeigt wird, sollte in hier eine Auflösung von 1920x1080px ausreichen.

Highlight-Section:

Auflösung/Größe: 1920x1080px (HD)

Das Bild wird als Hintergrund gepflegt. Mit dem Schnitt wird bestimmt, welches Format das Bild haben soll. Im Beispiel unten ist das Bild links und rechts etwas geschnitten worden, damit es besser zum roten Inhalt passt.

Hier reicht eine Auflösung von 1920x1080px.

Beispiel Section

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Button-Text