E-Mail-Editor

Der E-Mail-Editor von Owlat ist ein blockbasierter visueller Editor für responsive, professionelle E-Mails. Jeder Block, den Sie hinzufügen, wird in allen E-Mail-Clients einheitlich dargestellt — Desktop, Mobilgeräte, Outlook, Gmail und Apple Mail.

Blöcke hinzufügen

Der wichtigste Weg, Inhalte hinzuzufügen, sind Slash-Befehle. Klicken Sie in die Editor-Fläche und tippen Sie / gefolgt vom Blocktyp, um ihn einzufügen.

Inhaltsblöcke

Layout-Blöcke

Fortgeschrittene Blöcke

Gespeicherte Blöcke

Ihre gespeicherten Blöcke erscheinen im Slash-Menü in der Gruppe Gespeichert, jeweils unter ihrem eigenen Namen. Tippen Sie nach / den Namen eines gespeicherten Blocks, um danach zu filtern und ihn einzufügen.

Textformatierung

Markieren Sie Text innerhalb eines Textblocks, um die Formatierungsleiste einzublenden:

• Fett, Kursiv und Unterstrichen zur Hervorhebung
• Links — Text markieren und eine URL hinterlegen
• Ausrichtung — links, zentriert oder rechts

Um die Textfarbe zu ändern, setzen Sie die Farbe des Blocks in dessen Einstellungs-Popover — Farbe ist eine Eigenschaft auf Blockebene, kein Inline-Format für eine Auswahl.

Blockeigenschaften

Klicken Sie einen beliebigen Block an, um sein Einstellungs-Popover zu öffnen. Häufige Einstellungen sind:

• Innenabstand — der Abstand rund um den Inhalt des Blocks
• Hintergrundfarbe — der Hintergrund des Blocks
• Eckenradius — abgerundete Ecken
• Volle Breite — den Hintergrund des Blocks über die gesamte Viewport-Breite ziehen

Verschiedene Blocktypen haben zusätzliche, spezifische Einstellungen. Bildblöcke haben zum Beispiel Felder für Alt-Text und Link-URL, während Schaltflächenblöcke Steuerelemente für Beschriftung, URL und Stil bieten.

Layout mit Spalten

Spalten sind die Grundlage komplexer E-Mail-Layouts. Erstellen Sie nebeneinanderliegende Bereiche für Dinge wie Bild-plus-Text, Feature-Raster oder mehrere Produkte nebeneinander.

1. Tippen Sie /columns, um ein Spaltenlayout einzufügen.
2. Wählen Sie die Anzahl der Spalten (1 bis 4).
3. Ziehen Sie Inhaltsblöcke in die einzelnen Spalten.
4. Passen Sie Einstellungen pro Spalte an, etwa Hintergrund, Innenabstand und vertikale Ausrichtung.

Personalisierung mit Variablen

