135 lines
2.6 KiB
Markdown
135 lines
2.6 KiB
Markdown
---
|
|
title: Hero-Banner
|
|
description: Individuelle Banner-Bilder fuer jede Seite
|
|
---
|
|
|
|
# Hero-Banner
|
|
|
|
Mit dem Hero-Customizer kannst du fuer jede Seite ein individuelles Banner-Bild mit Titel einstellen.
|
|
|
|
---
|
|
|
|
## Wo finde ich die Einstellungen?
|
|
|
|
1. Gehe zu **Seiten** im WordPress-Admin
|
|
2. Bearbeite eine beliebige Seite
|
|
3. In der rechten Seitenleiste: **"Hero Einstellungen"**
|
|
|
|
---
|
|
|
|
## Verfuegbare Felder
|
|
|
|
### 1. Hero Hintergrundbild
|
|
|
|
| Feld | Beschreibung |
|
|
|------|--------------|
|
|
| **Bild waehlen** | Oeffnet die Mediathek |
|
|
| **Entfernen** | Loescht das Bild |
|
|
|
|
**Tipp:** Bilder im Querformat, mindestens 1920px breit.
|
|
|
|
**Fallback:** Ohne Hero-Bild wird das Beitragsbild verwendet.
|
|
|
|
---
|
|
|
|
### 2. Hero Titel
|
|
|
|
| Feld | Beschreibung |
|
|
|------|--------------|
|
|
| **Leer lassen** | Seitentitel wird angezeigt |
|
|
| **Text eingeben** | Ueberschreibt den Seitentitel |
|
|
|
|
---
|
|
|
|
### 3. Untertitel
|
|
|
|
Optional - erscheint unterhalb des Titels mit tuerkisem Balken.
|
|
|
|
---
|
|
|
|
### 4. Overlay Staerke
|
|
|
|
Verdunkelt das Bild fuer bessere Lesbarkeit.
|
|
|
|
| Option | Wert |
|
|
|--------|------|
|
|
| Kein Overlay | 0% |
|
|
| Leicht | 20% |
|
|
| **Mittel (Standard)** | 40% |
|
|
| Stark | 60% |
|
|
| Sehr stark | 80% |
|
|
|
|
---
|
|
|
|
### 5. Bildausschnitt (vertikal)
|
|
|
|
Bestimmt, welcher Teil des Bildes sichtbar ist.
|
|
|
|
| Option | Zeigt |
|
|
|--------|-------|
|
|
| Oben (0%) | Oberen Bildrand |
|
|
| Oben-Mitte (25%) | Zwischen oben und mitte |
|
|
| **Mitte (50%)** | Bildmitte (Standard) |
|
|
| Unten-Mitte (75%) | Zwischen mitte und unten |
|
|
| Unten (100%) | Unteren Bildrand |
|
|
| Benutzerdefiniert | Feineinstellung 0-100% |
|
|
|
|
**Beispiel:**
|
|
- Foto mit Pferd am unteren Bildrand: 75-100%
|
|
- Foto mit Himmel oben: 0-25%
|
|
|
|
---
|
|
|
|
## Banner-Format
|
|
|
|
Das Banner wird im **4:1 Format** angezeigt.
|
|
|
|
| Geraet | Verhaeltnis |
|
|
|--------|-------------|
|
|
| Desktop | 4:1 (flach) |
|
|
| Tablet | 3:1 (etwas hoeher) |
|
|
| Mobile | 2.5:1 (noch hoeher) |
|
|
|
|
---
|
|
|
|
## Titel-Styling
|
|
|
|
- **Tuerkiser Balken** als Hintergrund
|
|
- **Teko Schriftart**, 48px
|
|
- **Grossbuchstaben** automatisch
|
|
- **Weisse Schrift**
|
|
|
|
---
|
|
|
|
## Beispiel-Konfigurationen
|
|
|
|
### Typische Kurs-Seite
|
|
```
|
|
Hero Bild: [Pferdebild]
|
|
Hero Titel: [leer]
|
|
Overlay: Mittel (40%)
|
|
Bildausschnitt: Mitte (50%)
|
|
```
|
|
|
|
### Startseite mit Text
|
|
```
|
|
Hero Bild: [Panorama-Bild]
|
|
Hero Titel: Willkommen bei der Webwerkstatt
|
|
Untertitel: Reitunterricht & Kurse
|
|
Overlay: Leicht (20%)
|
|
Bildausschnitt: Oben-Mitte (25%)
|
|
```
|
|
|
|
---
|
|
|
|
## Haeufige Fragen
|
|
|
|
### Warum sehe ich kein Banner?
|
|
Pruefe ob ein Hero-Bild oder Beitragsbild gesetzt ist.
|
|
|
|
### Das Bild wird abgeschnitten
|
|
Aendere den **Bildausschnitt** (0% = oben, 100% = unten).
|
|
|
|
### Der Text ist schlecht lesbar
|
|
Erhoehe die **Overlay Staerke**.
|