Unterstützte Produkte
Erfordert eines der folgenden Produkte oder höher.
Marketing HubMarketing HubProfessional
Content HubContent HubProfessional
Letzte Änderung: 22. August 2025
Mit Drag-&-Drop-Bereichen haben Entwickler die Möglichkeit, Abschnitte mit benutzerdefinierten E-Mail-Vorlagen zu erstellen, die Änderungen an Layout, Stil und Content direkt im E-Mail-Editor zulassen. Entwickler können so anhand einer kleinere Anzahl von E-Mail-Vorlagen mit globaler Struktur Content-Autoren in die Lage versetzen, eine Vielzahl von Seiten mit unterschiedlichen Zwecken und Layouts zu erstellen.
Hinweis: Benutzerdefinierte E-Mail-Vorlagen dürfen nur einen Drag-&-Drop-Bereich enthalten.
1

Neue HTML-Vorlage erstellen

Erstellen Sie eine neue HTML-Vorlage, die den HubL- und HTML-Code enthält, aus dem Ihr Drag-&-Drop-Bereich dann besteht.
  • Gehen Sie dazu in Ihrem HubSpot-Account zu Content > Design-Manager.
  • Erstellen Sie in der linken Seitenleiste eine neue Datei, indem Sie auf Datei > Neue Datei klicken.
  • Klicken Sie im Dialogfeld auf das Dropdown-Menü Was möchten Sie erstellen? und wählen Sie HTML und HUBL aus.
  • Klicken Sie auf Weiter.
  • Klicken Sie auf das Dropdown-Menü Vorlagentyp und wählen Sie dann E-Mail aus.
  • Geben Sie einen Namen für die Vorlage ein.
  • Um den Speicherort der Vorlage zu aktualisieren, klicken Sie unter Dateispeicherort auf Ändern und wählen Sie dann einen neuen Ordner aus, in dem die Vorlage erstellt wird.
  • Klicken Sie auf Erstellen.
2

HubL-Tags zum Vorlagen-Header hinzufügen

Beachten Sie die folgenden erforderlichen und optionalen Tags, die Sie aus Gründen des Stylings und der Kompatibilität in den <head>-Abschnitt Ihrer E-Mail-Vorlage einfügen können:

​
Erforderliche Daten

{{ dnd_area_stylesheet }}Dieses Tag stellt Folgendes bereit:
  • Fügt zugehörige Medienabfragen hinzu
  • Behebt bekannte Styling-Probleme in Outlook
  • Setzt Ränder und Auffüllungen zurück
  • Aktiviert Anti-Aliasing
  • Fügt etwas CSS hinzu

​
Optionale Tags

Um sicherzustellen, dass Ihre Vorlage auf allen gängigen E-Mail-Clients einheitlich dargestellt wird, können Sie auch die folgenden optionalen HubL-Tags zu Ihrer Vorlage hinzufügen:
  • {{ email_header_includes }}: Mit diesem Tag wird CSS in Ihre Vorlage eingefügt, um das Styling konsistent darzustellen, häufige Styling-Probleme zu beheben und Metadaten zum HTML-Code der E-Mail hinzuzufügen. Beim Parsen dieses HubL-Tags wird der folgende Content innerhalb des <head> im HTML-Code der E-Mail hinzugefügt:
ParameterBeschreibung
<meta name="x-apple-disable-message-reformatting">Verhindern, dass iOS 11 automatisch E-Mails skaliert
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Informiert Browser und E-Mail-Clients darüber, welche unterschiedlichen Zeichen von ihnen erwartet werden
<meta http-equiv="X-UA-Compatible" content="IE=edge">Ermöglicht CSS3- und Medienabfragen unter Windows Phone 7.5, informiert Internet Explorer, Content im höchstmöglichen Modus zu rendern, und ermöglicht es dem Browser, auszuwählen, mit welchem Version von Internet Explorer die E-Mail gerendert werden soll
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>Legt die sichtbare Fläche auf die Breite des Gerätebildschirms fest, wodurch Ihre E-Mail responsiv wird
  • {{ reset_css_stylesheet }}: Durch das Einfügen dieses Tags werden eine Reihe von Styling-Problemen in Outlook behoben und die Ränder und Auffüllungen Ihrer E-Mail werden zurückgesetzt.
  • {{ outlook_background_snippet }}: Mit diesem Tag wird das Hintergrundbild oder die Hintergrundfarbe in Outlook festgelegt, sofern Sie eine zugehörige CSS-Regel für den Hintergrund angegeben haben.
