Webkit SeitenelementHeros
Ein Hero bezeichnet ein den Seitentitel begleitendes Bild, das den Seiteninhalt visualisiert und erste Erwartungen weckt.
Hinweise zur Benutzung
- Hero Homepage: Startseite von Webkits, Bildformat 16:9 (1920x1080px, 300dpi)
- Hero Landscape: Landingpage und Themenseite, Bildformat 21:9 (2520x1080px, 300dpi)
- Hero Portrait: Themenseite, Format beliebig, oft 3:4 (750x1000px, 300dpi)
Hero Typen
Abhängig vom Typ der Seite können unterschiedliche Hero-Typen zum Einsatz kommen: Hero Homepage, Hero Landscape und Hero Portrait.
Der Hero Homepage trägt den Titel der Seite innerhalb des auf voller Seitenbreite angezeigten Bildes. Dabei kann der Titel je nach Farbgebung des Bilder in schwarz oder weiß angezeigt werden.
Der am häufigsten verwendete Hero ist der Hero Landscape. Auch hier wird das Bild auf voller Seitenbreite angezeigt, der Titel befindet sich aber darunter und ist deswegen immer schwarz eingefärbt.
Außerdem gibt es den Hero Portrait, ihn kennzeichnet ein links neben dem Bild angezeigter Anlauftext, der zusätzlich zum Titel den Inhalt der Seite in kurzen Worten zusammenfasst.
Hero in Seite einfügen
Alle Heros werden im Bearbeiten-Fenster von Seiten eingefügt. Zwischen Seitentitel und Inhaltesbereich-Bereich befindet sich das ausklappbare Feld Hero Area. Nachdem dort ein Hero Typ ausgewählt wurde, kann das Bild angegeben werden. Dieses wird im Falle von Hero Homepage und Hero Landscape über die ganze Breite der Seite angezeigt. Da im Hero Homepage der Seitentitel innerhalb des Bildes angezeigt wird, gibt es dort die Option, diesen in Weißer Textfarbe anzuzeigen. Der Hero Portrait wiederum zeichnet sich durch ein Bild neben einer kurzen Inhaltlichen Zusammenfassung der Seite aus. Dieser Text wird in zwei Bereichen angegeben: Anlauftext und Weiterer Text. Der Anlauftext sollte dabei aus einem einzigen Absatz bestehen und kurz das Thema der Seite anreißen, er wird in einer höheren Schriftgröße angezeigt. Im Weiteren Text können weitere einleitende Inhalte untergebracht werden, er wird in der normalen Schriftgröße angezeigt.
Im Hero Portrait ist darauf zu achten, dass die Textlänge zum gewählten Bild passt, da der Bildausschnitt flexibel in die Seite eingepasst wird. Das System fokussiert dabei nicht unbedingt den Focal Point, sondern mitunter die Mitte des Bildes, was bei zu kurzem Text zu wenig sinnvollen Ausschnitten führen kann.
