You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 33 Next »

Add how-to article


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 die HTML E-Mails schön aussehen, können Sie über CSS das Design anpassen. In Projekten liefern wir Ihnen ein Beispiel aus. Welche Funktionen dort möglich sind, werden in diesem Artikel beschrieben.

Erstellen einer Newslettervorlage

  • Über Abwicklung → Kommunikationsmanager gelangen Sie ins Modul.
  • Klicken Sie auf das Submenü "Vorlagen"
  • Möchten Sie eine neue Vorlage anlegen, klicken Sie auf "Neue Vorlage erstellen"
  • klicken. Als Vorlagentyp wird "Newsletter" ausgewählt. Dabei ist zu beachten, dass es sich um eine Email mit der Versandart "HTML" handelt, was unter "Eigenschaften" durch die entsprechende Checkbox und den entsprechenden Radiobutton eingestellt werden muss. 

Einfügen des Textkörpers

Sie können folgende Vorlage von uns verwenden. Wir haben diese mit Blindtext und Beispielformatierungen gefüllt, die wir Ihnne im Folgenden Artikel erklären.

Über Werkzeuge → Quelltext ist dann in den Textkörper der Vorlage der folgende Quelltext einzufügen:

Newsletter
<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 erhält man eine Vorlage, für die man ein Headerbild (Logo) bestimmen kann (siehe Abbildung - hier ist das Logo bereits eingefügt).


Bildquelle: pixabay

Setzen eines Headerbildes

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 unten) 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, und das Bild wird dann auf diese Weise als Headerbild eingefügt, wenn man den Cursor vorher auf den Headerbereich der Vorlage gesetzt hat.

Bilder, Grafiken und Logos sollten mindestens 553 px breit sein, sind sie größer, werden sie skaliert.

Das CSS einbinden und Farben per CSS ändern

<Verwendeter Name fehlt>

Um das CSS der Vorlage anzulegen und einzubinden, geht man auf "css-styles" → anlegen und erstellt folgendes CSS: 

CSS
/*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;
    }
}

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>

<Ergebnis Screenshot fehlt>

Ü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.


Erscheinungsbild des Newslettertemplates per CSS konfigurieren - für Experten

<Passage aufräumen und nach unten stellen. Struktur fehlt>

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

table.cel-content tr td{
color: #4A958B;
border-bottom: 1px solid #e7e7e7
}

Änderung der Farbe der Links im CSS durch das color-Attribut - an folgender Stelle

a {
    color: #337ab7;
    text-decoration: none;
}

Änderung der Schriftfarbe

Die Änderung der Schriftfarbe des Hauptteils des Artikels ist an folgender Stelle des CSS möglich

table.cel-content tr td{
 
border-bottom: 1px solid #e7e7e7;
 
}

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. 

<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>

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.

.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;
}


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.

h1, h2, h3, h4, h5, h6 {
 
color: #337ab7;
font-weight: bolder;
 
}

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>

<td align="right"><br /><br />
    <table cellspacing="0" cellpadding="0">
        <tbody>
        <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">
                            Info
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
</td>


Änderung der Schriftfarbe des Impressums

Die Änderung der Schriftfarbe des Impressums kann im css an folgender Stelle vorgenommen werden:

<Möglichkeiten / Beispiel: fehlt>

table.cel-content tr:last-child td{
 
border-bottom: none;
 
}

  • No labels