Heldenbereich mit Inhalten gestalten

Du erstellst einen Heldenbereich (Hero-Section) für deine Website – einen großflächigen Einstiegsbereich oben auf der Seite mit Titel, Text, Schaltflächen und optionalen Zusatzelementen. Weboffice bietet zwei Varianten: einen zentrierten Bereich oder einen geteilten Bereich mit Bild.

Voraussetzungen

Du hast eine Seite angelegt und befindest dich im Bearbeitungsmodus des Heldenbereichs.

So gehst du vor

Zentrale Einstellungen

1. Trage eine Bezeichnung (für Verlinkung) ein – diese wird als Ankerpunkt in der Seite verwendet und ist normalerweise nicht sichtbar. Du kannst sie später mit dieser Bezeichnung direkt anspringen.

2. Wähle eine Farbvariante. Das Auswahlfeld zeigt dir die verfügbaren Farbschemas für diesen Bereich.

3. Schalte iPad-Mock anzeigen ein, wenn du zusätzlich zu deinem Text ein Bild im iPad-Design im Heldenbereich zeigen möchtest. Wenn du das aktivierst, kannst du später ein Bild hochladen.

Texte hinzufügen

4. Befülle die Textfelder unter „Text":
   • Eyebrow: Ein kurzer Text über der Überschrift, oft eine Kategorie oder ein Schlagwort
   • Titel: Die Hauptüberschrift. Du kannst Teile des Textes mit Sternchen *kursiv* formatieren – diese Worte werden in einer anderen Schriftart (Serif) hervorgehoben
   • Beschreibung: Ein längerer Fließtext, der den Titel erklärt

Schaltflächen einrichten

5. Unter „Schaltflächen" trägst du die Labels und Ziele deiner Schaltflächen ein:
   • Für die primäre (Haupt-)Schaltfläche: Text eingeben, Farbe wählen (bestimmt das Aussehen der Schaltfläche), dann das Navigationsziel über „Primär Ziel" setzen – entweder eine interne Seite, eine Ankerstelle auf dieser Seite oder eine externe URL
   • Für die sekundäre (Zusatz-)Schaltfläche: Text und Navigationsziel eintragen (optional)

Zusatzelemente (nur zentrierter Bereich)

Wenn du den zentrierten Heldenbereich verwendest:

6. Füge Schwebende Kennzahl-Chips hinzu – kleine Infoboxen mit Symbol, Titel und Untertitel, die visuell hervorgehoben werden:

   • Klicke Chip hinzufügen
   • Wähle ein Symbol aus – dieses wird neben dem Text angezeigt
   • Trage Titel und Untertitel ein
   • Um die Reihenfolge zu ändern, nutze die Pfeile-Schaltflächen; um einen Chip zu löschen, klicke das Mülleimer-Symbol
   • Wiederhole dies für weitere Chips

7. Bild im iPad-Design: Wenn du „iPad-Mock anzeigen" aktiviert hast, lade hier ein Bild hoch, das auf einem iPad-Gerät angezeigt werden soll.

8. Unter Trust-Leiste kannst du eine Liste mit Vertrauensmerkmalen (z. B. Auszeichnungen, Kundenlogos, Zertifikate) hinzufügen:

   • Klicke Eintrag hinzufügen
   • Trage den Text ein
   • Wiederhole dies für alle Einträge; zum Löschen nutze das Mülleimer-Symbol

Zusatzelemente (nur geteilter Bereich)

Wenn du den geteilten Heldenbereich verwendest:

6. Aktiviere Reihenfolge umdrehen, um die Position von Text und Bild zu tauschen.

7. Der Eyebrow kann hier ein Symbol tragen – wähle es aus, bevor du den Text eingibst.

8. Unter „Schaltflächen" konfigurierst du Primär und Sekundär jeweils mit:

   • Text
   • Buttonstil (bestimmt Farbe und Größe)
   • Navigationsziel

9. Vertrauens-Chips funktionieren wie im zentrierten Bereich (Symbol und Bezeichnung pro Eintrag):

   • Klicke Eintrag hinzufügen
   • Wähle ein Symbol aus
   • Trage eine Bezeichnung ein
   • Um die Reihenfolge zu ändern, nutze die Pfeile-Schaltflächen; zum Löschen klicke das Mülleimer-Symbol

10. Lade ein Bild hoch – dieses wird neben oder über dem Text angezeigt. Du kannst einstellen, wie das Bild in den verfügbaren Platz passt.

11. Der Kalender-Mock Inhalt zeigt einen Terminkalender an – befülle ihn mit Beispielterminen, die auf der Website angezeigt werden sollen.

12. Der Schwebende Hinweis-Chip ist eine Infobox mit Symbol, Titel und Untertitel:

    • Wähle ein Symbol
    • Trage Titel und Untertitel ein
    • Stelle die Drehung in Grad ein (von –15 bis +15), um den Chip leicht zu drehen
    • Aktiviere Schweben animieren, damit der Chip sanft auf- und abbewegt wird

Aufbau der Eingabefelder

Die Bearbeitung läuft in mehreren Abschnitten ab:

• Allgemein: Beschriftung, Farbschema und grundlegende Optionen
• Text: Eyebrow, Titel und Beschreibung (Markdown möglich)
• Schaltflächen: Texte, Farben und Ziele für beide Schaltflächen
• Schwebende Kennzahl-Chips / Vertrauens-Chips (zentriert) oder Vertrauens-Chips (geteilt): Sammlungen von Infoboxen mit Symbolen und Text
• Bild im iPad-Design (nur zentriert): Bild für die iPad-Ansicht
• Trust-Leiste (nur zentriert): Einfache Textliste
• Bild (nur geteilt): Produktbild oder Illustration
• Kalender-Mock Inhalt (nur geteilt): Terminübersicht
• Schwebender Hinweis-Chip (nur geteilt): Einzelne Infobox mit Animation

Was danach passiert

Deine Änderungen werden sofort gespeichert. Der Heldenbereich erscheint auf der Website an der Position, an der du ihn auf einer Seite eingerichtet hast.

Besucher können über die Schaltflächen zu anderen Seiten, externen Links oder Ankerpunkten auf der gleichen Seite navigieren.

Tipps und Hinweise

• Markdown in Texten: In Titel, Eyebrow und Beschreibung kannst du Text mit Sternchen formatieren (*text* für Hervorhebung). Im zentrierten Bereich funktioniert dies auch in Chip-Titeln.
• Chips in Reihenfolge bringen: Die Pfeile-Schaltflächen bewegen Chips schrittweise nach oben oder unten. Du kannst sie nicht springen lassen.
• Trust-Leiste vs. Chips: Die Trust-Leiste (nur zentriert) ist eine einfache Textliste (z. B. für Kundenzahlen); Chips sind visuell aufwändiger mit Symbolen und mehreren Textzeilen.
• Symbol-Wahl: Beim Klick auf ein Feld für ein Symbol öffnet sich eine Übersicht mit hunderten Symbolen – nutze die Suchfunktion, um schnell das richtige zu finden.