webideas24/help-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a998c47132689f370cafd8e649f4804b1c707c08
help-service/content/email_templates.md

9.3 KiB
Raw Blame History

id, title, icon, description, section, tags, related, order
id title icon description section tags related order
email_templates E-Mail Vorlagen file-earmark-text Vorlagen fuer automatische E-Mails gestalten und anpassen E-Mail System
E-Mail
Vorlagen
Templates
Styling
Design
emails
email-platzhalter
booking
general
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:

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

<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

<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

<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

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

<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

<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 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
Reference in New Issue View Git Blame Copy Permalink