Hero EINS

Übersicht

Der Hero EINS ist ein flexibler und visuell reichhaltiger Hero, der darauf ausgelegt ist, starke erste Eindrücke zu schaffen.
Er unterstützt mehrteilige Überschriften mit verschiedenen Stilen, farbige Schlüsselwörter zur Betonung und Call-to-Action-Buttons, um die Benutzerinteraktion zu leiten.

Felder

Überschrift

Typ: Objekt
Erforderlich: Ja
Zweck: Die Überschrift besteht aus mehreren Teilen, jeder mit seinem eigenen visuellen Stil. Dies ermöglicht es Ihnen, bestimmte Wörter oder Phrasen zu betonen, während die Überschrift lesbar und dynamisch bleibt.

Überschriftsteile

Typ: Array von Objekten
Erforderlich: Ja (mindestens 1)
Zweck: Jeder Teil repräsentiert ein Segment der Überschrift

Jeder Überschriftsteil enthält:

Text

Typ: String
Erforderlich: Ja
Zweck: Textinhalt des Überschriftsteils
Beispiel:
Willkommen bei

Stil

Typ: String
Erforderlich: Ja
Zweck: Visuelles Erscheinungsbild des Textes
Optionen:
- Normal – Standard-Textstil
- Hervorgehoben (Hintergrund) – Text mit farbigem Hintergrund
- Farbiger Text – Farbiger Text ohne Hintergrund

Hintergrundfarbe

Typ: String
Erforderlich: Nein
Zweck: Hintergrundfarbe hinter dem Text
Hinweis: Nur sichtbar, wenn Stil Hervorgehoben (Hintergrund) ist
Optionen:
Grün (Standard), Orange, Lila, Blau, Rot, Rosa, Gelb, Grau, Schwarz

Textfarbe

Typ: String
Erforderlich: Nein
Zweck: Textfarbe auf dem Hintergrund (wenn hervorgehoben) oder Farbe des Textes selbst (wenn farbiger Text)
Hinweis: Sichtbar, wenn Stil Hervorgehoben (Hintergrund) oder Farbiger Text ist
Optionen:
- Hervorgehoben: Schwarz (Standard), Weiß
- Farbiger Text: Grün (Standard), Orange, Lila, Blau, Rot, Rosa, Gelb, Grau, Schwarz

Schlüsselwörter

Typ: Array von Objekten
Erforderlich: Nein
Zweck: Schlüsselwörter erscheinen unter der Überschrift und können jeweils ihre eigene Farbe für zusätzliche Betonung haben (z. B. elektrisch, digital, modern)

Jedes Schlüsselwort enthält:

Schlüsselwort-Text

Typ: String
Erforderlich: Ja
Zweck: Text, der als Schlüsselwort angezeigt wird

Farbe

Typ: String
Erforderlich: Nein
Zweck: Farbe des Schlüsselworts
Optionen:
Grün (Standard), Orange, Lila, Blau, Rot, Rosa, Gelb, Grau, Schwarz

Unterüberschrift

Typ: Text
Erforderlich: Nein
Zweck: Unterstützender Text, der unter der Überschrift angezeigt wird, um Kontext hinzuzufügen oder das Wertversprechen zu erklären

Hintergrundbild

Typ: Bild
Erforderlich: Ja
Zweck: Das Hintergrundbild des Heros
Hinweis: Hotspot-Positionierung ist aktiviert für optimale Zuschneidung und Fokuspunktkontrolle

Call-to-Action-Buttons

Typ: Array von Objekten
Erforderlich: Nein
Zweck: Buttons, die Benutzerinteraktion fördern
Validierungsregeln:
- Maximal ein Primär-Button
- Maximal ein Sekundär-Button
- Alle Button-Felder sind erforderlich

Jeder Button enthält:

Button-Text

Typ: String
Erforderlich: Ja
Zweck: Label, das auf dem Button angezeigt wird

Relativer Link

Typ: String
Erforderlich: Ja
Zweck: Ziel-URL
Format: Muss mit / beginnen
Beispiel:
/speed-courses oder /contact

Button-Rolle

Typ: String
Erforderlich: Ja
Zweck: Visuelle Wichtigkeit des Buttons
Optionen:
- Primary – Haupt-Call-to-Action
- Secondary – Sekundäre Aktion

Verwendungsbeispiel

Typische Konfiguration

Überschriftsteile:
1. “Willkommen bei” – Stil: Normal
2. “modern” – Stil: Hervorgehoben, Hintergrund: Grün, Textfarbe: Schwarz
3. “Erfahrung” – Stil: Normal
Schlüsselwörter:
- innovativ (Grün)
- digital (Blau)
- nachhaltig (Grün)
Unterüberschrift: Entdecken Sie unsere umfassenden Lösungen, die darauf ausgelegt sind, Ihnen zu helfen, Ihre Ziele mit modernster Technologie und Expertenunterstützung zu erreichen.
Hintergrundbild: Ein professionelles markenbezogenes Bild (erforderlich)
Call-to-Action-Buttons:
- Primär: Jetzt anmelden → /registration
- Sekundär: Mehr erfahren → /about-us

Best Practices

Überschrift: Halten Sie sie kurz und wirkungsvoll. Verwenden Sie Hervorhebungen sparsam.
Stilmix: Kombinieren Sie normalen, hervorgehobenen und farbigen Text für visuellen Rhythmus.
Schlüsselwörter: Verwenden Sie 2–4 Schlüsselwörter und halten Sie Farben konsistent mit Ihrer Marke.
Unterüberschrift: Fügen Sie Klarheit hinzu, ohne die Überschrift zu wiederholen.
Buttons: Verwenden Sie klare, handlungsorientierte Sprache.
Hintergrundbild: Wählen Sie hochwertige Bilder, die gut mit Textüberlagerungen funktionieren.
Farbkoordination: Stellen Sie sicher, dass ausreichend Kontrast und Markenkonsistenz vorhanden sind.

Hauptmerkmale

Flexibles Überschriftsystem: Mehrteilige Überschrift mit verschiedenen Stilen
Visuelle Betonung: Hervorgehobene Hintergründe und farbige Textoptionen
Bedingte Felder: Felder erscheinen dynamisch basierend auf ausgewählten Stilen
Farbige Schlüsselwörter: Individuell gefärbte Schlüsselwörter zur Betonung
Button-Validierung: Ein Primär- und ein Sekundär-Button maximal
Hintergrundbild: Erforderliches Hintergrundbild mit Hotspot-Unterstützung
Barrierefreiheit: Klare visuelle Hierarchie und barrierefreies Markup

Wo es verwendet wird

Seiten (page)
Startseiten und Landing Pages

Technische Hinweise

Überschrift wird aus einem Array von gestylten Teilen erstellt
Unterstützte Überschriftstile:
- Normal
- Hervorgehoben (Hintergrund + Textfarbe)
- Farbiger Text
Farboptionen:
- 9 Hintergrundfarben
- 9 Textfarben
Schlüsselwörter sind getrennt von der Überschrift und vollständig anpassbar
Button-Links müssen relative Pfade sein, die mit / beginnen
Alle Button-Felder sind obligatorisch
Verwendet semantisches HTML für Barrierefreiheit
Bedingte Felder erscheinen dynamisch basierend auf ausgewählten Stilen