> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vincent.ag/llms.txt
> Use this file to discover all available pages before exploring further.

# E-Mail Vorlagen

> Newsletter-Vorlagen erstellen und bearbeiten – Betreff, Vorschau und Editor mit Bausteinen (Überschrift, Text, Button, Bild, Trennlinie, Abstand, HTML, Spalten, Box)

> **Newsletter-Vorlagen schnell bauen** – Basisdaten setzen, Inhalte per Bausteinen zusammensetzen und später in Kampagnen wiederverwenden.

<Frame>
  <img src="https://mintcdn.com/bitlabsoftwaregmbh/EvAsTcyIzD6vcyjl/assets/images/marketing/template-overview.png?fit=max&auto=format&n=EvAsTcyIzD6vcyjl&q=85&s=ed3ea35ac6003617c7a2febf2dd75913" alt="E-Mail Vorlagen – Übersicht" className="rounded-xl border shadow-md" width="1714" height="721" data-path="assets/images/marketing/template-overview.png" />
</Frame>

## 1 · Vorlagen-Übersicht

In **Alle Vorlagen** siehst du alle Newsletter-Vorlagen als Liste.

**Suche & Navigation**

* **Suche** oben: Filtere nach Nummer oder Name.
* **Detail öffnen**: Klicke auf eine Zeile (oder den Pfeil rechts), um die Vorlage zu öffnen.

**Neue Vorlage**

* Oben rechts über **+ Neue Vorlage** erstellst du eine neue E-Mail Vorlage.

***

## 2 · Neue Vorlage anlegen

Beim Erstellen definierst du zuerst die Basisdaten und baust dann den Inhalt im Editor.

<Frame>
  <img src="https://mintcdn.com/bitlabsoftwaregmbh/7MXT-eFzwF98bqqj/assets/images/marketing/template-add1.png?fit=max&auto=format&n=7MXT-eFzwF98bqqj&q=85&s=c3d743b9506f7d7db055ada2c4f18e3e" alt="Neue Vorlage – Basisdaten und Editor" className="rounded-xl border shadow-md" width="1688" height="1288" data-path="assets/images/marketing/template-add1.png" />
</Frame>

### 2.1 Basisdaten

* **Name**: interner Name (Empfänger sehen diesen Namen nicht).
* **Betreff**: wird als E-Mail Betreff angezeigt.
* **Vorschau**: Vorschautext (wird neben/unter dem Betreff im Mail-Client angezeigt).

### 2.2 Inhalt starten

Im Bereich **Inhalt** fügst du Bausteine hinzu (Überschrift, Text, Button, …).

***

## 3 · Editor-Grundprinzip

Der Editor ist immer gleich aufgebaut:

* **Links am Baustein**: Aktionen
  * **↑ / ↓** Baustein nach oben/unten verschieben
  * **Papierkorb** Baustein löschen
* **Mitte**: Canvas (das E-Mail Layout)
* **Rechts**: Eigenschaften des aktuell ausgewählten Bausteins oder globale Styles

<Frame>
  <img src="https://mintcdn.com/bitlabsoftwaregmbh/7MXT-eFzwF98bqqj/assets/images/marketing/template-add2.png?fit=max&auto=format&n=7MXT-eFzwF98bqqj&q=85&s=604c4bd710e0aef29c55de13c05efacc" alt="Baustein-Auswahl – Elemente hinzufügen" className="rounded-xl border shadow-md" width="1351" height="1216" data-path="assets/images/marketing/template-add2.png" />
</Frame>

<Tip>
  Bausteine fügst du über das **Plus** im Canvas hinzu. Danach klickst du einen Baustein an, um rechts die Einstellungen zu sehen.
</Tip>

***

## 4 · Bausteine (chronologisch)

Unten siehst du alle Bausteine, die du hinzufügen kannst. Jeder Baustein hat rechts eigene Einstellungen (Text, Farben, Abstände, Ausrichtung, …).

