Anleitung

Hero-Image

Das Hero-Image ist ein zentrales Designelement auf Übersichtsseiten, das den ersten Eindruck der Webseite prägt. Es zieht die Aufmerksamkeit der Webseite-Besucher*innen auf sich und soll die Hauptbotschaft der Seite unterstreichen. Im Backend von RUB-Web lässt sich das neue Hero-Image mit verschiedenen Optionen anpassen, um es optimal in Szene zu setzen.

Direkt zu:

Was ist das Hero-Image?

Das Hero-Image (Helden-Banner) ist ein großes, auffälliges Bild, das die Leser*innen als Erstes sehen, wenn sie eine Webseite besuchen. Es befindet sich prominent zwischen der blauen Navigationsleiste und dem Inhaltsbereich. Das Element steht für die Verwendung auf Übersichtsseiten zur Verfügung.

Das Hero-Image erfüllt ästhetische und funktionale Zwecke auf Webseiten:

Aufmerksamkeit erzeugen: Es zieht sofort die Blicke der Leser*innen auf sich und sorgt für einen starken ersten Eindruck.
Botschaft vermitteln: Das Bild unterstützt dabei, die zentrale Aussage oder das Hauptthema der Seite schnell und effektiv zu kommunizieren.
Emotionale Verbindung herstellen: Ein gut gewähltes Hero-Image kann Emotionen wecken und die Besucher*innen der Webseite in die gewünschte Stimmung versetzen.
Nutzerführung: In Kombination mit einem Call-to-Action-Button leitet es die Besucher*innen der Webseite gezielt zu einer bestimmten Handlung.
Markenidentität stärken: Es hilft dabei, die Werte und den Stil der eigenen Marke visuell zu transportieren und so die Markenidentität zu festigen.

Hero-Image auf Übersichtsseiten einbinden

Im Drupal-Backend findet ihr das neue Element „Helden-Banner“ beziehungsweise „Hero-Image“ auf Übersichtsseiten unter dem neuen Reiter „Header“.

Screenshot für die Anleitung zum Hero-Image 1-1

Screenshot: Neuer Reiter "Header" im Drupal-Backend

Unter Bearbeiten > Media könnt ihr das gewünschte Bild für das Hero-Image auswählen oder es direkt dort in RUB-Web hochladen. Das funktioniert exakt genauso, wie wenn ihr andere Bilder und Grafiken als Mediendateien in RUB-Web hochladet und einbindet.

Die folgenden optionalen Funktionen stehen zur Verfügung. Vor einer Veröffentlichung könnt ihr natürlich verschiedene Optionen ausprobieren.

Bildhöhe bestimmen

Über das Drop-Down-Menü „Height size“ könnt ihr die Höhe des Hero-Images auswählen. Zur Verfügung stehen vier Optionen: small, medium, large, full screen.

Unser Tipp

Verwendet die Bildhöhen small, medium oder large, damit die Besucher*innen eurer Webseite direkt das komplette Bild sehen können, ohne dass sie dafür nach unten scrollen müssen.
Wir empfehlen die Verwendung von full screen nicht, da die verwendeten Bilder für diese Bildhöhe deutlich größer sein müssen als die Bilder, mit denen wir bislang in RUB-Web arbeiten.

Screenshot für die Anleitung des Hero-Images 2

Screenshot: Drupal-Backend, Hero-Image, Height size einstellen

Optionale Textbox

Optional kann eine Textbox eingefügt werden, die über dem Hero-Bild erscheint und die in Farbe und Positionierung noch weiter angepasst werden kann; auch eine Verlinkung ist möglich.

Screenshot für die Anleitung zum Hero-Image 3-1

Screenshot: Drupal Backend, Hero-Image, optionale Textbox

Klickt auf das Bild, um es zu vergrößern.

Show Box: Wenn ihr die Checkbox anwählt, wird über dem Bild eine Textbox angezeigt. Wenn ihr die Checkbox nicht anwählt, wird über dem Bild keine Textbox angezeigt.
Position: Ihr könnt auswählen, ob die Textbox links („left“), mittig („center“) oder rechts („right“) platziert werden soll.
Background Color: Ihr könnt auswählen, ob die Hintergrundfarbe der Textbox blau („blue“) oder weiß („white“) sein soll.
Transparent: Wenn ihr die Checkbox anwählt, wird die Textbox transparent angezeigt, sodass das darunterliegende Bild durchscheint. Wenn ihr die Checkbox nicht anwählt, wird die Textbox nicht transparent angezeigt.

