Best Practice - HTML Formatierung in E-Mails
Du kannst deine E-Mail-Texte mit Hilfe des HTML-Editors individueller gestalten, in dem du z.B. Formatierungen wie fette oder kursive Schrift, Stichpunkte oder Ähnliches verwendest oder Bilder einfügst. Zudem lassen sich mithilfe des HTML Editors auch eigene Logos oder andere Bilder in deine E-Mail Texte einfügen.
HTML-Editor verwenden
Im Reiter "E-Mail Vorlagen" deiner Automatisierungseinstellungen findest du eine Übersicht deiner E-Mail Vorlagen:
Wähle hier die Vorlage aus, die du anpassen möchtest und klicke auf den Stift-Button, um mit der Bearbeitung zu starten. Dadurch öffnet sich das Bearbeitungsfenster für die Vorlage. Wenn du deinen Text nun mittels HTML formatieren möchtest, muss die "Ist HTML-Code" Option aktiviert sein:
Sobald diese aktiviert ist, kannst du klassische HTML-Tags verwenden. Wenn du keine Erfahrung mit HTML-Tags hast oder es dir leichter machen möchtest, aktiviere zusätzlich zum HTML-Code die “Editor verwenden”- Funktion. Ähnlich wie in Word hast du dann einige Möglichkeiten, den Text mithilfe von Buttons zu formatieren:
Zur Auswahl stehen hier:
- Unterschiedliche Überschriftsgrößen (H1 ist die größte, H3 die kleinste)
- fett, kursiv, unterstrichen
- Aufzählungszeichen
Eigenes Logo einbinden
Wenn du deiner E-Mail Vorlage ein Logo oder ein anderes Bild hinzufügen möchtest, benötigst du dafür ebenfalls die "HTML-Code"-Funktion. Hierfür durchläufst du folgende Schritte:
- Logo hochladen: Öffne deine Einstellungen für Auftragsdokumente und lade im Reiter "Logos" zunächst dein Logo hoch. Das Logo sollte entweder im JPG- oder PNG-Format sein und eine eher kleine Dateigröße von max. 30 KB haben:
- Logo Herunterladen: Nachdem das Logo hochgeladen ist, klicke auf den "Herunterladen"- Button, (damit der Link zum Logo erzeugt werden kann):
- Link zum Logo: Dann öffnet sich der Link zu deinem Logo in einem neuen Tab:
- Link in E-Mail einfügen: Wenn du nun deine gewünschte E-Mail Vorlage öffnest, wählst du im "E-Mail Nachricht"- Feld "Ist HTML-Code (nicht Editor!) aus. Jetzt kannst du dein Logo mit dem zuvor erzeugten Link und dem HMTL-Code einfügen. Der HTML- Code muss dabei folgendermaßen aussehen: <img src="LINK ZUM BILD" width="GEWÜNSCHTE BREITE">
D.h. zum Beispiel: <img src="https://s3.eu-central-1.amazonaws.com/billbee-
serimages/4272c321-e83d-455e-9642-3728c59e9511/Billbee-Logo.png" width="200px">
Diesen Code fügst du nun an der gewünschten Stelle der Email ein:
Anschließend kannst du mit einem Klick auf “Editor verwenden” sehen, wie deine E-Mail beim Versenden tatsächlich aussehen wird:
Wenn dir das Logo zu groß oder klein ist, kannst du noch die gewünschte Breite verändern (die Höhe wird dann automatisch dementsprechend angepasst). Anschließend kannst du dir eine Test - E-Mail zuschicken, um zu kontrollieren, wie es aussieht. Bitte beachte, dass es hier je nach Mailprogramm Abweichungen geben kann.
Bitte beachte: Wir können dir hinsichtlich der erstellten HTML-Formatierungen leider keinen Support anbieten. Zudem kann es vorkommen, dass die Formatierungen nicht immer wie von gewünscht bei den E-Mail Empfänger:innen ankommen. So kann je nach Mailanbieter oder Endgerät eine von dir eingestellte Formatierung im Postfach der Empfänger:innen anders aussehen (z.B. linksbündig, statt eingestellter Zentrierung, oder andere Text- oder Bildgrößen).