So erstellen Sie benutzerdefinierte Mailchimp-Vorlagen, die tatsächlich perfekt funktionieren

Veröffentlicht: 2021-06-22

Jede E-Mail von Grund auf neu zu codieren dauert viel zu lange, daher kann eine wiederverwendbare, bewährte E-Mail-Vorlage Wunder für Ihre Workflow-Effizienz bewirken. Aber auch das Erstellen einer eigenen Vorlage kann ein Abenteuer an sich sein – selbst für Mailchimp, den zweitbeliebtesten E-Mail-Dienstanbieter (ESP), laut unserem Bericht zum Status der E-Mail-Dienstanbieter.

Möglicherweise haben Sie eine bevorzugte Methode zum Entwickeln von E-Mails, aber wenn es um benutzerdefinierte Vorlagen für Mailchimp geht, ist es wichtig, einige sehr spezifische Richtlinien zu befolgen, um sicherzustellen, dass Sie keine Stunden damit verlieren, Ihre Vorlage zum Laufen zu bringen. Und das sage ich, nachdem ich selbst viele Stunden verloren habe!

Wenn ich dich durch die Erstellung einer benutzerdefinierten Mailchimp-Vorlage führe, solltest du dir bewusst sein, dass die Art und Weise, wie du den Code strukturierst, wie du Schaltflächen erstellst und sogar die Größe deiner Bilder, alle aus der technischen Sicht von Mailchimp angegangen werden müssen.

Aus diesem Grund haben wir in diesem Blogbeitrag mit Mailchimp und anderen Experten zusammengearbeitet, um sicherzustellen, dass Ihre Mailchimp-Vorlagen tatsächlich perfekt funktionieren.

Der Unterschied zwischen den vorgefertigten Vorlagen von Mailchimp und benutzerdefinierten Vorlagen

Mailchimp verfügt über eine umfangreiche Bibliothek mit Vorlagen, mit denen Sie E-Mails erstellen können. Jeder von ihnen kann in einem Drag-and-Drop-Editor und mehreren E-Mail-Modulen bearbeitet werden, aus denen Sie für die Gestaltung Ihrer Inhalte auswählen können.

Warum also eine benutzerdefinierte Vorlage erstellen?

Die Vorlagen von Mailchimp sind in hohem Maße editierbar, sodass jede Marke sie mit ihren eigenen Markenfarben und -stilen verwenden kann. Dies kann es schwierig machen, ihre Nutzung zu überwachen und die Identität einer Marke von E-Mail zu E-Mail konsistent zu halten. Durch das Erstellen einer benutzerdefinierten Vorlage wird sichergestellt, dass viele der in die Vorlage integrierten Stile nicht geändert werden.

Außerdem unterscheidet sich die Bearbeitungsumgebung für benutzerdefinierte Vorlagen. Es gibt keinen Drag-and-Drop-Editor. Erstellen Sie stattdessen Module und Elemente, die je nach implementierter Vorlagensprache dupliziert, gewechselt oder entfernt werden können. Dies ist eine weitere Möglichkeit, sich vor unerwünschten Layouts und Bearbeitungen zu schützen.

So codieren Sie eine benutzerdefinierte Mailchimp-Vorlage

Sind Sie bereit, Ihre eigene Mailchimp-E-Mail-Vorlage zu erstellen? Lesen Sie weiter, um die Tipps und Tricks zu erhalten, die Sie benötigen, um es richtig zu machen.

Denken Sie an Ihre Ziele und Endbenutzer

Bevor Sie beginnen, ist es wichtig, zuerst über das Ziel der Vorlage und die Personen, die sie verwenden werden, nachzudenken. Beispielsweise benötigen Sie möglicherweise eine Vorlage mit vielen Details und Flexibilität. Oder es muss für weniger technische Mitglieder Ihres Teams einfach und leicht zu übernehmen sein.

Joolz Joseph, E-Mail-Marketing-Berater und Marketing-Motivator, sagt:

Joolz Joseph