### 4.1 Überschrift

<Frame>
  <img src="https://mintcdn.com/bitlabsoftwaregmbh/7MXT-eFzwF98bqqj/assets/images/marketing/template-add.png?fit=max&auto=format&n=7MXT-eFzwF98bqqj&q=85&s=b06fc54b9f0fc779ce8029a6b47f7376" alt="Baustein Überschrift – Einstellungen" className="rounded-xl border shadow-md" width="1789" height="1196" data-path="assets/images/marketing/template-add.png" />
</Frame>

**Wofür?**\
Kurze Headline/Section-Title.

**Typische Einstellungen**

* **Inhalt** (Text der Überschrift)
* **Größe** (z. B. H1 / H2 / H3)
* **Textfarbe / Hintergrundfarbe**
* **Schriftart** (z. B. „E-Mail Einstellungen übernehmen“)
* **Ausrichtung** (links / zentriert / rechts)
* **Innenabstände** (Padding)

***

### 4.2 Text

<Frame>
  <img src="https://mintcdn.com/bitlabsoftwaregmbh/7MXT-eFzwF98bqqj/assets/images/marketing/template-add3.png?fit=max&auto=format&n=7MXT-eFzwF98bqqj&q=85&s=be9108e816127eee6508a572de56b3ed" alt="Baustein Text – Einstellungen" className="rounded-xl border shadow-md" width="1300" height="1238" data-path="assets/images/marketing/template-add3.png" />
</Frame>

**Wofür?**\
Fließtext, Listen, kurze Hinweise.

**Typische Einstellungen**

* **Inhalt** (Text)
* **Markdown-Modus** (falls aktiviert, kannst du Markdown verwenden)
* **Textfarbe / Hintergrundfarbe**
* **Schriftart, Schriftgröße, Schriftstärke**
* **Ausrichtung**
* **Innenabstände**

***

### 4.3 Button

<Frame>
  <img src="https://mintcdn.com/bitlabsoftwaregmbh/7MXT-eFzwF98bqqj/assets/images/marketing/template-add4.png?fit=max&auto=format&n=7MXT-eFzwF98bqqj&q=85&s=39d517f741888d07edc0c5de342fb4d4" alt="Baustein Button – Einstellungen" className="rounded-xl border shadow-md" width="1324" height="1230" data-path="assets/images/marketing/template-add4.png" />
</Frame>

**Wofür?**\
Call-to-Action (z. B. „Jetzt bestellen“, „Zum Shop“).

**Typische Einstellungen**

* **Text** (Button-Label)
* **URL** (Ziel-Link)
* **Breite** (volle Breite / auto)
* **Größe** (xs / s / m / xl)
* **Stil** (Rechteck / Rund / Abgerundet)
* **Textfarbe / Buttonfarbe / Hintergrundfarbe**
* **Schriftart, Schriftgröße, Schriftstärke**

***

### 4.4 Bild

<Frame>
  <img src="https://mintcdn.com/bitlabsoftwaregmbh/7MXT-eFzwF98bqqj/assets/images/marketing/template-add5.png?fit=max&auto=format&n=7MXT-eFzwF98bqqj&q=85&s=4cd8c5c681c946d71229e75f4003d4d1" alt="Baustein Bild – Einstellungen" className="rounded-xl border shadow-md" width="1328" height="1196" data-path="assets/images/marketing/template-add5.png" />
</Frame>

**Wofür?**\
Produktbild, Banner, Logo, etc.

**Typische Einstellungen**

* **Quelle URL** (Bild-URL)
* **Alt Text** (wichtig für Barrierefreiheit)
* **URL anklickbar** (optional: Bild klickbar machen)
* **Breite / Höhe**
* **Ausrichtung**
* **Hintergrundfarbe**
* **Innenabstände**

***

### 4.5 Trennlinie

