Stile und Layout

Globaler Stil

Der Tab Eigenschaften im Seitenbereich ist der Ausgangspunkt für jedes Design. Hier können Sie globale Werte festlegen, die sowohl von den Reihen als auch von den Inhaltselementen übernommen werden. Die meisten Einstellungen können für bestimmte Reihen, Spalten oder Inhaltselemente außer Kraft gesetzt werden. In der Regel ist es ratsam, die Standardwerte beizubehalten um ein kohärentes Design zu erhalten.

Zu den wichtigsten Einstellungen gehören:

• Inhaltsbreite: Dies bestimmt die maximale Breite des Inhaltsbereichs, wenn das Design auf großen Bildschirmen angezeigt wird. Auf kleineren Bildschirmen ist diese Einstellung wirkungslos.
• Ausrichtung des Inhalts: Dies legt die Ausrichtung des gesamten Inhaltsbereichs fest. Er kann mittig oder links im Design platziert werden.
• Hintergrundfarbe: Hintergrundfarbe für das gesamte Design.
• Hintergrundfarbe des Inhalts: Hintergrundfarbe für den Inhaltsbereich.
• Standardschrift: Schriftfamilie für alle Inhaltselemente.
• Linkfarbe: Farbe für Links.

Layout mit Reihen und Spalten

Über Reihen und Spalten

Das Layout einer Seite wird durch Reihen definiert, von denen jede mehrere Spalten haben kann. Sie können ein Raster mit Reihen und Spalten definieren, in welchem Sie Ihre Inhaltselemente anordnen können. Legen Sie Stile für einzelne Reihen und Spalten fest, wenn Sie den globalen Stil außer Kraft setzen möchten.

Die Reihen passen sich automatisch an die Bildschirmgröße des Geräts an, auf dem sie angezeigt werden. Es gibt verschiedene Einstellungen für Reihen, die es Ihnen ermöglichen, Einstellungen auf mehrere Inhaltselemente gleichzeitig anzuwenden.

Reiheneigenschaften

Dies sind die wichtigsten Eigenschaften für Reihen:

• Hintergrundfarbe der Reihe: Hintergrundfarbe für die gesamte Reihe.
• Hintergrundfarbe des Inhalts: Hintergrundfarbe des Inhaltsbereichs.
• Rahmen des Inhaltsbereichs: Optionaler Rahmen mit Einstellungen für Farbe, Breite und Stil.

Spalten definieren

Voraussetzungen: Sie haben im Design-Bereich eine Reihe ausgewählt.

1. Finden Sie im Seitenbereich den Abschnitt Spaltenstruktur.
2. Klicken Sie auf + Hinzufügen, um Spalten hinzuzufügen.
3. Falls Sie zu viele Spalten hinzugefügt haben, klicken Sie auf löschen, um die ausgewählte Spalte zu löschen.
4. Um die Breite von Spalten zu ändern, klicken und ziehen Sie (Griff) zwischen zwei Spalten.

Eine Spalte auswählen

Kontext: Spalten können nicht direkt im Design-Bereich ausgewählt werden, Sie müssen zuerst die zugehörige Reihe auswählen.

Voraussetzungen: Sie haben im Design-Bereich eine Reihe ausgewählt.

1. Finden Sie im Seitenbereich den Abschnitt Spaltenstruktur.
2. Wenn es mehrere Spalten gibt, klicken Sie auf eine Spalte. 
   → Die Spalte wird hervorgehoben und ihre Eigenschaften werden im Seitenbereich angezeigt.

Kartenstil verwenden

Kontext: Die Einstellung Kartenstil lässt Spalten innerhalb einer Reihe als separate Bereiche mit gleichmäßigem Abstand und Design erscheinen, ähnlich wie nebeneinander gelegte Spielkarten.

Voraussetzungen: Sie haben eine Zeile mit Spalten im Designbereich ausgewählt. Die Spalten sollten Inhaltselemente enthalten, da Sie sonst die Auswirkungen des Kartenstils nicht deutlich sehen können.

1. Finden Sie im Seitenbereich den Abschnitt Kartenstil.
2. Passen Sie die Einstellungen für Abstände und abgerundete Ecken an, um das gewünschte Aussehen zu erhalten.
   Hinweis: Möglicherweise müssen Sie die Hintergrund- und Rahmenfarben der Zeile und der Spalten anpassen, um die Auswirkungen aller Einstellungen zu sehen.

