Style your newsletter

Der Style Editor zeigt nur die Einstellungen, die zur aktuellen Auswahl passen. Wähle deshalb zuerst die richtige Ebene und ändere danach nur die Eigenschaft, die wirklich anders aussehen soll. So vermeidest Du, dass eine Anpassung unbeabsichtigt einen ganzen Abschnitt statt nur eines Textes, Bildes oder Buttons verändert.

Das richtige Element auswählen {#style-selection}

Ein Newsletter besteht aus verschachtelten Ebenen:

• Newsletter-Hintergrund: Klicke in eine freie Fläche außerhalb der Inhalte.

Hier steuerst Du je nach Vorlage die Breite, den Hintergrund und das Brand Profile des gesamten Entwurfs.

• Äußeres Layout: Wähle den Rahmen eines Layout Containers oder eines

mehrspaltigen Bereichs für gemeinsamen Hintergrund, Rahmen, Abstände und das responsive Verhalten.

• Spalte: Wähle die einzelne Tabellenzelle, wenn nur diese Spalte einen anderen

Innenabstand, Hintergrund, Rahmen oder eine andere Ausrichtung erhalten soll.

• Einzelnes Element: Klicke direkt auf Text, Überschrift, Bild, Schaltfläche,

Trenner oder Tabelle, wenn nur dieser Baustein geändert werden soll.

Der Auswahlrahmen und die Auswahlhierarchie zeigen, welche Ebene aktiv ist. Wenn eine erwartete Einstellung fehlt, wähle zuerst den äußeren Bereich und anschließend gezielt das Kindelement. Eine gesperrte Ebene lässt sich erst nach dem Entsperren bearbeiten.

Text, Schrift, Farben, Ausrichtung und Größe {#style-font-colors}

Wähle eine Textbox, Überschrift oder den Text eines Buttons. Unter font stellst Du Schriftart, Schriftgröße, Zeilenhöhe, Fettdruck, Kursivschrift und Unterstreichung ein. Die Textwerkzeuge bearbeiten außerdem Absätze, Listen und Links. Alignment setzt den Inhalt linksbündig, mittig oder rechtsbündig; verwende Zentrierung vor allem für kurze Überschriften oder Aktionen, nicht für lange Fließtexte.

Under Farben stehen je nach Auswahl Schrift- und Hintergrundfarbe zur Verfügung. Prüfe ausreichenden Kontrast und verwende eine Akzentfarbe konsistent für Links und Hauptaktionen. Die Farbwerte eines Brand Profiles ergänzen die Auswahl im Entwurf, ohne die kontoweite Farbpalette zu überschreiben. Mehr dazu steht unter Brand Profiles erstellen und anwenden.

Der Bereich Größe steuert nur die Maße, die für das gewählte Element sinnvoll sind. Bei einem Container kann das die Breite sein, bei einem Abstand oder einer Trennlinie die Höhe. Ändere keine feste Höhe für einen Textbereich, wenn der Inhalt später durch Personalisierung länger werden kann.

Container und übergeordnete Gestaltung {#style-containers}

Wähle den äußeren Layout Container, um einen zusammengehörigen Abschnitt als Karte zu gestalten. Hintergrund, Breite, Rahmen, Abrundung und gemeinsame Abstände wirken dann auf den Abschnitt, ersetzen aber nicht die lokalen Einstellungen seiner Kindelemente. Wähle für Text, Bild oder Link weiterhin das jeweilige Element.

Passe zuerst die übergeordnete Gestaltung an und korrigiere danach nur echte Ausnahmen. Das Ergebnis bleibt konsistent und der Abschnitt kann weiterhin als Einheit bewegt, dupliziert oder gespeichert werden.

Innenabstand und Element-Abstand {#style-spacing}

Inside distance schafft Raum innerhalb eines Elements oder Containers. Element-Abstand schafft Außenraum zwischen dem vollständigen Baustein und seinen Nachbarn. Bilder und Schaltflächen besitzen zusätzlich die spezialisierten Bereiche Bild-Abstand or Button-Abstand.

Beginne beim Inside distance mit Alle Seiten, damit derselbe Wert für oben, rechts, unten und links gilt. Wechsle zu Einzelne Seiten, wenn nur eine Kante abweichen soll. Prüfe dabei die aktive Auswahl: Innenabstand am Container vergrößert die Fläche um alle enthaltenen Elemente, Innenabstand an einer Spalte nur diese Spalte und Innenabstand am Button dessen Klickfläche.

Für ein ruhiges Layout reichen wenige wiederkehrende Abstandswerte. Nutze keinen leeren Textbaustein als Abstandshalter; verwende Abstand oder die passenden Abstandseinstellungen. Kontrolliere lange Newsletter auch mobil, damit sich kleine Einzelabstände nicht zu großen Leerflächen summieren.

Rahmen und Abrundung {#style-border-radius}

Under Frame wählst Du Stil und Farbe. Mit Alle Seiten erhält jede Kante dieselbe Width. Einzelne Seiten gibt oben, rechts, unten und links jeweils eine eigene Breite; Stil und Farbe bleiben dabei gemeinsam. Ein Wert von 0 macht die entsprechende Kante unsichtbar.

Abrundung verwendet im aktuellen Editor einen gemeinsamen Wert für alle vier Ecken. Einzelne Ecken lassen sich dort nicht separat einstellen. Rundungen eignen sich besonders für Bilder, Buttons und Karten. Der Style Editor weist darauf hin, dass ältere Outlook-Versionen sie möglicherweise nicht darstellen; ein Abschnitt muss deshalb auch mit eckigen Kanten verständlich bleiben.

Schaltflächen gestalten {#style-buttons}

Wähle den sichtbaren Buttontext, um Beschriftung und Link zu bearbeiten. Im Style Editor steuerst Du Schrift, Text- und Hintergrundfarbe, Breite, Ausrichtung, Abrundung, Inside distance or Button-Abstand. Ein größerer Innenabstand vergrößert die Klickfläche; Button-Abstand trennt die gesamte Aktion von ihrem Umfeld.

Nutze pro Abschnitt möglichst eine eindeutige Hauptaktion. Prüfe Kontrast, Beschriftung, Linkziel und die Klickfläche in der Mobilansicht und einer Testmail.

Bilder gestalten {#style-images}

Wähle das Bild selbst. Unter Bild bearbeitest Du Bild Url or Alt. Text; die weiteren Bereiche steuern Link, Breite, Ausrichtung, Abrundung or Bild-Abstand. Ziehe am sichtbaren Größenanfasser, wenn Du ein Bild direkt auf der Arbeitsfläche skalieren möchtest. Die Breite muss zum umgebenden Container passen, und das Motiv soll auch auf kleinen Bildschirmen erkennbar bleiben.

Bilddatei, Ausschnitt, Alternativtext und Bildlink werden ausführlich unter Bilder, Anhänge und Alternativtexte erklärt.

Mobile Abweichungen setzen und zurücknehmen {#style-mobile-overrides}

Wechsle oberhalb der Arbeitsfläche von Desktop zu Mobile, wähle den Baustein erneut und ändere eine verfügbare Style-Eigenschaft. Diese Änderung wird als mobile Abweichung gespeichert; andere Desktopwerte bleiben bestehen. Geeignet sind etwa Schriftgröße, Zeilenhöhe, Innenabstand, Bild- oder Buttonbreite, Farben, Rahmen und Abrundung. Strukturelles Drag-and-drop bleibt der Desktop-Ansicht vorbehalten.

Für passende Elemente zeigt Responsive außerdem Mobile, Desktop und bei mehrspaltigen Layouts Columns below each other sowie Spalten umkehren. Diese Optionen gehören an den äußeren Layout Container, nicht an eine einzelne Spalte.

Der aktuelle Style Editor besitzt keinen eigenen Schalter, der eine einzelne mobile Style-Abweichung löscht. Nutze direkt nach einer versehentlichen Änderung Undo. Ist sie bereits Teil des Entwurfs, ermittle den gewünschten Wert in der Desktop-Ansicht und stelle ihn in Mobile bewusst wieder her. Prüfe danach beide Ansichten. Das löscht den gespeicherten Mobil-Override nicht: Ändert sich der Desktopwert später erneut, erbt diese mobile Eigenschaft ihn weiterhin nicht. Für alle Details lies Mobile Newsletter bearbeiten.

Vor dem Speichern prüfen

• Ist die richtige Ebene ausgewählt und betrifft die Änderung nur den gewünschten

Bereich?

• Bleiben Schriftgrößen, Farben und Abstände im ganzen Newsletter konsistent?
• Sind Rahmen, Rundungen und Hintergründe auch ohne spezielle Mailclient-Unterstützung

verständlich?

• Sind Buttons und Bilder auf Desktop und Mobil ausreichend groß und korrekt

ausgerichtet?

• Wurden mobile Abweichungen in beiden Ansichten und anschließend in Vorschau oder

Testmail geprüft?

Der vollständige Ergebnischeck steht unter preview, test email, and accessibility.