<Frame>
  <img src="https://mintcdn.com/bitlabsoftwaregmbh/7MXT-eFzwF98bqqj/assets/images/marketing/template-add6.png?fit=max&auto=format&n=7MXT-eFzwF98bqqj&q=85&s=c6cfa56b9e8f2c52dc2bd20380e6f1a4" alt="Baustein Trennlinie – Einstellungen" className="rounded-xl border shadow-md" width="1311" height="738" data-path="assets/images/marketing/template-add6.png" />
</Frame>

**Wofür?**\
Visuelle Trennung zwischen Abschnitten.

**Typische Einstellungen**

* **Farbe** (Linienfarbe)
* **Höhe** (Linienstärke)
* **Hintergrundfarbe**
* **Innenabstände** (oben/unten/links/rechts)

***

### 4.6 Abstand

<Frame>
  <img src="https://mintcdn.com/bitlabsoftwaregmbh/7MXT-eFzwF98bqqj/assets/images/marketing/template-add7.png?fit=max&auto=format&n=7MXT-eFzwF98bqqj&q=85&s=54f58b13752f7d8f01bbc414bc019ff9" alt="Baustein Abstand – Einstellungen" className="rounded-xl border shadow-md" width="1307" height="329" data-path="assets/images/marketing/template-add7.png" />
</Frame>

**Wofür?**\
Einfach Luft/Spacing zwischen Bausteinen.

**Typische Einstellungen**

* **Höhe** (Spacing in px)

***

### 4.7 HTML

<Frame>
  <img src="https://mintcdn.com/bitlabsoftwaregmbh/EvAsTcyIzD6vcyjl/assets/images/marketing/template-add8.png?fit=max&auto=format&n=EvAsTcyIzD6vcyjl&q=85&s=effda573001ea30069aff1151005bdd2" alt="Baustein HTML – Einstellungen" className="rounded-xl border shadow-md" width="1320" height="1189" data-path="assets/images/marketing/template-add8.png" />
</Frame>

**Wofür?**\
Spezialfälle, wenn du gezielt HTML einfügen willst.

**Typische Einstellungen**

* **Inhalt** (HTML)
* **Textfarbe / Hintergrundfarbe**
* **Schriftart, Schriftgröße**
* **Ausrichtung**
* **Innenabstände**

<Note>
  HTML ist mächtig – nutze es nur, wenn ein Standard-Baustein nicht reicht.
</Note>

***

### 4.8 Spalten

<Frame>
  <img src="https://mintcdn.com/bitlabsoftwaregmbh/EvAsTcyIzD6vcyjl/assets/images/marketing/template-add9.png?fit=max&auto=format&n=EvAsTcyIzD6vcyjl&q=85&s=ffc3ca4d72af8bdafe4ec860c8e3b0a3" alt="Baustein Spalten – Einstellungen" className="rounded-xl border shadow-md" width="1797" height="976" data-path="assets/images/marketing/template-add9.png" />
</Frame>

**Wofür?**\
Mehrspaltige Layouts (z. B. 3 Features nebeneinander).

**Typische Einstellungen**

* **Anzahl der Spalten** (z. B. 2 oder 3)
* **Spaltenbreiten** (pro Spalte)
* **Spaltenabstand** (Gap)
* **Ausrichtung**
* **Hintergrundfarbe**
* **Innenabstände**

<Tip>
  In jede Spalte kannst du wieder Bausteine einfügen (Text, Bild, Button, …).
</Tip>

***

### 4.9 Box

<Frame>
  <img src="https://mintcdn.com/bitlabsoftwaregmbh/7MXT-eFzwF98bqqj/assets/images/marketing/template-add10.png?fit=max&auto=format&n=7MXT-eFzwF98bqqj&q=85&s=502f444d7349967eda82f50c05a30382" alt="Baustein Box – Einstellungen" className="rounded-xl border shadow-md" width="1784" height="743" data-path="assets/images/marketing/template-add10.png" />
</Frame>

**Wofür?**\
Container/„Kasten“, um mehrere Bausteine gemeinsam zu gruppieren (z. B. Angebotsblock).

