Verwenden Sie den benutzerdefinierten HTML-Kampagnen-Builder

Mit ActiveCampaign können Sie eine Kampagne erstellen, die benutzerdefinierten HTML-Code verwendet. Diese Option eignet sich am besten für diejenigen, die mehr Kontrolle über ihr E-Mail-Design wünschen und mit HTML vertraut sind.

In diesem Artikel erfahren Sie, wie Sie auf den HTML-Builder zugreifen können, und erhalten eine Anleitung zu bewährten Designverfahren.

Hinweise

Unser Customer Experience Team kann Ihnen bei der Fehlerbehebung von benutzerdefiniertem HTML-Code nicht helfen

Erstellen Sie eine benutzerdefinierte HTML-Kampagne

1. Gehen Sie zu Kampagnen und und klicken Sie auf "Eine Kampagne erstellen".
2. Auf der Page Kampagnentyp:
   • Geben Sie einen Namen für Ihre Kampagne an
   • Wählen Sie Ihren Kampagnentyp
   • Klicken Sie auf die Schaltfläche "Weiter".
3. Auf der Page Kampagnenübersicht können Sie Ihre Kampagnendetails angeben. Hinweis: Sie können diesen Schritt überspringen und mit der Erstellung Ihres Entwurfs beginnen. Sie müssen jedoch vor dem Versenden Ihrer E-Mail Angaben zur Kampagne machen.
4. Klicken Sie auf den Abwärtspfeil neben der Schaltfläche "Mit E-Mail-Designer erstellen". Wählen Sie "HTML builder"
5. Wählen Sie eine Vorlage (falls zutreffend) oder klicken Sie auf die Schaltfläche "Start from Scratch".
6. Der HTML-Builder wird geöffnet. Fügen Sie Ihr benutzerdefiniertes HTML in den Builder auf der linken Seite ein. Während Sie den Code hinzufügen, sehen Sie, wie er in der Vorschau auf der rechten Seite gerendert wird.
7. Um personalisierte Inhalte, bedingte Inhalte, ein Bild, einen RSS-Feed oder Inhalte aus einer URL einzufügen, klicken Sie auf auf die Option "Einfügen" und wählen dann das Element aus, das Sie hinzufügen möchten. Befolgen Sie dann die Anweisungen auf , um das Element hinzuzufügen ( ).
8. Um zum visuellen Editor zu wechseln, klicken Sie auf das Symbol des visuellen Editors.
   
   
   
   
9. Klicken Sie auf das Einstellungssymbol (Zahnrad), um Ihren Betreff zu aktualisieren, den Text in der Kopfzeile hinzuzufügen/zu aktualisieren, Ihre "Von"- und "Antwort an"-Informationen zu aktualisieren und Ihre E-Mail zu testen.
10. Klicken Sie auf die Schaltfläche "Weiter". Sie werden wieder auf die Page mit der Kampagnenübersicht weitergeleitet.
11. Wenn alles gut aussieht, können Sie auf "Jetzt senden" klicken, um die Kampagne zu senden, auf die Schaltfläche "Planen" klicken, um zu einem späteren Zeitpunkt zu senden, oder auf "Speichern und Beenden" klicken, um die Kampagne zu einem späteren Zeitpunkt erneut zu starten.

HTML-Design-Anleitung

Im Folgenden finden Sie eine allgemeine Anleitung zur Verwendung des HTML-Builders. Zur Erinnerung: Unser Customer Experience Team ist nicht in der Lage, Ihnen bei der Fehlersuche zu helfen oder einen Code für Ihre E-Mail zu erstellen.

Layout

• 650px oder weniger Breite
  Die allgemeine Regel für die Größe von E-Mails ist es, 650px oder weniger in der Breite zu halten. Dadurch wird die E-Mail in den meisten E-Mail-Clients und Konfigurationen korrekt angezeigt.
• Einfache Layouts sind am besten
  Bei der Gestaltung von E-Mails ist einfach am besten. Wenn Sie versuchen, ein kompliziertes Design zu entwerfen, werden Sie eine Menge Tests und Fehlersuche mit E-Mail-Client-Problemen haben. Wenn Sie einen fortgeschrittenen Entwurf erstellen möchten, sollten Sie sich darauf einstellen, viele Tabellen zu verwenden und einen angemessenen Zeitraum für die Tests einzuplanen.
• Verwenden Sie grundlegende HTML-Tabellen 
  Sie müssen Standard-HTML-Tabellen verwenden, um das Gesamtlayout zu erstellen. CSS-Floating- und Layout-Techniken werden nicht in allen E-Mail-Clients korrekt dargestellt.
• Seien Sie vorsichtig mit dem Padding von Tabellenzellen
  Outlook wendet das Padding von jeder Zelle in einer Zeile auf alle Zellen in der Zeile an. Dies könnte zu unerwünschten Design-Änderungen führen. Am besten wäre es, wenn Sie versuchen, für alle Zellen in einer Zeile das gleiche Padding anzuwenden oder ein inneres div oder eine Tabelle (die über ein Padding verfügt) innerhalb der Zelle zu platzieren, für die Sie ein Padding wünschen. (Mehr Infos)
• Vermeiden Sie die Verwendung von colspans="" in Ihren Tabellen
  . Einige E-Mail-Clients unterstützen diese nicht vollständig und andere haben Darstellungsprobleme für die anderen Zellen, wenn Sie einen colspan verwenden.

CSS

• Verwenden Sie keine externen Stylesheets
  . Sie funktionieren nur in einigen wenigen E-Mail-Clients, und Sie sollten Ihr gesamtes CSS über Inline-CSS in Ihr HTML einbinden. 
