Wie wir das gemacht haben Konvertieren der Tuts + E-Mails in Campaign Monitor-Vorlagen

In den ersten beiden Teilen dieser Fallstudienreihe haben wir gesehen, wie die neuen Envato Tuts + E-Mails entworfen und dann als statische HTML / CSS-Dateien erstellt wurden. In diesem letzten Teil des Puzzles zeige ich Ihnen, wie wir diese Dateien in Campaign Monitor-Vorlagen konvertieren.

Zu diesem Zeitpunkt waren einige Teammitglieder an dem Prozess beteiligt: ​​Cameron und ich. Cam übernahm die Integration der Digests in Campaign Monitor, ich kümmerte mich um die Newsletter, die ich in diesem Beitrag erläutern werde.

1. Bereiten Sie Ihre Dateien vor

Am Ende des Build-Vorgangs lieferte Nicole eine Reihe von Dateien, darunter HTML-, CSS- und Bild-Assets. Zusammen sorgten sie für eine Reihe verschiedener E-Mail-Typen. Daher musste ich nur die für die Newsletter-Vorlage erforderlichen Teile nehmen und von dort aus arbeiten.

Spitze: Laden Sie die Quelldateien herunter, wenn Sie mitverfolgen möchten.

Lokaler Held

Derzeit sind die Pfade in den Dateien alle relativ. Es gibt ein paar Links zu CSS-Dateien, einige Links zu Bildern, und alle weisen auf das lokale Dateiverzeichnis hin, wie wir es sehen. Zum Beispiel:

Wenn wir unsere Dateien am Ende des Lernprogramms hochladen, erkennt Campaign Monitor alle diese Pfade und ändert sie entsprechend.

2. Beginnen Sie oben

Unser Prozess ist folgender: Wir nehmen alle statischen Teile unserer E-Mail-Vorlage und tauschen sie, wo immer möglich, durch dynamische Ausschnitte aus. Nach unten scrollen, ist der erste Schuldige in der Zeile 73: ein Link zur Webversion:

Etwas sieht nicht richtig aus? Webversion anzeigen

Diese Verbindung wird jedes Mal anders sein, also wechseln wir sie für die Dynamik von CM :

Etwas sieht nicht richtig aus? Webversion anzeigen

So einfach ist das. Nächster!

3. Weitere wichtige Links

Das um die wir uns gerade gekümmert haben, ist einer der wenigen wichtigen Links, die Campaign Monitor zur Verfügung stellt. Wenn wir in der Stimmung sind, nutzen wir ein oder zwei andere. Das E-Mail Einstellungen Absatz befindet sich um die Zeile 346 und sieht folgendermaßen aus:

Sie haben diesen Newsletter abonniert, weil Sie Teil des Übersetzungsteams sind. Nicht ganz nach deinem Geschmack? Kein Problem: Aktualisieren Sie Ihre E-Mail-Einstellungen oder kündigen Sie den Newsletter ab.

Lass uns benutzen  und  um diesen Abschnitt dynamisch zu machen:

Sie haben diesen Newsletter abonniert, weil Sie Teil des Übersetzungsteams sind. Nicht ganz nach deinem Geschmack? Kein Problem: Aktualisieren Sie Ihre E-Mail-Einstellungen oder Abmelden.

Es gibt einige andere wichtige Links, wie z , aber wir werden sie in diesem Fall nicht nutzen.

4. Einzellinien

Als nächstes müssen wir uns an die E-Mail-Überschrift halten.

Überschrift und Unterüberschrift

Um die Linie 87 herum wird es so aussehen:

Übersetzungsprojekt-Newsletter
 
Monat 20XX

Absätze mit Klassen von Überschrift und h1 oder h2 (danke email HTML). Jedes dieser Elemente muss in Campaign Monitor bearbeitet werden können. Da wir nur den Textinhalt bearbeiten müssen und nichts anderes, können wir den  Vorlagenelement:

 Übersetzungsprojekt-Newsletter 
 
 Monat 20XX 

Die Absätze bleiben vollkommen intakt, wir fügen einfach einen bearbeitbaren Bereich in jedem hinzu. Jeder einzelne Zeile hat eine optionale Etikette Attribut, das im Campaign Monitor-Editor hilfreich angezeigt wird:

5. Mehrfachzeilen

Für Inhalte, die etwas komplexer sind als Überschriften und Gurtlinien, verwenden wir die Element. In Zeile 134 finden Sie den Inhalt unseres ersten Artikels, den wir für jede E-Mail als Einleitung verwenden:

In diesem Newsletter zum Übersetzungsprojekt n tempus nunc ullamcorper at. Etiam Eget Turpis Augue. Beweisen Sie eine efficitur massa. Im augue libero. Nulla in Tortor Commodo, Hendrerit Nisl Non, Placerat Nunt.
 
Ian Yates
 Herausgeber, Envato Tuts+

Lassen Sie uns diese beiden Abschnitte dynamisieren:

 
In diesem Newsletter zum Übersetzungsprojekt n tempus nunc ullamcorper at. Etiam Eget Turpis Augue. Beweisen Sie eine efficitur massa. Im augue libero. Nulla in Tortor Commodo, Hendrerit Nisl Non, Placerat Nunt.
   
