E-Mail-Vorlagen-Markup
Der folgende Artikel enthält Informationen darüber, wie Standard-E-Mail-Vorlagen von HubSpot programmiert sind. E-Mail-Clients unterstützen nur bestimmte HTML- und CSS-Funktionen. Aus diesem Grund erfordert die Kodierung von E-Mail-Vorlagen, die auf allen Clients konsistent dargestellt werden, ein gewisses Maß an Erfahrung und Geduld. Um die Arbeit zu erleichtern, können HubSpot-E-Mail-Vorlagen entweder als benutzerfreundliche Drag-&-Drop-Vorlagen oder als Code-Dateien erstellt werden.
Drag-&-Drop-E-Mail-Vorlagen können entweder responsiv oder einfach sein. Responsiv bedeutet, dass sie sich an die Viewport-Größe anpassen, einfach bedeutet, dass sie statisch bleiben.
Standardmäßig sind sie responsiv, aber Sie können sie in einfache Vorlagen umwandeln, indem Sie im Inspektor auf „Responsive E-Mail-Vorlage“ klicken und „Einfache E-Mail-Vorlage“ auswählen.
Designer haben die Möglichkeit, bestimmte Standardfarben und -schriftarten anzupassen („Einstellungen“ > „Marketing“ > „E-Mail“) und in Drag-&-Drop-Vorlagen im Design-Manager Inline-CSS zu Modulen (Modul-Zahnradsymbol > „CSS bearbeiten“) hinzuzufügen.
Sie können jederzeit auf das Markup eines Vorlagenlayouts zugreifen, indem Sie es zu HTML klonen („Aktionen“ > „Zu HTML klonen“). Mit Code-Vorlagen können Sie das E-Mail-Markup vollständig anpassen, sofern Sie die unten aufgeführten Variablen einfügen.
Um mit HubSpot E-Mails versenden zu können, müssen Ihre Vorlagen bestimmte Informationen enthalten. Siehe die erforderlichen HubL-E-Mail-Variablen. Wenn Sie mit Code-Vorlagen arbeiten, sollten Sie auch Module verwenden, um sicherzustellen, dass der E-Mail-Inhalt problemlos für jede einzelne E-Mail bearbeitet werden kann..
Eine Herausforderung beim Schreiben von Code für E-Mail-Vorlagen, die auf allen Clients korrekt dargestellt werden, ist die fehlende Unterstützung für CSS in einem <style>
innerhalb des <head>
.
Um das Schreiben von Code für E-Mail-Vorlagen zu vereinfachen, unterstützen Code-E-Mail-Vorlagen von HubSpot ein spezielles style-Tag, das Designern die Möglichkeit gibt, CSS zu schreiben, der kompiliert und in Inline-CSS umgewandelt wird und zu den gewünschten Elementen hinzugefügt wird. Jeder Code, der zu einem style-Tag mit der ID hs-inline-css
hinzugefügt wird, wird auch zu den Ziel-Tags hinzugefügt.
Microsoft Outlook wendet beispielsweise eine Standard-Schriftart auf den gesamten in <td>-Tags enthaltenen Text an, es sei denn, Sie geben für diese Tabellenspalte eine Schriftart inline an. Im folgenden Beispiel wird das style-Tag hs-inline-css
verwendet, um allen Tabellenspalten in der Vorlage eine Schriftart hinzuzufügen. Bitte beachten Sie, dass alle Medienabfragen in einer separaten <style>
enthalten sein sollten, da sie nicht inline gemacht werden können.
HINWEIS: Das data-hse-inline-css
-Attribut in einem <style>
-Tag im Abschnitt „Bearbeiten“ > „Head bearbeiten“ von Drag-&-Drop-Vorlagen ersetzt hs-inline-css
, um das gleiche Ziel zu erreichen. In Code-Dateien können beide Methoden verwendet werden (solange es nur ein style#hs-inline-css
-Elemente pro Vorlage gibt. Es dürfen mehrere style[data-hs-inline-css="true"]
-Elemente verwendet werden.
Das Standard-E-Mail-Vorlagenlayout von HubSpot verwendet das unten stehende Markup. Diese responsiven Layouts enthalten Medienabfragen, die die Bilder und Tabellen responsiv machen. Die responsiven Layouts verwenden Farb- und Schriftartvariablen, die mit „Einstellungen“ > „Marketing“ > „E-Mail“ verknüpft sind.
Wenn Sie mit dem responsiven Layout von HubSpot arbeiten, wird jedes <td>
mit einer Klasse, die den Text „Spalte“ enthält, responsiv gemacht.
Einfache HubSpot-Vorlagenlayouts verwenden ein anderes Markup und enthalten keine Mediaenabfragen, die die E-Mail responsiv machen. Einfache Layouts verwenden außerdem Farb- und Schriftartvariablen die mit „Einstellungen“ > „Marketing“ > „E-Mail“ verknüpft sind.
Wenn Sie von Grund auf neu beginnen, indem Sie eine .html-E-Mail im Design Manager erstellnen, generiert HubSpot automatisch das unten stehende Markup.
Vielen Dank, dass Sie Ihr Feedback mit uns geteilt haben.