Zum Hauptinhalt springen

Unterstützte Produkte

In diesem Artikel erfahren Sie mehr darüber, wie Standard-E-Mail-Vorlagen von HubSpot programmiert sind. Beachten Sie beim Erstellen benutzerdefinierter E-Mail-Vorlagen bitte, dass E-Mail-Clients nur bestimmte HTML- und CSS-Funktionen unterstützen. Aus diesem Grund erfordert das Schreiben von Code für E-Mail-Vorlagen, die auf allen Clients konsistent dargestellt werden sollen, ein gewisses Maß an Erfahrung und Geduld. In der Wissensdatenbank von HubSpot erfahren Sie, wie Sie Vorlagenlayouts in der App erstellen oder eine bestehende E-Mail als Vorlage speichern können.

​
Erforderliche Variablen für E-Mail-Vorlagen

Um mit HubSpot E-Mails versenden zu können, müssen Ihre Vorlagen bestimmte Informationen enthalten. Informieren Sie sich dazu über 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.

​
hs-inline-css and data-hse-inline-css

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 Inline-Schriftart an. Im folgenden Beispiel wird das hs-inline-css-style-Tag verwendet, um allen Tabellenspalten in der Vorlage eine Schriftart hinzuzufügen. Bitte beachten Sie, dass alle Medienabfragen in einem separaten<style>-Element enthalten sein sollten, da sie nicht inline erfolgen können. Bitte beachten Sie ebenfalls, dass das data-hse-inline-css-Attribut in einem <style>-Tag im Abschnitt Bearbeiten > Überschrift bearbeiten von Drag-&-Drop-Vorlagen hs-inline-css ersetzt, um das Gleiche zu erreichen. In Code-Dateien können beide Methoden verwendet werden (solange nur einstyle#hs-inline-css-Element pro Vorlage vorhanden ist). Es dürfen mehrere style[data-hs-inline-css="true"]-Elemente verwendet werden.

​
Responsive E-Mail-Vorlage

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>-Element mit einer Klasse, das die Text-„Spalte“ enthält, responsiv.

​
Einfache E-Mail-Vorlage

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.

​
Bei Null beginnen

Wenn Sie von Grund auf neu beginnen, indem Sie eine .html-E-Mail im Design-Manager erstellen, generiert HubSpot automatisch das unten stehende Markup.
Zuletzt geändert am 10. Februar 2026