Tippen Sie {{ oder @ innerhalb eines Textblocks, um die Variablenauswahl zu öffnen und dynamische Inhalte einzufügen, die beim Versand durch kontaktspezifische Daten ersetzt werden:

• Kontaktfelder wie Vorname, Nachname und E-Mail
• Eigene Kontakteigenschaften, die Sie definiert haben
• Systemvariablen wie Abmeldelinks

Variablen lassen Ihre E-Mails persönlich wirken, ohne dass Sie für jede Empfängerin und jeden Empfänger eigene Versionen anlegen müssen.

Bedingte Inhalte

Blenden Sie Abschnitte Ihrer E-Mail abhängig von den Daten eines Kontakts ein oder aus. Zeigen Sie zum Beispiel einen Premium-CTA nur Kontakten mit bezahltem Tarif oder unterschiedliche Inhalte je nach Sprache oder Standort eines Kontakts.

Bedingte Blöcke werten die Eigenschaftswerte eines Kontakts zum Versandzeitpunkt aus und nehmen Inhalte entsprechend auf oder lassen sie weg.

Wiederholungsblöcke

Ein Block kann für jedes Element einer Array-Variablen einmal wiederholt werden — nützlich für Bestellpositionen, Produktlisten oder Empfehlungen. Legen Sie im Einstellungsbereich des Blocks die Array-Variable fest, über die iteriert wird, einen Element-Alias, um auf jeden Eintrag zu verweisen ({{item.key}}), und optional eine maximale Anzahl von Elementen. Der Renderer expandiert den Block beim Versand für jedes Array-Element.

Responsives Design

Ihre E-Mails sind automatisch responsiv:

• Spalten stapeln sich auf kleinen Bildschirmen
• Bilder passen ihre Größe an den Viewport an
• Schriftgrößen lassen sich für die Lesbarkeit auf Mobilgeräten anpassen
• Einzelne Blöcke können auf auf Mobilgeräten ausblenden oder auf dem Desktop ausblenden gesetzt werden, um Inhalte gezielt zuzuschneiden

Dark Mode

E-Mails bringen automatische Unterstützung für den Dark Mode mit. Wenn der E-Mail-Client einer empfangenden Person auf Dark Mode steht, passt sich Ihre E-Mail an. Sie können außerdem Dark-Mode-Überschreibungen pro Block konfigurieren und alternative Bilder hinterlegen, die auf dunklem Hintergrund besser wirken.

Fokusmodus

Drücken Sie Cmd+Shift+F (Mac) oder Strg+Shift+F (Windows), um in den Fokusmodus für ablenkungsfreies Bearbeiten zu wechseln. Die Seitenleisten werden ausgeblendet und die Editor-Fläche füllt Ihren Bildschirm.

Rückgängig & Wiederherstellen

Jede Bearbeitung wird in einem Verlaufsstapel festgehalten. Nutzen Sie die Schaltflächen Rückgängig und Wiederherstellen in der Werkzeugleiste oder drücken Sie Cmd+Z / Strg+Z zum Rückgängigmachen und Cmd+Shift+Z / Strg+Shift+Z zum Wiederherstellen. Die Schaltflächen deaktivieren sich selbst, wenn nichts mehr rückgängig gemacht oder wiederhergestellt werden kann.

Ihre Arbeit speichern

Gespeichert wird manuell. Nutzen Sie die Schaltfläche Speichern in der Werkzeugleiste, um Ihre Änderungen festzuschreiben; während des Schreibens zeigt die Schaltfläche einen Spinner und die Beschriftung Wird gespeichert.... Wenn Sie den Editor mit ungespeicherten Änderungen verlassen möchten, fordert Owlat Sie auf, sie zuerst zu speichern oder zu verwerfen, damit Sie durch das Wegnavigieren keine Arbeit verlieren.

Vorschau

Nutzen Sie das Vorschau-Panel, um vor dem Versand zu sehen, wie Ihre E-Mail aussehen wird. Die Vorschau verwendet dieselbe Rendering-Engine wie Ihre versendeten E-Mails — was Sie sehen, ist also das, was Ihre Empfängerinnen und Empfänger erhalten. Das Panel bietet:

• Eine Geräteauswahl — Vorschau in Desktop-, Tablet- oder Mobilbreite
• Einen Dark-Mode-Umschalter, um zu prüfen, wie sich die E-Mail in dunklen Clients anpasst
• Eine Codeansicht, um den erzeugten HTML-Quelltext zu inspizieren
• Einen E-Mail-Gesundheitswert, der schon beim Bauen Warnungen zu Darstellung und Zustellbarkeit sichtbar macht

CSS-Animationen

Blöcke können eingebaute CSS-Animationen als Progressive Enhancement nutzen. Fügen Sie die Klasse owlat-animate-fade-in oder owlat-animate-slide-up im Feld für CSS-Klassen des Blocks hinzu (das Feld wird unverändert durchgereicht, verwenden Sie also exakt diesen Klassennamen). Die Animationen respektieren prefers-reduced-motion und laufen nur, wenn die Nutzerin oder der Nutzer Bewegung zulässt. Sie funktionieren in Apple Mail und iOS Mail; andere Clients ignorieren sie stillschweigend.

Gmail-Promotions-Annotationen

Wenn Sie an Gmail-Nutzerinnen und -Nutzer senden, können Sie Annotationen für den Werbung-Tab hinzufügen, um direkt im Posteingang reichhaltige Karten anzuzeigen (Logo, Deal-Badge, Aktionscode, Ablaufdatum). Diese werden nicht im visuellen Editor gesetzt — sie sind ein Entwickler-Feature, das über die Render-Optionen des Renderers konfiguriert wird, und lassen sich daher nicht aus dem Dashboard heraus hinzufügen. Details finden Sie in der Dokumentation zum E-Mail-Renderer.

Nächste Schritte

• E-Mail-Vorlagen — Ihre Vorlagenbibliothek verwalten
• Gespeicherte Blöcke — Inhaltsabschnitte speichern und wiederverwenden
• E-Mail-Theme — Standardgestaltung für Ihre E-Mails festlegen
• Medienbibliothek — Bilder über alle E-Mails hinweg verwalten und wiederverwenden
• Kampagnen & Auswertung — Ihre fertigen E-Mails versenden