weboffice.digital - Dokumentation
Branche Beauty Branche Gastro Branche Handel
PDF

Headerbild

Headerbild

Dieser Bereich erstellt ein großes, eindrucksvolles Kopfbild mit Text und Schaltflächen darüber. Er ist perfekt für den Seiteneinstieg und macht sofort einen starken ersten Eindruck bei deinen Besuchern.

Voraussetzungen

  • Ein hochwertiges Bild für den Hintergrund
  • Texte für Untertitel, Haupttitel und Beschreibung
  • Optional: Text und Link für eine Handlungsaufforderung

Aufbau der Seite

Der Bereich besteht aus:

  • Bildbereich: Das Hauptbild, das neben dem Text angezeigt wird
  • Textbereich: Enthält Untertitel, Haupttitel, Beschreibung und Schaltfläche
  • Flexible Anordnung: Bild kann links oder rechts vom Text stehen
  • Responsive Design: Automatische Anpassung für mobile Geräte

So arbeitest du mit dieser Seite

Bild hinzufügen

  1. Klicke auf "Bild auswählen" oder "Bild hochladen"
  2. Wähle ein aussagekräftiges, hochwertiges Bild aus
  3. Das Bild wird automatisch optimiert und kann angeklickt werden, um es vergrößert anzuzeigen

Texte eingeben

  1. Untertitel (SubTitle): Ein kleiner Text über der Hauptüberschrift
    • Beispiel: "Neu bei uns", "Unser Service", "Willkommen"
  2. Haupttitel (Title): Die große, auffällige Überschrift
    • Beispiel: "Innovative Lösungen für Ihr Unternehmen"
  3. Beschreibungstext (HeroText): Erklärende Details unter der Überschrift
    • Beispiel: "Wir entwickeln maßgeschneiderte Software, die Ihre Geschäftsprozesse optimiert."

Schaltfläche konfigurieren

  1. Schaltflächentext (ButtonText): Der Text auf der Schaltfläche
    • Beispiel: "Mehr erfahren", "Jetzt starten", "Kontakt aufnehmen"
  2. Link (ButtonHref): Wohin die Schaltfläche führen soll
    • Beispiel: "/kontakt", "/leistungen", "https://example.com"
  3. Stil (ButtonStyle): Das Aussehen der Schaltfläche
    • Primary: Auffällige Hauptschaltfläche (meist blau)
    • Secondary: Dezentere Zweitschaltfläche (meist grau)
    • Success: Grüne Schaltfläche für positive Aktionen
    • Danger: Rote Schaltfläche für wichtige Warnungen

Layout anpassen

  1. Seiten tauschen (FlipView): Aktiviere diese Option, um das Bild auf die linke Seite zu verschieben
  2. Text zentrieren (CenterText): Aktiviere diese Option, um den gesamten Text zu zentrieren

Animation hinzufügen

  1. Wähle eine Einblendungsanimation aus dem Auswahlfeld "Animation"
  2. Die Animation wird beim Scrollen zur Seite ausgelöst

Tipps und Hinweise

  • Bildqualität: Verwende hochauflösende Bilder (mindestens 1280px Breite)
  • Bildinhalt: Wähle Bilder, die zu deinem Text passen und deine Botschaft unterstützen
  • Textlänge:
    • Untertitel: 1-3 Wörter
    • Haupttitel: 3-8 Wörter
    • Beschreibung: 1-2 Sätze
  • Schaltfläche: Verwende aktive Verben ("Entdecken", "Starten", "Kontaktieren")
  • Kontrast: Achte darauf, dass der Text gut lesbar ist
  • Mobile Ansicht: Auf Smartphones wird das Bild automatisch über dem Text angezeigt

Verwendungsbeispiele

Startseite:

  • Untertitel: "Willkommen"
  • Titel: "Ihr Partner für digitale Innovation"
  • Text: "Wir bringen Ihre Ideen mit modernster Technologie zum Leben."
  • Schaltfläche: "Projekte ansehen"

Leistungsseite:

  • Untertitel: "Unsere Expertise"
  • Titel: "Maßgeschneiderte Softwarelösungen"
  • Text: "Von der Konzeption bis zur Umsetzung – wir realisieren Ihre Vision."
  • Schaltfläche: "Beratung anfragen"

Verwandte Seiten