Show Menu
THEMEN×

Verwalten von Stilen

Element bearbeiten

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

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:
  1. Wählen Sie eine Strukturkomponente (direkt in der E-Mail oder unter Verwendung des Strukturbaums in der linken Palette ).
  2. Wählen Sie in der dedizierten Symbolleiste die Option Spalte auswählen , um die gewünschte Spalte auszuwählen.
In diesem Abschnitt finden Sie ein Beispiel.

Einstellungen des Stils anpassen

  1. Wählen Sie in Ihrer E-Mail ein Element aus. Weiterführende Informationen dazu finden Sie unter Element auswählen .
  2. 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 .
  3. Speichern Sie Ihren Inhalt.

Über Abstände und Spannen

In der Benutzeroberfläche von Email Designer können Sie rasch Abstände und Spannen 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.
Je nach Ihrer Auswahl (Strukturkomponente, Spalte oder Inhaltskomponente) ist das Ergebnis anders. Adobe empfiehlt die Einrichtung der Parameter Abstand und Rand auf Spaltenebene.
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

  • Textausrichtung : Platzieren Sie den Cursor auf einem Text und richten Sie ihn über die dedizierte 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.

Hintergründe festlegen

Für die Einstellung von Hintergründen mit Email Designer empfiehlt Adobe Folgendes:
  1. Wenden Sie eine Hintergrundfarbe auf den Hauptteil Ihrer E-Mail an, wenn das Design es so verlangt.
  2. Meistens wird die Hintergrundfarbe auf Spaltenebene festgelegt.
  3. 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.
    Manche E-Mail-Programme unterstützen keine Hintergrundbilder. Wählen Sie daher eine passende Fallback-Hintergrundfarbe auf, falls das Bild nicht dargestellt werden kann.
  • Legen Sie auf Spaltenebene eine Hintergrundfarbe fest.
    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

Sie möchten den Abstand und die senkrechte Ausrichtung innerhalb einer Strukturkomponente bestehend aus drei Spalten anpassen. Gehen Sie dazu wie folgt vor:
  1. Wählen Sie eine Strukturkomponente direkt in der E-Mail oder unter Verwendung des Strukturbaums in der linken Palette aus.
  2. Wählen Sie in der dedizierten 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.
  3. Wählen Sie unter Senkrecht ausrichten die Option Nach oben aus.
    Die Inhaltskomponente wird am oberen Rand der Spalte angezeigt.
  4. 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.
  5. Gehen Sie analog mit den anderen Ausrichtungs- und Abstandseinstellungen der Spalten vor.
  6. Speichern Sie Ihre Änderungen.

Inline-Styling-Attribute hinzufügen

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.
  1. Wählen Sie in Ihrem Inhalt ein Element aus.
  2. Suchen Sie im seitlichen Fenster nach den Einstellungen für Inline-Stile .
  3. Ä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.

Zur Mobile-Ansicht wechseln

Sie können das responsive Design einer E-Mail anpassen, indem Sie alle Stiloptionen für die Darstellung auf Mobilgeräten einzeln bearbeiten. So können Sie beispielsweise für die mobile Version Ihrer E-Mail die Spannen und Abstände verändern sowie kleinere oder größere Schriftgrade verwenden, die Schaltflächen ändern oder unterschiedliche Hintergrundfarben auswählen.
Alle Stiloptionen sind in der Mobile-Ansicht verfügbar. Die Stileinstellungen des E-Mail-Designers werden zuvor auf dieser Seite angezeigt.
  1. Erstellen Sie eine E-Mail und bearbeiten Sie den Inhalt. Weiterführende Informationen dazu finden Sie im Abschnitt Neuen E-Mail-Inhalt gestalten .
  2. Öffnen Sie mit der Schaltfläche Zur Mobile-Ansicht wechseln die Mobile-Ansicht.
    Die Mobile-Version der E-Mail wird angezeigt. Sie enthält alle in der Desktop-Ansicht definierten Komponenten und Stile.
  3. Sie können alle Stileinstellungen unabhängig voneinander bearbeiten, z. B. Hintergrundfarbe, Ausrichtung, Abstand, Spanne, Schriftart, Textfarbe usw.
  4. Änderungen von Stileinstellungen in der Mobile-Ansicht werden nur auf die Mobile-Version angewendet.
    Sie können in der Mobile-Ansicht z. B. die Größe eines Bildes verringern, einen grünen Hintergrund hinzufügen und den Abstand verändern.
  5. Sie können Komponenten auf Mobilgeräten ausblenden. Wählen Sie dazu Nur auf Desktops zeigen in den Anzeigeoptionen aus. Sie können eine Komponente auch auf Desktopgeräten ausblenden, sodass sie nur auf Mobilgeräten angezeigt wird. Wählen Sie dazu Nur auf Mobilgeräten zeigen aus. Mit dieser Option haben Sie beispielsweise die Möglichkeit, ein bestimmtes Bild auf Mobilgeräten und ein anderes Bild auf Desktop-Geräten zu zeigen. Sie können diese Option sowohl in der Mobilgeräte- als auch der Desktop-Ansicht auswählen.
  6. Wählen Sie nochmals die Schaltfläche Zur Mobile-Ansicht wechseln aus, um zur Desktop-Ansicht zu wechseln. Die soeben vorgenommenen Stiländerungen sind in dieser Version nicht vorhanden.
    Die einzige Ausnahme sind die Einstellungen für Inline-Stile . Inline-Stil-Einstellungen werden auch von der standardmäßigen Desktop-Ansicht übernommen.
  7. Andere Änderungen an der Struktur oder am Inhalt der E-Mail, wie zum Beispiel Textänderungen, der Upload eines neuen Bildes, das Hinzufügen einer neuen Komponente etc. werden auch in der Standardansicht angezeigt.
    Wechseln Sie wieder in die Mobile-Ansicht und ändern Sie z. B. Text und ersetzen Sie ein Bild.
    Wählen Sie nochmals die Schaltfläche Zur Mobile-Ansicht wechseln aus, um zur Desktop-Ansicht zu wechseln. Die Änderungen wurden übernommen.
  8. Wenn Sie in der Mobile-Version einen Stil entfernen, wird der im Desktop-Modus angewendete Stil übernommen.
    Fügen Sie in der Mobile-Ansicht z. B. für eine Schaltfläche eine grüne Hintergrundfarbe ein.
  9. Wechseln Sie in die Desktop-Ansicht und wählen Sie für dieselbe Schaltfläche einen grauen Hintergrund.
  10. Wechseln Sie nochmals zur Mobile-Ansicht und deaktivieren Sie die Einstellung Hintergrundfarbe .
    Die in der Desktop-Ansicht ausgewählte Hintergrundfarbe wird jetzt angewendet: Die Schaltfläche wird grau (nicht farblos) dargestellt.
    Die einzige Ausnahme ist die Einstellung für die Randfarbe . Wenn diese in der Mobile-Ansicht deaktiviert ist, wird kein Rahmen mehr hinzugefügt, selbst wenn in der Desktop-Ansicht eine Randfarbe definiert wird.
Die Mobile-Ansicht ist nicht in Fragmenten verfügbar.