Verhalten und Einschränkungen von Spalten

Die Breite der Spalten wird als Anzahl der Spalten mit Mindestbreite definiert, nicht als Pixel. Wenn eine neue Spalte hinzugefügt wird, wird die nächstgelegene Spalte auf der linken Seite verkleinert, um Platz zu schaffen. Wenn die Spalte ganz links bereits ihre Mindestbreite erreicht hat, wird die Größe der nächsten verfügbaren Spalte angepasst. Die Breite einer gelöschten Spalte wird auf die nächstgelegenen Spalten verteilt.

Die maximale Spaltenanzahl für einen E-Mail-Nachrichtenentwurf ist 6 und die mindestbreite einer Spalte ist 2. Für eine Landingpage ist die maximale Spaltenanzahl 12 und die minimale Spaltenbreite ist 1.

Spalten können nicht neu sortiert werden. Die Schaltfläche + hinzufügen wird ausgeblendet, wenn die maximale Anzahl von Spalten erreicht ist. Die Schaltfläche löschen ist nicht sichtbar, wenn nur eine Spalte vorhanden ist.

Objektstile

Über Objektstile

Reihen, Spalten und Inhaltselemente erben den globalen Stil oder den Stil ihres übergeordneten Objekts. Dieser geerbte Stil kann durch die Definition eines Objekt-Stils außer Kraft gesetzt werden.

Einen Objektstil bearbeiten

Voraussetzungen: Sie sehen ein Design im Design-Editor.

1. Wählen Sie ein Objekt aus.
   → Die Eigenschaften des Objekts werden im Seitenbereich angezeigt.
2. Passen Sie die Eigenschaften wie gewünscht an.

Innenabstand

Innenabstand ist der Abstand zwischen den Rändern eines Objekts und seinem Inhalt. Er ist wichtig, um die Ästhetik und Lesbarkeit Ihres Designs zu optimieren.

Bei Inhaltselementen wird der Innenabstand im Seitenbereich im Abschnitt Abstandsoptionen definiert. Standardmäßig können Sie den Abstand um ein Element für alle Seiten gleichzeitig festlegen. Wenn Sie den Abstand pro Seite definieren möchten, schalten Sie die Option Erweiterte Einstellungen ein.

Für Reihen gibt es keinen Innenabstand, für Spalten jedoch schon. Wenn eine Reihe nur eine Spalte hat, können Sie den Innenabstand dieser Spalte anpassen, um den Abstand für die gesamte Reihe festzulegen.

Einige Inhaltselemente haben eigene Optionen für Innenabstände:

• Schaltflächen: Hier ist Innenabstand nützlich, um die Schaltflächengröße und die Textposition zu steuern.
• Icons: Abstände für mehrere icons innerhalb eines Icon-Elements können definiert werden. (Icons können mehrere Kombinationen aus Text und Bild in einem einzelnen Element kombinieren.)
• Menüs: Abstände zwischen den Menüeinträgen können definiert werden.

Rahmen

Rahmen bilden sichtbare Grenzen um ein den gesamten Inhaltsbereich einer Reihe oder um einzelne Spalten. Ihre wichtigsten Einstellungen sind Dicke, Farbe und Muster (durchgezogen, gepunktet oder gestrichelt). Sie können einen Rahmenstil auf alle Seiten anwenden oder unterschiedliche Rahmenstile für jede Seite festlegen.

Rahmen festlegen

Kontext: Wenn eine Reihe mehrere Spalten enthält, müssen sie die Rahmen für jede Spalte einzeln festlegen.
Voraussetzungen: Sie haben eine Reihe und gegebenenfalls eine Spalte ausgewählt.

• Legen Sie im Seitenbereich ein Muster, eine Breite und eine Farbe fest.
• Optional: Aktivieren Sie Erweiterte Einstellungen, um Rahmen für jede Seite einzeln zu definieren.

Abgerundete Bildecken verwenden

Kontext: Sie können abgerundete Ecken für ein Bild festlegen. Diese Einstellung ist nicht-destruktiv und kann jederzeit geändert und rückgängig gemacht werden.
Voraussetzungen: Sie haben ein Bildelement ausgewählt.

1. Suchen Sie im Seitenbereich die Einstellung Abgerundete Bildecken.
2. Optional: Um jede Ecke einzeln zu bearbeiten, aktivieren Sie den Schalter mehr.
3. Stellen Sie den gewünschten Eckenradius ein.

