Weiter zum Hauptinhalt

Hol dir Hilfe von Experten

Von Schulungen bis hin zum Full-Service-Marketing: Unsere Partnercommunity kann dir dabei helfen, deine Ideen in die Tat umzusetzen.

Engagiere einen Experten

Ein Hintergrundbild zu einer benutzerdefinierten HTML-Vorlage hinzufügen

Artikel-URL kopieren
Kopiert

Hinweis

Die Informationen in diesem Artikel gelten nur für den klassischen Builder. Wie du den neuen Builder verwendest, erfährst du in den Artikel Eine E-Mail mit dem neuen Builder gestalten.

Um das Design deiner Marketingkampagnen weiter zu verbessern, kannst du ein Hintergrundbild zu einer „Eigenes Template codieren“-Vorlage (Code your own template) im Template-Builder von Mailchimp hinzufügen.

Benutzerdefinierte HTML-Vorlagen sind eine erweiterte Funktion und somit für Benutzer empfohlen, die Vorkenntnisse in benutzerdefinierter Programmierung mitbringen. Wende dich an deinen Entwickler oder beauftrage einen Mailchimp-Experten, falls du Hilfe benötigst.

In diesem Artikel erfährst du, wie du ein Hintergrundbild zu deiner benutzerdefinierten HTML-Vorlage hinzufügen kannst.

Vor dem Start

Bevor du mit diesem Vorgang beginnst, solltest du einige Punkte beachten.

  • Hintergrundbilder werden möglicherweise nicht in jedem E-Mail-Client gerendert, also vergewissere dich, dass du weißt, welche E-Mail-Clients Hintergrundbilder unterstützen, indem du dir unseren Artikel zum Thema CSS-Support durch E-Mail-Clients ansiehst.
  • Große Bilder können dazu führen, dass Kampagnen im Posteingang deiner Empfänger falsch angezeigt werden. Um optimale Ergebnisse zu erzielen, stelle die Auflösung auf 920 x 1080 px oder weniger ein und komprimiere das Bild.
  • Hoste deine Bilder auf einem öffentlichen Server oder nutze einen kostenlosen Dienst wie Imgur oder Flickr und verwende einen absoluten Dateipfad im Code, der direkt auf den Speicherort der Datei verweist. Sei dir bewusst, dass, wenn du deine eigenen Bilder auf einem privaten Server hostest, Empfänger ohne Zugriff auf den Server das Bild nicht sehen können.
  • Mailchimp kann deine Bilder auch für dich im Content-Studio hosten, wenn sie weniger als 10 MB groß sind.
  • Du kannst ein Hintergrundbild auch zu einer Standardkampagne hinzufügen. Um mehr zu erfahren, wirf einen Blick auf unseren Artikel Ein Hintergrundbild zu einer Kampagne hinzufügen.

Ein Hintergrundbild zu deiner benutzerdefinierten HTML-Vorlage hinzufügen

Dieser Prozess verwendet zum Anzeigen eines Hintergrundbilds und einer Hintergrundfarbe CSS, HTML und VML. Du fügst unseren Beispielcode in deine Vorlage ein und änderst das Platzhalterbild und die Hintergrundfarbe gemäß deinen eigenen Anforderungen.

So fügst du ein Hintergrundbild zu einer benutzerdefinierten HTML-Vorlage hinzu:

  1. Klicke auf Content (Inhalt) und dann auf Email templates (E-Mail-Vorlagen).
  2. Klicke auf Create Template (Vorlage erstellen).
  3. Klicke auf den Tab Code your own (Template selbst erstellen) und wähle Paste in code (Code einfügen) aus.
    Cursor auf dem Button „Paste in Code (Code einfügen)“
  4. Füge im Code-Editor den folgenden Code direkt nach dem öffnenden <body>-Tag ein, um das Hintergrundbild und die Farbe des Platzhalters hinzuzufügen.
    <div style="background-color:#7bceeb;">