3

Einen Drag-&-Drop-Bereich erstellen

Nachdem Sie das {{ dnd_area_stylesheet }}-HubL-Tag und alle anderen optionalen Tags zum <head> Ihrer Vorlage hinzugefügt haben, können Sie einen dnd_area im Text der Vorlage konfigurieren.

​
Leeren Drag-&-Drop-Bereich erstellen

Ein dnd_area ist der Container, der einen Teil der Webseite in Bezug auf Struktur, Design und Inhalt bearbeitbar macht. Der Text eines dnd_area-Tags liefert den Standardinhalt für den Drag-&-Drop-Bereich.Der Drag-&-Drop-Bereich kann entweder in einem <div> oder einem <table> enthalten sein. Eine Einschränkung des Drag-&-Drop-Bereichs besteht darin, dass die Mindestbreite auf 624 Pixel festgelegt ist. Dieser Wert kann nicht überschrieben werden.Dieses Tag allein erzeugt eine Ablagezone, in die Content-Autoren im E-Mail-Editor Module ziehen können.Der folgende Code würde einen leeren Drag-&-Drop-Bereich angeben:
{% dnd_area "main" %}
	<!-- generates an empty drag and drop area drop-section -->
{% end_dnd_area %}

​
Einen Drag-&-Drop-Bereich mit leeren Spalten erstellen

Sie können Ihren Drag-&-Drop-Bereich auch anpassen, um Standardabschnitte und -spalten anzugeben, indem Sie die Felder dnd_section und dnd_column verwenden.Der folgende HubL-Code würde beispielsweise einen Drag-&-Drop-Bereich mit 3 Spalten angeben:
{% dnd_area "main" %}
  {% dnd_section padding={'top': 25, 'bottom': '20} %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
  {% end_dnd_section %}
{% end_dnd_area %}
Das dnd_row-HubL-Tag wird derzeit nicht in E-Mail-Vorlagen unterstützt.
4

Drag-&-Drop-Bereich mit Modulen hinzufügen

Um den Abschnitt vorab mit Inhalt zu füllen, können wir das dnd_module-Tag verwenden, um ein Modul einzubinden, indem wir auf seinen Pfad verweisen. Das Modul muss innerhalb eines Abschnitts und einer Spalte hinzugefügt werden, damit der Drag-&-Drop-Bereich vorab mit Content gefüllt wird.Im folgenden Beispiel wird auf ein Standard-HubSpot-Modul verwiesen, aber Sie können auch von Ihnen erstellte Module einbeziehen, indem Sie deren Pfad im Dateiverzeichnisbaum Ihrer Design-Tools angeben.Um einen Standardwert für Ihr dnd_module festzulegen, können Sie das module_attribute-Tag verwenden.
{% dnd_area "main", full_width=False %}
	{% dnd_section padding={
	            'top':'25',
	            'bottom':'20'
	            }, full_width=False %}
	  {% dnd_column width=6 %}
	    {% dnd_module path='@hubspot/image_email', img={
	                    'alt':'NavyLogo',
	                    'height':38,
	                    'src':'email_dnd_template_images/NavyLogo.png',
	                    'width':120
	                    }, alignment='center', hs_enable_module_padding=True, hs_wrapper_css={
	                    'padding-bottom':'10px',
	                    'padding-left':'20px',
	                    'padding-right':'20px',
	                    'padding-top':'10px'
	                    } %}
	    {% end_dnd_module %}
	  {% end_dnd_column %}
	  {% dnd_column width=6 %}
	  {% end_dnd_column %}
	{% end_dnd_section %}
{% end_dnd_area %}
5

Drag-&-Drop-Vorlage weiter anpassen und gestalten

Jedes Drag-&-Drop-HubL-Tag (z. B. dnd_area, dnd_section, dnd_column usw.) enthält verschiedene Parameter, die Sie verwenden können, um ein Standard-Styling bereitzustellen und andere Verhaltensweisen festzulegen, z. B. das Label, das in der Seitenleiste des E-Mail-Editors angezeigt wird.Um mehr über die für die einzelnen Tags verfügbaren Parameter zu erfahren, sehen Sie sich die folgenden Links für die einzelnen Tags an: