Newsletter Editor: Inline CSS bei HTML-Newslettern

Bei dem Design Ihres Newsletters geben Sie sich viel Mühe und Sie möchten natürlich, dass Ihr Mailing auch so bei Ihrem Empfänger ankommt, wie Sie es erstellt haben. Beim Newsletter Versand ist ein schönes ansprechendes Newsletter Design wichtig und essenziell.

Mittlerweile zeigen manche E-Mail Clients wie zum Beispiel Gmail nur Inline CSS Styles an. Was bedeutet CSS bzw. Inline CSS, wie gelangen Sie in den Quellcode vom Newsletter bzw. einem Element und wie können Sie in unserem Newsletter Editor Ihre Styles ganz einfach in Inline CSS konvertieren?

Was ist CSS bzw. Inline CSS?

CSS steht für “Cascading Style Sheets” und ist eine Computersprache mit der man das Design eines elektronischen Dokuments (z. B. Webseite, Newsletter) vorgeben und definieren kann. Anhand dieser einfachen Anweisungen lassen sich Elemente wie Layout, Farbe und Typografie individuell anpassen. Dargestellt werden sie in übersichtlichen Quellcodes.

Eine Möglichkeit ist, um CSS in einem Webdokument zu formatieren, wenn man alle Style-Angaben in einem zentralen Bereich zusammenfasst. Dazu bieten sich Inline CSS an. Einige E-Mail Clients, wie zum Beispiel Gmail, AOL Mail und Yahoo, zeigen mittlerweile bei einem Newsletter nur noch Inline CSS an.

Quellcode vom Mailing anpassen

Um im Newsletter Editor in den Quellcode Ihres Mailings zu gelangen, klicken Sie oben rechts auf [Editor] und auf [Quellcode].

Hier können Sie jetzt den Style für Ihren Newsletter definieren und abspeichern.

Quellcode von einem Element bearbeiten

Bei einem Elementkönnen Sie im Newsletter Editor den Quellcode öffnen und anpassen. Fahren Sie mit der Maus über Ihr Element, es erscheint ein orangener Rahmen. Klicken Sie auf das </> Symbol und es öffnet sich der Quellcode des Elements:

Auch hier können Sie Ihren Style definieren und abspeichern.

Inline CSS im Newsletter Editor

Um die Styles automatisch in Inline CSS Styles zu konvertieren, öffnen Sie Ihr Mailing In unserem Newsletter Editor. Klicken Sie dann rechts auf die drei Striche:

Jetzt können Sie die Konvertierung aller Styles in [Inline CSS] aktivieren:

Beispiel für CSS-Bereich

So könnte ein Style Bereich im Quellcode Ihres Newsletters aussehen:

<style>

2    /* @title Test */

3    .classtest

4    {

5    font-size: 13px;

6    font-family: Arial, sans-serif;

7    line-height: 21px;

8    color: #262626;

9    margin: 0pt;

10    padding: 0pt;

11    text-decoration: underline;

12    border: 0px solid #000000;

13    background-color: #370707;

14    }

15  </style>

16

Weitere CSS-Bereiche können somit festgelegt und gestylt werden:

1/*  @title Footer

2        @group Footer */

3        .footer {

4        background-color: #A7C5A1;

5     font-size: 10px;

6     color: #ACE950;

7     width: 600px;    

8     margin: 0pt;

9        padding: 15px;

10        font-family: verdana;    

11        }

Hilfe & Support

Sollten Sie Fragen haben oder Hilfe benötigen, können Sie jederzeit gerne unser Service Team kontaktieren.