Unsere Tipps

Wir empfehlen die folgenden Einstellungen für eine einheitliche Ansicht im Zentralen Webauftritt:

Position: links („left“)
Background Color: blau („blue“)
Transparent: Checkbox ausgewählt

Die konkrete Positionierung und Gestaltung der Textbox muss aber selbstverständlich auch zu dem ausgewählten Bild passen und auf dieses abgestimmt werden.

Überschrift: Tragt hier optional eine Überschrift für die Textbox ein.
Text: Tragt hier optional einen kurzen Text für die Textbox ein. Wir empfehlen, hier maximal 2 Sätze einzufügen, damit für die Leser*innen alles direkt auf einen Blick erfassbar ist.
Action Button: Fügt hier optional eine URL und einen Linktext ein, um auf eine andere Webseite zu verlinken.

Fokuspunkt am Bild setzen

Ihr habt die Möglichkeit, an eurem ausgewählten Bild einen Fokuspunkt zu setzen, um den Bildausschnitt an eure Wünsche anzupassen und dafür zu sorgen, dass das wichtigste Element des Bildes prominent abgebildet wird.

Sucht dazu im Backend unter Inhalt > Medien euer Bild aus und klickt dort auf „Bearbeiten“. In der Bildvorschau zeigt das kleine weiße Kreuz den aktuellen Fokus an. Dieses Kreuz könnt ihr beliebig versetzen. Nach dem Speichern des Bildes könnt ihr auf euer Webseite prüfen, wie sich der Bildausschnitt verändert hat. Auch hier könnt ihr natürlich verschiedene Fokuspunkte ausprobieren, um einen Eindruck für den besten Bildausschnitt zu erhalten.

Unser Tipp

Falls das Bild, das ihr für das Hero-Image verwenden möchtet, bereits im Backend von RUB-Web hochgeladen wurde, empfehlen wir euch, es dennoch erneut hochzuladen – zum Beispiel mit dem Zusatz „Hero“ im Titel.
Auf diese Weise könnt ihr sicherstellen, dass der Fokuspunkt nur für das Hero-Element auf eurer Seite eingestellt wird und nicht für andere Webseiten, die eventuell das gleiche Bild nutzen.

Mobile Ansicht

Das Hero-Image ist responsiv. Die mobile Ansicht zeigt das Hero-Image – wie alle anderen Bilder in RUB-Web – stets im Original-Format, unabhängig von der im Backend gewählten Bildhöhe. Die optionale Textbox rutscht in der mobilen Ansicht unter das Bild, damit sowohl Bild als auch Textbox komplett sicht- und wahrnehmbar sind.

Screenshot für die Anleitung zum Hero-Image 4

Screenshot: Mobile Ansicht Hero-Image im Frontend

Weitere Tipps

Fotos und Grafiken sollten keinen Text im Bild selbst enthalten, da dies nicht barrierefrei wäre. Benötigten Text könnt ihr wie oben beschrieben in die Textbox setzen.
In der englischen Übersetzung könnt ihr die Textbox im Backend mittels DeepL automatisch ins Englische übersetzen. Es ist sogar möglich, in der englischen Version der Seite ein anderes Bild auszuwählen und auch die Textbox anders zu formatieren.

Kontakt

Wir beraten und unterstützen gerne in Bezug auf den optimalen Einsatz des Hero-Images, die Einbindung des Elements in RUB-Web sowie bei der passenden Bildauswahl:

Agentur für Onlinekommunikation:
onlinekommunikation@ruhr-uni-bochum.de

Gegebenenfalls verweisen wir euch an die Agentur für Markenkommunikation zur Erstellung von geeignetem Bild- oder Grafikmaterial.

Neues Element: Hero-Image in Aktion

Zur Ansicht im Frontend

RUB-Web Support

Kontakt & Schulungsunterlagen