Content and article blocks

Inhalts- und Artikelbausteine geben Deinem Newsletter einen fertigen, gut lesbaren Aufbau: Du ersetzt die Beispielinhalte, ergänzt Links und passt Farben, Abstände oder Bilder an. Du findest sie in der Elementleiste im Bereich Article. Ziehe einen Baustein an eine Einfügeposition und bearbeite anschließend die sichtbaren Texte direkt im Newsletter.

Die Vorschauen zeigen die tatsächlich verfügbaren Produktionsbausteine mit Beispielinhalten. Prüfe nach jeder Änderung die mobile Ansicht, alle Links und bei Bildern den Alternativtext.

Artikelbausteine einfügen und kombinieren

Der Einstieg ist für alle folgenden Varianten gleich: Öffne Article, ziehe den Baustein an die sichtbare Einfügeposition und wähle anschließend Text, Bild, Button oder die umgebende Fläche im Newsletter aus. Inhalte änderst Du direkt auf der Arbeitsfläche; Schrift, Farben, Ausrichtung, Rahmen und Abstände bearbeitest Du im Style Editor. Das Ergebnis bleibt ein normaler Newsletterabschnitt, den Du verschieben, duplizieren oder wieder löschen kannst.

Jeder Baustein ist auch einzeln verwendbar. Für einen vollständigen Abschnitt sind folgende Kombinationen besonders sinnvoll:

Baustein	Sinnvolle Kombination
Zweispaltiger Artikel mit Bild und Text, Bild mit Überschrift und Text	H2-Überschrift davor, Schaltfläche oder Trenner danach
Zeile mit Bild und Text, Artikel Zweispaltig Text Bild	abwechselnd einsetzen, um Bild- und Textseiten zu wechseln
Drei Spalten mit Bild, Drei Spalten mit Bild und Text	Einleitung davor und eine gemeinsame Schaltfläche danach
Aktueller Stand, Status und nächste Schritte, Kurzcheck Eignung	kurze Einordnung davor und eindeutiger nächster Schritt danach
Kontakt mit Schaltfläche	nach Angebot, Termin oder Ressourcen als persönlicher Abschluss
Termin mit Schaltfläche, Terminliste	mit einer kurzen Einleitung und bei Bedarf einem ICS- oder Informationslink
Bild mit einem Text und einer Schaltfläche, Text mit Button und Bild	als einzelner Haupt-CTA; nicht direkt mit einem zweiten starken CTA konkurrieren lassen
Infobox, Text mit grauem Hintergrund	zwischen längeren Artikeln als Hinweis oder Zusammenfassung
Zahlenblock, Varianten vergleichen, Tabellenblock	erläuternder Text davor und Quellen- oder Detail-Link danach
Die ersten drei Schritte, Tagesordnung und Beschlüsse	Ressourcen oder Kontaktmöglichkeit nach der geordneten Folge
Zitatblock	zwischen Einleitung und Angebot als Beleg oder Perspektivwechsel
Ressourcen im Überblick	nach einem Erklärabschnitt und vor dem abschließenden CTA
Social Media, Social Footer	einmal im Inhalt oder zurückhaltend vor Impressum und Abmeldelink

Die Abschnitte unten erklären Zweck, Bearbeitung, Ergebnis und mobile Wirkung jeder Variante. Ein mobiles Zusatzbild ist dort eingeplant, wo Stapelreihenfolge oder Vergleichbarkeit wesentlich vom Desktopbild abweichen.

<a id="“2col-image-text“"></a>Zweispaltiger Artikel mit Bild und Text

Geeignet für: eine kurze Produkt- oder Themenvorstellung, bei der das Bild links und die Erklärung rechts stehen soll. Inhalte bearbeiten: Bild, Überschrift, Fließtext, Buttonbeschriftung und Buttonlink. Gestaltung: Passe Bildzuschnitt, Kartenhintergrund, Rahmen, Innenabstand und Button im Style Editor an. Mobil und Hinweise: Die Spalten werden auf schmalen Bildschirmen untereinander gezeigt; halte Überschrift und Button auch ohne Bild verständlich und hinterlege einen aussagekräftigen Alternativtext.

