Inhaltsverzeichnis
Präambel
Mit dem Kommunikationsmanager in celanio können Sie Einzel- und Serien-E-Mails versenden, sowohl als Text und auch als HTML Version. Wie das Modul grundsätzlich funktioniert, haben wir in der offiziellen (internen) Dokumentation beschrieben. Damit sind Sie schonmal grundsätzlich in der Lage, E-Mails zu versenden. Damit die HTML E-Mails auch noch „schön“ aussehen, können Sie über CSS das Design anpassen. Welche Funktionen dort möglich sind, werden in diesem Artikel beschrieben. Sie können das übrigens entweder den Webdesigner Ihrer Wahl machen lassen, oder Sie adaptieren unsere Vorlage, die wir Ihnen in diesem Artikel bereitstellen.
Erstellen einer neuen Vorlage
- Über Abwicklung → Kommunikationsmanager gelangen Sie in das Modul.
- Klicken Sie auf das Submenü "Vorlagen"
- Möchten Sie eine neue Vorlage anlegen, klicken Sie auf "Neue Vorlage erstellen"
- Geben Sie der Vorlage einen Namen und wählen Sie dann Typ E-Mail aus.
- Dann wählen Sie die Versandart "HTML" aus.
Einfügen des Textkörpers
Sie können folgende Vorlage von uns verwenden. Wir haben diese mit Blindtext und Beispielformatierungen gefüllt, die wir Ihnen in diesem Artikel erklären.
Über Werkzeuge → Quelltext ist dann in den Textkörper der Vorlage der folgende Quelltext einzufügen:
<table class="cel-main" style="width: 100%; height: 100%;" border="0" cellspacing="0" cellpadding="0" bgcolor="#e7e7e7">
<tbody>
<tr>
<td align="center">
<table class="full-width" style="max-width: 900px; min-width: 320px; width: 100%; padding: 10px 45px 0 45px;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tbody>
<tr style="height: 1px;">
<td style="margin: 0px; padding: 0px 0px 10px; height: 1px;" align="center" valign="top">
<div style="height: 1px; line-height: 1px; font-size: 1px; border-top-width: 1px; border-top-style: solid; border-top-color: #e7e7e7;"> </div>
</td>
</tr>
<tr>
<!-- hier können Sie Ihren Logo anpassen, bitte width und height nicht setzen. Bzw. width= 100% -->
<td class="cel-logo" style="padding: 5px 10px; margin: 0px;" align="center" valign="top">
<img style="border: 0px none transparent; display: block; border-width: 0px;" src="celanio_logo.png" alt="celanio GmbH" />
</td>
</tr>
<tr style="height: 2px;">
<td style="margin: 0px; padding: 10px 0px; height: 2px;" align="center" valign="top">
<div style="height: 1px; line-height: 1px; font-size: 1px; border-top-width: 1px; border-top-style: solid; border-top-color: #e7e7e7;"> </div>
</td>
</tr>
<tr>
<td class="responsive-cell" style="margin: 0px; padding: 0px;" align="center" valign="top">
<table class="text-block" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="margin: 0px; line-height: 1.45;" align="left" valign="top">
<p style="text-align: center; margin: 5px 0;">Ihre News vom Montag, 03. Juli 2020</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="height: 2px;">
<td style="margin: 0px; padding: 10px 0px; height: 2px;" align="center" valign="top">
<div style="height: 1px; line-height: 1px; font-size: 1px; border-top-width: 1px; border-top-style: solid; border-top-color: #e7e7e7;"> </div>
</td>
</tr>
<tr>
<td style="margin: 0px; padding: 0px;" align="center" valign="top">
<table class="cel-content" style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 25px 0px 10px; width: 100%;" align="left" valign="top">
<h1><strong>Unsere Layouts</strong></h1>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
<p><strong>Link</strong></p>
<p><a href="https://www.celanio.com/ueberblick/">Überblick</a></p>
<p><a class="btn btn-primary" href="https://www.celanio.com/ueberblick/">Überblick</a></p>
<p>Standard</p>
<ul>
<li>Aufzählung 1</li>
<li>Aufzählung 2</li>
<li>Aufzählung 3</li>
</ul>
<p>Kreis</p>
<ul style="list-style-type: circle;">
<li>Aufzählung 1</li>
<li>Aufzählung 2</li>
<li>Aufzählung 3</li>
</ul>
<p>Punkt</p>
<ul style="list-style-type: disc;">
<li>Aufzählung 1</li>
<li>Aufzählung 2</li>
<li>Aufzählung 3</li>
</ul>
<p>Quadrat</p>
<ul style="list-style-type: square;">
<li>Aufzählung 1</li>
<li>Aufzählung 2</li>
<li>Aufzählung 3</li>
</ul>
<p><strong>Bilder</strong></p>
<p> </p>
</td>
</tr>
<tr>
<td style="background-color: #e7e7e7; margin: 0px; padding: 0px;" align="center" valign="top">
<table style="width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="margin: 0px; padding: 25px;" align="left" valign="top">
<p><strong>Herausgeber</strong> <br /><br /><br /><strong>Redaktion</strong> <br /><br /><strong>Abmelden</strong> <br />Dieser Newsletter wurde an und ausschließlich mit Ihrem Einverständnis gesendet. <br />Wenn Sie in Zukunft keine E-Mails dieser Art erhalten möchten dann klicken Sie .... <br /><br /><strong>Disclaimer</strong> <br /><br /><strong>Haftung</strong></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table> |
Als Ergebnis erhalten Sie eine Vorlage, für die Sie ein Headerbild (Logo) bestimmen können (siehe Abbildung - hier sehen Sie ein Icon Bild mit alternativen Text, da unsere Beispielbild nicht im System vorhanden sind).
Setzen eines Bildes
Um ein Headerbild zu verändern oder zu setzen, muss dieses zunächst in die Dateiablage (über „Datei hinzufügen“) hochgeladen werden. Es empfiehlt sich dabei, öffentliche Bilder in den Ordner public/gfx zu laden, falls es öffentliche Bilder sind. Gemeinsam genutzte Bilder kann man in den Ordner shared/gfx laden.
Nun muss (siehe Abbildung oben) mit der rechten Maustaste auf das Symbol mit dem Pfeil nach unten geklickt werden, um dann die Adresse des Logolinks über „Linkadresse kopieren“ zu kopieren. Den Link, der auf diese Weise kopiert wurde, kann man dann über das Symbol „Bilder einfügen“ im Texteditor eingeben. Anschließend kann man, dann das Bild auf diese Weise als Headerbild einfügen.
Wir empfehlen Ihnen, die Quelle nur als relativen Pfad anzugeben. Im Beispiel wäre der Link nur vom Wort „Files“ an einzutragen. Bitte ändern Sie auch die Beschreibung, diese ist wichtig, wenn das Bild nicht geladen werden kann wird die Beschreibung als Alternative angezeigt. Zuletzt wäre in der Abmessung 100 % einzutragen. Sie können auch feste Größe oder den Texteditor selbst eintragen lassen, es führt aber dann zu einem Verzerren der Bilder bei bestimmten mobilen Geräten.
Bilder, Grafiken und Logos sollten mindestens 553 px breit sein, sind sie größer, werden sie skaliert. Auch empfehlen wir hier Bilder möglichst klein zu halten. Bilder, die mehr als 1 MB groß sind, sind meistens ungünstig.
Damit Ihre Bilder auch mit dem E-Mail verschickt werden können, müssen Sie im Unterenbereich der Vorlage auf "Datei hinzufügen" klicken. Nur wenn Sie dies machen werden die Bilder mitgeschickt. Ein Platzieren in der Vorlage allen reicht hier nicht. Um andere Bilder einzufügen, setzten Sie den Editor Cursor an die Position wo Sie das Bild hinzufügen wollen und wiederholen die oberen Schritte. Sie können auch mal andere Abmessung probieren zu empfehlen sind relative Größen wie "%". Wenn Sie das Bild anders Positionieren wollen, probieren Sie wie bei unserem Beipsiel und klicken auf Zentrieren.
Das CSS einbinden und Farben per CSS ändern
Um das CSS der Vorlage anzulegen und einzubinden, geht Sie auf "css-styles" → anlegen und erstellen folgende CSS:
Name können Sie nach belieben angeben. Nur sollte es ein Name sein, die noch nicht existiert.
In dieser Vorlage haben wir als Grundfarbe die Farbe Blau genommen (#337ab7). Möchten eine andere Farbe so ersetzen Sie alle '#337ab7' mit Ihren eigene Farben.
/*Logo style*/
.cel-logo img{
border: 0px none transparent;
display: block; max-width: 500px !important;
}
/*Main layout style*/
h1, h2, h3, h4, h5, h6 {
color: #337ab7;
font-weight: bolder;
}
h1, .h1 {
font-size: 3em;
line-height:1.45
}
h2, .h2 {
font-size: 2em;
line-height:1.45
}
h3, .h3 {
font-size: 1.8em;
}
h4, .h4 {
font-size: 1.4em;
}
h5, .h5 {
font-size: 1.2em;
}
p, h6, .h6 {
font-size: 1em;
}
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
border-radius: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
}
a {
color: #337ab7;
text-decoration: none;
}
/*Table content style*/
table .cel-main{
background: #e7e7e7;
}
table.cel-content tr td img{
border: 0px none transparent;
display: block;
max-width: 600px !important;
}
table.cel-content tr td{
border-bottom: 1px solid #e7e7e7;
}
table.cel-content tr:last-child td{
border-bottom: none;
}
@media only screen and (max-width: 650px) {
table.cel-content tr td img,
.cel-logo img{
width: 100% !important;
}
}
@media only screen and (max-width: 480px) {
td[class=full-width] {
width: 100% !important;
padding: 0 !important;
}
table[class=full-width] {
width: 100% !important;
padding: 0 !important;
}
} |
Vergessen Sie nicht den erstellten CSS in Ihre Vorlage einzubinden. Das können Sie im unteren Bereich des Texteditors:
Links über den TinyMCE-Editor einfügen
Links und Buttons können über den Linkbutton des TinyMCE eingefügt werden. Um einen Button hinzuzufügen, wird unter Werkzeuge → Quellcode der Quellcode des Templates angezeigt, und es ist möglich einen Link einzufügen, indem man den Button-Code einfügt:
<a class="btn btn-primary" href="https://www.celanio.com/ueberblick/">Überblick</a>
Überschriften per TinyMCE definieren
Überschriften können im Tinymce definiert werden, indem man über Format → Absatzformate die Überschriftenart auswählt, welche man gerne einfügen möchte.
Sollten Sie bei Editieren, Texte verfassen unerwünschte Schriftgrößen oder Formate sehen, können Sie diese Texte makieren und wie oben auf dem Bild den "Formatierung entfernen" klicken. Diese Funktion löscht unerwünschte Inline Formatierung und das System übernimmt wieder die von uns vorgegebene Vorlage.
Erscheinungsbild des Newslettertemplates per CSS konfigurieren - für Experten
Im folgenden werden diejenigen Stellen des CSS gezeigt, an welchen sich bestimmte Veränderungen des Erscheinungsbildes des Templates vornehmen lassen.
Änderung der Farbe der Trennlinien im CSS durch das color-Attribut - an folgender Stelle
|
Änderung der Farbe der Links im CSS durch das color-Attribut - an folgender Stelle
|
Änderung der Schriftfarbe
Die Änderung der Schriftfarbe des Hauptteils des Artikels ist an folgender Stelle des CSS möglich
|
Dies geschieht wie folgt: Man definiert ein color-Attribut, und wenn man im Template eine rote Schrift haben will, dann wird "color: #FF0000" geschrieben.
Bulletpoints (Stichpunkte)
Neben den standardmäßig definierten Stichpunkten lassen sich in der Templatedatei (nicht im CSS) verschiedene Formen für Stichpunkte definieren.
|
Möchte man Kreise statt Stichpunkten, verwendet man <ul style="list-style-type: circle;">. Möchte man Quadrate statt Stichpunkten, verwendet man <ul style="list-style-type: square;">.
Buttons
Von besonderer Wichtigkeit für die Gestaltung des Erscheinungsbildes des Newsletters sind folgende Details des hier angeführten CSS-Codes.
Position
Diese wird druch die die display-Eigenschaft bestimmt (siehe Codebeispiel unten). "inline-block" bedeutet, dass der Button linksbündig erscheint. Wenn man möchte, dass sich der Button über die gesamte Seite erstreckt, dann muss man die Eigenschaft in "block" umändern.
Textgröße
Die Textgröße des Textes, welcher im Button steht, kann über das "font-size"-Attribut verändert werden.
|
Farbe der Schrift und Farbe der Hintergrundfarbe des Buttons
Die Textfarbe wird über color verändert, die Hintergrundfarbe des Buttons wird über background-color verändert.
.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; } |
Änderung der Farbe und Größe der Überschriften
Farbe und Beschaffenheit der Überschriften (h1-h6) lassen sich im css an folgender Stelle ändern. Nach "color" ist der gewünschte Farbcode in Hexadezimalformat einzufügen.
|
Schriftgröße der Überschriften
An folgender Stelle des CSS kann man die Schriftgröße der Überschriften verändern, wobei die Überschrift h6 (siehe unten) auf die Schriftgröße des Fließtextes der Abschnitte angepasst ist, d. h. die Größe des Fließtextes ist unter p, h6, .h6 zu verändern.
h1, .h1 {
font-size: 31px;
}
h2, .h2 {
font-size: 25px;
}
h3, .h3 {
font-size: 21px;
}
h4, .h4 {
font-size: 18px;
}
h5, .h5 {
font-size: 16px;
}
p, h6, .h6 {
font-size: 14px;
}
Änderung des Footers / Impressums
Der Footer, in den das Impressum geschrieben werden kann, stellt eine Tabelle innerhalb der Tabelle dar.
Änderung der Hintergrundfarbe des Impressums
Die Hintergrundfarbe lässt sich durch das background-color-Attribut ändern:
<Möglichkeiten / Beispiele: fehlt>
|
Änderung der Schriftfarbe des Impressums
Die Änderung der Schriftfarbe des Impressums kann im css an folgender Stelle vorgenommen werden:
<Möglichkeiten / Beispiel: fehlt>
|