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 haben möchten und mit der Verwendung von HTML vertraut sind.

In diesem Artikel erfahren Sie, wie Sie auf den HTML-Builder zugreifen und erhalten Anleitungen zu bewährten Designmethoden.

Hinweis

Unser Kunden 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 klicken Sie auf „Kampagne erstellen“.
2. Auf der Seite „Kampagnentyp“:
   • Geben Sie einen Namen für Ihre Kampagne an
   • Wählen Sie Ihren Kampagnentyp
   • Klicken Sie auf die Schaltfläche „Weiter“
3. Geben Sie auf der Seite „Kampagnenzusammenfassung“ Ihre Kampagnendetails ein. Beachten Sie, dass Sie diesen Schritt überspringen und mit der Erstellung Ihres Designs beginnen können. 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“ aus.
5. Wählen Sie eine Vorlage aus (sofern zutreffend) oder klicken Sie auf die Schaltfläche „von Grund auf beginnen“.
6. Der HTML-Builder wird geöffnet. Fügen Sie Ihr benutzerdefiniertes HTML in den Builder auf der linken Seite ein. Wenn Sie Code hinzufügen, wird dieser im Vorschaubildschirm im rechten Bereich dargestellt.
7. Um personalisierte Inhalte, bedingte Inhalte, ein Bild, einen RSS-Feed oder Inhalt von einer URL einzufügen, klicken Sie auf die Option „Einfügen“ und wählen Sie dann das Element aus, das Sie hinzufügen möchten. Als nächstes folgen Sie den Anweisungen, um diesen Artikel hinzuzufügen.
8. Um zum visuellen Editor zu wechseln, klicken Sie auf das Symbol des visuellen Editors.
   
   
   
   
9. Klicken Sie auf das Einstellungssymbol (Zahnradsymbol), um Ihre Betreffzeile zu aktualisieren, Preheader-Text 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 zur Seite „Kampagnenzusammenfassung“ zurückgeleitet.
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 später zur Kampagne zurückzukehren.

Anleitung zum HTML-Design

Nachfolgend finden Sie allgemeine Hinweise zur Verwendung des HTML-Builders. Zur Erinnerung: Unser Kunden Experience Team kann Ihnen weder bei der Fehlerbehebung helfen noch Code für Ihre E-Mail erstellen.

Layout

• Designbreite von 650 Pixeln oder weniger
  Die allgemeine Regel für die E-Mail-Größe lautet, die Breite auf 650 Pixel oder weniger zu beschränken. 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 erstellen, werden Sie beim Testen und Debuggen zahlreiche Probleme mit dem E-Mail-Client feststellen. Wenn Sie ein anspruchsvolleres Design fertigstellen möchten, müssen Sie mit der Verwendung vieler Tabellen rechnen und ausreichend Zeit zum Testen einplanen.
• Verwenden Sie grundlegende HTML-Tabellen.
  Sie müssen standardmäßige HTML-Tabellen verwenden, um das Gesamtlayout zu erstellen. CSS-Floating- und Layouttechniken werden nicht in allen E-Mail-Clients korrekt gerendert.
• Seien Sie vorsichtig mit der Polsterung von Tabellenzellen
  Outlook wendet die Polsterung von jeder Zelle in einer Zeile auf alle Zellen in der Zeile an. Dies könnte zu optischen Änderungen führen, die Sie nicht wünschen. Am besten versuchen Sie, für alle Zellen in einer Zeile die gleiche Polsterung anzuwenden oder ein inneres Div oder eine Tabelle (mit Polsterung) in die Zelle einzufügen, die Sie mit Polsterung versehen möchten. (Weitere Informationen)
• Vermeiden Sie die Verwendung von colspans="" in Ihren Tabellen
  Einige E-Mail-Clients unterstützen Colspans nicht vollständig und bei anderen kann es zu Anzeigeproblemen bei den anderen Zellen kommen.

CSS

• Verwenden Sie keine externen Stylesheets.
  Sie funktionieren nur in einigen wenigen E-Mail-Clients und Sie sollten Ihr gesamtes CSS mithilfe von 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 < div style="color:#cccccc;" > content < /div > statt < div class="cssclassa" > content < /div >
• Verwenden Sie keine CSS-Verknüpfungen
  Mit CSS können Sie Eigenschaften ganz normal in Gruppen festlegen. 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 von CSS-Float- oder Positionsoptionen.
  Einige E-Mail-Clients ignorieren sowohl die Float- als auch die Positions-CSS-Optionen. Versuchen Sie stattdessen, Tabellen zu verwenden.

Bilder und Video

• Verwenden Sie absolute Bildquellen-URLs
  Anstatt ein Bild wie ( < img src= "img.gif" > ) einzuschließen, müssen Sie die absolute URL zur Datei wie ( < img src= "http://site.com/img.gif" > ) einschließen.
• Verwenden Sie immer Alt-Tags ( < img src="http://site.com/img.gif" alt="Company ABC" > )
  Die meisten E-Mail-Clients deaktivieren Bilder standardmäßig. Sofern Sie keine Alt-Tags haben, wird Ihren Abonnenten nur ein leeres Feld angezeigt. Mit einem Alt-Tag sehen Ihre Abonnenten den Text, den Sie in das Tag einfügen.
• Keine Videos oder Flash einbetten
  Es ist keine gute Idee, Videos oder Flash direkt in Ihre E-Mail einzubetten. Viele E-Mail-Clients unterstützen einen solchen Code nicht, und viele Spam- & Virenerkennungsprogramme werden Ihre E-Mail als Spam/schädlich einstufen. 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, 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 zu einem unschönen Erscheinungsbild der E-Mail führen kann.
• Vermeiden Sie die Verwendung von Bildern zur Unterstützung Ihres Layouts
  Manche Leute verwenden 1 oder 2 Pixel große Bilder, um Elemente in ihrem Layout auszurichten. Einige E-Mail-Clients oder Filter halten es für ein potenzielles Lese- oder Öffnungs-Tracking-Bild und strafen die E-Mail ab.
• 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 überprüfen, wie Ihre E-Mail mit deaktivierten Bildern aussieht.
• Achten Sie auf Ihre Dateigrößen
  Wie beim herkömmlichen 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, nutzen Sie die HTML-Hintergrundoptionen, anstatt CSS zum Deklarieren eines Hintergrunds zu verwenden.
• Hintergrundfarben für den gesamten Textkörper
  Viele E-Mail-Clients (wie Gmail) zeigen keine Hintergrundfarbe an, die Sie für den Haupttext ( tag) festgelegt haben. 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 Körpers nicht unterstützt wird, erhalten Sie auf diese Weise etwas Ähnliches.

Sonstiges

• Fügen Sie nichts oberhalb des einleitenden Tags
  ein. 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önnen es als bösartigen Code erkennen.
• Vermeiden Sie Microsoft Office
  Der erzeugte HTML-Code garantiert fast immer Probleme. Außerdem werden Sie beim Kopieren und Einfügen aus Office die dortige Formatierung einfügen und wahrscheinlich Designprobleme haben.