Newsletter Design Tutorial - mynewsletter.rocks

Newsletter Tutorial

Tutorial #1: Der cobra Kunden Newsletter

Die cobra Computers‘ Brainware GmbH ausKonstanz ist Entwickler der preisgekrönten CRM Software AddressPlus, CRM und CRM Pro. In diesem Tutorial zeigen wir, wie der cobra Kundennewsletter aufgebaut ist und wie man ein solches Design mit MyNewsletter.rocks realisiert

Die Vorgabe

Der Newsletter
sollte nicht nur in etwa, sondern genau so
aussiehen wie hier:

Erstellung der Vorlage

Erstellen wir einen neuen Newsletter. Klicke hierfür auf
die Schaltfläche „Neu“ in der Toolbar und wähle
aus den Systemvorlagen die Vorlage mit dem Namen
„Leer“.Das System lädt eine leere Vorlage, die sozusagen ein
weißes Blatt Papier auf einem grauen Hintergrund
abbildetet. Der Bildschirm sieht nun folgendermaßen aus:

Oben gibt es das Abo-Verwaltungs-Element mit Optionen zum
Öffnen der Browserversion des Newsletters, unten ist ein
Beispieltext für ein Impressum eingefügt. Beides brauchen
wir für den cobra Newsletter nicht.Um das Abo-Verwaltungs-Element zu entfernen, tu
folgendes:

Das
Impressums-Element ist einfacher zu entfernen:

Kopfzeile, Banner und Menüleiste

Sehen wir uns den oberen Teil des Newsletters an:

Ganz oben ist ein Text mit einem Hinweis auf die
Browserversion des Newsletters. Darunter ist ein Banner,
gefolgt von 5 Menüpunkten, die nichts weiter sind als
Links in einer Textbox, abgetrennt mit einem senkrechten
Strich.Fügen wir also die entsprechenden Elemente per Drag &
Drop in den Newsletter ein. Anschließend sieht der
Bildschirm folgendermaßen aus:

Geben wir die
entsprechenden Text ein und ersetzen den Banner durch die
gewünschte Bilddatei. Das Ergebnis sieht so aus:

Links fügst Du folgendermaßen ein: Markiere den
Text, klick auf „Link“ in der Toolbar und wähle
Hyperlink.

Der
Link wird in den Text eingefügt. Wiederhole den Vorgang
mit den fünf Menüpunkten unterhalb des Banners.

Begrüßung

Werfen wir als nächstes einen Blick auf die Begrüßung.
Sie ist folgendermaßen aufgebaut:

Ein
zweispaltiges Layout, links mit einem Text, rechts mit
einem Bild.Füge erst das zweispaltige Layout-Element ein und passe
die Breite an:

Füge ein Textelement in die linke und ein Bild in die
rechte Spalte ein…

Füge den entsprechenden Text ein und lad das
entsprechende Bild hoch, und wir sind mit dem
Begrüßungstext fertig:

Das Inhaltsverzeichnis

Unter dem Begrüßungstext befindet sich das
Inhaltsverzeichnis, das dem werten Lesern einen Überblick
über die Themen dieser Ausgabe des Newsletters gibt.Der Aufbau ist deutlich interessanter:

Genau wie oben besteht der Inhalt aus einem zweispaltigen
Layout. In jede der beiden Spalten kommt eine
Überschrifts-Element vom Typ H2 Heading (Schritt 1).In die linke Spalte setzen wir dann ein weiteres
zweispaltiges Layout (Schritt 2). Zum Schluß fügen wir in
jede der drei Spalten ein Text-Element hinzu (Schritt 3).

Möglicherweise fragst Du Dich, warum wir nicht gleich
einfach ein dreispaltiges Layout verwenden.Der Grund ist ganz einfach: wir wollen, dass die linken
beiden Spalten eine gemeinsame Überschrift haben.

Im Moment sieht unsere Konstruktion dem gewünschten
Layout noch nicht allzu ähnlich, aber das wird sich
schnell ändern.

Definiere den Rahmen

Das
Inhaltsverzeichnis ist (wie die weiteren Artikel auch)
von einer blauen Umrandung umgeben. Die wollen wir
natürlich auch implementieren.Klicke dafür auf eines der Elemente in dem Artikel und
wähle dann aus der Element-Hierarchy auf der rechten
Seite des Editors das oberste zweispaltige Layout Element
(Schritt 1).

Dann wähle einen Rahmen, der 2px breit und
’solid‘ ist (Schritt 2).

Um einen genauen Farbwert festzulegen, klick auf die
Farbe, wähle ‚Eigene Farbe‘ und gibt dann den
genauen Farbwert ein (Schritt 3 + 4).

Ergebnis: ein farbiger Rahmen! Aber so toll sieht es
immer noch nicht aus.

Überschriften anpassen

Passen wir als nächstes die Überschriften an. Klick das
H2 Element in der linken Spalte an. Natürlich könntest Du
auch den Text markieren, aber ehrlich: es ist viel besser
und einfacher, nur das Element auszuwählen und dann die
Schriftart für das ganze Element zu ändern, als mit
markierten Texten zu arbeiten.Mach die Überschrift einfach Fett (Schritt 2) und ändere
die Textfarbe (Schritt 3).

Die Überschrift
sieht nun so aus:

Machen wir weiter mit der Überschrift in der rechten
Spalte. Klick auf hier einfach auf das Element (Schritt
1), zentriere die Schrift (2), mach sie ein wenig kleiner
(Schritt 3) und ändere dann die Farbe von Hintergrund und
Text (Schritt 4).

Geben wir dann noch in einem Anflug von Übermut die
Überschriften-Texte ein, sieht das Ergebnis so aus:

Auch den Inhalt kannst Du einfach so eintippen. Wenn das
Inhaltsverzeichnis anschließend zu groß sein sollte,
kannst Du die Höhe mit der Maus ändern. Sollte es sich
partout nicht verkleinern lassen, schau nach, ob sich in
den Texten nicht vielleicht einige Leerzeilen verbergen.
Lösche sie, dann sollte auch das Verändern der Höhe kein
Problem mehr sein.

Lass uns faul sein

Lorem Ipsum Dolor is a sample text that acts as a
placeholder for your own text. Lorem Ipsum Dolor is a
sample text that acts as a placeholder for your own text.
Lorem Ipsum Dolor is a sample text that acts as a
placeholder for your own text. Lorem Ipsum Dolor is a
sample text that acts as a placeholder for your own text.
Lorem Ipsum Dolor is a sample text that acts as a
placeholder for your own text. Lorem Ipsum Dolor is a
sample text that acts as a placeholder for your own
text.