<a id="“2col-row-image-text“"></a>Bild mit Überschrift und Text

Geeignet für: redaktionelle Hinweise oder einen ruhigen Abschnitt ohne dominante Handlungsaufforderung. Inhalte bearbeiten: Ersetze Bild, Überschrift und Text direkt im Baustein. Gestaltung: Steuere Bildformat, Hintergrund, Rahmen sowie den Abstand zwischen Bild und Text; für einen Link kannst Du das Bild oder einen Textlink verwenden. Mobil und Hinweise: Der Baustein ist bereits einspaltig: Das Bild steht über Überschrift und Text. Verwende ein Bild, das auch in kleiner Breite erkennbar bleibt, und ergänze eine klare Überschrift.

<a id="“2col-row-text-image“"></a>Zeile mit Bild und Text

Geeignet für: einen Wechsel im Lesefluss, wenn der Text links und das Bild rechts stehen soll. Inhalte bearbeiten: Ändere Überschrift, Text und Bild; Bildlink und Alternativtext werden am Bild gepflegt. Gestaltung: Passe Abstände, Bildabrundung und Hintergrund an, ohne beide Spalten mit langen Texten zu überladen. Mobil und Hinweise: Auf Mobilgeräten wird der Baustein vertikal gelesen. Prüfe die mobile Reihenfolge und formuliere den Text so, dass er unabhängig vom Bild funktioniert.

<a id="“2col-text-image“"></a>Artikel Zweispaltig Text Bild

Geeignet für: Angebote oder Erklärungen mit einem klaren Call-to-Action neben einem Bild. Inhalte bearbeiten: Text, Überschrift, Bild, Buttontext und Buttonziel sind direkt editierbar. Gestaltung: Stelle Buttonfarbe, Ausrichtung, Ecken, Kartenrahmen und Bildzuschnitt passend zur Marke ein. Mobil und Hinweise: Die Spalten werden gestapelt; der Button muss einen eindeutigen Zweck haben und wichtige Textinformation darf nicht allein im Bild stehen.

<a id="“3pics“"></a>Drei Spalten mit Bild

Geeignet für: drei gleichwertige Motive, Kategorien oder Themen ohne zusätzlichen Beschreibungstext. Inhalte bearbeiten: Ersetze die drei Bilder und hinterlege bei Bedarf je einen Bildlink und Alternativtext. Gestaltung: Nutze vergleichbare Bildausschnitte und gleiche Ecken, damit die Reihe ruhig wirkt. Mobil und Hinweise: Drei Spalten werden auf schmalen Geräten untereinander dargestellt; jedes Bild braucht einen eigenen, sinnvollen Alternativtext oder wird als dekorativ gekennzeichnet.

<a id="“3pics-text“"></a>Drei Spalten mit Bild und Text

Geeignet für: drei Leistungen, Tipps oder Kategorien mit jeweils kurzer Erklärung. Inhalte bearbeiten: Passe pro Karte Bild, Überschrift und Text an; ergänze Links dort, wo ein Weiterklicken sinnvoll ist. Gestaltung: Halte Titel und Texte ähnlich lang, verwende einheitliche Bildformate und gleiche Kartenabstände. Mobil und Hinweise: Die Karten stapeln sich. Kürze Texte konsequent, damit die mobile Ausgabe nicht unnötig lang wird.

<a id="“account-decision-summary“"></a>Aktueller Stand

Geeignet für: Entscheidungen, Fristen und Optionen übersichtlich zusammenzufassen. Inhalte bearbeiten: Ändere Titel, Einleitung sowie die drei Bezeichnungs- und Wertpaare der Übersicht. Gestaltung: Die farblich abgesetzte Tabelle lässt sich über Hintergrund, Rahmen, Schrift und Abstände an Dein Design anpassen. Mobil und Hinweise: Die Zeilen bleiben in sinnvoller Reihenfolge lesbar; nutze kurze Labels und übermittle zeitkritische Informationen zusätzlich im Fließtext.

