Wie style ich eine Newsletter-Vorlage?

 

Das Styling der NL Vorlagen findet in der ADDITIVE+ NEWSLETTER App des jeweiligen Kunden statt und umfasst drei Schritte. Zuerst muss im jeweiligen Kunden-Account das Corporate Design auf Vollständigkeit und Richtigkeit kontrolliert werden. Anschließend müssen unter "Stile & Widgets" einige allgemeine Einstellungen für die Blöcke vorgenommen werden, bevor mit der Erstellung der eigentlichen Vorlage unter dem Menüpunkt "Vorlagen" begonnen werden kann.

 

Falls ein Style eines Blocks nicht zum Corporate Design des Kunden passt bzw. nicht auf der Website vorhanden ist, kann diese Variante des Blocks, gegebenenfalls, unter dem Menüpunkt "Stile & Widgets" im Reiter "Kampagnenstile" ausgeblendet werden. Somit wird diese Variante in der Vorlage sowie dem Editor nicht angezeigt.

Bei Änderung von px Angaben generell in 8er-Schritten arbeiten. Möchte man z. B. einen Abstand von 24 px erhöhen, wäre der nächsthöhere Abstand 32px.

 

+ Corporate Design unter “Organisationseinstellungen” kontrollieren

+ Kunden Homepage als Referenz für das Styling öffnen

 

Folgende Elemente müssen angepasst werden, der Rest bleibt unverändert:

+ ALLGEMEIN: gesamte Vorlage

+ Ausrichtung: wie ist der Großteil der Texte ausgerichtet?

+ Abrundungen: gibt es generelle Abrundungen bei allen Elementen (Button, Bilder, usw.)

+ Schlagschatten: none

+ Rahmen: wie stark sind Striche/Rahmenlinien? (Standardmäßig wird 1px Rahmenstärke verwendet)

+ Aufzählungszeichen: gibt es spezielle Aufzählungszeichen? → von der Webseite herunterladen und als Bild hinterlegen

+ BUTTON: Primäre Buttons sind ausgefüllt, sekundäre transparent, mit Rahmen und Verlinkungen reine Textbuttons

+ Layout: wie ist die Ausrichtung der Buttons? Wie hoch sind sie? Volle Breite?

+ Rahmen: wie stark ist die Rahmenlinie? Gibt es Abrundungen an den Ecken? Welche Farbe hat der Rahmen?

+ Hintergrund: welche Farbe hat der Button? Auf welcher Hintergrundfarbe liegt er? 

+ Schrift: welche Farbe hat der Buttontext?

+ Info: Bei Verlinkung bezieht sich das Feld “Rahmen” auf den Unterstrich

+ HEADER: oberster Teil der WS

+ Die Varianten „groß“ und „mittel“ werden in der Regel beibehalten. Die Variante „klein“ kann ausgeblendet werden, es sei denn, sie wird auf der Website des Kunden verwendet.

+ Layout: wie ist die Ausrichtung des Logos und der Texte? Wie hoch ist der Header?

+ Logo: wie groß ist das Logo? Wird es mobile korrekt dargestellt?

+ Text-Anzeige: ist im Header Text vorhanden?

+ Button: ist im Header ein Button vorhanden?  In welchem Stil? Muss er invertiert werden?

+ FOOTER: unterster Teil der WS

+ Layout: wie ist die Ausrichtung? Ist ein Logo vorhanden? Wie groß ist dieses? Wird es mobile korrekt dargestellt?

+ Hintergrund: welche Farbe hat der Hintergrund? 

+ Schrift: muss die Kontrastfarbe verwendet werden? Welche Schrift wird für die Verlinkungen benutzt? Welche Farbe haben sie?

+ TEXT: Primärer Text hat die Haupthintergrundfarbe, sekundärer Text die zweit-präsenteste und umrahmter Text stellt eine Hervorhebung dar

+ Layout: wie ist die Ausrichtung des Texts? Volle Breite? 

+ Abstand: wie ist der Abstand?

+ Hintergrund: stimmt die Hintergrundfarbe?

+ Schrift: muss die Kontrastfarbe verwendet werden?

+ Info: Bei “Umrahmt” zusätzlich die Hintergrundfarbe des Inhalts einstellen

+ MENÜ:

+ Immer mindestens eine Variante beibehalten

+ Layout: wie ist die Ausrichtung? Volle Breite?

+ Rahmen: wie stark sind die Rahmenlinien? Welche Farbe haben sie?

+ Schrift: welche Schrift wird verwendet? Welche Farbe hat sie?

+ Info: Bei “Buttons” zusätzlich Button Art auswählen

+ CTA: Buchungs/Anfragenblock

+ Layout: wie ist die Ausrichtung? Volle breite?

+ Rahmen: wie stark sind die Rahmenlinien der Datumsauswahl? gibt es Abrundungen an den Ecken? welche Farbe hat der Rahmen?

+ Button: welche Art von Button wird verwendet? Muss er invertiert werden?

+ Hintergrund: welche Farbe hat der Hintergrund?

+ Schrift: muss die Kontrastfarbe verwendet werden? Welche Schrift wird verwendet? In welcher Farbe?

+ SOZIALE MEDIEN: Kontrolle auf Richtigkeit

+ MULTIMEDIA: Einzelnes Bild evtl. mit Text

+ Layout: wie ist die Ausrichtung des Texts? wie ist die Bildhöhe? Volle Breite?

+ Rahmen: gibt es einen Rahmen? 

+ Text-Anzeige: ist auf einzelnen Bildern Text vorhanden?

+ Schrift: welche Schrift wird verwendet? In welcher Farbe?

+ GALERIE: Mehrere Bilderkacheln mit Text

