Hero-Bild bearbeiten

Der Hero-Bild-Block ist ein vielseitiges und wirkungsvolles Element für deine Website. Er kombiniert ein großes, ansprechendes Bild mit Text und einer Aktions-Schaltfläche. Dieser Block eignet sich perfekt als Einstieg für Startseiten, Produktpräsentationen oder wichtige Landingpages und kann flexibel an deine Bedürfnisse angepasst werden.

Voraussetzungen

• Du befindest dich im Website-Editor
• Ein Hero-Bild-Block ist auf deiner Seite eingefügt
• Du hast die Berechtigung, Website-Inhalte zu bearbeiten

Aufbau der Bearbeitungsseite

Die Bearbeitungsseite enthält einen Hauptbereich:

Allgemein

Hier findest du alle Einstellungen für deinen Hero-Bild-Block:

• Volle Breite verwenden: Schalter für die Nutzung der gesamten Bildschirmbreite
• Bild-Editor: Zum Hochladen und Bearbeiten des Hauptbilds
• Symbol: Auswahl eines zusätzlichen Symbols
• Text zentrieren: Schalter zur Zentrierung aller Textinhalte
• Reihenfolge umdrehen: Schalter zum Vertauschen von Bild und Text
• Animation: Auswahlfeld für Einblend-Animationen
• Unter-Überschrift: Kleinere Überschrift über dem Haupttitel
• Titel: Hauptüberschrift des Blocks
• Text: Beschreibungstext mit Markdown-Formatierung
• Button Text: Text für die Aktions-Schaltfläche
• Navigationsziel: URL, zu der die Schaltfläche führt
• Schaltflächen-Stil: Aussehen und Farbe der Schaltfläche

So arbeitest du mit dieser Seite

Layout konfigurieren

1. Aktiviere Volle Breite verwenden, wenn der Block die gesamte Bildschirmbreite nutzen soll
2. Nutze Text zentrieren, um alle Textinhalte mittig auszurichten
3. Aktiviere Reihenfolge umdrehen, um Text und Bild zu vertauschen:
   • Standard: Bild links, Text rechts
   • Umgedreht: Text links, Bild rechts

Bild und Symbol hinzufügen

1. Klicke auf den Bild-Editor, um ein Hauptbild hochzuladen oder zu ändern
2. Wähle ein hochwertiges, thematisch passendes Bild
3. Empfohlene Bildgröße: mindestens 1200x800 Pixel
4. Optional: Wähle ein Symbol aus der umfangreichen Auswahl
5. Das Symbol wird zusätzlich zum Text angezeigt

Textinhalte bearbeiten

1. Unter-Überschrift: Gib eine kleine, einleitende Überschrift ein (z.B. "Willkommen" oder "Neu")
2. Titel: Verfasse die Hauptüberschrift (z.B. "Deine perfekte Lösung")
3. Text: Schreibe einen beschreibenden Text mit Markdown-Formatierung:
   • Erkläre dein Angebot oder deine Dienstleistung
   • Hebe wichtige Punkte hervor
   • Motiviere zu einer Aktion

Aktions-Schaltfläche konfigurieren

1. Button Text: Gib einen aussagekräftigen Text ein (z.B. "Jetzt kaufen", "Mehr erfahren", "Kontakt")
2. Navigationsziel: Gib die URL ein, zu der die Schaltfläche führen soll:
   • Interne Links: /kontakt, /produkte
   • Externe Links: https://example.com
   • E-Mail: mailto:info@beispiel.de
   • Telefon: tel:+4930123456
3. Schaltflächen-Stil: Wähle Farbe und Aussehen der Schaltfläche

Animation einrichten

1. Wähle eine Animation aus der Auswahlliste
2. Verfügbare Animationen umfassen verschiedene Einblend-Effekte
3. Wähle "Keine Animation" für sofortige Anzeige
4. Die Animation wird ausgelöst, wenn der Besucher zum Block scrollt

Markdown-Formatierung nutzen

Der Beschreibungstext unterstützt Markdown-Formatierung:

Textformatierung:

**Fettgedruckter Text**
*Kursiver Text*
~~Durchgestrichener Text~~

Listen:

- Erster Vorteil
- Zweiter Vorteil
- Dritter Vorteil

Links:

[Mehr Informationen](/details)

Tipps und Hinweise

• Hochwertige Bilder: Verwende professionelle, scharfe Bilder mit hoher Auflösung
• Klare Botschaft: Formuliere Titel und Text prägnant und verständlich
• Starke Call-to-Action: Nutze aktive Verben für die Schaltfläche ("Kaufen", "Entdecken", "Starten")
• Konsistente Farben: Wähle Schaltflächen-Farben, die zu deinem Design passen
• Mobile Optimierung: Der Block passt sich automatisch an verschiedene Bildschirmgrößen an
• Ladezeiten: Komprimiere große Bilder für bessere Performance
• Thematischer Bezug: Stelle sicher, dass Bild und Text thematisch zusammenpassen

Layout-Variationen

Standard-Layout:

• Bild auf der linken Seite
• Text auf der rechten Seite
• Gut für Produktpräsentationen

Umgekehrtes Layout:

• Text auf der linken Seite
• Bild auf der rechten Seite
• Gut für Dienstleistungen oder Unternehmenspräsentationen

Zentriertes Layout:

• Text zentriert unter oder über dem Bild
• Symmetrische, ausgewogene Darstellung

Verwendungszwecke

• Startseiten-Hero: Erster Eindruck für Website-Besucher
• Produktpräsentation: Vorstellung neuer Produkte oder Services
• Landingpages: Fokussierte Präsentation für Kampagnen
• Über-uns-Seiten: Vorstellung des Unternehmens oder Teams

Verwandte Seiten

• Hero-Bild-Karussell bearbeiten
• Zentrierter Hero bearbeiten
• Features-Block bearbeiten