<a id="“alert-status-action“"></a>Status und nächste Schritte

Geeignet für: Wartungs-, Projekt- oder Serviceinformationen, die klar zwischen Status und Handlung unterscheiden sollen. Inhalte bearbeiten: Bearbeite Überschrift, Einleitung und die drei Statuspunkte mit Titel und Erklärung. Gestaltung: Hervorhebungsfarbe, Kartenfläche, Rahmen und typografische Hierarchie können im Style Editor angepasst werden. Mobil und Hinweise: Die Punkte werden nacheinander gelesen; nenne die notwendige Handlung im Text und verlasse Dich nicht nur auf Statusfarben.

<a id="“contact-cta“"></a>Kontakt mit Schaltfläche

Geeignet für: den Abschluss eines Newsletters mit persönlicher Ansprechperson, Terminbuchung oder Rückruf. Inhalte bearbeiten: Ändere Bild, Titel, Text, E-Mail, Telefon, Adresse, Detailhinweis, Buttontext und Link. Gestaltung: Passe Porträtzuschnitt, Kontaktfarben, Button und Hintergrund an. Mobil und Hinweise: Kontaktwerte bleiben untereinander gut lesbar; verwende echte Kontaktwege, prüfe den Buttonlink und ergänze einen Alternativtext für das Porträt.

<a id="“eligibility-check“"></a>Kurzcheck Eignung

Geeignet für: Voraussetzungen, Zielgruppen oder Prüfkriterien in drei Punkten zu erklären. Inhalte bearbeiten: Bearbeite Titel, Einleitung und die drei Kriterien mit Überschrift und Erklärung. Gestaltung: Hebe Kriterien mit passenden Farben und ausreichend Innenabstand hervor, ohne wichtige Unterschiede nur über Farbe zu kennzeichnen. Mobil und Hinweise: Die Kriterien werden vertikal ausgegeben; formuliere jeden Punkt vollständig, damit die Aussage auch ohne Layoutvergleich klar bleibt.

<a id="“event-date-cta“"></a>Termin mit Schaltfläche

Geeignet für: ein einzelnes Webinar, Event oder eine Frist mit klarer Anmeldung. Inhalte bearbeiten: Monat, Tag, Titel, Beschreibung, Terminmetadaten, Buttontext und -link. Gestaltung: Datumskachel, Kartenfläche und Button können an die Kampagne angepasst werden. Mobil und Hinweise: Das Datum bleibt vor der Beschreibung sichtbar. Gib Uhrzeit, Zeitzone und Ort im Text an und verlinke nur auf eine gültige Anmelde- oder Informationsseite.

<a id="“event-list“"></a>Terminliste

Geeignet für: mehrere Veranstaltungen, Sprechstunden oder Termine in einem kompakten Newsletterabschnitt. Inhalte bearbeiten: Ändere Einleitung, Titel, für jeden der drei Termine Monat, Tag, Bezeichnung und Metadaten sowie den Button. Gestaltung: Halte Datumsfelder und Bezeichnungen einheitlich; passe Kartenabstände und Button an, wenn die Liste als CTA dienen soll. Mobil und Hinweise: Termine erscheinen nacheinander. Bei mehr als drei Terminen verlinke auf eine vollständige Terminseite statt den Baustein zu überladen.

<a id="“image-text-button“"></a>Bild mit einem Text und einer Schaltfläche

Geeignet für: eine aufmerksamkeitsstarke Empfehlung mit Bild oben und eindeutiger Weiterleitung. Inhalte bearbeiten: Bild, Überschrift, Text, Buttontext und Ziel-URL. Gestaltung: Bearbeite Bildausschnitt, Abstand, Hintergrund und Button; das Bild sollte die Aussage unterstützen, nicht doppeln. Mobil und Hinweise: Die vertikale Reihenfolge bleibt erhalten. Prüfe Alternativtext, Kontrast des Buttons und die Verständlichkeit der CTA-Beschriftung.

