Hero Bereich

Hero Area – Der erster Eindruck zählt

Der Hero-Bereich ist das Erste, was Besucher sehen.

Hier entscheidet sich in wenigen Sekunden, ob jemand bleibt oder weiterklickt.

Stil auswählen

Wähle, wie Text & Bild angeordnet werden sollen:

• Zentriert (Text über Bild): Klassisch & aufmerksamkeitsstark
• Text links / Bild rechts: Klar und strukturiert
• Mit Hochformat-Bild: Ideal für Personen oder Details
• Randloses Bild: Moderner, ruhiger Look

Titel & Beschreibung

• Titel: Dein Hauptversprechen oder deine Kernbotschaft – kurz & klar.
  → Wenn du einen bewussten Zeilenumbruch brauchst, schreibe <br> in den Text
• Kurzbeschreibung: Erkläre in 1–2 Sätzen, wer du bist, was du anbietest und warum das für deine Kunden wichtig ist.

Du kannst außerdem die Schriftgröße des Titels anpassen (z. B. wenn du weniger Text hast oder mehr Wirkung willst).

Hintergrund: Bild, Farbe oder Verlauf

Du hast die volle Kontrolle über das Design:

1. Bild hochladen
   1. Querformat passt für alle Stile
   2. Für „Vertikale Weite“ kannst du auch ein Hochformat nutzen
2. Farbfläche statt Bild
   1. Wenn du kein Bild nutzen willst, kannst du einfach eine Hintergrundfarbe einstellen
   2. Optional kannst du mit Textfarbe den Kontrast erhöhen
3. Farbverlauf (Gradient)
   1. Wenn du es besonders modern magst, aktiviere den Verlauf im Hintergrund: Zwei Farben, die elegant ineinander übergehen

Zusätzliche Optionen je nach Stil

• Bei Style 1 kannst du mit "Bild abdunkeln" (Overlay) dein hochgeladenes Bild abdunkeln, damit dein Text besser lesbar ist
• Bei Style 1 kannst du für Mobilgeräte ein eigenes Bild auswählen.
• Bei Style 2, 3 und 4 kannst du das Bild ausblenden, es wird nur der Text angezeigt.

USPs (Alleinstellungsmerkmale)

Wenn du diese Option aktivierst, erscheinen unter deinem Text kleine Haken mit deinen Vorteilen – z. B. „Mobilfreundlich“, „SEO-optimiert“.

Ideal, um auf einen Blick zu zeigen, warum man dich wählen sollte!

Buttons

• Aktionsbutton aktivieren: z. B. „Jetzt Kontakt aufnehmen“
• Zweiten Button aktivieren (optional): z. B. „Mehr erfahren“
• Microcopy unter dem Button (optional): Kurzer Hinweis für Vertrauen, z. B.:
  „Antwort innerhalb von 24 Stunden“

Gib den Button-Text und die Ziel-URL ein (z. B. ein Formular, PDF oder externer Link).

Video als Hintergrund nutzen (optional)

Du kannst statt eines Bildes auch ein Video als Hintergrund anzeigen lassen – das wirkt besonders lebendig und modern. Ideal z. B. für:

• Handwerker bei der Arbeit
• ein schönes Produktvideo
• eine moderne Bewegung im Hintergrund (z. B. Natur, Werkstatt, Animationen)

So funktioniert’s:

1. Lade dein Video auf eine Videoplattform hoch, z. B.:
   1. YouTube → kostenlos, aber mit Logo & Steuerelementen
   2. Vimeo → eleganter & ohne Werbung, kostenlos in der Basisversion
   3. Oder auf deinen eigenen Webspace, wenn vorhanden
2. Kopiere den direkten Videolink – z. B. von Vimeo (z. B. https://vimeo.com/12345678)
3. Füge den Link im Feld „Video-URL“ ein.

Wenn du kein Video einträgst, wird stattdessen automatisch das Bild oder die Farbe als Hintergrund angezeigt.

Vorschau

Über den Vorschau-Button kannst du ganz einfach die Vorschau des Hero-Bereiches sowohl für Desktop, als auch für Mobil anzeigen lassen.

Best Practices

• Nutze echte Bilder oder ein starkes Symbolbild – keine Stock-Bilder mit Wasserzeichen.
• Achte darauf, dass Text gut lesbar bleibt – bei dunklen Bildern eignet sich der Stil „Visueller Kontrast“.
• Verlinke Buttons zu deinen wichtigsten Seiten (z. B. Kontakt, Angebot, Anmeldung).
• Der Hero-Bereich ist dein Aushängeschild. Hier sollte direkt klar werden:
  • Was du anbietest
  • Für wen es gedacht ist
  • Warum du besonders bist
  • Beispiel für Handwerker:
    „Zuverlässiger Sanitär-Notdienst in Stuttgart – rund um die Uhr erreichbar.“