Erstelle dein individuelles Template für ConvertKit
In diesem Video lernst du, wie du ein eigenes Template erstellst, es bearbeitest und individualisierst und wie du es rechtssicher in Deutschland machst.
Minikurs Information
Schwierigkeit: Anfänger
Videodauer: 20:43 Minuten
ConvertKit Template Spickzettel
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ä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.
Zusätzlich bekommst du noch ein paar Dinge, die dir bei der Erstellung und Bearbeitung des Templates helfen können:
- Template Spickzettel für ConvertKit zum Herunterladen
- Hex-Codes für die optimalen Farben
- Hilfe für Fragen zu CSS