Vorlagen im Visuellen Builder erstellen
Inhaltsverzeichnis
Mit dem Visuellen Builder erstellst du moderne, wiederverwendbare E-Mail-Vorlagen, ohne HTML zu kennen. Statt jede E-Mail einzeln zu formatieren, baust du dir einmal eine Vorlage aus Blöcken und nutzt sie überall dort, wo in epilot E-Mails verschickt werden. In diesem Artikel erfährst du, wie der Builder aufgebaut ist, wie du Schritt für Schritt eine Vorlage baust und wie du Blöcke, Stile und Variablen einsetzt.
Was du mit dem Visuellen Builder erreichst
- CI-konforme E-Mails mit festen Layouts, Farben und Schriften erstellen
- Inhalte wie Texte, Bilder, Buttons oder Signaturen flexibel kombinieren
- wiederkehrende E-Mails (z. B. Bestätigungen, Erinnerungen, Informationen) als Vorlage speichern und mehrfach verwenden
- Variablen einsetzen, um E-Mails automatisch zu personalisieren (z. B. Name, Kundendaten, Links)
Voraussetzungen & wo du den Builder findest
Den Visuellen Builder findest du im Bereich E-Mail-Vorlagen. Dort erstellst du eine neue Vorlage oder bearbeitest eine bestehende. Stelle vorher sicher, dass du die nötigen Berechtigungen zum Verwalten von E-Mail-Vorlagen hast und weißt, für welchen Anwendungsfall du die Vorlage baust (zum Beispiel Terminbestätigung, Bestellbestätigung oder Info-Mail).
💡 Hinweis: Wie du eine Vorlage anlegst und den Kopfbereich mit Sender, Empfänger, Zweck, Labels und Anhängen füllst, erfährst du im Artikel "E-Mail-Vorlagen verwalten". Diese Angaben sind bei beiden Buildern gleich.
Aufbau des Visuellen Builders
Der Builder besteht aus vier Bereichen:
- Kopfbereich oben: Name, Labels, Zweck, Sender, Empfänger, Betreff und Anhänge sowie der Button zum Speichern.
- Blöcke-Liste links: die Struktur deiner Vorlage, ein Eintrag pro Block.
- Arbeitsbereich in der Mitte: die Vorschau deiner E-Mail, in der du Blöcke einfügst und auswählst.
- Eigenschaften rechts: die Einstellungen des aktuell ausgewählten Blocks.
Diese Bereiche arbeiten zusammen: Du fügst einen Block über das Plus im Arbeitsbereich ein, bearbeitest seine Einstellungen rechts, und links siehst du nach und nach den Aufbau deiner Vorlage.

Kopfbereich
Im Kopfbereich oben legst du die Rahmendaten deiner Vorlage fest: Name, Labels, Zweck, Sender, Empfänger (optional Cc und Bcc), Betreff und Anhänge. Über den Button Vorlage erstellen oben rechts speicherst du die Vorlage. Diese Angaben sind bei beiden Buildern gleich und im Artikel "E-Mail-Vorlagen verwalten" ausführlich beschrieben.
Arbeitsbereich & Eigenschaften
Im Arbeitsbereich in der Mitte siehst du die E-Mail so, wie sie später ungefähr aufgebaut sein wird. Hier:
- fügst du über den Plus-Button neue Blöcke hinzu
- kannst du Blöcke anklicken, um sie zu markieren und zu bearbeiten

Auf der rechten Seite findest du den Eigenschaftenbereich. Er zeigt immer die Einstellungen des aktuell ausgewählten Blocks. Dort kannst du:
- Inhalte bearbeiten (z. B. Text)
- das Design des Blocks verändern (z. B. Farben, Abstände, Schriftarten)

Struktur deiner Vorlage (Blöcke)
Die linke Seitenleiste zeigt dir unter „Blöcke" die Struktur deiner aktuellen Vorlage:
- Jeder Eintrag in der Liste steht für einen Block im Layout (z. B. Überschrift, Text, Button).
- Die Reihenfolge der Einträge entspricht der Reihenfolge der Blöcke im E-Mail-Layout von oben nach unten.
- Wenn du einen Eintrag anklickst, wird der entsprechende Block im Arbeitsbereich markiert und seine Einstellungen auf der rechten Seite angezeigt.
Die Blöcke-Liste hilft dir vor allem bei größeren Vorlagen, den Überblick zu behalten und schnell zu einem bestimmten Block zu springen.

Vorlage erstellen
Schritt 1: Vorlage anlegen
- Öffne den Bereich E-Mail-Vorlagen.
- Klicke auf Neu erstellen und wähle Visuellen Builder verwenden.
- Die Vorlage öffnet sich mit einem leeren Layout.
Schritt 2: Grundaufbau mit Blöcken erstellen
Zuerst legst du die grobe Struktur deiner E-Mail fest – also in welcher Reihenfolge Inhalte wie Überschrift, Text, Buttons und Signatur erscheinen sollen.

Blöcke einfügen: Klicke im Arbeitsbereich auf den blauen Plus-Button. Es öffnet sich ein Menü mit allen Blocktypen (siehe Abschnitt Verfügbare Blocktypen). Wähle einen Block aus, er wird an der Position eingefügt, an der du auf das Plus geklickt hast.

Blöcke verschieben und löschen: Mit den Pfeilen verschiebst du einen Block nach oben oder unten, über das Löschen-Icon entfernst du ihn. Die Änderungen siehst du sofort im Arbeitsbereich und in der Blöcke-Liste links.

