Die 15 Bausteine unter Layout bilden das Grundgerüst eines Newsletters. Du kannst damit Abschnitte und Spalten anlegen, Texte und Bilder einfügen, Aktionen hervorheben und Informationen gliedern. Jeder Baustein lässt sich nach dem Einfügen weiterbearbeiten; seine konkreten Einstellungen erscheinen erst, wenn Du ihn oder einen enthaltenen Teil auswählst.
Bausteine einfügen und auswählen
Öffne links in der Elementleiste die Gruppe Layout.
Ziehe den gewünschten Baustein auf eine sichtbare Zielposition. Alternativ
öffnest Du sein Einfügemenü und wählst eine angebotene Position.
Klicke den eingefügten Baustein an. Achte auf Auswahlrahmen und
Auswahlhierarchie: Bei einem Bild, einer Tabellenzelle oder einer Spalte ist nicht automatisch der umgebende Abschnitt ausgewählt.
Bearbeite Inhalt direkt auf der Arbeitsfläche und Gestaltung im Style Editor.
Prüfe das Ergebnis anschließend in Desktop- und Mobilansicht.
Die 15 Layout-Bausteine in der echten Elementleiste
Ein leerer Layout Container oder eine leere Spalte zeigt eine Einfügefläche. Fülle sie mit einem Inhaltsbaustein; eine leere technische Fläche ist noch kein fertiger Newsletterabschnitt.
Leerer Layout Container mit sichtbarer Einfügefläche
Welcher Baustein passt?
Ziel
Baustein
mehrere zusammengehörige Elemente gruppieren
Layout Container
zwei Inhalte nebeneinander anordnen
Mehrspaltiges Layout
Themen hierarchisch gliedern
H1 Headline, H2 Headline, H3 Headline
Fließtext, Bild oder Handlung einfügen
Textbox, Bild, Schaltfläche
Abschnitte visuell trennen
Trenner, Bildtrenner, Trennlinie
kurze Vorteile oder Schritte auflisten
Icon-Liste
kontrollierten Freiraum schaffen
Abstand
Daten in Zeilen und Spalten darstellen
Tabelle
ein breites Einstiegsbild einsetzen
Banner
<a id="“layout-banner-dark“"></a>
Banner
Eingefügter Banner mit Bild-Einstellungen
Einsatz und Einfügen: Der Banner ist ein Bild über die volle Inhaltsbreite. Setze ihn am Anfang eines Newsletters oder eines großen Abschnitts ein, wenn ein Kampagnenmotiv sofort sichtbar sein soll. Ziehe ihn an die Zielposition und wähle danach das Bild im Banner aus.
Bearbeiten und Ergebnis: Ersetze die Bilddatei, schneide sie bei Bedarf zu und pflege unter Alt. Text eine sinnvolle Beschreibung. Optional kannst Du das Bild verlinken. Breite, Ausrichtung, Abrundung und Bild-Abstand werden im Style Editor gesteuert. Kombiniere den Banner mit einer echten H1 Headline und einer Textbox, statt wichtige Aussagen nur in die Grafik zu schreiben. Prüfe auf Mobilgeräten, ob Motiv und eingebettete Schrift noch erkennbar sind.
<a id="“layout-container-1col“"></a>
Layout Container
Gefüllter Layout Container mit ausgewähltem Rahmen
Einsatz und Einfügen: Der Layout Container gruppiert mehrere Elemente in einer Spalte. Nutze ihn für einen zusammengehörigen Abschnitt aus Überschrift, Text, Bild und Schaltfläche. Füge zuerst den Container ein und ziehe anschließend die Inhaltsbausteine in seine Einfügefläche.
Bearbeiten und Ergebnis: Wähle den äußeren Container, wenn Du Hintergrund, Rahmen, Abrundung oder gemeinsame Abstände ändern möchtest. Für Text, Bild oder Link wählst Du dagegen das enthaltene Element. Das Ergebnis ist ein Abschnitt, der sich als Einheit bewegen, duplizieren oder speichern lässt. Lässt sich ein neuer Baustein nicht einfügen, kontrolliere in der Auswahlhierarchie, ob wirklich die Spalte und kein gesperrtes Kindelement das Ziel ist.
<a id="“layout-container-2col“"></a>
Mehrspaltiges Layout
Mehrspaltiges Layout mit zwei gefüllten Spalten
Einsatz und Einfügen: Das Mehrspaltige Layout stellt zwei Bereiche nebeneinander, zum Beispiel Bild und Text, zwei Angebote oder zwei gleichwertige Termine. Ziehe den Baustein ein und befülle beide sichtbaren Spalten getrennt.
Bearbeiten und Ergebnis: Wähle eine Spalte für ihre Breite und Abstände oder den äußeren Container für gemeinsamen Hintergrund und Rahmen. Halte parallele Inhalte ähnlich lang. In der Mobilansicht werden Spalten gestapelt; dort kannst Du die Reihenfolge bei Bedarf umkehren oder mobile Abweichungen zurücksetzen. Prüfe deshalb nicht nur das Desktop-Ergebnis.
Mehrspaltiges Layout mit gestapelter mobiler Reihenfolge
<a id="“layout-h1-headline“"></a>
H1 Headline
H1 Headline mit Typografie-Einstellungen
Einsatz und Einfügen:H1 Headline kennzeichnet das Hauptthema oder einen sehr großen Abschnitt. Verwende sie sparsam und füge sie vor den zugehörigen Inhalt ein.
Bearbeiten und Ergebnis: Ändere den Text direkt im Newsletter. Im Style Editor steuerst Du Schrift, Größe, Farbe, Zeilenhöhe, Ausrichtung und Abstände. Eine echte H1 wird vom automatischen Inhaltsverzeichnis erkannt. Kombiniere sie mit einer kurzen Einleitung; lange oder leere Überschriften erschweren Navigation und mobile Lesbarkeit.
<a id="“layout-h2-headline“"></a>
H2 Headline
H2 Headline in einem Inhaltsabschnitt
Einsatz und Einfügen:H2 Headline gliedert einen Hauptabschnitt in Unterthemen. Setze sie direkt vor Text, Bild oder Artikelbaustein, auf den sie sich bezieht.
Bearbeiten und Ergebnis: Text und Typografie werden wie bei H1 bearbeitet. Im Inhaltsverzeichnis kann H2 als zweite Ebene erscheinen. Verwende deshalb eindeutige Formulierungen statt mehrfach derselben Überschrift. Auf kleinen Bildschirmen sollten H2-Zeilen nicht durch unnötig große Schrift oder Abstände dominieren.
<a id="“layout-h3-headline“"></a>
H3 Headline
H3 Headline als kleine Untergliederung
Einsatz und Einfügen:H3 Headline ist die kleinste der drei Grundüberschriften. Nutze sie innerhalb eines H2-Themas für kurze Unterpunkte, nicht als Ersatz für fett formatierten Fließtext an jeder Stelle.
Bearbeiten und Ergebnis: Passe Text, Typografie und Abstände im ausgewählten Element an. Aktiviere H3 im Inhaltsverzeichnis nur, wenn die dritte Ebene wirklich Orientierung schafft. In Kombination mit kurzen Textboxen entsteht eine klare Feingliederung; zu viele H3 machen Newsletter und Inhaltsverzeichnis unruhig.
<a id="“layout-simpletext“"></a>
Textbox
Textbox mit bearbeitetem Fließtext und Textwerkzeugen
Einsatz und Einfügen: Die Textbox ist der Grundbaustein für Absätze, Listen und verlinkten Fließtext. Füge sie direkt in den Newsletter oder in eine Spalte eines Layout Containers ein.
Bearbeiten und Ergebnis: Klicke in den Text und ersetze den Platzhalter. Inline-Werkzeuge formatieren Absätze, Listen und Links; der Style Editor steuert gemeinsame Schrift, Farbe, Zeilenhöhe, Ausrichtung und Innenabstand. Kombiniere lange Texte mit H2 oder H3. Prüfe Personalisierungsfelder auch mit leeren Werten und vermeide lange unstrukturierte Absätze auf Mobilgeräten.
<a id="“layout-image“"></a>
Bild
Bild-Baustein mit Bildauswahl, Alt-Text und Gestaltung
Einsatz und Einfügen:Bild fügt ein eigenständiges Motiv ein. Setze es in einen Layout Container oder eine Spalte, wenn Bild und begleitender Text als Abschnitt zusammengehören.
Bearbeiten und Ergebnis: Ersetze das Beispielbild über Bildauswahl oder Upload, nutze den Bildeditor für Zuschnitt und Drehung und trage unter Alt. Text die inhaltliche Bedeutung ein. Link, Breite, Ausrichtung, Abrundung und Bild-Abstand lassen sich nachträglich ändern. Das Bild skaliert mit dem verfügbaren Bereich; prüfe trotzdem Motiv, Dateigröße und Lesbarkeit in der Mobilansicht. Details stehen unter Bilder, Anhänge und Alternativtexte.
<a id="“layout-xbutton“"></a>
Schaltfläche
Schaltfläche mit Text-, Link- und Stil-Einstellungen
Einsatz und Einfügen: Die Schaltfläche hebt eine konkrete Handlung hervor, etwa „Termin buchen“ oder „Mehr erfahren“. Setze sie nach dem erklärenden Text und verwende pro Abschnitt möglichst eine Hauptaktion.
Bearbeiten und Ergebnis: Ändere den sichtbaren Text und hinterlege ein vollständiges Linkziel. Im Style Editor steuerst Du Schrift, Text- und Hintergrundfarbe, Breite, Ausrichtung, Abrundung, Innenabstand und Button-Abstand. Eine kurze Beschriftung und ausreichender Kontrast ergeben eine gut erkennbare Aktion. Prüfe Link und Touchfläche in Mobilansicht und Testmail.
<a id="“layout-divider“"></a>
Trenner
Trenner mit Stil-, Dicken- und Abstandseinstellungen
Einsatz und Einfügen:Trenner erzeugt eine gestaltbare Linie zwischen zwei Abschnitten. Nutze ihn, wenn Weißraum allein die inhaltliche Trennung nicht deutlich genug macht.
Bearbeiten und Ergebnis: In Trenner wählst Du Durchgezogen, Gestrichelt , or Gepunktet sowie Farbe, Dicke und horizontalen und vertikalen Abstand. Das Ergebnis bleibt eine einfache, E-Mail-taugliche Linie. Kombiniere sie mit moderatem Abstand; zu viele oder zu kräftige Linien wirken wie Tabellenrahmen.
<a id="“layout-divider-image“"></a>
Bildtrenner
Bildtrenner mit ausgewählter Trenngrafik
Einsatz und Einfügen:Bildtrenner verbindet zwei Linien mit einer kleinen Grafik. Er eignet sich für einen betonten Themenwechsel oder einen wiederkehrenden Markenakzent.
Bearbeiten und Ergebnis: Stelle Linie, Farbe, Dicke und Abstand wie beim Trenner ein. Unter Trenngrafik wählst Du ein vorhandenes Motiv oder Eigene Grafik hochladen… und passt Größe or Abstand an. Verwende eine kleine, kontrastreiche Grafik. Ist der Schmuck ohne Informationswert, darf der Alternativtext leer bleiben; eine bedeutungstragende Grafik sollte im begleitenden Text verständlich werden. Auf schmalen Bildschirmen müssen Linien und Motiv zusammen noch ruhig wirken.
<a id="“layout-horizontal-rule“"></a>
Trennlinie
Einfache Trennlinie mit Höhensteuerung
Einsatz und Einfügen:Trennlinie ist die reduzierte HTML-Linie für eine schlichte Abschnittsgrenze. Verwende sie, wenn keine besondere Liniengestaltung benötigt wird.
Bearbeiten und Ergebnis: Im aktuellen Style Editor lässt sich für diesen Baustein die Höhe und damit sein vertikaler Platz steuern. Für Farbe, Stil, Dicke und getrennte Abstände verwendest Du stattdessen Trenner. Kombiniere die Trennlinie mit kurzen Abschnitten und kontrolliere, dass sie weder im Desktop- noch im Mobilbild wie ein unbeabsichtigter Rahmen erscheint.
<a id="“layout-iconlist“"></a>
Icon-Liste
Icon-Liste mit ausgewähltem Eintrag und Icon-Steuerung
Einsatz und Einfügen: Die Icon-Liste zeigt mehrere kurze Vorteile, Merkmale oder Schritte mit einem gemeinsamen Symbol. Setze sie nach einer einleitenden Überschrift oder Textbox ein.
Bearbeiten und Ergebnis: Wähle einen Eintrag, um seinen Text zu ändern. Die Icon-Auswahl und Icon-Größe können für die Liste beziehungsweise den gewählten Eintrag gesteuert werden; Schrift, Farbe und Abstände folgen der aktuellen Auswahl. Halte alle Punkte ähnlich kurz und formuliere sie so, dass sie auch ohne Symbol verständlich sind. Lange Zeilen und große Icons brauchen eine zusätzliche Mobilkontrolle.
<a id="“layout-spacer“"></a>
Abstand
Abstand-Baustein mit eingestellter Höhe
Einsatz und Einfügen:Abstand schafft kontrollierten vertikalen Freiraum zwischen zwei Elementen. Nutze ihn für einen bewusst größeren Zwischenraum, nicht als Ersatz für die Innen- und Außenabstände jedes einzelnen Bausteins.
Bearbeiten und Ergebnis: Wähle den unsichtbaren Abstand auf der Arbeitsfläche über seinen Auswahlrahmen und ändere Höhe im Style Editor. In der mobilen Ansicht kannst Du eine passende Abweichung setzen oder den Desktopwert zurücksetzen. Ein zu hoher Abstand erzeugt scheinbar leere oder abgebrochene Bereiche; kombiniere ihn daher sparsam mit Überschrift und folgendem Abschnitt.
<a id="“layout-styled-table“"></a>
Tabelle
Tabelle mit aktiver Zelle und Tabellenaktionen
Einsatz und Einfügen:Tabelle stellt echte Zeilen- und Spaltendaten dar, zum Beispiel Termine, Leistungsmerkmale oder Vergleiche. Verwende sie nicht, um das allgemeine Newsletterlayout nachzubauen.
Bearbeiten und Ergebnis: Klicke in eine Zelle und ersetze den Inhalt. Mit der Tabulatortaste wechselst Du weiter; nach der letzten Zelle entsteht eine neue Zeile. Über das Kontextmenü kannst Du Zeilen und Spalten einfügen, duplizieren, bewegen, auswählen oder löschen. Der Style Editor bearbeitet die aktive oder markierte Zellenauswahl. Kurze Überschriften und wenige Spalten ergeben eine lesbare Datentabelle. Entferne leere Zeilen und prüfe breite Tabellen besonders in der Mobilansicht.
Breite Tabelle in der mobilen Newsletteransicht
Nachbearbeiten und kombinieren
Wähle immer zuerst die richtige Ebene aus: Kindelement für Inhalt, Spalte für Spaltenbreite und -abstand, Container für den gesamten Abschnitt. Über das Elementmenü kannst Du einen Baustein duplizieren, bewegen, sperren, als eigenes Element speichern oder löschen. Undo hilft bei einer versehentlichen Änderung; ein gespeicherter Entwurf bleibt trotzdem die verlässlichere Zwischenstufe.
The 15 blocks under Layout form the basic structure of a newsletter. Use them to create sections and columns, insert text and images, highlight actions, and organize information. Every block remains editable after insertion; its specific settings appear only when you select the block or one of its parts.
Insert and select blocks
Open Layout in the block panel on the left.
Drag the required block to a visible target position. Alternatively, open
its insertion menu and choose one of the available positions.
Select the inserted block. Check the selection frame and hierarchy: selecting
an image, table cell, or column does not automatically select its surrounding section.
Edit content on the canvas and appearance in the Style Editor. Then check the
result in desktop and mobile view.
The 15 Layout blocks in the live block panel
An empty Layout Container or column displays an insertion area. Fill it with a content block; an empty technical area is not a finished newsletter section.
Empty Layout Container with a visible insertion area
Choose the right block
Goal
Block
group several related elements
Layout Container
arrange two items side by side
Multi-Column Layout
structure topics hierarchically
H1 Headline, H2 Headline, H3 Headline
add body copy, an image, or an action
Textbox, Image, Button
separate sections visually
Divider, Image divider, Horizontal Rule
list short benefits or steps
Icon List
create controlled whitespace
Space
display data in rows and columns
Table
use a wide opening visual
Banner
<a id="“layout-banner-dark“"></a>
Banner
Inserted Banner with image settings
Use and insertion:Banner is a full-width image. Place it at the start of a newsletter or major section when a campaign visual should be immediately visible. Drag it to the target position, then select the image inside the Banner.
Editing and result: Replace the image file, crop it when needed, and add a meaningful description under Alt. Text. You can also link the image. Width, alignment, Border Radius, and Image spacing are controlled in the Style Editor. Combine the Banner with a real H1 Headline and a Textbox instead of putting essential wording only in the graphic. On mobile, check that the subject and any embedded text remain recognizable.
<a id="“layout-container-1col“"></a>
Layout Container
Filled Layout Container with its outer frame selected
Use and insertion:Layout Container groups several elements in one column. Use it for a related section containing a heading, copy, image, and button. Insert the container first, then drag content blocks into its insertion area.
Editing and result: Select the outer container to change its background, Border, Border Radius, or shared spacing. Select the nested element instead when you need to edit text, image, or link. The resulting section can be moved, duplicated, or saved as one unit. If a new block cannot be inserted, use the selection hierarchy to check that the column—not a locked child—is the target.
<a id="“layout-container-2col“"></a>
Multi-Column Layout
Multi-Column Layout with both columns filled
Use and insertion:Multi-Column Layout places two areas side by side, such as image and copy, two offers, or two equivalent events. Insert the block and fill each visible column separately.
Editing and result: Select a column for its width and spacing or the outer container for a shared background and border. Keep parallel content reasonably similar in length. Columns stack in mobile view; there you can reverse their order when needed or reset mobile overrides. Do not approve the section from its desktop result alone.
Multi-Column Layout with its stacked mobile order
<a id="“layout-h1-headline“"></a>
H1 Headline
H1 Headline with typography settings
Use and insertion:H1 Headline identifies the main topic or a very large section. Use it sparingly and insert it before its related content.
Editing and result: Change the wording directly in the newsletter. The Style Editor controls font, size, color, line height, alignment, and spacing. A real H1 can be included by an automatic table of contents. Combine it with a concise introduction; long or empty headings make navigation and mobile reading harder.
<a id="“layout-h2-headline“"></a>
H2 Headline
H2 Headline inside a content section
Use and insertion:H2 Headline divides a main section into subtopics. Place it immediately before the Textbox, Image, or article block it describes.
Editing and result: Edit wording and typography in the same way as H1. A table of contents can show H2 as its second level. Use distinct wording instead of repeating the same heading. On small screens, avoid a font size or spacing that lets H2 lines overwhelm their content.
<a id="“layout-h3-headline“"></a>
H3 Headline
H3 Headline as a small subsection
Use and insertion:H3 Headline is the smallest of the three basic heading blocks. Use it within an H2 topic for short subsections, not as a replacement for bold body copy everywhere.
Editing and result: Adjust wording, typography, and spacing on the selected element. Include H3 in a table of contents only when the third level genuinely improves orientation. Combined with short Textboxes it creates clear detail; too many H3 blocks make both newsletter and navigation noisy.
<a id="“layout-simpletext“"></a>
Textbox
Textbox with edited body copy and text tools
Use and insertion:Textbox is the basic block for paragraphs, lists, and linked body copy. Insert it directly into the newsletter or into a Layout Container column.
Editing and result: Select the text and replace its placeholder. Inline tools format paragraphs, lists, and links; the Style Editor controls shared font, color, line height, alignment, and padding. Combine longer copy with H2 or H3. Check personalization fields with empty values, and avoid long unstructured paragraphs on mobile.
<a id="“layout-image“"></a>
Image
Image block with image selection, alt text, and styling
Use and insertion:Image adds a standalone visual. Place it in a Layout Container or column when the image and supporting copy belong to one section.
Editing and result: Replace the sample through image selection or upload, use the image editor for cropping and rotation, and describe its meaning under Alt. Text. Link, width, alignment, Border Radius, and Image spacing remain editable. The image scales with its available area; still check subject, file size, and mobile readability. See images, attachments, and alt text for details.
<a id="“layout-xbutton“"></a>
Button
Button with text, link, and style settings
Use and insertion:Button highlights one action, such as “Book a meeting” or “Learn more”. Place it after its explanatory copy and use one primary action per section when possible.
Editing and result: Change the visible text and add a complete link target. The Style Editor controls font, text and background color, width, alignment, Border Radius, padding, and Button spacing. A concise label and sufficient contrast create a recognizable action. Check link and touch target in mobile view and a test message.
<a id="“layout-divider“"></a>
Divider
Divider with style, thickness, and spacing settings
Use and insertion:Divider creates a configurable line between two sections. Use it when whitespace alone does not make the content boundary clear.
Editing and result: Under Divider, choose Solid, Dashed, or Dotted, then set color, Thickness, and horizontal and vertical spacing. The result remains a simple email-safe line. Combine it with moderate whitespace; too many heavy dividers resemble table borders.
<a id="“layout-divider-image“"></a>
Image divider
Image divider with its selected divider graphic
Use and insertion:Image divider joins two lines with a small graphic. Use it for an emphasized topic change or recurring brand accent.
Editing and result: Set line, color, Thickness, and spacing as for Divider. Under Divider graphic, choose a supplied motif or Upload custom graphic… and adjust Size and Spacing. Use a small, high-contrast graphic. A purely decorative motif can have empty alt text; if it carries meaning, explain that meaning in the surrounding copy. On narrow screens, the lines and motif should still feel balanced.
<a id="“layout-horizontal-rule“"></a>
Horizontal Rule
Simple Horizontal Rule with height control
Use and insertion:Horizontal Rule is the reduced HTML line for a plain section boundary. Use it when you do not need decorative line controls.
Editing and result: In the current Style Editor, this block exposes Height, which controls its vertical space. Use Divider instead when you need color, style, Thickness, and separate spacing controls. Combine Horizontal Rule with short sections and check that it does not look like an accidental border in desktop or mobile view.
<a id="“layout-iconlist“"></a>
Icon List
Icon List with one item and its icon control selected
Use and insertion:Icon List presents several short benefits, features, or steps with a shared symbol. Insert it after an introductory headline or Textbox.
Editing and result: Select an item to edit its text. Icon choice and Icon size can be controlled for the list or selected item; font, color, and spacing follow the current selection. Keep entries similarly concise and understandable without the symbol. Long lines and large icons need an extra mobile check.
<a id="“layout-spacer“"></a>
Space
Space block with a configured height
Use and insertion:Space creates controlled vertical whitespace between two elements. Use it for a deliberately larger gap, not as a replacement for each block’s padding and margin.
Editing and result: Select the invisible gap through its frame on the canvas and change Height in the Style Editor. In mobile view, set an appropriate override or reset it to the desktop value. Excessive height creates apparently empty or broken sections, so combine Space sparingly with a heading and its following section.
<a id="“layout-styled-table“"></a>
Table
Table with an active cell and table actions
Use and insertion:Table represents real row-and-column data, such as dates, service features, or comparisons. Do not use it to reproduce the overall newsletter layout.
Editing and result: Select a cell and replace its content. Tab moves to the next cell and creates a row after the final cell. The context menu can insert, duplicate, move, select, or delete rows and columns. The Style Editor affects the active or selected cell range. Short headings and few columns create a readable data table. Remove empty rows and inspect wide tables especially in mobile view.
Wide Table in mobile newsletter view
Refine and combine blocks
Select the correct level first: child for content, column for column width and spacing, container for the complete section. The element menu lets you duplicate, move, lock, save as a custom element, or delete a block. Undo helps after an accidental edit, but a saved draft remains the more dependable checkpoint.
Deutsch 
English