„Fragen Sie sich ‚Was wollen wir damit erreichen?'

Ist es eine Catch-All-Vorlage, die für mehrere E-Mail-Typen verwendet werden kann und daher viel Flexibilität mit verschiedenen Blöcken benötigt? Oder etwas Starres wie eine Werbevorlage, eine Onboarding-Serie oder ein Newsletter?

Eine Vorlage mit vielen Blöcken, die angepasst werden können, hat einen großen Vorteil, aber manchmal sind 2 oder 3 kürzere Vorlagen für Leute einfacher zu verwalten, die mit vielen Optionen überfordert sind.

Diese kurze Überlegung zu Beginn ermöglicht es Ihnen, Ihre Vorlage mit Blick auf das Ziel und den Endbenutzer zu erstellen.

Beispielsweise muss sich eine Werbevorlage auf das primäre Ziel und den Call-to-Action (CTA) konzentrieren, während ein Newsletter mehrere CTAs haben kann, die alle unterschiedlich sind.

Dies alles muss sich in Ihrem Vorlagendesign widerspiegeln. Es wird auch für jemanden, der eine Werbeaktion durchführt, es einfacher machen, relevante Inhalte einzufügen, wenn seine Möglichkeiten begrenzt sind!

Wenn Sie eine einzelne Vorlage erstellen, die alle Möglichkeiten erfasst, kann dies zu einer E-Mail führen, die zwar markenkonform, aber nicht so effektiv ist, wie sie sein könnte Vorlagen) helfen Ihnen dabei am besten.“

Danke, Joolz, für den Tipp! Sobald Sie die Ziele für Ihre Vorlage kennen, können Sie mit der Erstellung beginnen.

Betten Sie Ihr CSS-Styling ein

Eines der ersten erwähnenswerten Dinge ist, dass Mailchimp Ihre eingebetteten CSS-Stile automatisch integriert, wenn Sie Ihre Vorlage auf der Plattform speichern. Wenn Sie also mit der Entwicklungsarbeit beginnen, fällt es Ihnen möglicherweise leichter, alle Ihre Stile einzubetten und das Aufblähen von Code zu begrenzen.

Erstellen Sie Modulreihen

Denken Sie beim Strukturieren Ihres Codes an die Blöcke, die Sie bearbeiten möchten, insbesondere die, die Sie neu anordnen möchten. Diese Blöcke sollten in Reihen sitzen, zum Beispiel:

<!--modules that can be re-ordered-->
<!--module 1-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 1-->
<!--module 2-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 2-->

Sobald Sie die übergeordnete Tabelle schließen, können Sie Ihre Zeilen über diesen Punkt hinaus nicht mehr neu anordnen.

Berücksichtigen Sie die Schaltflächenbeschränkungen

Es gibt viele Möglichkeiten, eine Schaltfläche zu codieren. Es ist jedoch nur die aufgefüllte Schaltfläche, die in Ihrer benutzerdefinierten Mailchimp-Vorlage funktioniert. Dies liegt daran, dass viele Stile, die auf die Anker-Tags von bearbeitbaren Schaltflächen angewendet wurden, automatisch entfernt werden. Das Format des VML-Codes und alle Spans, die Sie in Ihrem Anker-Tag platzieren, können ebenfalls angepasst werden.

Die Methode mit aufgefüllten Schaltflächen bedeutet, dass nur der Text Ihrer Schaltfläche anklickbar ist, da Sie Ihre Auffüllung und andere Schaltflächenstile auf eine übergeordnete Tabellenzelle anwenden müssen. Die umfangreiche Dokumentation von Mailchimp enthält weitere Details zum Schaltflächencode (und anderen HTML-E-Mail-Einschränkungen, wenn Sie neugierig sind).

Verwenden Sie Bilder in exakter Größe für bearbeitbare Platzhalter

