140 lines
3.0 KiB
Markdown
140 lines
3.0 KiB
Markdown
---
|
||
title: Hero Slider
|
||
description: Slider fuer die Startseite konfigurieren
|
||
---
|
||
|
||
# Hero Slider
|
||
|
||
Der Hero Slider zeigt mehrere Slides mit Bildern, Titeln und Buttons auf der Startseite.
|
||
|
||
---
|
||
|
||
## Wo finde ich die Einstellungen?
|
||
|
||
**Kurs-Booking → Einstellungen → Hero Slider**
|
||
|
||
---
|
||
|
||
## Slide hinzufuegen
|
||
|
||
1. Klicke auf **"+ Neuen Slide hinzufuegen"**
|
||
2. Fuelle die Felder aus
|
||
3. Klicke auf **"Aenderungen speichern"**
|
||
|
||
---
|
||
|
||
## Felder pro Slide
|
||
|
||
### Bild
|
||
|
||
| Feld | Beschreibung |
|
||
|------|--------------|
|
||
| **Bild waehlen** | Oeffnet die Mediathek |
|
||
| **Empfohlene Groesse** | 1950 × 1300 Pixel |
|
||
|
||
**Tipp:** Alle Slider-Bilder sollten die gleiche Groesse haben.
|
||
|
||
---
|
||
|
||
### Titel
|
||
|
||
Der Haupttext auf dem Slide.
|
||
|
||
| Option | Beschreibung |
|
||
|--------|--------------|
|
||
| **Zeilenumbruch** | Verwende `<br>` im Text |
|
||
| **Beispiel** | `Willkommen bei der<br>Webwerkstatt` |
|
||
|
||
---
|
||
|
||
### Button
|
||
|
||
| Feld | Beschreibung | Beispiel |
|
||
|------|--------------|----------|
|
||
| **Button-Text** | Beschriftung des Buttons | "Mehr erfahren" |
|
||
| **Button-Link** | Ziel-URL | `/kurse/` oder `https://...` |
|
||
|
||
**Tipp:** Lasse beide Felder leer, wenn kein Button erscheinen soll.
|
||
|
||
---
|
||
|
||
### Alt-Text (SEO)
|
||
|
||
Beschreibung des Bildes fuer Suchmaschinen und Screenreader.
|
||
|
||
| Gut | Schlecht |
|
||
|-----|----------|
|
||
| "Reiterin auf Islandpferd im Galopp" | "Bild1" |
|
||
| "Kursteilnehmer beim Workshop" | "slider" |
|
||
|
||
---
|
||
|
||
## Slides verwalten
|
||
|
||
### Reihenfolge aendern
|
||
|
||
Die Slides erscheinen in der Reihenfolge, wie sie in der Liste stehen. Aktuell muss die Reihenfolge durch Loeschen und Neu-Anlegen geaendert werden.
|
||
|
||
### Slide loeschen
|
||
|
||
Klicke auf den **roten X-Button** rechts oben am Slide.
|
||
|
||
---
|
||
|
||
## Beispiel-Konfiguration
|
||
|
||
### Slide 1: Willkommen
|
||
```
|
||
Bild: [Panorama vom Gestüt]
|
||
Titel: Willkommen bei der<br>Webwerkstatt
|
||
Button-Text: Kurse entdecken
|
||
Button-Link: /kurse/
|
||
Alt-Text: Islandpferdegestüt mit Reitplatz im Sonnenuntergang
|
||
```
|
||
|
||
### Slide 2: Aktueller Kurs
|
||
```
|
||
Bild: [Kursfoto]
|
||
Titel: Neuer Kurs:<br>Sitzschulung intensiv
|
||
Button-Text: Jetzt anmelden
|
||
Button-Link: /kurs/sitzschulung-maerz-2025/
|
||
Alt-Text: Reitlehrerin erklärt Sitzposition
|
||
```
|
||
|
||
### Slide 3: Online-Angebot
|
||
```
|
||
Bild: [Laptop mit Zoom]
|
||
Titel: Webinare &<br>Online-Coaching
|
||
Button-Text: Online-Angebote
|
||
Button-Link: /online/
|
||
Alt-Text: Online-Unterricht per Videokonferenz
|
||
```
|
||
|
||
---
|
||
|
||
## Technische Details
|
||
|
||
| Einstellung | Wert |
|
||
|-------------|------|
|
||
| Option-Name | `kurs_booking_slider_slides` |
|
||
| Bildformat | Querformat empfohlen |
|
||
| Optimale Groesse | 1950 × 1300 px |
|
||
| Max. Slides | Unbegrenzt (3-5 empfohlen) |
|
||
|
||
---
|
||
|
||
## Haeufige Fragen
|
||
|
||
### Wie viele Slides sind sinnvoll?
|
||
3-5 Slides sind optimal. Bei mehr verlieren Besucher das Interesse.
|
||
|
||
### Warum sehe ich keinen Slider?
|
||
- Pruefe ob mindestens ein Slide mit Bild angelegt ist
|
||
- Pruefe ob die Startseite das Slider-Element enthaelt
|
||
|
||
### Die Bilder werden abgeschnitten
|
||
Verwende Bilder im Format 1950 × 1300 Pixel. Alle Bilder sollten die gleiche Groesse haben.
|
||
|
||
### Kann ich Videos im Slider verwenden?
|
||
Nein, aktuell werden nur Bilder unterstuetzt.
|