Beim Hochladen von Bildern gehen nicht gespeicherte Änderungen an Artikeln verloren. Bitte vorher speichern.

Zuerst das Bild hochladen. Zum Einbinden den Button im Editor klicken und "img/[bildname.png]" eintragen.

neu

E-Mail-Vorlagen für Kampagnen erstellen

Beim Erstellen von E-Mail-Vorlagen in Sugar für Kampagnen sind die folgenden Punkte zu beachten:

  • In den Vorlagen sollte nicht mit Paragraphen gearbeitet werden.
  • Die komplette Mail muss mit einem Tabellen gerüst aufgebaut werden.
  • Braucht man nur einen einfachen Zeilenumbruch, immer mit SHIFT + ENTER arbeiten.

Grundgerüst der E-Mail-Vorlage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<table style="width: 100%; text-align: center; border: 0; border-collapse: collapse;">
<tbody>
<tr>
<td style="font-family: arial, sans-serif; font-size: 15px; line-height: 1.25em; text-align: center;" align="center"><br /> [Intro-Text der Mail]</td>
</tr>
<tr>
<td style="background-color: #f0f0f0; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #79b331; border-top-width: 1px; border-top-style: solid; border-top-color: #79b331;" align="center"><br />
<table id="sugar_text_header-image" style="margin: 0 auto; width: 600px;">
<tbody>
<tr>
<td style="text-align: center;"><a title="[Linkbezeichner]" href="[Linkziel für die Logografik]"><img src="[Logografik URL]" title="[Grafik-Titel]" alt="[alternativer Text]" /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="background-color: #eeece1;" align="center"><br />
<table id="sugar_text_message-body" style="margin: 0 auto; width: 600px;">
<tbody>
<tr>
<td style="font-family: arial, sans-serif; font-size: 15px; line-height: 1.25em; text-align: left;">[...]</td>
</tr>
<tr>
<td style="font-family: arial, sans-serif; font-size: 15px; line-height: 1.25em; text-align: left;"><br />[...]</td>
</tr>
<tr>
<td style="font-family: arial, sans-serif; font-size: 15px; line-height: 1.25em; text-align: left;">[...]</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="background-color: #f5f5f5; border-top-width: 1px; border-top-style: solid; border-top-color: #79b331;" align="center"><br />
<table id="sugar_text_message-footer" style="margin: 0 auto; width: 600px; background-color: #f5f5f5; border: 5px solid #f5f5f5; text-align: left;">
<tbody>
<tr valign="top">
<td style="font-family: arial, sans-serif; font-size: 12px; line-height: 1em; background-color: #f5f5f5; color: #333333; width: 70%; text-align: left;">Managing directors: <br />Andreas Winkler, Melanie Tambl&eacute;<br />HRB 8141, District Court M&ouml;nchengladbach<br />VAT-Id: DE-813248743<br /><strong><br /></strong><a style="text-decoration: none;" title="Blog2Social on Twitter" href="https://twitter.com/blog2social_com"><img src="http://files.asend.de/assets/share/twitter.png" alt="twitter" /></a> <a style="text-decoration: none;" title="Blog2Social on Facebook" href="https://www.facebook.com/Blog2Social"> <img src="http://files.asend.de/assets/share/facebook.png" alt="facebook" /></a> <a style="text-decoration: none;" title="Blog2Social on Google+" href="https://plus.google.com/105549363953733831775"> <img src="http://files.asend.de/assets/share/googleplus.png" alt="googleplus" /></a> <a style="text-decoration: none;" title="Our Social Media Blog" href="https://www.blog2social.com/en/blog/"> <img src="http://files.asend.de/assets/share/blog.png" alt="PR-Gateway Blog" /></a></td>
<td style="font-family: arial, sans-serif; font-size: 12px; line-height: 1em; background-color: #f5f5f5; color: #333333; width: 30%; text-align: right;">ADENION GmbH<br />Merkatorstra&szlig;e 2<br />D-41515 Grevenbroich<br /><br /><a style="color: #2175c8; text-decoration: none;" href="mailto:meinefrage@adenion.de">meinefrage@adenion.de</a><br /><a style="color: #2175c8; text-decoration: none;" href="http://www.adenion.de">www.adenion.de</a><br />%2B49 2181 7569-140</td>
</tr>
<tr>
<td style="font-family: arial, sans-serif; font-size: 12px; text-align: center; line-height: 1em; background-color: #f5f5f5; color: #333333; width: 50%;" colspan="2"><br /><a style="color: #333333;" title="unsubscribe" href="%7Bopt-out%7D">Please click here to unsubscribe from this list.</a>&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Die Farbcodes im Beispiel beziehen sich auf Blog2Social und müssen ggf. angepasst werden.

Strukturierung innerhalb der Textspalte

Im Textfluss können Strukturierungen vorgenommen werden. Dazu wird in einer Tabellenzelle der Haupt-Tabelle einer weitere Tabelle angelegt. Diese kann dann individuell gestaltet werden.

