Ich bin ein Hero ohne Bild

Hero‑Elemente sind große, einprägsame Bereiche am Seitenanfang, die dazu dienen, die zentrale Botschaft, ein Thema oder eine Kampagne besonders prominent zu präsentieren. Sie sind häufig das erste, was Besucher sehen – und markieren dadurch den visuellen Einstieg.

• „Hero nebeneinander“ und „Hero übereinander“ (Hero Bild + Text)
  • Kombiniert Bild und Text für einen klaren, visuellen Einstieg
  • Nicht geeignet für lange Fließtexte, Detailinformationen oder wiederkehrende Inhalte
• Hero Panorama  (bis zu 2 Bilder)
  • Unterteilt in zwei Bilder für eine bildstarke Inszenierung
  • Nicht geeignet, wenn nur ein einfaches Bild oder reiner Text erforderlich ist
• Hero-Bilderslider (bis zu 3 große Bilder)
  • Zeigt mehrere Key-Visuals oder Botschaften nacheinander im Wechsel
  • Nicht geeignet, wenn eine einzelne, klare Botschaft im Fokus steht – dafür lieber HeroImageText
• Hero ohne Bilder
  • Setzt auf einen textlichen Einstieg, ohne visuellen Ballast
  • Besonders sinnvoll bei inhaltlich orientierten Seiten, auf denen der Fokus auf klaren Informationen liegt
  • Nicht geeignet, wenn visuelle Wirkung (z. B. Bilder) entscheidend ist

Je nach Hero‑Variante sind verschiedene Felder erforderlich, aber üblicherweise gehören dazu:

• Überschrift (optional empfohlen) mit Header Class (z. B. H1–H4, versteckt oder nur Screenreader)
• Preline (z. B. Dachzeile zur Kategorisierung)
• Kurzbeschreibung (Beschreibungstext)
• Bilder, ggf. zwei zur Bildung eines Panorama-Plots, mit Alternativtext (außer dekorativ)
• Hintergrundfarbe, Autoplay-Intervall (z. B. 3, 5 oder 10 Sekunden) und zufälliger Startpunkt bei Slidern
• Social‑Media‑Bar aktivieren, falls gewünscht

Die Bildvorgaben variieren je nach Hero‑Element, und nicht jede Variante unterstützt Bildinhalte. Generell sollte aber darauf geachtet werden, dass die Bilder fürs Web komprimiert und optimiert werden müssen.

Erlaubte Formate (bei allen Hero-Elementen): JPG, JPEG, PNG, GIF, SVG, PDF (weitere wie BMP, TIFF technisch möglich, jedoch nicht empfohlen)

• Hero Bild + Text
  • Mindestgröße: 800 × 600 Pixel
  • Für Highlight-Darstellung: 1920 × 700 Pixel
• Hero Panorama
  • Mindestgröße: 1920 × 700 Pixel pro Bild
• Hero-Bilderslider (bis zu 3 große Bilder)
  • Empfohlene Größe: 1920 × 700 Pixel pro Bild
• Hero ohne Bilder
  • Keine Bilder vorgesehen

Die Texte variieren je nach Hero‑Element und nicht jede Variante unterstützt Textinhalte. Generell sollte aber darauf geachtet werden, dass die Texte gut lesbar (Absätze, Formatierung, …) und in einem angemessenen Ausmaß angelegt sind.

• Hero Bild + Text
  • Überschrift: max. 60 Zeichen
  • Preline (optional): max. 30 Zeichen, ausschließlich Großbuchstaben
  • Beschreibungstext: max. 400 Zeichen, in kurzen Absätzen formuliert
• Hero Panorama
  • keine Textinhalte vorgesehen
• Hero-Bilderslider
  • keine Textinhalte vorgesehen
• Hero ohne Bild
  • Preline: max. 30 Zeichen, ausschließlich Großbuchstaben
  • Überschrift: max. 60 Zeichen

Das Hero-Element wird außerhalb des normalen Rasters angelegt und bildet die visuelle Einleitung einer Seite. Dadurch hebt es sich bewusst von der Standardstruktur ab.

Die mobilen Darstellungen der Hero‑Elemente weichen je nach verwendeter Variante voneinander ab.

Texte und Buttons werden mobil untereinander angeordnet (vertikale Stapelung).

• Überschriften werden automatisch umgebrochen, um die Lesbarkeit auf kleinen Displays zu sichern – deshalb prägnante Formulierungen wählen
• Texte und Buttons werden auf Mobilgeräten untereinander (vertikale Stapelung) angezeigt
• Bilder werden responsiv zugeschnitten – dabei liegt der Fokus zentral, damit wichtige Motive trotz Beschnitt erkennbar bleiben (Motive mit zentralem Fokus wählen)
• Die Social Media Bar erscheint unterhalb des Textblocks, nicht daneben

• Aussagekräftige Überschrift mit klarer Botschaft wählen.
• Alt-Text für Bilder pflegen (außer bei rein dekorativem Einsatz), prägnant, kontextbezogen und unter ~125 Zeichen sein. 
• Bilder in ausreichender Auflösung bereitstellen – ideal sind hochqualitative, wide‑format Hero-Bilder (z. B. 16:9 oder 21:9 im Desktop‑Format) 
• Beschreibungstext als kurze, verständliche Absätze oder Teaser formulieren.
• Nur hochwertige, bildstarke Motive verwenden, mit zentralem Bildfokus, der auch bei mobilem Zuschneiden erhalten bleibt 
• Einheitliche Bildsprache im Slider verwenden.
• Charakterbeschränkungen für Überschrift und Preline einhalten, damit sie auf allen Geräten gut lesbar bleiben.
• Social-Media-Bar nur aktivieren, wenn relevante Kanäle verknüpft sind.