+ Layout: wie ist die Ausrichtung des Texts? Wie ist die Bildhöhe? Volle Breite?

+ Rahmen: gibt es einen Rahmen? 

+ Schrift: welche Schrift wird verwendet? In welcher Farbe?

+ LOGOS: Kontrolle auf Richtigkeit

+ BILD UND TEXT: Text und Bild nebeneinander, wobei randabfallend auf der Haupthintergrundfarbe und umrahmt als Hervorhebung in der zweitpräsentesten Farbe gestylt wird

+ Layout: wie ist die horizontale und vertikale Ausrichtung des Texts? Wie ist die Bildhöhe? Sollen Bild und Text die umgekehrte Reihenfolge haben? Volle Breite?

+ Hintergrund: stimmt die Hintergrundfarbe?

+ Rahmen: gibt es Abrundungen an den Ecken des Bildes?

+ Hintergrund: welche Farbe hat der Hintergrund? 

+ Button: ist ein Button vorhanden? In welchem Style? Muss er invertiert werden?

+ Schrift: muss die Kontrastfarbe verwendet werden?

+ Info: Bei “Umrahmt” zusätzlich die Hintergrundfarbe des Inhalts einstellen sowie die Stärke und Farbe des Rahmens, falls vorhanden

+ ZWEI SPALTEN: Zwei Bilder mit zwei Textspalten nebeneinander, wobei randabfallend auf der Haupthintergrundfarbe und umrahmt als Hervorhebung in der zweitpräsentesten Farbe gestylt wird

+ Layout: wie ist die Ausrichtung des Texts? Volle Breite? Wie ist die Bildhöhe?

+ Rahmen: gibt es Abrundungen an den Ecken des Bildes?

+ Button: ist ein Button vorhanden? In welchem Style? Muss er invertiert werden?

+ Hintergrund: welche Farbe hat der Hintergrund? 

+ Schrift: muss die Kontrastfarbe verwendet werden?

+ Info: Bei “Umrahmt” zusätzlich die Hintergrundfarbe des Inhalts einstellen sowie die Stärke und Farbe des Rahmens, falls vorhanden

+ TEASER: Einzelnes Bild mit Text und evtl. Button

+ Layout: wie ist die Ausrichtung? wie ist die Bildhöhe?

+ Rahmen-Abrundungen: gibt es Abrundungen an den Ecken des Bildes?

+ Button: ist ein Button vorhanden?  In welchem Style? Muss er invertiert werden?

+ Schrift: welche Schrift wird verwendet? In welcher Farbe?

+ SIGNATUR: Bild und evtl. Beschreibung

+ Layout: wie ist die Ausrichtung? Volle Breite? Wie groß ist das Bild?

+ Rahmen: gibt es Abrundungen an den Ecken des Bildes?

+ Schrift: Ist eine Beschreibung vorhanden? In welche Schrift wird für Name bzw. Beschreibung verwendet? In welchen Farben?

+ TRENNER: Blockabstände/Trennerelemente

+ Immer mindestens Abstand und eine weitere Variante beibehalten

+ Bei Abstand: volle Breite? Stimmt die Hintergrundfarbe?

+ Bei Linie: volle Breite? Welche Farbe und Stärke hat die Linie?

+ Bei Bild: wie ist die Ausrichtung? Volle Breite?

+ UMFRAGE: Kontrolle auf Richtigkeit

+ JOURNAL: ausblenden

+ GUTSCHEIN: Kontrolle auf Richtigkeit

+ ANGEBOT: ausblenden

 

 

Vorlagen werden in der nachfolgenden Struktur aufgebaut und noch folgendermaßen angepasst:

+ HEADER:

+ Passende Variante wählen

+ Verlinkung: Text “Zur Online-Version” hinterlegen (wichtig!)

+ Hintergrundbild: Beispiel-Hintergrundbild hinzufügen (falls noch nicht vorhanden → aus Ordner “Newsletter-Vorlage”)

+ Schrift: welche Schrift wird verwendet? In welcher Farbe?

+ MENÜ:

+ Passende Variante wählen

+ Elemente: Beispiel-Texte “Landingpage, Zimmer, Angebote, Buchen”  hinterlegen

+ TEXT:

+ Passende Variante wählen (meistens “Text Primär”)

+ Text: welche Schriftstile, Farben und Formatierungen (z.B. fettierte Hervorhebungen) werden in den Paragraphen verwendet?

+ BUTTON:

+ Passende Variante wählen

+ Button: Beispiel-Text “Button” hinterlegen

+ SIGNATUR:

+ Text: Beispiel-Text für Name und ggf. Beschreibung hinterlegen

+ Bild: Beispiel-Bild hinzufügen (falls noch nicht vorhanden → aus Ordner “Newsletter-Vorlage”)

+ Folgende Blöcke werden in einer oder mehreren Varianten zurechtgelegt, je nach Corporate Design und Website des Kunden. Dieser Abschnitt kann dann unter Verwendung der Vorlage frei gestaltet werden, indem 2 - 3 Blöcke ausgewählt und mit Inhalt befüllt werden.

+ Zwei Spalten

+ Bild und Text

+ Galerie

+ Multimedia

+ Teaser

+ CTA:

+ Beispiel-Text bei Anreise und Abreise hinterlegen (meist jeweils “Anreise” und “Abreise)

+ Icons bei Anreise und Abreise hinzufügen (können in Multimedia-Datenbank als “Shared Folders” hinzugefügt werden)

+ FOOTER:

+ Logo: Logo ggf. hinterlegen

+ Text: Kundendaten einfügen, z.B. Adresse, Telefon, E-Mail

+ Icons: Verwendete Social Media Icons sowie Verlinkungen hinterlegen