339 lines
9.3 KiB
Markdown
339 lines
9.3 KiB
Markdown
---
|
|
id: email_templates
|
|
title: E-Mail Vorlagen
|
|
icon: file-earmark-text
|
|
description: Vorlagen fuer automatische E-Mails gestalten und anpassen
|
|
section: E-Mail System
|
|
tags: [E-Mail, Vorlagen, Templates, Styling, Design]
|
|
related: [emails, email-platzhalter, booking, general]
|
|
order: 31
|
|
---
|
|
|
|
# E-Mail Vorlagen
|
|
|
|
## Verfuegbare Vorlagen
|
|
|
|
| Vorlage | Wird gesendet bei |
|
|
|---------|-------------------|
|
|
| **Buchungsbestaetigung** | Neue Buchung eingegangen |
|
|
| **Zahlungsbestaetigung** | Zahlung erhalten |
|
|
| **Stornierungsbestaetigung** | Buchung storniert |
|
|
| **Erinnerung** | X Tage vor Kursbeginn |
|
|
| **Video-Zugang** | Nach Freischaltung (Produktart C/D) |
|
|
| **Admin-Benachrichtigung** | Neue Buchung (an Admin) |
|
|
|
|
---
|
|
|
|
## Automatischer Header & Footer
|
|
|
|
Alle E-Mails erhalten automatisch einen professionellen Header und Footer.
|
|
|
|
### Header (automatisch)
|
|
|
|
Der Header zeigt Ihr **Firmenlogo** zentriert an. Das Logo wird in dieser Reihenfolge gesucht:
|
|
|
|
1. **E-Mail Logo** - Einstellungen > Allgemein > E-Mail Logo
|
|
2. **Firmenlogo** - Einstellungen > Allgemein > Firmenlogo
|
|
3. **WordPress Logo** - Theme-Customizer > Website-Identitaet > Logo
|
|
|
|
> **Tipp:** Fuer beste Ergebnisse nutzen Sie ein Logo mit transparentem Hintergrund (PNG) in mindestens 400px Breite.
|
|
|
|
### Footer (automatisch)
|
|
|
|
Der Footer enthaelt automatisch:
|
|
|
|
- Firmenname
|
|
- E-Mail-Adresse
|
|
- Telefonnummer (falls hinterlegt)
|
|
- Copyright mit aktuellem Jahr
|
|
|
|
Diese Daten werden aus **Einstellungen > Allgemein** bezogen.
|
|
|
|
---
|
|
|
|
## E-Mail Struktur
|
|
|
|
Jede E-Mail hat folgenden Aufbau:
|
|
|
|
```
|
|
+----------------------------------+
|
|
| [LOGO] | <- Automatischer Header
|
|
+----------------------------------+
|
|
| |
|
|
| Ihr E-Mail-Inhalt | <- Vorlage-Editor
|
|
| (frei gestaltbar) |
|
|
| |
|
|
+----------------------------------+
|
|
| Firmenname | kontakt@email.de | <- Automatischer Footer
|
|
| (c) 2025 |
|
|
+----------------------------------+
|
|
```
|
|
|
|
---
|
|
|
|
## HTML-Styling im Editor
|
|
|
|
### Erlaubte HTML-Elemente
|
|
|
|
Sie koennen folgende HTML-Tags im Vorlagen-Editor verwenden:
|
|
|
|
| Kategorie | Tags |
|
|
|-----------|------|
|
|
| **Text** | `<p>`, `<br>`, `<strong>`, `<b>`, `<em>`, `<i>`, `<u>`, `<s>` |
|
|
| **Ueberschriften** | `<h1>`, `<h2>`, `<h3>`, `<h4>` |
|
|
| **Listen** | `<ul>`, `<ol>`, `<li>` |
|
|
| **Links** | `<a href="...">` |
|
|
| **Bilder** | `<img src="..." alt="...">` |
|
|
| **Tabellen** | `<table>`, `<tr>`, `<td>`, `<th>`, `<thead>`, `<tbody>` |
|
|
| **Container** | `<div>`, `<span>` |
|
|
| **Trennlinien** | `<hr>` |
|
|
|
|
### Inline-Styles verwenden
|
|
|
|
E-Mail-Clients unterstuetzen **keine externen CSS-Dateien**. Nutzen Sie daher immer Inline-Styles:
|
|
|
|
```html
|
|
<!-- RICHTIG: Inline-Style -->
|
|
<p style="color: #333; font-size: 16px;">
|
|
Ihr Text hier
|
|
</p>
|
|
|
|
<!-- FALSCH: CSS-Klasse (wird ignoriert) -->
|
|
<p class="text-gray">
|
|
Ihr Text hier
|
|
</p>
|
|
```
|
|
|
|
---
|
|
|
|
## Styling-Beispiele
|
|
|
|
### Hervorgehobene Box
|
|
|
|
```html
|
|
<div style="background-color: #f0f7ff; border-left: 4px solid #0066cc; padding: 15px; margin: 20px 0;">
|
|
<strong>Wichtig:</strong> Bitte bringen Sie bequeme Kleidung mit.
|
|
</div>
|
|
```
|
|
|
|
**Ergebnis:**
|
|
> Blaue Info-Box mit linkem Rand
|
|
|
|
### Tabelle fuer Buchungsdetails
|
|
|
|
```html
|
|
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
|
|
<tr style="background-color: #f5f5f5;">
|
|
<td style="padding: 10px; border: 1px solid #ddd;"><strong>Kurs</strong></td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">{kurs_titel}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 10px; border: 1px solid #ddd;"><strong>Datum</strong></td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">{kurs_datum}</td>
|
|
</tr>
|
|
<tr style="background-color: #f5f5f5;">
|
|
<td style="padding: 10px; border: 1px solid #ddd;"><strong>Preis</strong></td>
|
|
<td style="padding: 10px; border: 1px solid #ddd;">{gesamtpreis}</td>
|
|
</tr>
|
|
</table>
|
|
```
|
|
|
|
### Button-Link
|
|
|
|
```html
|
|
<p style="text-align: center; margin: 30px 0;">
|
|
<a href="{bestaetigung_link}"
|
|
style="background-color: #0066cc; color: #ffffff; padding: 12px 30px;
|
|
text-decoration: none; border-radius: 5px; display: inline-block;">
|
|
Buchung bestaetigen
|
|
</a>
|
|
</p>
|
|
```
|
|
|
|
### Farbige Ueberschrift
|
|
|
|
```html
|
|
<h2 style="color: #0066cc; border-bottom: 2px solid #0066cc; padding-bottom: 10px;">
|
|
Ihre Buchungsbestaetigung
|
|
</h2>
|
|
```
|
|
|
|
---
|
|
|
|
## Best Practices
|
|
|
|
### Allgemeine Regeln
|
|
|
|
| Regel | Empfehlung |
|
|
|-------|------------|
|
|
| **Breite** | Max. 600px (wird automatisch gesetzt) |
|
|
| **Schriftgroesse** | Min. 14px fuer Fliesstext |
|
|
| **Zeilenhoehe** | 1.5 bis 1.6 fuer bessere Lesbarkeit |
|
|
| **Farben** | Ausreichend Kontrast (dunkel auf hell) |
|
|
| **Bilder** | Immer `alt`-Text angeben |
|
|
|
|
### Empfohlene Farbpalette
|
|
|
|
| Verwendung | Farbe | Code |
|
|
|------------|-------|------|
|
|
| **Primaer** | Blau | `#0066cc` |
|
|
| **Erfolg** | Gruen | `#28a745` |
|
|
| **Warnung** | Gelb | `#ffc107` |
|
|
| **Fehler** | Rot | `#dc3545` |
|
|
| **Text** | Dunkelgrau | `#333333` |
|
|
| **Hintergrund** | Hellgrau | `#f5f5f5` |
|
|
|
|
### Schriftarten
|
|
|
|
Nutzen Sie **websichere Schriftarten**, da individuelle Fonts nicht geladen werden:
|
|
|
|
```html
|
|
<p style="font-family: Arial, Helvetica, sans-serif;">
|
|
Ihr Text
|
|
</p>
|
|
```
|
|
|
|
**Empfohlene Fonts:**
|
|
- Arial, Helvetica, sans-serif
|
|
- Georgia, Times New Roman, serif
|
|
- Verdana, Geneva, sans-serif
|
|
|
|
---
|
|
|
|
## Komplettes Beispiel-Template
|
|
|
|
```html
|
|
<h2 style="color: #0066cc; margin-bottom: 20px;">
|
|
Hallo {vorname},
|
|
</h2>
|
|
|
|
<p style="font-size: 16px; line-height: 1.6; color: #333;">
|
|
vielen Dank fuer Ihre Buchung! Hier sind Ihre Details:
|
|
</p>
|
|
|
|
<table style="width: 100%; border-collapse: collapse; margin: 25px 0;">
|
|
<tr style="background-color: #0066cc; color: #ffffff;">
|
|
<th style="padding: 12px; text-align: left;" colspan="2">
|
|
Buchungsdetails
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 10px; border-bottom: 1px solid #eee; width: 40%;">
|
|
<strong>Kurs:</strong>
|
|
</td>
|
|
<td style="padding: 10px; border-bottom: 1px solid #eee;">
|
|
{kurs_titel}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 10px; border-bottom: 1px solid #eee;">
|
|
<strong>Datum:</strong>
|
|
</td>
|
|
<td style="padding: 10px; border-bottom: 1px solid #eee;">
|
|
{kurs_datum}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 10px; border-bottom: 1px solid #eee;">
|
|
<strong>Uhrzeit:</strong>
|
|
</td>
|
|
<td style="padding: 10px; border-bottom: 1px solid #eee;">
|
|
{kurs_zeit}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 10px; border-bottom: 1px solid #eee;">
|
|
<strong>Ort:</strong>
|
|
</td>
|
|
<td style="padding: 10px; border-bottom: 1px solid #eee;">
|
|
{kurs_ort}
|
|
</td>
|
|
</tr>
|
|
<tr style="background-color: #f9f9f9;">
|
|
<td style="padding: 10px;">
|
|
<strong>Gesamtpreis:</strong>
|
|
</td>
|
|
<td style="padding: 10px; font-size: 18px; color: #0066cc;">
|
|
<strong>{gesamtpreis}</strong>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div style="background-color: #fff3cd; border: 1px solid #ffc107;
|
|
padding: 15px; border-radius: 5px; margin: 20px 0;">
|
|
<strong>Hinweis:</strong> Bitte bestaetigen Sie Ihre Buchung
|
|
innerhalb von 48 Stunden.
|
|
</div>
|
|
|
|
<p style="text-align: center; margin: 30px 0;">
|
|
<a href="{bestaetigung_link}"
|
|
style="background-color: #28a745; color: #ffffff;
|
|
padding: 15px 40px; text-decoration: none;
|
|
border-radius: 5px; font-size: 16px; display: inline-block;">
|
|
Jetzt bestaetigen
|
|
</a>
|
|
</p>
|
|
|
|
<p style="font-size: 14px; color: #666; margin-top: 30px;">
|
|
Bei Fragen stehen wir Ihnen gerne zur Verfuegung.
|
|
</p>
|
|
|
|
<p style="font-size: 16px; color: #333;">
|
|
Mit freundlichen Gruessen<br>
|
|
<strong>{firma}</strong>
|
|
</p>
|
|
```
|
|
|
|
---
|
|
|
|
## Haeufige Probleme
|
|
|
|
### Styles werden nicht angezeigt
|
|
|
|
**Problem:** Formatierungen erscheinen nicht in der E-Mail.
|
|
|
|
**Loesung:** Pruefen Sie, ob Sie Inline-Styles verwenden. CSS-Klassen funktionieren nicht.
|
|
|
|
### Bilder werden nicht geladen
|
|
|
|
**Problem:** Eingefuegte Bilder erscheinen nicht.
|
|
|
|
**Loesungen:**
|
|
1. Verwenden Sie **vollstaendige URLs** (https://...)
|
|
2. Bilder muessen oeffentlich zugaenglich sein
|
|
3. Fuegen Sie immer einen `alt`-Text hinzu
|
|
|
|
### Layout ist verschoben
|
|
|
|
**Problem:** Spalten/Tabellen sehen falsch aus.
|
|
|
|
**Loesung:** Nutzen Sie feste Pixelwerte statt Prozent und testen Sie in verschiedenen E-Mail-Clients.
|
|
|
|
---
|
|
|
|
## Platzhalter verwenden
|
|
|
|
In allen Vorlagen koennen Sie Platzhalter nutzen:
|
|
|
|
```
|
|
Hallo {vorname} {nachname},
|
|
|
|
Ihre Buchung fuer "{kurs_titel}" am {kurs_datum} wurde bestaetigt.
|
|
|
|
Mit freundlichen Gruessen
|
|
{firma}
|
|
```
|
|
|
|
> **Siehe auch:** [E-Mail Platzhalter](/topic/email-platzhalter) fuer eine vollstaendige Liste aller verfuegbaren Platzhalter.
|
|
|
|
---
|
|
|
|
## Testen
|
|
|
|
Testen Sie Ihre Vorlagen vor dem Live-Einsatz:
|
|
|
|
1. Erstellen Sie eine **Test-Buchung** mit Ihrer eigenen E-Mail
|
|
2. Pruefen Sie die E-Mail in verschiedenen Clients (Gmail, Outlook, Apple Mail)
|
|
3. Testen Sie auch die **mobile Ansicht**
|
|
|