Erstelle dein individuelles Template für ConvertKit

Banner

Broadcast erstellen -> Bild in Broadcast einfügen -> Ausrichten und verlinken -> HTML anzeigen lassen und kopieren -> Template aufrufen -> Bild an richtige Stelle einfügen

<div class='message-content'>

Richtige Stelle

{{ message_content }}

Formatierungen

Im Style-Bereich zwischen <style> und </style> sollten alle Änderungen von Farben, Schriftarten, Abständen etc.) vorgenommen werden.

Textfarben anpassen

Überschriften:
h1 { color: #0066cc; } Anstelle von #0066cc bitte eigenen Hex-Code einsetzen h2 { color: #0066cc; } etc.

Normaler Absatztext: p { color: #0066cc; }

Links:
a { color: #0066cc; }

Schriftarten ändern

Du kannst für alle oben genannten Elemente außerdem die Schriftarten ändern.

Beispielsweise bei einer Überschrift:

h1 { font-family: Arial }

Anstelle von Arial einfach die bevorzugte Schriftart eingeben. Achtung: Hier ist eine Standardschriftart zu bevorzugen, da diese sonst nicht überall angezeigt werden kann.

Wenn alle Elemente die gleiche Schriftart haben sollen, einfach das erste Element unter <style> anpassen:

.message-content { font-family: Ubuntu; max-width: 600px; } Hier einfach Ubuntu durch bevorzugte Schriftart ersetzen

Breite anpassen

Dies kann ebenfalls im ersten Element vorgenommen werden:

.message-content { font-family: Ubuntu; max-width: 600px; } Einfach aus 600px 500 px machen.

Achtung: An dieser Stelle hat ConvertKit mit 600px die optimale Breite gewählt. Ändern auf eigene Gefahr.

Horizontale Linie anpassen

Viele nutzen horizontale Linien als Trennelement zwischen zwei Bereichen. Um die Linie ein bisschen aufzuwerten kannst Du z.B. die

Höhe anpassen:

hr { border-width: 1px;}
Dieses Element einfach im Style-Bereich einfügen und die 1 durch eine andere Zahl ersetzen.

Social Media

Social Media Links können an jeder Stelle eingefügt werden. Social Media Icons sollten besten Fall nach der eigentlichen E-Mail kommen.

Hierfür stellt ConvertKit eigene Icons bereit:

<div class="social-links">
<a href="http://www.facebook.com/"> <img src="http://convertkit.com/images/social-icons/ facebook.png" alt="Facebook" width="48" style="text-decoration: none; width: 48px;"> </a> <a href="https://twitter.com/"> <img src="http://convertkit.com/images/social-icons/twitter.png" alt="Twitter" width="48" style="text-decoration: none; width: 48px;"> </a>
<a href="https://instagram.com/"> <img src="http://convertkit.com/images/social-icons/ instagram.png" alt="Instagram" width="48" style="text-decoration: none; width: 48px;"> </a><a href="https://www.pinterest.com/"> <img src="http://convertkit.com/images/social-icons/ pinterest.png" alt="Pinterest" width="48" style="text-decoration: none; width: 48px;"> </a>
<a href="https://plus.google.com/"> <img src="http://convertkit.com/images/social-icons/google- plus.png" alt="Google Plus" width="48" style="text-decoration: none; width: 48px;"> </a>
<a href="http://youtube.com"> <img src="http://convertkit.com/images/social-icons/ youtube_alt.png" alt="YouTube" width="48" style="text-decoration: none; width: 48px;"> </a>
<a href="http://convertkit.com"> <img src="http://convertkit.com/images/social-icons/website.png" alt="Website" width="48" style="text-decoration: none; width: 48px;"> </a>
</div>

Aus diesen Block an Icons nimmst du dir deine Kanäle raus (z.B. Facebook und Twitter) und fügst deine jeweiligen URLs in die Links mit ein:

<div class="social-links">
<a href="http://www.facebook.com/emmhelden"> <img src="http://convertkit.com/images/social- icons/facebook.png" alt="Facebook" width="48" style="text-decoration: none; width: 48px;"> </a> <a href="https://twitter.com/alexwiethaus"> <img src="http://convertkit.com/images/social-icons/ twitter.png" alt="Twitter" width="48" style="text-decoration: none; width: 48px;"> </a>
</div>

Danach platzierst du den Code einfach nach diesen Elementen: {{ message_content }}

<br> <br>

und vor diesem Element: <small>

Footer

Der Footer wird durch die beiden Elemente <small> und </small> definiert.

Der Standard-Footer von ConvertKit sieht wie so aus:

<small>
{{ unsubscribe_link }} | {{ address }} <br>

</small>
Dabei steht {{ unsubscribe_link }} für einen Abmeldelink und {{ address }} für die Adresse.

Leider reicht das in Deutschland nicht aus. Hier gibt es besondere Impressums-Regeln, die ebenfalls für geschäftliche E-Mails und Newsletter gelten.

Achtung: Ich zeige nachfolgend, welche Elemente in MEINEM Impressum stehen. Ich bin weder ein Anwalt noch behaupte ich, die komplette aktuelle Rechtslage zu kennen.

Ein paar Dinge sollten dringend im Footer genannt werden.

• Dein Name und der Name des Unternehmens
• Handelregister-ID und Name des Amtsgerichts soweit vorhanden • Vollständige Adresse
• E-Mail Adresse
• Telefon und Fax lasse ich weg
• Abmeldelink
• Erklärung, an wen die E-Mail versendet wurde
• Und eine Begründung, warum der Empfänger die E-Mail erhält

Bei mir sieht der Footer wie folgt aus:

<small>
Diese Nachricht wurde an {{ subscriber.email_address }} gesendet.<br>
Du erh&auml;ltst diese E-Mail, weil Du Dich auf emailmarketinghelden.de für den Verteiler

angemeldet hast.<br>
Unsere Adresse: E-Mail Marketing Helden von Alexander Wiethaus {{ address }} <br>Du möchtest Dich aus dem Verteiler austragen?

<a href="{{ unsubscribe_url }}">Abmelden</a> <br>

</small>

Die Platzhalter sind von Convertkit und werden automatisch ersetzt. Also keine Panik. Das war es soweit. Hast Du noch Fragen oder benötigst du weitere Anpassungen und ein spezielles Template. Schreib mir eine E-Mail an alex@emailmarketinghelden.de.