---
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**