Wie Schaltflächen verlieren Bilder einen kleinen Code, wenn sie bearbeitbar gemacht werden. Diesmal sind es die HTML-Attribute, die die Breite und Höhe definieren, die entfernt werden. Outlook verlässt sich darauf, und die Mailchimp-Bearbeitungsumgebung rendert auch die tatsächliche Größe des Bildes, bis Sie diese Attribute mit dem Editor wieder einfügen.

Dies macht es ein wenig schwierig, Retina-Bilder, auch bekannt als Bilder in doppelter Größe, in der E-Mail zu verkleinern.

Ich empfehle die Verwendung von 1x-Bildern für alle Platzhalter, die Sie in Ihre Vorlage codieren. Wenn die Vorlage dann für eine Kampagne verwendet wird, tauschen Sie Ihren Platzhalter für ein 2x-Bild (Retina-Bild) aus und definieren Sie Breite und Höhe in der Registerkarte Einstellungen des Bildeditors.

Wenden Sie die Vorlagensprache von Mailchimp an

Um bearbeitbare Bereiche in Ihrer Vorlage zu definieren, müssen Sie die Vorlagensprache von Mailchimp implementieren. Es steht eine umfangreiche Dokumentation zur Verfügung, die die Dinge beschreibt, die Sie je nach Art der von Ihnen erstellten Vorlage einschließen müssen.

Für hochgradig anpassbare Vorlagen, die von mehreren Marken verwendet werden können, können Sie CSS-Stile bearbeitbar machen. Folgen Sie dazu der Anleitung von Mailchimp zu bearbeitbaren Stilen.

In dieser exemplarischen Vorgehensweise sehen wir uns an, wie Sie eine Vorlage erstellen, die die Bearbeitbarkeit nur auf den Inhalt beschränkt. Dazu müssen wir HTML-Elementen innerhalb der Vorlage die folgende Sprache hinzufügen:

mc:edit wird verwendet, um eine Inhaltsbearbeitungsaktion für ein bestimmtes Element innerhalb einer Vorlage bereitzustellen. Stellen Sie sicher, dass Sie für jede Instanz davon in Ihrer Vorlage einen eindeutigen Namen verwenden.

mc:hideable wird verwendet, um eine Aktion zum Ausblenden / Einblenden eines bestimmten Elements innerhalb einer Vorlage bereitzustellen.

mc:label ist ein optionales Tag, das verwendet wird, um einen bearbeitbaren Abschnitt innerhalb der Anwendung zu benennen.

mc:repeatable wird verwendet, um eine Duplizierungsaktion für ein bestimmtes Element innerhalb einer Vorlage bereitzustellen.

mc:variant wird verwendet, um zwischen einzelnen HTML-Blöcken zu wechseln.

Für detailliertere Informationen zur Mailchimp-Vorlagensprache ist dies mein Dokument.

Fügen Sie Mailchimp-Merge-Tags ein

Es gibt viele Merge-Tags, die Sie in Vorlagen und Kampagnen nutzen können. Die Tags, die ich zur Anwendung empfehle, sind:

*|MC_PREVIEW_TEXT|*
Fügen Sie dieses Zusammenführungs-Tag für den Vorschautext zu Ihrem Build hinzu, um sicherzustellen, dass während der Kampagneneinrichtung Inhalte, die dem Vorschautextfeld hinzugefügt wurden, in die E-Mail eingefügt werden. Der Vorschautext-Hack, den wir normalerweise zu Litmus-E-Mails hinzufügen, um Leerzeichen zu erstellen, nachdem unser Vorschautext in Mailchimp nicht funktioniert. Keine Angst. Mailchimp hat die ideale Vorgehensweise für benutzerdefinierte Vorlagen dokumentiert.

*|UNSUB|*
Fügen Sie in der Kopf- und/oder Fußzeile Ihrer Vorlage dieses Zusammenführungs-Tag zu Ihrem Abmeldelink hinzu, um sicherzustellen, dass sich Personen von Ihrer Liste entfernen können, wenn sie dies wünschen. Außerdem ist dies gesetzlich vorgeschrieben, sodass Sie dies auf keinen Fall vergessen möchten.

