Tutorials

HubSpot HTML-E-Mails aufrufen und bearbeiten: Der ultimative Guide

Melden

Hier ist ein umfassendes Tutorial, wie du in HubSpot auf den HTML-Code deiner E-Mails zugreifen kannst – egal, ob du eine komplett eigene Vorlage erstellen oder nur kleine Änderungen am Code vornehmen möchtest.

HubSpot bietet zwei grundlegende Wege, um mit E-Mail-HTML zu arbeiten: den flexiblen Drag-and-Drop-Editor (begrenzter HTML-Zugriff) und das Design-Manager-Tool (voller HTML-Zugriff). In dieser Anleitung lernst du beide Methoden kennen.

Methode 1: Eine komplett eigene HTML-E-Mail-Vorlage erstellen

Wenn du ein fertiges HTML-Template hast oder von Grund auf neu codieren möchtest, ist dies der richtige Weg.

  1. Navigiere zum Design-Manager: Gehe in deinem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  2. Neue Datei erstellen: Klicke oben links auf Datei > Neue Datei.
  3. Dateityp wählen:
    • Wähle im Dialogfeld HTML & HUBL.
    • Klicke auf Weiter.
  4. Vorlagentyp festlegen:
    • Wähle unter „Was erstellen Sie?“ die Option E-Mail.
    • Gib der Datei einen Namen (z. B. "Custom_HTML_Newsletter").
    • Wähle den Speicherort und klicke auf Erstellen.
  5. Code einfügen: Du siehst nun einen Editor mit etwas Standard-Code (HUBL). Hier kannst du dein eigenes HTML einfügen.
    • Wichtig: Achte darauf, dass die erforderlichen HUBL-Tags (wie {{ standard_header_includes }} und {{ standard_footer_includes }}) enthalten sind, damit die E-Mail versendet werden kann.
  6. Veröffentlichen: Klicke oben rechts auf Änderungen veröffentlichen. Die Vorlage steht dir nun beim Erstellen einer neuen E-Mail unter dem Reiter "Eigene Vorlagen" zur Verfügung.

Methode 2: HTML-Quellcode im Drag-and-Drop-Editor bearbeiten

Im Standard-Editor kannst du nicht den Code der gesamten E-Mail sehen, aber du kannst den HTML-Code einzelner Textmodule bearbeiten.

  1. E-Mail öffnen: Gehe zu Marketing > E-Mail und öffne einen Entwurf oder erstelle eine neue E-Mail.
  2. Textmodul auswählen: Klicke in ein beliebiges Textfeld in deiner E-Mail.
  3. Quellcode-Icon finden: In der Werkzeugleiste, die über oder neben dem Text erscheint, klicke auf Mehr (oft durch drei Punkte oder ein Dropdown markiert) und suche nach dem Quellcode-Icon (<>).
  4. HTML bearbeiten: Es öffnet sich ein Fenster mit dem HTML-Code für diesen spezifischen Abschnitt. Hier kannst du Styles anpassen oder eigene Tags einfügen. Klicke auf Bestätigen, um die Änderungen zu speichern.

Methode 3: HTML einer bestehenden E-Mail exportieren

Möchtest du den fertigen Code einer HubSpot-E-Mail herunterladen, um ihn woanders zu nutzen?

  1. E-Mail-Übersicht: Gehe zu Marketing > E-Mail.
  2. Aktionen-Menü: Bewege den Mauszeiger über die gewünschte E-Mail und klicke auf Aktionen.
  3. Exportieren: Wähle die Option E-Mail-HTML exportieren. Du erhältst eine Datei, die das gesamte gerenderte HTML inklusive aller Styles enthält.

Wichtige Tipps für die Arbeit mit HTML in HubSpot

  • HUBL (HubSpot Markup Language): Wenn du eigene Templates erstellst, musst du HUBS-Variablen für personalisierte Inhalte verwenden (z. B. {{ contact.firstname }}). Ohne die obligatorischen Variablen für den "Abmelde-Link" und die "Unternehmensadresse" lässt HubSpot den Versand nicht zu.
  • Responsive Design: Wenn du HTML selbst schreibst, bist du selbst dafür verantwortlich, dass die E-Mail auf Mobilgeräten gut aussieht. HubSpot optimiert benutzerdefinierten Code nicht automatisch für die mobile Ansicht.
  • Vorschau & Test: Nutze immer die Funktion Vorschau (oben rechts im Editor), um zu sehen, wie dein Code in verschiedenen E-Mail-Clients (Outlook, Gmail etc.) dargestellt wird.

Fazit: Für kleine Anpassungen reicht das Quellcode-Icon im Textmodul. Für professionelle, individuell designte E-Mails ist der Weg über den Design-Manager unumgänglich.

0