Headerbild und Karussell einrichten

Ein Headerbild ist ein großes Bild mit Text und einer Schaltfläche am Anfang einer Seite. Du kannst es als einzelnes Bild gestalten oder mehrere Bilder als Karussell hintereinander schalten – dann wechselt der Besucher zwischen ihnen. So machst du deine Seite spannend und lenkst die Aufmerksamkeit auf das Wichtigste.

Voraussetzungen

Du brauchst das Modul Website. Welcher Block im Einzelnen auf deine Seite gehört, stellst du unter Blöcke auf einer Seite einrichten zusammen. Diese Aufgabe beschreibt, wie du den Block selbst ausfüllst.

So gehst du vor

Einzelnes Headerbild

1. Öffne die Einstellungen des Headerbildes. Der Bereich Inhalt erscheint.

2. Lade oder ersetze das Bild unter Bild. Das Bild wird auf das Seitenverhältnis 16:9 zugeschnitten (sehr breit und flach). Wo das Bild vergrößert oder verkleinert wird, kannst du mit den Schiebern festlegen.

3. Trage eine Kleine Überschrift ein – das ist der kurze, zarte Text über dem Haupttitel (optional).

4. Trage den Titel ein – das ist die Hauptüberschrift, die der Besucher sofort sieht.

5. Schreib einen Text darunter, der erklärt, worum es geht (optional). Du kannst Markdown nutzen, um Text fett oder kursiv zu formatieren.

6. Wähle unter Icon ein kleines Symbol, das neben dem Text erscheint – zum Beispiel ein Pfeil, ein Häkchen oder ein Stern (optional). Klick auf das Feld, um die Symbolliste zu öffnen.

7. Klick auf den Bereich Schaltfläche, um einen Knopf einzufügen (optional):

   • Schaltflächen-Text: Trage auf die Schaltfläche, zum Beispiel "Jetzt kontaktieren" oder "Mehr erfahren".
   • Bauform: Wähle aus, wie die Schaltfläche aussehen soll – zum Beispiel gefüllt oder mit Umrandung.
   • Ziel: Gib an, wohin der Klick auf die Schaltfläche führt: eine andere Seite deiner Website, eine externe Website oder eine E-Mail-Adresse.

8. Klick auf den Bereich Aufbau:

   • Bild links / Bild rechts: Wähle, ob das Bild auf der linken oder rechten Seite stehen soll – der Text steht dann auf der anderen Seite.
   • Bezeichnung (für Verlinkung) (optional): Wenn ein anderer Block oder eine andere Seite genau auf diesen Abschnitt verlinken soll, gib hier einen Namen ein, unter dem man ihn findet – zum Beispiel "Seitenanfang" oder "Angebot".

Karussell mit mehreren Bildern

1. Öffne die Einstellungen des Headerbildes. Der Bereich Inhalt erscheint.

2. Trage Überschrift, Kleine Überschrift (optional) und Beschreibung (optional) ein. Diese Texte stehen über oder auf allen Bildern des Karussells, je nachdem, wie du die Bauform gewählt hast.

3. Füge deine Bilder hinzu:

   • Klick auf Bild hinzufügen. Ein neuer Eintrag erscheint.
   • Lade das erste Bild (16:9-Format).
   • Klick erneut auf Bild hinzufügen für das zweite Bild – und so weiter.

4. Um die Reihenfolge zu ändern: Klick auf den Pfeil nach oben oder unten neben einem Bild.

5. Um ein Bild zu kopieren (zum Beispiel, wenn du es ähnlich gestalten willst): Klick auf das Kopier-Symbol. weboffice erstellt eine Kopie direkt darunter.

6. Um ein Bild zu entfernen: Klick auf das Papierkorb-Symbol.

7. Klick auf den Bereich Aufbau:

   • Bauform: Wähle, wie das Karussell aussehen soll:
     • Overlay: Die Überschrift und Beschreibung stehen direkt auf dem Foto. weboffice dunkelt das Bild unten ab, damit der Text lesbar bleibt.
     • Andere Optionen: Der Text steht daneben oder darunter, nicht auf dem Bild.

Aufbau des Headerbildes

• Kleine Überschrift: Ein kurzer, zarter Text über dem Titel. Zum Beispiel "Willkommen" oder "Unser Angebot".
• Titel: Die Hauptüberschrift des Blocks.
• Text: Eine kurze Erklärung darunter.
• Icon: Ein kleines Symbol, das den Text schmückt.
• Schaltflächen-Text: Die Aufschrift der Schaltfläche.
• Bauform: Eine Schaltfläche kann gefüllt (kräftige Farbe) oder mit Umrandung aussehen.
• Ziel: Wohin führt die Schaltfläche – eine Seite deiner Website, eine externe Website oder eine E-Mail.
• Bild links / Bild rechts: Die Position des Bildes neben dem Text.
• Bezeichnung: Ein Name für den Block, unter dem Verlinkungen ihn finden können.

Aufbau des Karussells

• Überschrift: Der Titel, der über allen Bildern stehen kann.
• Kleine Überschrift: Ein Untertitel (optional).
• Beschreibung: Ein längerer Text, zum Beispiel eine Erklärung (optional).
• Bilder-Liste: Alle Bilder des Karussells, in der Reihenfolge, in der sie erscheinen. Der Besucher kann zwischen ihnen wechseln.
• Bauform:
  • Overlay: Text auf dem Bild (mit Abdunkelung unten).
  • Andere Bauformen: Text neben oder unter dem Bild.

Was danach passiert

Sobald du die Einstellungen speicherst, zeigt deine Website das Headerbild oder das Karussell an der Stelle, wo du es eingebaut hast. Der Besucher sieht das Bild sofort, wenn er die Seite öffnet – das Karussell wechselt automatisch oder auf Klick zwischen den Fotos.

Du kannst die Einstellungen jederzeit ändern und neue Bilder hinzufügen oder entfernen.

Tipps und Hinweise

• Bildgröße: Verwende hochauflösende Bilder, damit sie auf großen Bildschirmen scharf aussehen. Die Mindestbreite sollte 1200 Pixel sein.
• Text auf dem Bild: Wenn du die Bauform "Overlay" wählst, achte darauf, dass dein Text auf dem Bild gut lesbar ist. weboffice dunkelt den unteren Bereich ab – stell deine Texte dorthin.
• Bildposition beim Zuschneiden: Wenn das Bild automatisch zugeschnitten wird, verschieb den Ausschnitt mit der Maus, damit das Wichtigste (zum Beispiel ein Gesicht) in der Mitte bleibt.
• Externe Links: Wenn die Schaltfläche auf eine externe Website zeigen soll, trage die vollständige Adresse ein (mit https:// am Anfang).