**Typische Einstellungen**

* **Hintergrundfarbe**
* **Innenabstände**
* (je nach Konfiguration) Rahmen/Radius/Spacing

***

## 5 · Vorlage öffnen (Detailansicht)

In der Detailansicht siehst du Basisdaten + Inhalt. Standardmäßig ist die Vorlage **gesperrt** (read-only).

<Frame>
  <img src="https://mintcdn.com/bitlabsoftwaregmbh/EvAsTcyIzD6vcyjl/assets/images/marketing/template-detail.png?fit=max&auto=format&n=EvAsTcyIzD6vcyjl&q=85&s=4670c280ccd6a83f68670ce740d07e2a" alt="Vorlagen-Detail – gesperrt (Vorlage bearbeiten)" className="rounded-xl border shadow-md" width="2160" height="1281" data-path="assets/images/marketing/template-detail.png" />
</Frame>

**Bearbeitung starten**

* Klicke oben rechts auf **Vorlage bearbeiten**, um in den Bearbeitungsmodus zu wechseln.

***

## 6 · Vorlage bearbeiten (Edit-Modus)

Im Edit-Modus kannst du alles ändern und danach speichern.

<Frame>
  <img src="https://mintcdn.com/bitlabsoftwaregmbh/EvAsTcyIzD6vcyjl/assets/images/marketing/template-detail2.png?fit=max&auto=format&n=EvAsTcyIzD6vcyjl&q=85&s=50d6e4a423dd03b607bcd338828769c6" alt="Vorlagen-Detail – bearbeitbar (Vorlage aktualisieren) mit Desktop/Mobile Umschalter" className="rounded-xl border shadow-md" width="2158" height="1292" data-path="assets/images/marketing/template-detail2.png" />
</Frame>

**Speichern / Abbrechen**

* **Vorlage aktualisieren**: speichert alle Änderungen
* **X** (oben): bricht ab (ohne Speichern)

**Desktop/Mobile Vorschau**

* Oben im Editor kannst du zwischen **Desktop** und **Mobile** Ansicht umschalten, um das Layout zu prüfen.

***

## 7 · Reiter in der Detailansicht

* **Template**: Basisdaten + Editor
* **Kennzahlen**: Auswertung zur Vorlage (z. B. Nutzung – je nach Ausbaustufe)
* **Einstellungen**: vorlagenspezifische Optionen (je nach System)

***

## 8 · Häufige Fragen

<AccordionGroup>
  <Accordion title="Wo verwende ich eine Vorlage später?">
    In Kampagnen wählst du die Vorlage aus und sendest sie an Gruppen.\
    Siehe: <a href="/de/modules/marketing/newsletter/campaigns">Kampagnen</a> und <a href="/de/modules/marketing/newsletter/groups">Gruppen</a>.
  </Accordion>

  <Accordion title="Wie ordne ich die Bausteine richtig?">
    Klicke einen Baustein an und nutze links am Baustein die Buttons <strong>↑</strong> / <strong>↓</strong>, um ihn zu verschieben.
  </Accordion>

  <Accordion title="Warum soll ich die Mobile-Ansicht prüfen?">
    Viele Empfänger lesen E-Mails am Handy. Mit dem Umschalter siehst du sofort, ob Abstände, Spalten und Buttons mobil gut aussehen.
  </Accordion>

  <Accordion title="Wann nutze ich Spalten vs. Box?">
    <strong>Spalten</strong> für nebeneinander (z. B. 3 Vorteile).\
    <strong>Box</strong> für einen gemeinsamen Block (z. B. „Angebot“-Kasten) – darin kannst du weitere Bausteine stapeln.
  </Accordion>

  <Accordion title="Wann nutze ich HTML?">
    Nur für Sonderfälle, die mit Überschrift/Text/Button/Bild nicht sauber abbildbar sind.
  </Accordion>
</AccordionGroup>