Initial commit - Help Service for Coolify
This commit is contained in:
134
content/theme/hero-banner.md
Normal file
134
content/theme/hero-banner.md
Normal file
@@ -0,0 +1,134 @@
|
||||
---
|
||||
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**.
|
||||
139
content/theme/slider.md
Normal file
139
content/theme/slider.md
Normal file
@@ -0,0 +1,139 @@
|
||||
---
|
||||
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.
|
||||
Reference in New Issue
Block a user