Ian Yates
 Herausgeber, Envato Tuts+
 

Diese folgen dem gleichen Muster wie zuvor: bearbeitbare Bereiche mit optionalen Beschriftungen - diesmal erlauben sie uns jedoch einen WYSIWYG-Editor:

6. Bearbeitbare Bilder

Scrollen Sie nach unten bis Zeile 168, und Sie finden ein Bild in einer Tabellenzelle, und zwar ganz alleine:

Dies wird Teil eines wiederholbaren Abschnitts sein (mit dem wir uns in einer Minute befassen werden), also lassen Sie uns zunächst dieses Bild dynamisieren. Ich mag es nicht, in Tutorials das Wort „einfach“ zu verwenden, aber in diesem Fall lasse ich es einfach weg bearbeitbar Attribut zum Image-Tag. Erledigt!

Das Breite Attribut ist erforderlich, aber das src (was uns ein Standardbild gibt) ist optional, ebenso wie unser Freund das Etikette Attribut.

Mit diesem Editor können wir das Standardbild entfernen, ein neues hochladen, alternativen Text hinzufügen und (entscheidend) einen Link hinzufügen.

"Die harten Daten besagen: E-Mails mit Bildern konvertieren fast doppelt so gut." - Chris Hexton, CEO und Mitbegründer von Vero

Hinweis: Denken Sie daran, dass das markierte Markup erhalten bleibt, wenn Sie das Bild vollständig entfernen. Dies kann zu großen aufgefüllten Bereichen ohne Inhalt führen. Überlegen Sie sich also, wie Sie Ihre Bilder im Design kennzeichnen.

7. Wiederholbare Bereiche

Dieses Bild ist Teil eines Abschnitts, den wir so oft wie nötig wiederholen möchten. Es beginnt in Zeile 146 und endet in Zeile 176 mit den Kommentaren:

Wie zuvor bei anderen Bereichen müssen wir die Überschrift in diesem Abschnitt als a definieren und der Inhalt a , Machen Sie das also, bevor Sie weitergehen.

Um diesen ganzen Abschnitt wiederholbar zu machen, wickeln wir die erforderlichen Bits in ein Element:

Dadurch erhalten wir einige zusätzliche Steuerelemente im Campaign Monitor-Editor, mit denen wir den Abschnitt duplizieren, verschieben (nützlich zum Neuordnen) oder löschen können.

Hinweis: das Muss Behälter entweder a , ein , oder ein .

Noch eine Notiz: du kannst nicht nisten Elemente!

8. Layout

Nun zu einem wiederholbaren Abschnitt mit einem Unterschied. Es ist ein themenspezifischer Abschnitt, und zu jedem Thema gehört ein Abschnitt mit der entsprechenden Themenfarbe.

Im Fall unseres Übersetzungsprojekt-Newsletters enthalten wir manchmal einen Bereich Fotografie & Video sowie Code und Game Development. Manchmal können wir Code überspringen. Manchmal stellen wir alle neun Themen vor. Also, was ist das Beste, um dies zu organisieren? Geben Sie das ein Element.

Wir können mehrere Layout-Elemente in einem einzigen Element verwenden Block, so dass wir jedes Mal, wenn wir den Block duplizieren, eine Auswahl an Layouts haben. In unserem Fall möchten wir aus den verfügbaren Themen auswählen, sodass unser Markup ein bisschen wie folgt aussehen wird:

    … 

Dort sehen Sie Layout-Elemente, die jeweils eine eindeutige Bezeichnung haben.

Wichtig: nicht verwende HTML-Entities (wie & eher, als &) innerhalb der Layoutbeschriftungen.

Beginnen Sie mit Zeile 183, indem Sie unsere Themenblöcke in ein einschließen . Wickeln Sie dann die Themenblöcke in ein

9. Laden Sie den Kampagnenmonitor hoch

Alle unsere harte Arbeit ist erledigt. Jetzt müssen wir unsere Dateien in Campaign Monitor hochladen, um unsere Vorlage in einer E-Mail-Kampagne verwenden zu können!

Gehen Sie in Ihrem Campaign Monitor-Dashboard zu Vorlagen> Importieren.

Geben Sie anschließend einen Namen für Ihre Vorlage ein, wählen Sie Ihre fertige HTML-Datei aus und wählen Sie dann alle anderen erforderlichen Elemente (CSS und Bilder) als eine ZIP-Datei aus. 

Ihre Dateien werden hochgeladen und verarbeitet, was einen Moment dauert. Die Stile werden optimiert (einige inline, andere in die des HTML) und die Pfade werden aktualisiert. Wenn alles erledigt ist, steht Ihre Vorlage zur Verfügung, wenn Sie eine neue Kampagne starten!

Fazit

Damit ist diese E-Mail-Fallstudie abgeschlossen. Ein Einblick in die Gestaltung und Erstellung der E-Mails von Envato Tuts +. Ich hoffe, es hat Ihnen Spaß gemacht, den Prozess zu verfolgen, und wenn Sie E-Mail-Inspiration für Ihr nächstes Projekt benötigen, sollten Sie die neuesten E-Mail-Vorlagen von Envato Market lesen!

Web-Design