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

Headerbild und Karussell einrichten

Headerbild und Karussell einrichten

Ein Headerbild ist ein großer, ansprechender Bildbereich oben auf einer Seite – oft mit Text, Symbol und einer Aktionsschaltfläche. Du kannst entweder ein einzelnes Headerbild anzeigen oder mehrere Bilder als Karussell, das der Besucher durchblättern kann.

Voraussetzungen

Es gibt keine besonderen Voraussetzungen. Du benötigst nur Zugriff auf die Website-Verwaltung und solltest bereits wissen, wie du einen Block auf einer Seite einrichtest.

So gehst du vor

Einzelnes Headerbild

  1. Öffne die Einstellungen des Headerbildes. Du landest im Bereich „Allgemein".

  2. Gib eine Bezeichnung ein im Feld „Bezeichnung (für Verlinkung)". Diese brauchst du später, wenn du den Bereich von einer anderen Stelle aus verlinken möchtest – zum Beispiel wenn du ein Navigationsmenü einrichtest, das direkt zu diesem Headerbild springt.

  3. Lade das Bild. Im linken Bereich findest du die Bildauswahl. Klicke dort, um ein Bild hochzuladen oder aus deinen vorhandenen Bildern zu wählen. Du kannst auch einstellen, wie das Bild dargestellt wird (zum Beispiel „Cover" oder „Contain"), damit es perfekt in den verfügbaren Platz passt.

  4. Wähle ein Symbol (optional). Neben dem Bild kannst du ein Icon hinzufügen. Klicke auf das Feld für die Symbolauswahl und suche dir ein passendes Symbol aus der Bibliothek.

  5. Stelle die Textausrichtung ein:

    • Setze das Häkchen bei „Text zentrieren", wenn der Text mittig über dem Bild stehen soll.
    • Mit „Reihenfolge umdrehen" tauschst du die Position von Bild und Text, falls du das bevorzugst.
  6. Fülle die Textfelder aus:

    • Unter-Überschrift: Ein kleinerer Text über der Hauptüberschrift (z. B. eine Kategorie oder ein Teaser).
    • Titel: Die Hauptüberschrift deines Headerbereichs.
    • Text: Der Fließtext, der mehr Details erklärt. Du kannst hier auch Formatierungen wie Fettdruck oder Links nutzen.
  7. Richte eine Aktionsschaltfläche ein (optional). Falls du möchtest, dass Besucher von hier aus handeln können:

    • Trage den Text ein, der auf der Schaltfläche steht (z. B. „Jetzt buchen" oder „Mehr erfahren").
    • Wähle den Schaltflächenstil – zum Beispiel „Primär" (auffällig) oder „Sekundär" (dezenter).
    • Setze das Navigationsziel: Wohin soll die Schaltfläche führen? Du kannst eine andere Seite deiner Website, eine externe URL oder eine Ankerstelle (wie die oben definierte Bezeichnung) wählen.
  8. Speichere deine Änderungen.

Headerbild-Karussell

Ein Karussell zeigt mehrere Headerbilder nacheinander an, die Besucher durchblättern oder die automatisch wechseln können.

  1. Öffne die Einstellungen des Karussells. Du siehst zwei Bereiche: „Allgemein" (meist leer) und „Aktionen".

  2. Gib die Überschriften und Beschreibung ein im Bereich „Aktionen":

    • Überschrift: Die Hauptüberschrift, die über allen Bildern steht.
    • Kleine Überschrift: Ein Teaser oder eine Kategorie.
    • Beschreibung: Ein längerer erklärende Text.
  3. Füge Bilder hinzu. Am unteren Ende des Bereichs „Aktionen" findest du die Schaltfläche „Bild hinzufügen". Klicke darauf, um das erste Bild zu ergänzen. Für jedes Bild entsteht ein neuer Abschnitt.

  4. Bearbeite jedes Bild:

    • Klicke auf das Bild-Feld, um ein Bild hochzuladen oder auszuwählen.
    • Mit den Schaltflächen neben dem Bild-Feld kannst du die Bilder sortieren und verwalten:
      • Nach oben verschieben: Verschiebt das Bild eine Position nach oben in der Reihenfolge.
      • Nach unten verschieben: Verschiebt das Bild eine Position nach unten.
      • Kopieren: Erstellt eine Kopie des Bildes mit den gleichen Einstellungen (praktisch, wenn mehrere Bilder ähnlich aussehen sollen).
      • Entfernen: Löscht das Bild aus dem Karussell.
  5. Füge weitere Bilder hinzu, indem du wieder „Bild hinzufügen" klickst.

  6. Speichere deine Änderungen.

Aufbau des Headerbildes

Das Einstellungsfenster ist in Bereiche unterteilt:

  • Allgemein: Hier legst du die technischen Grundeinstellungen fest – die Bezeichnung zum Verlinken und das Bild selbst.
  • Rechts daneben: Symbol, Textoptionen (zentrieren, Reihenfolge umdrehen), alle Textinhalte und die optionale Aktionsschaltfläche.

Die Markdown-Editoren ermöglichen dir einfache Textformatierungen wie Fett, Kursiv oder Links – eine ausführliche Anleitung dazu findest du unter Markdown nutzen.

Aufbau des Karussells

Das Karussell besteht aus:

  • Allgemein: Dieser Bereich ist leer – er ist für spätere Erweiterungen reserviert.
  • Aktionen: Hier definierst du die gemeinsame Überschrift, kleine Überschrift und Beschreibung für das gesamte Karussell. Darunter folgen alle Bilder als aufklappbare Abschnitte, die du einzeln bearbeiten kannst.

Jedes Bild kann eigene Darstellungsoptionen haben (zum Beispiel Skalierung), die beim Kopieren übernommen werden.

Was danach passiert

Deine Änderungen werden sofort gespeichert. Das Headerbild oder Karussell erscheint auf der Website genau an der Position, an der du es eingefügt hast. Besucher sehen es prominent oben auf der Seite.

Falls du eine Bezeichnung vergeben hast, können andere Blöcke (wie Navigationslinks) direkt zu diesem Bereich springen. Das Karussell erlaubt Besuchern, zwischen den Bildern zu navigieren – die genaue Steuerung (Pfeile, Punkte, automatisches Abspielen) hängt von der Konfiguration der Website ab.

Tipps und Hinweise

  • Das Bild sollte ausreichend groß und hochauflösend sein, damit es auf allen Geräten scharf aussieht. Ein zu kleines Bild wirkt pixelig.
  • Halte den Text kurz und prägnant – Besucher lesen Headerbilder nur schnell.
  • Der Text auf der Schaltfläche sollte eine klare Handlung ausdrücken („Jetzt anmelden", „Produkt entdecken"), nicht nur „Weiter" oder „Klick".
  • Im Karussell sollten nicht zu viele Bilder sein (etwa 3–5) – sonst wird es überwältigend.
  • Probiere die Einstellung „Reihenfolge umdrehen" aus, wenn das Bild rechts und der Text links besser passt.
  • Der Hinweis, wenn du mit der Maus auf eine Schaltfläche zeigst (z. B. „Nach oben verschieben"), hilft dir zu verstehen, was die Schaltfläche tut.

Weitere Informationen zu verwandten Blöcken findest du unter Block auf einer Seite einrichten (Blockkatalog).

Suche