<!--[if gte mso 9]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
 <v:fill type="frame" src="http://www.yoursite.com/yourimages/photo.jpg"color="#7bceeb" />
 <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
     <![endif]-->
 <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
  <td valign="top" align="left" background="http://www.yoursite.com/yourimages/photo.jpg" style="background-repeat:no-repeat; background-size:cover;">

    Dieser Code zeigt Platzhalterbild-URLs und -Farben an. Diese wirst du im nächsten Schritt durch deine Bild- und Farbinformationen ersetzen.

  5. Ersetze die beiden Platzhalter-Hintergrundbild-URLs und die Platzhalter-Hintergrundfarbwerte in diesem Code-Beispiel durch den Farb-Hex-Code deiner Wahl und den absoluten Dateipfad für deine Bild-URL.

  6. Füge den folgenden Code unmittelbar vor dem schließenden <body>-Tag ein. 

    </td>
</tr>
 </table>
 <!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</div>

  7. Bearbeite oder ersetze den verbleibenden Kampagnencode durch deinen eigenen, benutzerdefinierten HTML-Code.

  8. Wenn du mit der Bearbeitung des Codes fertig bist, klicke auf Save (Speichern).
  9. Klicke auf Save and Exit (Speichern und verlassen).
  10. Gib deiner Vorlage im Pop-up-Fenster Save Template (Vorlage speichern) einen Namen.
  11. Klicke auf Save (Speichern).

Du kannst im Kampagnen-Builder oder auf der Seite „Templates (Vorlagen)“ auf deine neue Vorlage zugreifen.

Tests und Fehlerbehebung

Prüfe und teste deine Kampagne vor dem Senden gründlich und sende einige Test-E-Mails an dich selbst. Mit unserem Inbox Preview-Tool kannst du überprüfen, wie dein Hintergrundbild von unterschiedlichen E-Mail-Clients angezeigt wird.

E-Mail-Kampagne in der Vorschau anzeigen und testen
Mit Inbox Preview testen

Im Folgenden findest du einige Tipps zur Arbeit mit Hintergrundbildern.

  • Das Hintergrundbild wird nicht angezeigt, wenn Bilder in der Inbox des Empfängers deaktiviert sind. Aus diesem Grund solltest du eine Hintergrundfarbe wählen, auf der dein Text korrekt dargestellt wird, falls das Hintergrundbild nicht geladen wird.

  • Vergewissere dich beim Bearbeiten deines CSS, dass du keine anderen Hintergrundeigenschaften in deinem Code hast, da diese das Hintergrundbild überschreiben können.

  • Wenn du im Vorlagen-Editor arbeitest, werden Merge-Tags in Vorschauansichten oder Test-E-Mails nicht gerendert. Wenn du sehen möchtest, wie die Merge-Tags für Kontakte gerendert werden, erstelle anhand der Vorlage eine Kampagne und nutze unsere Optionen unter „Vorschau und Test“.

Technischer Support

Hast du eine Frage?

Zahlende Nutzer können sich anmelden, um E-Mail- oder Chat-Support zu erhalten.

War dieser Artikel hilfreich?

Ähnliche Inhalte

Hier bearbeitest du Vorlagen-Code

Mit der Vorlagensprache von Mailchimp kannst du direkt über deinen Account eine E-Mail-Vorlage programmieren. Hier erfährst du, wie du Vorlagenbilder hinzufügst und den HTML-Code deiner Vorlage ermittelst.

CSS in HTML-E-Mails

Dieser Artikel enthält eine Reihe grundlegender Tipps zur Verwendung von CSS in HTML-E-Mails.

Informationen zu Bildvorlagen

Die Bildbeschränkungen hängen von deiner Mailchimp-Vorlage ab. Hier erhältst du Tipps zur Arbeit mit Bildern mit verschiedenen Vorlagenoptionen.