<a id="“info-box“"></a>Infobox

Geeignet für: einen Hinweis, eine kurze Erklärung oder eine wichtige Ergänzung innerhalb eines längeren Newsletters. Inhalte bearbeiten: Überschrift und Text werden direkt im Baustein geändert; bei Bedarf ergänzt Du einen Textlink. Gestaltung: Hintergrund, Rand, Schrift und Innenabstand bestimmen die Hervorhebung. Mobil und Hinweise: Die Infobox bleibt einspaltig. Sie sollte nur eine Aussage enthalten und nicht für dringende Handlungen ohne klaren Link verwendet werden.

<a id="“kpi-numbers“"></a>Zahlenblock

Geeignet für: drei Kennzahlen, Erfolge oder Fortschrittswerte knapp zu präsentieren. Inhalte bearbeiten: Titel, Einleitung sowie pro Kennzahl Wert, Label und Erklärung. Gestaltung: Zahlengröße, Kontrast, Hintergrund und Spaltenabstände sind besonders wichtig. Mobil und Hinweise: Die Kennzahlen stapeln sich; ergänze immer eine Erklärung, weil ein Wert wie „87 %“ ohne Kontext nicht aussagekräftig ist.

<a id="“onboarding-stepper“"></a>Die ersten drei Schritte

Geeignet für: Onboarding, Anmeldung oder einen einfachen Ablauf in drei aufeinanderfolgenden Schritten. Inhalte bearbeiten: Passe Titel, Einführung und für jeden Schritt Überschrift und Beschreibung an. Gestaltung: Nummerierung, Verbindungslinien, Farben und Abstände sollten die Reihenfolge unterstützen. Mobil und Hinweise: Schritte werden vertikal gelesen; ein Schritt muss ohne Blick auf das vorherige Element verständlich bleiben.

<a id="“proposal-comparison“"></a>Varianten vergleichen

Geeignet für: drei Pakete, Optionen oder Vorgehensweisen mit kurzer Gegenüberstellung. Inhalte bearbeiten: Titel, Einleitung und je Variante Bezeichnung sowie Erklärung. Gestaltung: Verwende Kontrast sparsam und hebe nur die wirklich empfohlene Option hervor. Mobil und Hinweise: Spalten werden nacheinander gezeigt; nenne Kriterien in den Texten, damit der Vergleich auch in Mailclients ohne exakte Spaltenbreite verständlich ist.

<a id="“quote-block“"></a>Zitatblock

Geeignet für: Kundenstimmen, ein Leitmotiv oder eine kurze Expertenaussage. Inhalte bearbeiten: Zitat und Quellenangabe. Gestaltung: Setze Schriftgröße, Zitatzeichen, Hintergrund und Abstände so, dass das Zitat deutlich als eigenständige Stimme erkennbar ist. Mobil und Hinweise: Der Baustein bleibt einspaltig; zitiere nur freigegebene Aussagen und nenne die Quelle nachvollziehbar.

<a id="“resolution-agenda“"></a>Tagesordnung und Beschlüsse

Geeignet für: Meeting-Updates, Beschlüsse oder Maßnahmen mit drei klaren Punkten. Inhalte bearbeiten: Ändere Titel, Einleitung und die drei Punktüberschriften mit ihren Erläuterungen. Gestaltung: Nutze klare Abstände und eine ruhige Tabellen- oder Kartenfläche, damit Informationen nicht wie Fließtext wirken. Mobil und Hinweise: Die Punkte werden nacheinander gezeigt. Verlinke ausführliche Protokolle statt lange Beschlusstexte in den Baustein zu schreiben.

<a id="“resource-index“"></a>Ressourcen im Überblick