<tr><!-- Beginn Zeile der Haupttabelle -->
<td style="border-width: 1px; border-style: solid; border-color: #79b331; background-color: #ffffff;"><img src="http://files.asend.de/b2s/add-groups_600x200.png" alt="Top up groups" /><!-- Beginn der Tabellenzelle der Haupttabelle mit Hintergrundfarbe und Rahmen für die Textbox -->
<br />
<table style="margin: 0px auto; width: 100%; background-color: #ffffff; border: 0px solid #ffffff;" border="0" align="center"><!-- Beginn Tabelle innerhalb der Textbox -->
<tbody>
<tr valign="top">
<td><br />
<table style="margin: 0 auto; width: 580px;"><!-- Beginn der inneren Struktur -->
<tbody>
<tr>
<td style="font-family: arial, sans-serif; font-size: 18px; line-height: 1.25em; text-align: left;">[...]</td>
</tr>
<tr>
<td style="font-family: arial, sans-serif; font-size: 18px; line-height: 1.25em; text-align: left;">[...]</td>
</tr>
</tr>
</tbody>
</table><!-- Ende innere Struktur -->
</td>
</tr>
</tbody>
</table><!-- Ende Tabelle innerhalb der Textbox -->
</td>
</tr><!-- Ende Zeile der Haupttabelle -->
  • In die Tabellenzelle der Haupttabelle wird eine Tabelle mit einer Zeile und einer Spalte eingefügt. Diese Tabelle wird auf 100% Breite gezogen.
  • In diese Tabelle wird eine weitere Tabelle eingefügt, die die eigentlichen Inhalte enthält. Diese innere Tabelle wird etwas schmaler gezogen als die Haupttabelle. Da die Haupttabelle Inhalte und die darin liegende Tabelle zentrieren, wird diese innere Tabelle mittig angeordnet. Durch die geringere Breite wird der Abstand zum Rahmen der Textbox sichergestellt.
  • Die innere Tabelle kann mehrere Spalten enthalten. Es empfiehlt sich bei mehreren spalten jeder Zelle der inneren Tabelle eine feste Breite in Pixeln zu geben.
     Haupttabelle    
     Textbox-Rahmen    
     Textbox-Inhalt    
         
         

Breiteneinstellungen:

  • Haupttabelle: 600px => Rahmen: 100% => Inhalt: 580px (optisch volle Breite)
  • Haupttabelle: 600px => Rahmen: 100% => Inhalt: 400px (CTA, hier wird der Rahmen ohne Hintergrundfarbe gesetzt)

Um die richtigen Farben zu verwenden, bitte an den Farbschemata orientieren:

Es ist einheitlicher und sicherer, immer den HEX-Code der Farbe anzugeben. Ggf. einen Farbumrechner verwenden.

Rahmen gestalten

<!-- umlaufender Rahmen -->
style="border-style: solid; border-width: 1px; border-color: #cc0000;"

<!-- Rahmen links -->
style="border-left-style: solid; border-left-width: 1px; border-left-color: #cc0000;"

<!-- Rahmen oben und links -->
style="border-left-style: solid; border-left-width: 1px; border-left-color: #cc0000;border-top-style: solid; border-top-width: 1px; border-top-color: #cc0000;"

Um einen Rahmen nur an einer Seite zu zeichnen, wird nach "border-" die entsprechende Seite bezeichnet: "left-", "right-", "top-", "bottom-".

Diese Angaben können kombiniert werden.

Grundelegende Elemente

<!-- HTML für eine Tabellenzelle = Paragraph mit normalem Text -->
<td style="font-family: arial, sans-serif; font-size: 15px; line-height: 1.25em; text-align: left;">[...]</td>

<!-- HTML für einen Fließtext-Link (Farben für Blog2Social) -->
<a style="color: #79b331;" href="[Linkziel]" title="[Linktitel]" target="[...]">[...]</a>

Listen

<table style="margin: 0 auto; width: 570px;">
<tbody>
<tr>
<td style="font-family: arial, sans-serif; font-size: 30px; line-height: 15px; width: 30px; text-align: left; vertical-align: top;">&bull;</td>
<td style="font-family: arial, sans-serif; font-size: 15px; line-height: 1.25em; width: 540px; text-align: left; vertical-align: top;">[...]</td>
</tr>
<tr>
<td style="font-family: arial, sans-serif; font-size: 30px; line-height: 15px; width: 30px; text-align: left; vertical-align: top;">&bull;</td>
<td style="font-family: arial, sans-serif; font-size: 15px; line-height: 1.25em; width: 540px; text-align: left; vertical-align: top;">[...]</td>
</tr>
<tr>
<td style="font-family: arial, sans-serif; font-size: 30px; line-height: 15px; width: 30px; text-align: left; vertical-align: top;">&bull;</td>
<td style="font-family: arial, sans-serif; font-size: 15px; line-height: 1.25em; width: 540px; text-align: left; vertical-align: top;">[...]</td>
</tr>
</tbody>
</table>

Im Beispiel ist die Liste in einer farblich hervorgehobenen Textbox platziert. Deswegen ist die Breite schmaler gesetzt.

CTA

<tr>
<td style="text-align: center;"><br />
<table style="margin: 0 auto; width: [Breite des CTA in Pixeln];">
<tbody>
<tr>
<td style="font-family: arial, sans-serif; font-size: 21px; line-height: 1.25em; text-align: center; background-color: #79b331; vertical-align: middle; height: 50px;"><strong><a style="color: #ffffff; text-decoration: none;" title="[Link-Title]" href="[Link-Ziel]">[Ankertext / CTA]</a></strong></td>
</tr>
</tbody>
</table>
</td>
</tr>

Sonderzeichen in E-Mail-Vorlagen

Es empfiehlt sich, in E-Mail-Vorlagen immer mit HTML-Entities zu arbeiten. diese werden in der HTML-Ansicht eingefügt.

Liste von HTML-Entities

Häufige Entities:

  • $ = &dollar;
  • € = &euro;
  • & = &amp;
  • » = $raquo;
  • Anführungszeichen englisch: “ [...] ”
  • Anführungszeichen deutsch: „ [...] ”