Layout mit Spalten, Containern und Raster: Für komplexere Layouts nutzt du Spalten oder das Raster-Layout, wenn Inhalte nebeneinander stehen sollen (zum Beispiel Bild links, Text rechts). Container fassen mehrere Blöcke logisch zusammen, etwa um einen Abschnitt mit Hintergrundfarbe oder Abstand zu versehen.
Schritt 3: Vorlage speichern & verwenden
Wenn du mit deiner Struktur und dem Design zufrieden bist:
- Klicke auf „Vorlage speichern" im Kopfbereich.
- Deine Vorlage steht dir jetzt überall dort zur Verfügung, wo in epilot eine E-Mail-Vorlage ausgewählt werden kann (z. B. in Prozessen, Journey-Automatisierungen oder Automatisierungen).
- Du kannst die Vorlage später jederzeit wieder öffnen, anpassen und erneut speichern.
Verfügbare Blocktypen
| Block | Wozu |
| Überschrift | Titel oder Zwischenüberschrift in mehreren Ebenen (H1 bis H6) |
| Text | Fließtext mit direkter Formatierung, siehe Abschnitt Text formatieren |
| Button | Anklickbarer Call-to-Action mit Beschriftung und Linkziel |
| Bild | Grafik oder Foto aus deiner Bibliothek oder per Upload |
| Avatar | Kreisförmiges Profilbild, zum Beispiel für Sender oder Ansprechpartner |
| Trennlinie | Horizontale Linie zur optischen Trennung von Abschnitten |
| Abstand | Leerer Zwischenraum für mehr Luft im Layout |
| HTML | Für benutzerdefinierten HTML-Code, wenn du HTML-Kenntnisse hast |
| Spalten | Zwei- oder mehrspaltiges Layout |
| Container | Fasst mehrere Blöcke zusammen, zum Beispiel mit Hintergrundfarbe oder Innenabstand |
| Signatur | Vordefinierter Signaturblock mit Name, Rolle und Kontaktdaten |
| Raster-Layout | Flexibles Raster für komplexere Anordnungen |
Block-Einstellungen im Detail
Jeder Block-Typ bringt eigene Einstellungen mit.
Die Bearbeitung der einzelnen Blöcke erfolgt immer im Tab „Untersuchen" auf der rechten Seite.
Im Tab „Untersuchen" kannst du je nach Block z. B.:
- den Inhalt bearbeiten (Text, Überschrift, Button-Label usw.)
- die Struktur anpassen (z. B. Überschriften-Ebene H1–H6)
- blockbezogene Optionen setzen (z. B. Ausrichtung, Linkziel beim Button, Bildquelle beim Bild-Block)
Der Tab „Stile" ist nicht blockbezogen, sondern steuert das globale Design der gesamten E-Mail-Vorlage. Die globalen Einstellungen über „Stile" erklären wir im Abschnitt „Globale E-Mail-Einstellungen".
Textblock
Wenn du einen neuen Text-Block in deine Vorlage einfügst, öffnet sich direkt der Erweiterten-Text-Editor. Du formatierst Texte dort wie in einem gewohnten Schreibprogramm: Markiere den Text, den du anpassen möchtest, und pass ihn direkt in der Bearbeitungsleiste an. Markdown-Markierungen mit Sternchen oder eckigen Klammern sind dafür nicht mehr nötig.

Was du direkt in der Bearbeitungsleiste anpassen kannst:
- Fett, kursiv und unterstrichen für Hervorhebungen
- Schriftart und Schriftgröße aus der Auswahlliste
- Textfarbe für farbliche Akzente
- Ausrichtung – links, mittig, rechts oder Blocksatz
Alle Änderungen siehst du sofort im Block – ohne separate Vorschau.

Spalten / Raster-Layout
- eignen sich, wenn Inhalte nebeneinander dargestellt werden sollen (z. B. Bild links, Text rechts)
- du kannst Anzahl der Spalten und deren Breite festlegen
Container
- fassen mehrere Blöcke logisch zusammen
- sind hilfreich, wenn du z. B. einen ganzen Abschnitt mit Hintergrundfarbe oder Abstand versehen möchtest

Globale E-Mail-Einstellungen
Die globalen Stile deiner E-Mail-Vorlage findest du im Tab „Stile" auf der rechten Seite.
Diese Einstellungen wirken auf die gesamte Vorlage und nicht nur auf einen einzelnen Block.
Typische globale Optionen im Tab „Stile" sind z. B.:
- Hintergrundfarbe der E-Mail
- global verwendete Schriftart
- Standard-Textfarbe
Wenn du also das generelle Erscheinungsbild deiner Vorlage anpassen möchtest (z. B. CI-Farben, Schriftart), machst du das im Tab „Stile". Wenn du den Inhalt und die Eigenschaften eines einzelnen Blocks ändern möchtest, nutzt du den Tab „Untersuchen".
Hinweis: Warum du keine eigenen Schriftarten hochladen kannst
Eigene, hochgeladene Schriftarten funktionieren in E-Mails nur in wenigen Clients zuverlässig. In vielen Programmen werden sie einfach durch Standardschriften ersetzt – dein Layout sieht dann anders aus als geplant. Damit E-Mails überall stabil dargestellt werden, bieten wir nur eine Auswahl gängiger Webfonts an und erlauben keine eigenen Fonts.
Personalisierung mit Variablen
Mit Variablen kannst du E-Mails automatisch personalisieren, ohne jede Nachricht manuell anzupassen. Du fügst eine Variable an der Stelle ein, an der später ein individueller Wert stehen soll. Beim Versand der E-Mail ersetzt epilot die Variable automatisch durch die passenden Daten aus der Entität (z. B. Kontakt, Opportunity). Für Details zur Syntax und eine Übersicht aller verfügbaren Variablen verweisen wir auf den separaten Artikel zu Variablen in epilot: Dokumenten- und E-Mail Vorlagen erstellen
Für eine bessere Lesbarkeit beziehen sich Personenbezeichnungen auf alle Geschlechter.