Geeignet für: drei Hinweise auf Downloads, Artikel oder Hilfen. Inhalte bearbeiten: Bearbeite Titel, Einleitung und für jede Ressource Überschrift und Kurztext. Soll ein Eintrag direkt weiterführen, markiere den passenden Text und füge mit dem Link-Werkzeug des Editors einen Link hinzu. Gestaltung: Nutze ähnlich lange Überschriften, klare Kontraste und ausreichenden Abstand zwischen den Ressourcen. Mobil und Hinweise: Ressourcen erscheinen untereinander; verwende bei ergänzten Links eindeutige Linktexte statt „hier klicken“.

<a id="“social-media“"></a>Social Media

Geeignet für: Social-Kanäle als eigener Abschnitt zwischen Newsletterinhalten. Inhalte bearbeiten: Überschrift, Einleitung und die Ziel-URLs der Social-Icons; verfügbare Werte können aus einem Brand Profile stammen. Gestaltung: Passe Überschrift, Hintergrund, Iconabstände und Iconstil an. Mobil und Hinweise: Icons bleiben als Reihe gut bedienbar; hinterlege nur aktive Zielseiten und stelle sicher, dass das Ziel durch Alternativtext oder Linkkontext erkennbar ist.

<a id="“social-media-footer“"></a>Social Footer

Geeignet für: eine zurückhaltende Social-Link-Zeile am Ende des Newsletters. Inhalte bearbeiten: Text, Überschrift und Iconlinks; Brand-Profile können passende Kanäle vorbelegen. Gestaltung: Wähle eine dezente Hintergrundfarbe und gleiche Icongrößen, damit der Footer nicht vom Haupt-CTA ablenkt. Mobil und Hinweise: Die Icons bleiben zusammen; teste alle Links und entferne nicht gepflegte Kanäle.

<a id="“styled-table-block“"></a>Tabellenblock

Geeignet für: drei strukturierte Zeilen, zum Beispiel Termine, Leistungen oder Statuswerte. Inhalte bearbeiten: Titel, Einleitung, drei Spaltenüberschriften und alle Zeilenwerte. Gestaltung: Passe Kopfzeile, Zeilentrenner, Schrift, Hintergrund und Zellabstände an. Mobil und Hinweise: Tabellen sind nur für tabellarische Daten gedacht. Halte Spaltenüberschriften kurz und prüfe die mobile Vorschau, bevor Du versendest.

<a id="“text-button-image“"></a>Text mit Button und Bild

Geeignet für: ein Angebot mit ausführlicher Erklärung und direkt anschließender Handlungsaufforderung. Inhalte bearbeiten: Überschrift, Text, Buttontext, Buttonlink, Bild und Alternativtext. Gestaltung: Gib dem Button genügend Kontrast und verwende ein Bildformat, das den Text nicht überlagert. Mobil und Hinweise: Der Baustein ist bereits einspaltig: Text und Button stehen oben, das unterstützende Bild folgt darunter. Prüfe, ob die Handlungsaufforderung nach dem Text gut sichtbar bleibt.

<a id="“text-with-gray-back“"></a>Text mit grauem Hintergrund

Geeignet für: eine ruhige Zusammenfassung, ein Zitat ohne Quellenangabe oder einen erklärenden Zwischenabschnitt. Inhalte bearbeiten: Überschrift und Text; ergänze bei Bedarf normale Textlinks. Gestaltung: Hintergrundton, Textkontrast, Rahmen und Innenabstand steuern die dezente Hervorhebung. Mobil und Hinweise: Der Block bleibt einspaltig; achte auf ausreichenden Kontrast und begrenze ihn auf einen kurzen, gut scannbaren Text.

Nächster Schritt

Für gemeinsame Einstellungen wie Schrift, Abstände, Farben und mobile Abweichungen lies styling newsletters. Eine vollständige Funktionsprüfung machst Du anschließend in der Vorschau und mit einer Testmail.