• Verwenden Sie keine CSS-Klassen - verwenden Sie immer Inline-CSS 
  Viele E-Mail-Clients unterstützen keine CSS-Klassen. Anstatt CSS-Klassen zu deklarieren, sollten Sie Inline-CSS verwenden. Ein Beispiel wäre
  content
  anstelle von
  content
• Verwenden Sie keine CSS-Verknüpfungen
  Mit CSS können Sie Eigenschaften ganz normal in Gruppen festlegen. Wie zum Beispiel style="font: 12px, Arial" Anstatt solche Attribute zu gruppieren, sollten Sie jeden Teil einzeln festlegen. Zum Beispiel: style="font-size:12px; font-family:Arial" 
• Vermeiden Sie die Verwendung der CSS-Optionen float und position
  Einige E-Mail-Clients ignorieren sowohl die CSS-Optionen float als auch position. Versuchen Sie stattdessen, Tabellen zu verwenden.

Bilder und Video

• Verwenden Sie absolute URLs für Bildquellen 
  Anstelle eines Bildes wie () müssen Sie die absolute URL der Datei wie () angeben 
• Verwenden Sie immer Alt-Tags () 
  Die meisten E-Mail-Programme deaktivieren Bilder standardmäßig. Wenn Sie keine Alt-Tags haben, sehen Ihre Abonnenten nur ein leeres Feld. Mit einem Alt-Tag sehen Ihre Abonnenten den Text, den Sie in das Tag eingeben. 
• Keine Videos oder Flash einbetten
  Das direkte Einbetten von Videos oder Flash in Ihre E-Mail ist keine gute Idee. Viele E-Mail-Clients unterstützen einen solchen Code nicht, und viele Spam- und Virenerkennungsprogramme kennzeichnen Ihre E-Mail als Spam/schädlich. Anstatt Ihr Video oder Flash in Ihre E-Mail einzubetten, machen Sie einen Screenshot davon, wie das Video oder der Flash-Player aussieht, und betten Sie diesen ein. Sie können das Video oder Flash in ihrem Browser öffnen lassen, wenn sie darauf klicken. 
• Animierte GIFs werden nicht vollständig unterstützt
  Fragen Sie sich, ob Sie eine Animation in Ihrer E-Mail benötigen. Die meisten E-Mail-Programme unterstützen animierte GIFs, Outlook 2007 jedoch nicht. E-Mail-Clients, die keine animierten GIFs unterstützen, zeigen wahrscheinlich das erste Bild Ihrer Animationssequenz an. 
• Seien Sie vorsichtig mit zusammengesetzten Bildern
  Wenn Sie ein größeres Bild zusammengesetzt und in Ihrem HTML-Code mit Tabellenzellen oder img-Tags direkt nebeneinander platziert haben, müssen Sie es gründlich testen. Einige E-Mail-Clients fügen zusätzlichen Platz zwischen den Bildern ein, was dazu führt, dass Ihre E-Mail nicht gut aussieht.
• Vermeiden Sie die Verwendung von Bildern zur Unterstützung Ihres Layouts
  Manche Leute verwenden 1- oder 2-Pixel-Bilder, um die Elemente in ihrem Layout auszurichten. Einige E-Mail-Clients oder Filter halten es für ein potenzielles Lese- oder Öffnungs-Tracking-Bild und stufen die E-Mail negativ ein.
• Testen Sie Ihre E-Mail mit deaktivierten Bildern
  Da die meisten E-Mail-Clients E-Mails standardmäßig mit deaktivierten Bildern anzeigen, müssen Sie prüfen, wie Ihre E-Mail mit deaktivierten Bildern aussieht.
• Achten Sie auf Ihre Dateigrößen
  Wie beim traditionellen Webdesign sollten Sie auch bei Ihrer E-Mail auf die Größe der Bilddateien achten. Versuchen Sie, diese so gering wie möglich zu halten, um sicherzustellen, dass Ihre Abonnenten sie schnell herunterladen können.

Hintergrund

• Hintergrundbilder werden nicht vollständig unterstützt
  Wenn Sie ein Hintergrundbild verwenden, bedenken Sie, dass einige E-Mail-Clients dieses nicht anzeigen. Wenn Sie dennoch ein Hintergrundbild verwenden möchten, verwenden Sie die HTML-Hintergrundoptionen, anstatt mit CSS einen Hintergrund zu deklarieren.
• Hintergrundfarben für den gesamten Textkörper 
  Viele E-Mail-Clients (z. B. Google Mail) zeigen keine Hintergrundfarbe an, die Sie für den Haupttext (-Tag) festlegen. Wenn Sie eine Hintergrundfarbe im Body-Tag festlegen, sollten Sie auch ein Wrapping-Div mit einer Hintergrundfarbe haben, das Ihren Inhalt umgibt. Selbst wenn die Hintergrundfarbe des Texts nicht unterstützt wird, erhalten Sie auf diese Weise etwas Ähnliches.

Sonstige

• Keinen Text oberhalb des Textbeginns einfügen tag
  Alles, was Sie oberhalb des Body-Tags einfügen, wird wahrscheinlich entfernt und nicht verwendet.
• Fügen Sie kein Javascript
  ein. Es wird wahrscheinlich von den meisten E-Mail-Clients entfernt, und Spam-Filter könnten es als bösartigen Code erkennen.
• Vermeiden Sie Microsoft Office
  . Der erzeugte HTML-Code kann zu Problemen führen. Außerdem werden Sie beim Kopieren und Einfügen aus Office die dortige Formatierung einfügen und wahrscheinlich Designprobleme haben.