Textstil und links

Elementstil und Zeichenstil

Wenn Sie ein Element auswählen, das Text enthalten kann, werden im Seitenbereich Textstil-Optionen angezeigt. Verwenden Sie diese, um einen Textstil für den Text im Inhaltselement festzulegen.

Zusätzlich zu den Optionen im Seitenbereich wird ein Popup-Menü für Textstile angezeigt, wenn ein geeignetes Inhaltselement ausgewählt wird. Verwenden Sie dieses Popup-Menü, um:

• den Stil ausgewählter Textteile anzupassen,
• Sonderzeichen einzufügen,
• Links zu erstellen.

Zeichen- und Absatzabstände

Die Anpassung von Zeichen- und Absatzabständen kann die Lesbarkeit Ihrer Inhalte verbessern. Diese Einstellungen sind in der Seitenleiste für textbasierte Inhaltselemente verfügbar.

Der Zeichenabstand gilt für alle textbasierten Inhaltselemente, einschließlich Absatz, Liste, Button, Titel, Icon und Menü. Der Absatzabstand gilt nur für das Inhaltselement Absatz.

Der Zeichenabstand hat einen Standardwert von 0px. Verwenden Sie die Schaltflächen - und + im Seitenbereich, um ihn anzupassen. Sie können auch manuell einen positiven Wert eingeben. Für negative Werte verwenden Sie die Schaltfläche -. Der Bereich reicht von -99 bis +99 Pixel. Die Darstellung kann bei verschiedenen Geräten und Browsern unterschiedlich sein.

Der Absatzabstand hat einen Standardwert von 16 px, wodurch Absätze mit doppeltem Zeilenabstand dargestellt werden. Verwenden Sie zum Anpassen die Schaltflächen - und + oder geben Sie manuell eine positive Zahl oder Null ein. Der Bereich reicht von 0 bis 99 Pixel, und auch hier kann die Darstellung variieren.

Es wird zwar empfohlen, diese Funktionen sparsam einzusetzen, aber es gibt einige Szenarien, in denen sie nützlich sein können:

• um die Lesbarkeit von Text in Großbuchstaben zu verbessern,
• um den Textstil aus einem Logo oder Bild in ihrem Inhalt nachzuahmen,
• um Text für optimale Darstellung auf verschiedenen Bildschirmgrößen anzupassen.

Interne Links zur Seitennavigation

Für Landinpages können Sie interne Links erstellen, die eine schnelle Navigation zu bestimmten Elementen ermöglichen.

Um interne Links zu verwenden, aktivieren Sie die Option Element-ID unten im Seitenbereich für jedes Inhaltselement, das Sie als Linkziel verwenden möchten. Die Element-ID ist eine Zeichenfolge, die der Editor generiert, wenn Sie die Funktion einschalten. Eine generierte ID kann zum Beispiel so aussehen:

module_626b3859-43d7-4b30-861c-d5f506c92882

Die automatisch generierte ID funktioniert zwar, ist aber nicht leicht zu merken oder zu erkennen. Sie können sie zu einem benutzerdefinierten Wert ändern, was besonders nützlich ist, wenn Sie mit mehreren internen Links arbeiten.

Sobald Sie Ihre Element-IDs eingerichtet haben, können Sie mit der Erstellung interner Links fortfahren. Wenn Sie beim Erstellen eines Links den Typ interner Link wählen, wird das Standard-URL-Feld zu einem Dropdown-Menü. In diesem Menü werden alle aktivierten Element-IDs in Ihrem Design aufgelistet. Wählen Sie den Bezeichner aus, zu dem Sie verlinken möchten.

Textversion für E-Mails

Nutzen der Textversion

Einige Geräte und E-Mail-Anwendungen sind nicht mit HTML-Layouts kompatibel. Für diese wird automatisch eine reine Textversion erstellt. Diese Textversion wird zusammen mit der HTML-Version in einer multipart-E-Mail verschickt. Bei den meisten Empfängern wird die HTML-Version angezeigt. Wenn die E-Mail-Software des Empfängers kein HTML darstellen kann, wird die Textversion angezeigt.

Textversion anzeigen

Voraussetzungen: Sie sehen ein Design im Design-Editor.

1. Klicken Sie über dem Design auf Weitere Optionen > Textversion.
   → Ein pop-up-Fenster zeigt eine Vorschau der Textversion.