Drag-&-Drop-Bereiche in einer benutzerdefinierten E-Mail-Vorlage bestimmen

Unterstützte Produkte

Erfordert eines der folgenden Produkte oder höher.

Marketing Hub -Professional

Content Hub -Professional

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.

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.

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:

Parameter	Beschreibung
`<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.

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.

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 %}

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:

Start Building

Reference

Best Practices

Marketplace

Versions & Deprecations

Drag-&-Drop-Bereiche in einer benutzerdefinierten E-Mail-Vorlage bestimmen

Erforderliche Daten

Optionale Tags

Leeren Drag-&-Drop-Bereich erstellen

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

​Erforderliche Daten

​Optionale Tags

​Leeren Drag-&-Drop-Bereich erstellen

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

Erforderliche Daten

Optionale Tags

Leeren Drag-&-Drop-Bereich erstellen

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