*|UPDATE_PROFILE|*
Geben Sie Abonnenten die Möglichkeit, ihre Informationen zu aktualisieren oder ihre Präferenzen zu verwalten.

*|ARCHIV|*
Fügen Sie dieses Zusammenführungs-Tag zu einem "Online anzeigen"-Link hinzu, um anderen die Möglichkeit zu bieten, Ihre E-Mails in ihrem Webbrowser anzuzeigen.

So fügst du deine Vorlage zu Mailchimp hinzu

Nachdem Sie Ihre Vorlage codiert haben, können Sie sie nun einsetzen.

Gehen Sie zu „Kampagnen > E-Mail-Vorlagen“ und klicken Sie auf die Schaltfläche „Vorlage erstellen“, um Ihre Vorlage zu importieren.

Der einfachste Weg, Ihre Vorlage in Mailchimp zu importieren, besteht darin, eine ZIP-Datei mit Ihrem HTML und Ihren Bildern hochzuladen, da Mailchimp die Bildpfade für Sie verwaltet.

Mailchimp: Wähle einen Ausgangspunkt für deine Vorlage

Nachdem Sie Ihre Vorlage benannt und zu Ihrer ZIP-Datei navigiert haben, wird Ihre Vorlage im Vorlagen-Editor geöffnet. Hier können Sie Anpassungen vornehmen, auf das Content-Studio zugreifen, in dem Bilder und andere Assets gespeichert sind, und Ihr Vorlagen-Rendering testen.

Wenn Sie mit diesem Editor fertig sind, können Sie ihn speichern und schließen, und Ihre Vorlage ist einsatzbereit.

Stellen Sie sicher, dass Ihre Vorlage in Mailchimp funktioniert

Es gibt viele häufige HTML-Fehler, daher ist es eine gute Idee, die Bearbeitungserfahrung in Mailchimp zu sehen, bevor Sie sie an Ihr Team, Ihre Kunden oder andere Personen zur Verwendung senden. Gehen Sie dazu im Hauptmenü zu "Erstellen", wählen Sie dann "E-Mail" und bleiben Sie bei einer "normalen Kampagne".

Sie können einige Kampagnendetails hinzufügen, z. B. eine Betreffzeile und einen Vorschautext. Auf diese Weise können Sie überprüfen, ob Ihr Merge-Tag und der Vorschautextcode korrekt implementiert sind.

Wenn Sie auf "E-Mail entwerfen" klicken, können Sie die Vorlage auswählen, die Sie verwenden möchten. Suchen Sie Ihre benutzerdefinierte Vorlage auf der Registerkarte "Gespeicherte Vorlagen".

Wähle eine Vorlage in Mailchimp

Sobald du deine Vorlage ausgewählt hast, wirst du zur Mailchimp-Bearbeitungsumgebung weitergeleitet, in der du alle deine bearbeitbaren Abschnitte auf die Probe stellen kannst.

Um ein bearbeitbares Element zu bearbeiten, klicken Sie einfach darauf und ein Bearbeitungsfenster erscheint auf der rechten Seite.

Bearbeiten eines Elements in deiner Mailchimp-Vorlage

Zu beachten : Manchmal funktioniert das Neuanordnen meiner Inhaltsblöcke nicht. Wenn Sie also beim Klicken auf einen Block das Symbol mit einem Aufwärts- und Abwärtspfeil nicht sehen können, versuchen Sie, den Block zu duplizieren, den Sie neu anordnen möchten. Sie können den unerwünschten zusätzlichen Block löschen, nachdem Sie den Block, den Sie verschieben möchten, an seine neue Position gezogen haben.

Blöcke in deiner Mailchimp-Vorlage neu anordnen

Vergessen Sie nicht, das E-Mail-Rendering zu testen

Wie immer ist es sehr wichtig zu sehen, wie verschiedene E-Mail-Clients Ihre Vorlage rendern, insbesondere nachdem sie zum Erstellen einer E-Mail-Kampagne verwendet wurde.

