Eine Trennlinie einfügen

HTML Trennlinie im Newsletter einfügen

Eine HTML Trennlinie gliedert deinen Newsletter in klar erkennbare Abschnitte. In Mail Designer 365 setzt du dafür eine Linienform in einen eigenen Bildbereich und passt Farbe, Stärke, Länge und Position an. Die Linie hilft beim schnellen Erfassen der Inhalte, sollte aber dezent genug bleiben, damit Überschriften und Call-to-Action-Buttons weiterhin die visuelle Priorität besitzen.

Trennlinie sinnvoll planen

Setze eine Trennlinie dort ein, wo ein Thema endet und ein neuer Abschnitt beginnt. Sie eignet sich beispielsweise zwischen mehreren Angeboten, vor einem abschließenden Hinweis oder zwischen redaktionellem Inhalt und Fußbereich. Verwende sie nicht nach jedem kurzen Absatz, sonst wirkt die E-Mail kleinteilig.

Prüfe, ob bereits ausreichend Abstand, eine neue Hintergrundfarbe oder eine deutliche Überschrift für die Gliederung sorgt. Eine zusätzliche Linie ist nur dann hilfreich, wenn sie die Struktur tatsächlich verständlicher macht.

Manchmal ist es im Design sinnvoll, verschiedene Blöcke in einem Newsletter-Layout deutlich voneinander abzutrennen. Dies schaffst du, indem du eine Trennlinie einfügst. So ist es dem Leser klar, dass ein Abschnitt endet und ein neuer Abschnitt gleich beginnt.

Ziehe zuerst einen Bildblock zwischen den zwei Abschnitten, die du trennen möchtest, ein:

Gehe zu "Inhalte" > "Formen" und ziehe eine Linie ein.

Den Stil der Linie kannst du anpassen, indem du sie anklickst und das Stil-Menü öffnest. Hier kannst du die Farbe, Dicke, usw der Linie anpassen, sowie ihre Position im Layoutblock ändern:

Danach hast du zwei klare Abschnitte:

Stil der HTML Trennlinie anpassen

Wähle eine Farbe, die zum Design passt und sich ausreichend vom Hintergrund abhebt. Sehr starke Kontraste oder dicke Linien können den Inhalt unnötig dominieren. Für eine zurückhaltende Unterteilung reicht häufig eine dünne Linie in einer neutralen oder leicht abgetönten Markenfarbe.

Passe Länge und Position so an, dass die Linie mit den übrigen Elementen ausgerichtet ist. Gleiche Seitenabstände erzeugen ein ruhiges Layout. Wenn die Linie bewusst kürzer als der Inhaltsbereich ist, sollte diese Entscheidung im gesamten Newsletter konsistent erscheinen.

Abstand vor und nach der Linie

Lasse genügend Weißraum zwischen Trennlinie und Text. Steht die Linie zu dicht an einer Überschrift, kann unklar werden, zu welchem Abschnitt sie gehört. Zu große Abstände trennen zusammengehörige Inhalte dagegen unnötig stark. Verwende wiederkehrende Abstandswerte für vergleichbare Abschnitte.

Mobile Darstellung prüfen

Öffne die mobile Vorschau und kontrolliere, ob die Linie vollständig sichtbar bleibt und nicht breiter als der Inhaltsbereich erscheint. Prüfe außerdem, ob der zusätzliche Bildbereich auf dem Smartphone zu viel vertikalen Raum erzeugt. Eine kompakte Linie mit angemessenen Abständen funktioniert meist besser als ein großer leerer Block.

Trennlinie zugänglich einsetzen

Eine Linie allein vermittelt unterstützenden Technologien keine inhaltliche Überschrift. Verwende deshalb weiterhin echte Zwischenüberschriften und eine verständliche Reihenfolge. Die Trennlinie ergänzt die visuelle Struktur, ersetzt aber keine semantische Gliederung.

Versende eine Test-E-Mail und prüfe die Darstellung in relevanten E-Mail-Programmen. Kontrolliere auch, dass die Linie nicht versehentlich mit einem Link versehen ist und keine benachbarten klickbaren Elemente überlagert.

Checkliste für Newsletter-Trennlinien

• Die Linie markiert einen echten Abschnittswechsel.
• Farbe, Dicke und Länge passen zum Design.
• Abstände sind auf beiden Seiten ausgewogen.
• Mobile Vorschau und Test-E-Mail wurden geprüft.
• Überschriften vermitteln die Struktur auch ohne Linie.

Weitere Hinweise zu Layoutblöcken und Abständen findest du im Mail Designer 365 Handbuch.