Kopfbereich und Bildkarussell einrichten

Mit dieser Aufgabe gestaltest du einen auffälligen Kopfbereich für deine Website – entweder als einzelnes Headerbild oder als automatisch wechselndes Karussell mit mehreren Bildern. Der Kopfbereich ist oft das erste, das Besucher sehen, und kann Überschrift, Text und einen Handlungsbutton enthalten.

Voraussetzungen

Es gibt keine besonderen Voraussetzungen. Du bearbeitest diesen Bereich direkt im Seiteneditor.

So gehst du vor

Grundeinstellungen für das Headerbild

1. Öffne die Registerkarte Allgemein.

2. Trage unter Bezeichnung (für Verlinkung) einen kurzen Namen ein, unter dem du diesen Bereich später wiederfindest – zum Beispiel, wenn du von anderen Stellen aus auf ihn verlinken möchtest.

3. Wähle ein Bild:

   • Klicke im linken Bereich auf das Bildsymbol, um ein Bild hochzuladen oder auszuwählen.
   • Du kannst einstellen, wie das Bild angezeigt wird (etwa zugeschnitten oder skaliert) – die Option Bildanpassung steuert das Verhalten.

Text und Symbol hinzufügen

4. Im rechten Bereich wählst du optional ein Symbol aus, das neben dem Text angezeigt wird. Klicke dafür auf das Symbolfeld.

5. Entscheide, ob der Text zentriert angezeigt werden soll – aktiviere dafür die Schaltfläche Text zentrieren. Ohne diese Einstellung steht der Text auf der einen Seite, das Bild auf der anderen.

6. Falls du möchtest, dass Bild und Text die Positionen tauschen, aktiviere Reihenfolge umdrehen.

Texte eingeben

7. Unter Unter-Überschrift trägst du einen kleineren Text ein (optional).

8. Unter Titel kommt deine Hauptüberschrift.

9. Unter Text kannst du eine längere Beschreibung eintragen.

Alle drei Textfelder unterstützen Formatierung (fett, kursiv, Listen und Links) – schreib sie wie in Markdown.

Button konfigurieren (optional)

10. Wenn der Besucher einen Handlungsbutton sehen soll:
    • Schreib unter Button Text, was auf dem Button stehen soll.
    • Wähle rechts daneben einen Buttontyp (Farbe und Stil) – das Auswahlfeld zeigt dir die verfügbaren Varianten.
    • Unter Navigationsziel legst du fest, wohin der Button führt: zu einer anderen Seite deiner Website, zu einer externen URL oder zu einer Mailadresse.

Speichere deine Änderungen.

Ein Bildkarussell statt Einzelbild

Falls du mehrere Bilder nacheinander anzeigen möchtest:

11. Öffne die Registerkarte Aktionen.

12. Fülle die Felder aus:

    • Überschrift: Hauptüberschrift des Karussells
    • Kleine Überschrift: Nebentext (optional)
    • Beschreibung: Längerer Erklärtext unter dem Bild (optional)

13. Unter den Textfeldern siehst du eine Liste der Bilder im Karussell. Für jedes Bild stehen dir Schaltflächen zur Verfügung:

    • Nach oben verschieben / Nach unten verschieben: Ändert die Reihenfolge, in der die Bilder wechseln.
    • Kopieren: Dupliziert das Bild mit den gleichen Einstellungen.
    • Entfernen: Löscht das Bild aus dem Karussell.

14. Klicke auf Bild hinzufügen, um ein weiteres Bild zum Karussell zu fügen. Wähle das Bild in dem neu erscheinenden Abschnitt aus und stelle ggf. die Bildanpassung ein.

15. Wiederhole Schritt 14, bis du alle Bilder hinzugefügt hast. Das Karussell zeigt sie später automatisch nacheinander.

Speichere deine Änderungen.

Aufbau des Fensters

Das Fenster ist in zwei Registerkarten unterteilt:

Allgemein: Hier richtest du ein einzelnes Headerbild mit Bild, Text und Button ein. Die linke Spalte ist für das Bild, die rechte für Textinhalte und Einstellungen da.

Aktionen: Hier verwandelst du mehrere Bilder in ein automatisches Karussell. Du legst die gemeinsamen Texte fest und verwaltest alle Bilder in einer Liste mit Reihenfolge und Optionen.

Was danach passiert

Deine Änderungen werden gespeichert. Der Kopfbereich wird danach auf der Seite angezeigt – entweder als statisches Bild oder, wenn du im Karussell mehrere Bilder hinzugefügt hast, mit automatischem Bildwechsel.

Du kannst diese Einstellungen jederzeit wieder öffnen und ändern.

Tipps und Hinweise

• Bilder sollten breit sein: Der Kopfbereich erstreckt sich über die volle Seitenbreite. Verwende Bilder im Querformat (mindestens 1200 Pixel breit).
• Text lesbar machen: Wenn der Text über einem dunklen Bild liegt, wird er oft schwer gelesen. Teste die Vorschau und passe ggf. die Textgröße oder Farbe über das Erscheinungsbild an.
• Button-Ziel prüfen: Stelle sicher, dass die verlinkte Seite oder URL korrekt ist – die Vorschau zeigt dir, ob der Link funktioniert.
• Karussell-Reihenfolge: Nutze die Pfeile, um die Bilder in die gewünschte Reihenfolge zu bringen. Das erste Bild wird als Erstes angezeigt.

Weitere Gestaltungsmöglichkeiten findest du in den Aufgaben zu Bildkarussellen und Hero-Bausteinen.