E-Mail-Stile verwalten managing-styles
In Email Designer werden bei der Auswahl eines Elements mehrere für den Inhaltstyp spezifische Optionen im Bereich Einstellungen angezeigt. Mit diesen Optionen können Sie den Stil Ihrer E-Mail ändern.
Element auswählen selecting-an-element
Um ein Element in der Benutzeroberfläche von Email Designer auszuwählen, können Sie entweder:
- direkt in die die E-Mail klicken
- oder in der Palette auf der linken Seite in den Optionen den Strukturbaum durchsuchen.
Im Strukturbaum können Sie eine präziseren Auswahl vornehmen. Sie können die folgende Auswahl treffen:
- die gesamte Strukturkomponente,
- eine der Spalten in der Strukturkomponente
- oder eine Komponente innerhalb einer Spalte.
Um eine Spalte auszuwählen, können Sie auch folgendermaßen vorgehen:
- Wählen Sie eine Strukturkomponente (direkt in der E-Mail oder unter Verwendung des Strukturbaums in der linken Palette).
- Wählen Sie in der kontextuellen Symbolleiste die Option Spalte auswählen, um die gewünschte Spalte auszuwählen.
In diesem Abschnitt finden Sie ein Beispiel.
Einstellungen des Stils anpassen adjusting-style-settings
-
Wählen Sie in Ihrer E-Mail ein Element aus. Weiterführende Informationen dazu finden Sie unter Element auswählen.
-
Passen Sie die Einstellungen nach Bedarf an. Für jedes ausgewählte Element sind unterschiedliche Einstellungen verfügbar.
Sie können beispielsweise Hintergründe einfügen, Größen ändern, die horizontale oder senkrechte Ausrichtung ändern, Farben verwalten sowie Abstände und Spannen hinzufügen.
Verwenden Sie dazu die im Bereich Einstellungen angezeigten Optionen oder fügen Sie Inline-Styling-Attribute hinzu.
-
Speichern Sie Ihren Inhalt.
Abstände und Ränder anpassen about-padding-and-margin
In der Benutzeroberfläche von Email Designer können Sie rasch Abstände und Ränder anpassen.
Abstand: Mit dieser Einstellung ändern Sie den Raum innerhalb des Rahmens eines Elements.
Beispiel:
- Verwenden Sie Abstände, um Ränder links und recshts von einem Bild einzurichten.
- Verwenden Sie Abstände oben und unten, um einen Abstand zu einem Text oder einen Divider zu einer Komponente hinzuzufügen.
- Um in einem Strukturelement Rahmen zwischen Spalten einzurichten, definieren Sie für jede Spalte einen Abstand.
Spanne: Mit dieser Einstellung verwalten Sie den Raum zwischen dem Rahmen eines Elements und dem nächsten Element.
Wählen Sie für sowohl Abstand als auch Spanne das Schlosssymbol aus, um die Synchronisation zwischen den Parametern oben und unten bzw. rechts und links aufzuheben. Dadurch können Sie jeden Parameter einzeln anpassen.
Formatierungsausrichtung about-alignment
-
Textausrichtung: Platzieren Sie den Cursor auf einem Text und richten Sie ihn über die kontextuelle Symbolleiste aus.
-
Horizontale Ausrichtung kann auf Text, Bilder und Schaltflächen angewendet werden, aktuell aber nicht auf die Komponenten Divider und Sozial.
-
Um die senkrechte Ausrichtung festzulegen, wählen Sie eine Spalte innerhalb einer Strukturkomponente aus und danach eine Option im Einstellungsfenster.
Festlegen von Hintergründen about-backgrounds
Für die Einstellung von Hintergründen mit E-Mail-Designer empfiehlt Adobe Folgendes:
- Wenden Sie eine Hintergrundfarbe auf den Hauptteil Ihrer E-Mail an, wenn das Design es so verlangt.
- Meistens wird die Hintergrundfarbe auf Spaltenebene festgelegt.
- Versuchen Sie nicht, Hintergrundfarben für Bilder oder Textkomponenten zu verwenden, da sie schwierig zu handhaben sind.
Unten finden Sie die verfügbaren Einstellungen für den Hintergrund.
-
Legen Sie eine Hintergrundfarbe für die gesamte E-Mail fest. Wählen Sie die Einstellungen für den Hauptteil im Navigationsbaum aus, auf den Sie über die linke Palette zugreifen können.
-
Legen Sie dieselbe Hintergrundfarbe für alle Strukturkomponenten fest, indem Sie Viewport-Hintergrundfarbe auswählen. Mit dieser Option können Sie eine andere Einstellung als die Hintergrundfarbe auswählen.
-
Legen Sie für jede Strukturkomponente eine andere Hintergrundfarbe fest. Wählen Sie in der linken Palette eine Struktur im Navigationsbaum aus, um eine bestimmte Hintergrundfarbe nur dieser Struktur zuzuweisen.
Wählen Sie aber keine Viewport-Hintergrundfarbe aus, da diese die Struktur-Hintergrundfarben verdecken könnte.
-
Legen Sie für den Inhalt einer Strukturkomponente ein Hintergrundbild fest.
note note NOTE Manche E-Mail-Programme unterstützen keine Hintergrundbilder. Wenn diese nicht unterstützt werden, wird stattdessen die Zeilenhintergrundfarbe verwendet. Wählen Sie daher eine passende Fallback-Hintergrundfarbe auf, falls das Bild nicht dargestellt werden kann. -
Legen Sie auf Spaltenebene eine Hintergrundfarbe fest.
note note NOTE Dies ist der häufigste Anwendungsfall. Adobe empfiehlt, Hintergrundfarben auf Spaltenebene festzulegen, da dies mehr Flexibilität bietet, wenn der gesamte E-Mail-Inhalt bearbeitet wird. Sie können auch ein Hintergrundbild auf Spaltenebene einrichten, was aber nur selten verwendet wird.
Beispiel: Anpassung der senkrechten Ausrichtung und des Abstands example--adjusting-vertical-alignment-and-padding
Sie möchten den Abstand und die senkrechte Ausrichtung innerhalb einer Strukturkomponente bestehend aus drei Spalten anpassen. Gehen Sie dazu wie folgt vor:
-
Wählen Sie eine Strukturkomponente direkt in der E-Mail oder unter Verwendung des Strukturbaums in der linken Palette aus.
-
Wählen Sie in der kontextuellen Symbolleiste mit der Option Spalte auswählen die gewünschte Spalte aus. Sie können sie auch im Strukturbaum auswählen.
Die bearbeitbaren Parameter für diese Spalte werden im Bereich Einstellungen auf der rechten Seite angezeigt.
-
Wählen Sie unter Senkrecht ausrichten die Option Nach oben aus.
Die Inhaltskomponente wird am oberen Rand der Spalte angezeigt.
-
Definieren Sie unter Abstand den Abstand der Spalte vom oberen Rand. Wählen Sie das Schlosssymbol aus, um die Synchronisation mit dem Abstand vom unteren Rand aufzuheben.
Definieren Sie den linken und rechten Abstand für diese Spalte.
-
Gehen Sie analog mit den anderen Ausrichtungs- und Abstandseinstellungen der Spalten vor.
-
Speichern Sie Ihre Änderungen.
Formatieren von Links about-styling-links
Sie können einen Link unterstreichen und in Email Designer dessen Farbe und Ziel auswählen.
-
Wählen Sie in einer Komponente, die einen Link enthält, den Titeltext des Links aus.
-
Aktivieren Sie in den Komponenteneinstellungen die Option Unterstrichener Link, um den Titeltext Ihres Links zu unterstreichen.
-
Wählen Sie ein Zielattribut aus, um festzulegen, in welchem Browserkontext Ihr Link geöffnet wird.
-
Wenn Sie die Farbe Ihres Links ändern möchten, klicken Sie auf Linkfarbe.
-
Wählen Sie die gewünschte Farbe aus.
-
Speichern Sie Ihre Änderungen.
Inline-Styling-Attribute hinzufügen adding-inline-styling-attributes
Wenn Sie in der Benutzeroberfläche von Email Designer ein Element auswählen und im seitlichen Fenster seine Einstellungen anzeigen, können Sie seine Inline-Attribute und deren Werte ändern.
-
Wählen Sie in Ihrem Inhalt ein Element aus.
-
Suchen Sie im seitlichen Fenster nach den Einstellungen für Inline-Stile.
-
Ändern Sie die Werte der vorhandenen Attribute oder fügen Sie mit den Schaltflächen + neue hinzu. Sie können alle Attribute und Werte hinzufügen, die CSS-kompatibel sind.
Der Stil wird auf das ausgewählte Element angewendet. Wenn für die untergeordneten Elemente keine speziellen Stilattribute definiert sind, wird der Stil des übergeordneten Elements verwendet.