Abstände im E-Mail-Design festlegen
Abstände im E-Mail-Design sorgen dafür, dass Inhalte klar gegliedert und leichter lesbar sind. In Mail Designer 365 kannst du einen Abstandsblock zwischen Layoutblöcken einsetzen oder den Abstand vor und nach einem Absatz direkt im Textbereich anpassen. Beide Methoden erfüllen unterschiedliche Aufgaben und lassen sich gezielt kombinieren.
Abstandsblock zwischen Layoutblöcken verwenden
Ein Abstandsblock trennt zwei eigenständige Bereiche deines Newsletters. Er eignet sich zum Beispiel zwischen Einleitung und Produktabschnitt, zwischen zwei Angeboten oder vor einem abschließenden Call-to-Action. Ziehe den Abstandsblock aus dem Inhalte-Bereich an die gewünschte Stelle und passe anschließend seine Höhe an.
Verwende wiederkehrende Abstände, um einen ruhigen visuellen Rhythmus zu schaffen. Wenn vergleichbare Abschnitte jeweils unterschiedlich viel Platz erhalten, wirkt das Design schnell unruhig. Prüfe die Wirkung sowohl in der Desktop- als auch in der mobilen Vorschau, da derselbe Abstand auf einem schmalen Bildschirm stärker auffallen kann.
Wenn du noch ein wenig Abstand zwischen deinen Layoutblöcken brauchst, um das Design übersichtlicher zu machen, brauchst du einen Abstandsblock.

Ziehe den Block aus dem Inhalte-Fenster zwischen zwei Layoutblöcken:

Du kannst nun die Höhe des Abstands verändern, indem du den Block größer oder kleiner ziehst.

Du kannst außerdem Abstand vor oder nach einem Textblock hinzufügen. Wähle dazu einen Textbereich aus. Im Stil-Menü findest du die Einstellungen „Vor dem Absatz“ und „Nach dem Absatz“. Erhöhe oder verringere die Punktwerte, um den gewünschten Absatzabstand festzulegen.
Zeilenabstand und Absatzabstand unterscheiden
Der Abstand zwischen Layoutblöcken ist nicht dasselbe wie der Zeilenabstand innerhalb eines Textes. Für den Raum vor oder nach einem Absatz wählst du den Textbereich aus und passt im Stil-Menü die Werte „Vor dem Absatz“ beziehungsweise „Nach dem Absatz“ an. So kannst du Überschriften, Absätze und Listen innerhalb desselben Textblocks klar voneinander trennen.
Ein zu kleiner Abstand erschwert das Erfassen der Inhalte. Ein zu großer Abstand kann dagegen den Zusammenhang zwischen Überschrift und Text auflösen. Beginne mit moderaten Werten und beurteile das Ergebnis im gesamten Layout statt nur im ausgewählten Textbereich.
Abstände für mobile Newsletter prüfen
Auf einem Smartphone werden Layoutblöcke häufig untereinander dargestellt. Dadurch kann sich die Gesamthöhe des Newsletters deutlich vergrößern. Prüfe daher, ob große Abstandsblöcke mobil noch sinnvoll sind und ob wichtige Inhalte ohne langes Scrollen erreichbar bleiben. Passe bei Bedarf die mobile Version an, ohne die inhaltliche Reihenfolge zu verändern.
Achte außerdem auf die Nähe zu klickbaren Elementen. Zwischen zwei Buttons oder Links sollte genug Platz liegen, damit sie bequem mit dem Finger bedient werden können. Gleichzeitig sollte klar bleiben, welcher Text zu welchem Button gehört.
Einheitliches Abstandssystem aufbauen
Lege für dein Design wenige wiederkehrende Abstandsstufen fest, zum Beispiel klein für zusammengehörige Texte, mittel zwischen Elementen eines Abschnitts und groß zwischen eigenständigen Themen. Dieses einfache System erleichtert spätere Änderungen und sorgt dafür, dass neue Layoutblöcke zum bestehenden Newsletter passen.
Setze Abstand bewusst statt als Ersatz für eine klare Struktur ein. Überschriften, Absätze, Farben und Layoutblöcke sollten die Hierarchie gemeinsam vermitteln. Wenn ein Abschnitt nur durch sehr große Leerflächen verständlich wird, lohnt sich oft eine Überprüfung der eigentlichen Anordnung.
Checkliste für saubere Abstände
- Ähnliche Abschnitte verwenden ähnliche Abstandswerte.
- Überschrift und zugehöriger Text bleiben optisch verbunden.
- Buttons und Links lassen sich mobil sicher antippen.
- Desktop- und Mobilvorschau wurden geprüft.
- Der Newsletter bleibt trotz Weißraum kompakt und übersichtlich.
Weitere Hinweise zu Layoutblöcken und mobilen Textstilen findest du im Mail Designer 365 Handbuch.
Wie können wir helfen?
Auf einen Blick
Hintergründe
Layoutblöcke
Mit Text arbeiten
Links und Buttons
Textstile
Tabellen
Bildbereiche
Bilder
Retina-Bilder
Grafiken und mehr
Kreative Tools
Erweiterte Design-Techniken
Mobile Optimierung
Klartext-Darstellung
Inbox-Vorschau
Vorschau
Feedback und Teams
Vorbereitung vor dem Senden
Kontakte und Zielgruppen
E-Mail-Versand
1:1 E-Mails
Auswertung und Statistiken
HTML Export
Teilen