Durch solche Tests habe ich Probleme mit meinen Vorlagen festgestellt und bin auf einige der Code-Entfernungs-Macken von Mailchimp gestoßen. Sie können sowohl im Kampagnen- als auch im Vorlagen-Editor einfach testen, indem Sie auf "Vorschau" und "Test-E-Mail senden" an Ihren Posteingang oder Ihre Litmus-Testadresse gehen, um gründliche, automatisierte Tests vor dem Senden durchzuführen.

Lackmus und Mailchimp lassen sich auch auf verschiedene Weise integrieren, damit Sie Ihre E-Mails so gründlich und effizient wie möglich testen können. Gehen Sie zu „Vorschaumodus aufrufen“ und wählen Sie die Registerkarte „Posteingang“, um E-Mail-Tests mit Litmus-Technologie in den Posteingangsvorschauen in Mailchimp durchzuführen. Mit einem Litmus Plus- oder Enterprise-Plan erhalten Sie Zugriff auf zusätzliche Tests und zeitsparende Integrationen, einschließlich der Möglichkeit, wichtige Pre-Send-Elemente beim Erstellen mit der Litmus-Erweiterung in Chrome zu testen und E-Mails zwischen Litmus und Mailchimp zu synchronisieren.

Holen Sie sich sofort einsatzbereite benutzerdefinierte Vorlagen

Wenn Sie nach bearbeitbaren Mailchimp-Vorlagen suchen, die Sie sofort verwenden können, sind wir für Sie da.

Kostenlose von Lackmus erstellte Mailchimp-Vorlage

Um dir den Einstieg zu erleichtern, haben wir eine für den Dark Mode optimierte, benutzerdefinierte Mailchimp-Vorlage erstellt. Es hat wiederholbare Zeilen, einen Block mit variablem Inhalt und eine Mailchimp-freundliche Schaltfläche.

Laden Sie unsere Mailchimp-Vorlage herunter →

kostenlose Mailchimp E-Mail-Vorlage von Litmus

Holen Sie sich Ihre kostenlose, von Litmus erstellte Mailchimp-Vorlage (.zip-Datei). Sehen Sie sich dann den Code an, um zu sehen, wie wir den Vorlagencode von Mailchimp angewendet haben, um eine Miniversion unserer kostenlosen E-Mail-Vorlagen für Abonnentenliebe in Mailchimp bearbeitbar zu machen.

Von Mailchimp-Partnern erstellte E-Mail-Vorlagen

Für noch mehr Optionen besuchen Sie den Mailchimp Marketplace mit schönen E-Mail-Vorlagen, die von Mailchimp-Servicepartnern entworfen wurden.

Mailchimp-Vorlagen im Mailchimp Marketplace

Sie können E-Mail-Vorlagen basierend auf Ihrem Marketingziel durchsuchen, sei es das Onboarding neuer Abonnenten oder die Werbung für ein neues Produkt. Wählen Sie die für Sie perfekte Vorlage aus, kaufen Sie sie und passen Sie sie an Ihre Marke an. Keine Installation oder Codierung erforderlich.

Deine perfekte benutzerdefinierte Mailchimp-Vorlage ist in Reichweite

Egal, ob Sie Ihre eigene bearbeitbare Vorlage codieren oder die von jemand anderem anpassen, Sie sind auf dem besten Weg zu einem effizienteren E-Mail-Erstellungsprozess – und Sie können darauf vertrauen, dass Sie fehlerfreie E-Mails der Marke erstellen können.

E-Mail-Grafik mit grünem Häkchen und Smiley

Stelle sicher, dass deine Mailchimp-Vorlage gut aussieht

Zeigen Sie mit Litmus eine Vorschau Ihrer E-Mails in über 90 E-Mail-Clients, Apps und Geräten an, um ein markenkonformes, fehlerfreies Abonnentenerlebnis zu gewährleisten. Jedes Mal.

Holen Sie sich eine kostenlose Testversion von Lackmus →