Hero Bereich

Hero Area – Der erster Eindruck zählt

Der Hero-Bereich ist das Erste, was Besucher auf deiner Webseite sehen. Hier entscheidest du, welchen ersten Eindruck deine Seite macht – mit einem starken Bild, einem Titel, einer kurzen Beschreibung und einem oder zwei Buttons.

Stil auswählen

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

• Zentriert: Klassisch & ausgewogen
• Visueller Kontrast: Text hebt sich vom Bild ab
• Vertikale Weite: Text & Bild stehen nebeneinander – ideal für hochformatige Bilder

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

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“

Gib bei beiden den Button-Text und die Ziel-URL ein (z. B. ein Formular, PDF oder externer Link) —> Mehr Infos zu URLs

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.“