[Beta]{class="badge informative"}
Verwenden von Marken-Designs für E-Mail-Inhalte email-brand-themes
Mit Designs können nicht-technische Designer wiederverwendbare Richtlinien für das Design von E-Mail-Inhalten erstellen, die an eine bestimmte Marke und ein bestimmtes Styling angepasst sind. Designs ermöglichen es Marketing-Experten, visuell ansprechende, markenkonsistente E-Mails schneller und mit weniger Aufwand zu nutzen und erweiterte Anpassungsoptionen für individuelle Design-Anforderungen bereitzustellen.
Richtlinien und Einschränkungen für Designs themes-guidelines
Beachten Sie bei der Arbeit mit Designs die folgenden Richtlinien und Einschränkungen:
-
Wenn Sie eine E-Mail- oder E-Mail-Vorlage auf einer leeren Arbeitsfläche erstellen (Design von Grund auf), können Sie Design-Modus auswählen, um Ihren Inhalt mithilfe eines Designs zu erstellen und einen bestimmten Stil anzuwenden, der zu Ihrer Marke und Ihrem Design passt. Wenn Sie Manueller Modus auswählen, können Sie ein Design nur anwenden, wenn Sie das Design für die E-Mail- oder E-Mail-Vorlage zurücksetzen.
-
Fragmente sind nicht kreuzkompatibel zwischen dem Design-Modus und dem Manueller Modus im E-Mail-Inhalt. Um ein Fragment in E-Mail-Inhalten zu verwenden, auf die ein Design angewendet wird, muss das Fragment auch im Design-Modus erstellt werden.
-
Änderungen an einem benutzerdefinierten Design werden nicht automatisch an alle E-Mails oder E-Mail-Vorlagen weitergegeben, die es bereits verwenden. Bearbeiten Sie den Inhalt für jede Komponente, um das Design zu aktualisieren.
-
Wenn Sie ein Design löschen, wirkt sich dies nicht auf E-Mail- oder E-Mail-Vorlagen aus, auf die es bereits angewendet wurde.
Erstellen eines Markendesigns create-theme
Definieren Sie Ihr eigenes Markendesign, das Sie auf den Inhalt Ihrer E-Mail und E-Mail-Vorlage in Ihrem zukünftigen E-Mail-Inhalt anwenden können.
-
Greifen Sie mit einer der folgenden Methoden auf die Design-Tools zu:
-
Erstellen Sie eine neue EMail-Vorlage und klicken Sie auf E-Mail-Vorlage bearbeiten, um die Seite Vorlage entwerfen zu starten.
-
Klicken Sie auf … Mehr oben rechts im Design-Bereich für E-Mail-Inhalte und wählen Sie Design ändern.
Klicken Sie im Bestätigungsdialog auf Vorlage ändern, um die Design-Seite zu öffnen.
-
-
Wählen Sie auf der Design-Seite Erstellen oder Bearbeiten von Designs aus.
-
Wählen Sie das Standarddesign aus oder verwenden Sie eines der Adobe-Designs, die als Ausgangspunkt verwendet werden sollen.
note note NOTE Wenn Sie eines Ihrer benutzerdefinierten Designs (Meine Designs) als Ausgangspunkt verwenden möchten, können Sie es duplizieren und den Designnamen ändern, wenn Sie Design bearbeiten. -
Klicken Sie auf Erstellen.
Die Design erstellen bietet eine Arbeitsfläche mit den vorhandenen Elementen aller Arten von Text, Schaltflächen und Containern aus dem Startdesign.
-
Verwenden Sie die rechte Navigation, um auf die verschiedenen Registerkarten des Design-Stils zuzugreifen und die Design-Einstellungen zu ändern:
Die visuellen Elemente ändern sich auf der Arbeitsfläche, wenn Sie die neuen Design-Einstellungen definieren. Wenn das Ergebnis nicht das gewünschte Ergebnis ist, können Sie auf das Symbol Rückgängig (
-
Wenn Ihre Designdefinition abgeschlossen ist, klicken Sie auf Speichern.
-
Klicken Sie auf Schließen, um zur Seite Design erstellen zurückzukehren, und dann auf Abbrechen, um zur Seite Design zurückzukehren.
Sie können dann Von Grund auf gestalten wählen, um den visuellen Design-Bereich zu öffnen und Design zu verwenden für die E-Mail oder Vorlage.
Allgemeine Einstellungen
Definieren Sie auf Registerkarte die grundlegenden Parameter für Ihr Design:
-
Geben Sie einen eindeutigen Designnamen ein.
-
Passen Sie die Viewport-Breite für den E-Mail-Inhalt (Textkörper) an. Verwenden Sie die Pfeile nach oben und unten, um die Breite zu erhöhen oder zu verringern, oder geben Sie den Wert (in Pixel) ein.
Farben
Wählen Sie die Registerkarte Farben und verwenden Sie die Einstellungen, um die Design-Farbpalette zu definieren.
-
Klicken Sie Bearbeiten, um die Farbpalette anzuzeigen, die die Farben für Ihr Design enthält.
Wählen Sie Vorgabe, um ein Farbschema für das Design zu verwenden, oder passen Sie jede Farbe im Set an. Sie können auch eine Kombination aus beidem verwenden.
Für das ausgewählte Farbfeld oben können Sie die Farbe festlegen, indem Sie einen bekannten RGB-, HSL-, HSB- oder Hexadezimalwert eingeben. Sie können auch den Farbregler und das Farbfeld verwenden, um die Farbe auszuwählen.
Klicken Sie auf den Zurück-Pfeil, um die Farbpalettenwerkzeuge zu schließen.
-
Klicken Sie auf Variante hinzufügen, um mehrere Farbvarianten zu erstellen, z. B. einen Hell- und Dunkel-Modus, in dem jede Variante über eine eigene Farbpalette und Nuance-Steuerelemente verfügt. Sie können bis zu sechs Varianten haben.
Klicken Sie für jede Variante auf das Symbol Bearbeiten (
Verschieben Sie für jede Farbe, die Sie für die Variante ändern möchten, den Umschalter nach links oder rechts, um sie zu deaktivieren oder zu aktivieren. Für eine aktivierte Farbeinstellung klicken Sie auf das Farbfeld, um die Farbe auszuwählen.
accordion Variantenfarbeinstellungen Die Einstellungen sind nach Typ gruppiert:
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 Typ Einstellungen Beschreibung Allgemein 
Mit diesen Einstellungen werden die Farben für Text, Strukturen, Container, Hintergründe, Links, Raster und Rahmen festgelegt. Überschriften 
Diese Einstellungen gelten für HeadingElemente, bei denen Sie Text- und Rahmenfarben für jede der sechs Überschriftenebenen festlegen können. Erweitern Sie jede Überschriftenebene, für die Sie die Farbe für die Variante festlegen möchten.Absätze 
Diese Einstellungen gelten für Paragraph, bei denen Sie Text- und Rahmenfarben für jeden der drei Absatztypen festlegen können. Erweitern Sie jeden Absatztyp, für den Sie die Farbe für die Variante festlegen möchten.Schaltflächen 
Die Einstellungen gelten für Schaltflächenelemente, in denen Sie die Füllfarbe, Rahmenfarbe und Textfarbe für jede der drei Schaltflächenvorgaben festlegen können: Primär, Sekundär und Tertiär.
Texteinstellungen
Auf der Registerkarte Texteinstellungen können Sie die globalen Schriftarten, -stile und -größen festlegen, die Sie für Ihr Design verwenden möchten. Für eine detailliertere Steuerung können Sie diese Parameter auch für Überschriften- und Absatztypen bearbeiten.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Typ | Einstellungen | Beschreibung |
| Global |
|
Legen Sie die Schriftbibliothek auf Standard oder Google Fonts fest. Wählen Sie dann die Schriftfamilie aus, die Sie verwenden möchten. Diese globalen Texteinstellungen werden überall angewendet, es sei denn, Sie legen unterschiedliche Textstile für die Überschriftenebenen und Absatztypen fest. |
| Überschriften |
|
Wählen Sie für die einzustellende Überschriftenebene H1, H2 usw. Legen Sie die Schriftbibliothek auf Standard oder Google Fonts fest. Wählen Sie dann Schriftfamilie, Größe und Stil aus. Wählen Sie Textausrichtung aus: Links, Zentriert, Rechts oder Blocksatz. |
| Absätze |
|
Wählen Sie für die einzustellende Überschriftenebene P1, HP usw. Legen Sie die Schriftbibliothek auf Standard oder Google Fonts fest. Wählen Sie dann Schriftfamilie, Größe und Stil aus. Passen Sie die Zeilenhöhe nach Bedarf an. Wählen Sie Textausrichtung aus: Links, Zentriert, Rechts oder Blocksatz. |
Abstand und Rahmen
Auf der Registerkarte Abstand können Sie den Abstand und den Rand für die verschiedenen Elementtypen festlegen. Wählen unter "" den Inhaltstyp aus. Legen Sie dann den Abstand, die Ränder, die Ecken und die Rahmen fest, die für diesen Elementtyp gelten.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Typ | Einstellungen | Beschreibung |
| Ränder |
|
Wählen Sie das Symbol Rand, um Einstellungen anzuzeigen, die den CSS-margin replizieren. Dieser steuert den Raum außerhalb eines Komponentenrahmens und trennt ihn von anderen Komponenten/Elementen. Dadurch wird eine Lücke um die Komponente geschaffen, um ihre Positionierung und das Layout des umgebenden Inhalts zu beeinflussen. Legen Sie die Randwerte in Pixeln entsprechend Ihren Design-Anforderungen fest. Sie können den Rand für alle Seiten, die obere Schaltfläche, die linke oder die rechte Seite der Komponente unabhängig voneinander festlegen. Klicken Sie auf Sperren und Entsperren, um die Randwerte am oberen unteren und linken rechten Rand zu synchronisieren oder zu deaktivieren. |
| Auffüllung |
|
Wählen Sie das Symbol Abstand aus, um Einstellungen anzuzeigen, die den CSS-padding replizieren. Dies ist der Abstand zwischen dem Inhalt einer Komponente/eines Elements und seinem Rahmen. Der Abstand sorgt für einen internen Abstand, mit dem Sie den Abstand zwischen Inhalt und Rahmen der Komponente steuern können. Legen Sie die Abstandswerte entsprechend Ihren Design-Anforderungen in Pixel fest. Sie können den Abstand für alle Seiten, die obere Schaltfläche, die linke rechte Seite oder jede Seite der Komponente unabhängig festlegen. Klicken Sie auf Sperren und Entsperren, um die Abstandswerte oben unten und links/rechts zu synchronisieren oder zu deaktivieren. |
| Ecken |
|
Wählen Sie das Ecken, um Einstellungen anzuzeigen, die den CSS-border-radius replizieren, der den Radius der Komponenten-/Elementecken definiert. Legen Sie den numerischen Wert entsprechend der Kurve für die Ecken fest. Ein Wert von 0 (Standard) ergibt eine quadratische Ecke. |
Schieben Sie den Rahmen nach rechts, um die Anzeigeoptionen für den Rahmen zu aktivieren und sie entsprechend Ihren Designkriterien festzulegen:
-
Zum Festlegen der Rahmengröße (Linienbreite) klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
-
Um den Rahmenstil festzulegen, wählen Sie einen Wert aus der Liste der standardmäßigen CSS-
border-styleaus, z B. Durchgehend, Punkte und Gestrichelt. -
Um zu bestimmen, wo der Rahmen angezeigt wird, aktivieren Sie jedes Kontrollkästchen Rahmenposition.
Schaltflächen
Auf der Registerkarte Schaltflächen können Sie verschiedene Attribute (außer Farbe) für Schaltflächenelemente festlegen, z. B. Rahmenradius (Form), Text und Größe. Sie können die Einstellungen für jede der drei Schaltflächenvorgaben ändern: Primär, Sekundär und Tertiär.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Typ | Einstellungen | Beschreibung |
| Text |
|
Legen Sie die Schriftbibliothek auf Standard oder Google Fonts fest. Wählen Sie dann Schriftfamilie, Größe und Stil aus. Wählen Sie Textausrichtung aus: Links, Zentriert, Rechts oder Blocksatz. |
| Rahmen |
|
Schieben Sie den Rahmen nach rechts, um die Anzeigeoptionen für den Schaltflächenrahmen zu aktivieren und entsprechend Ihren Designkriterien festzulegen. Legen Sie die Rahmengröße (Zeilenbreite) fest, indem Sie die Anzahl der Pixel erhöhen oder verringern. Legen Sie den Rahmenstil fest, indem Sie einen Wert aus der Liste der standardmäßigen CSS-border-style auswählen, z B. Durchgehend, Punkte und Gestrichelt. |
| size |
|
Klicken Sie bei Option Höhe“ auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern. Ein leerer Wert (Auto) ist der Standardwert. Die Größe der Schaltfläche entspricht ihrem Inhalt. Verwenden Sie für Breite den Umschalter, um die Breite nach Pixel oder Prozentsatz festzulegen. Legen Sie für eine prozentuale Breite mithilfe des Schiebereglers den prozentualen Wert fest. Der Prozentsatz bestimmt die Schaltflächengröße anhand des Inhaltsfelds des enthaltenden Blocks, wobei Auffüllung und Rahmen ausgeschlossen sind. Bei einem Wert von 50 wird beispielsweise die Breite der Schaltfläche auf 50 % der Breite festgelegt, die den Block enthält. Klicken Sie bei einer pixelbasierten Breite auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern. Ein leerer Wert (Auto) ist der Standardwert und skaliert die Breite der Schaltfläche entsprechend ihrem Inhalt. |
Trennlinie
Auf der Registerkarte Trennzeichen können Sie die Linienstile und Container-Einstellungen für eine Trennzeichenkomponente festlegen.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Typ | Einstellungen | Beschreibung |
| Line |
|
Legen Sie den Rahmenstil fest, indem Sie einen Wert aus der Liste der standardmäßigen CSS-border-style auswählen, z B. Durchgehend, Punkte und Gestrichelt. |
| Container-Größe |
|
Klicken Sie bei Option Höhe“ auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel für die Komponente/das Element zu erhöhen oder zu verringern. Ein leerer Wert (Auto) ist der Standardwert und passt die Höhe entsprechend dem Inhalt an (Zeilenstil). Verwenden Sie für Breite den Umschalter, um die Breite nach Pixel oder Prozentsatz festzulegen. Legen Sie für eine prozentuale Breite mithilfe des Schiebereglers den prozentualen Wert fest. Der Prozentsatz bestimmt die Elementbreite basierend auf dem Inhaltsfeld des enthaltenden Blocks. Bei einem Wert von 50 wird beispielsweise die Breite der Unterteilung auf 50 % der Breite des enthaltenden Blocks festgelegt. Klicken Sie bei einer pixelbasierten Breite auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern. Ein leerer Wert (Auto) ist der Standardwert und skaliert die Breite der Trennlinie entsprechend ihrem Inhalt. |
| Ausrichtung |
|
Wählen Sie die horizontale Ausrichtung innerhalb des enthaltenden Blocks aus: __, Zentriert oder Rechts. |
Raster
Auf der Registerkarte Raster können Sie Spalten- und Zeilenlücken für ein Rasterelement steuern:
-
Spaltenabstand - Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel für den Abstand zwischen den Rasterspalten zu erhöhen oder zu verringern. Sie können auch eine Zahl in das Feld eingeben.
-
Zeilenabstand - Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel für den Abstand zwischen den Rasterzeilen zu erhöhen oder zu verringern. Sie können auch eine Zahl in das Feld eingeben.
Bearbeiten eines Designs
Sie können ein Design mit demselben Workflow und denselben Tools bearbeiten, die Sie beim Erstellen eines Designs verwenden. Der Unterschied besteht darin, dass Sie auf der Registerkarte Meine Designs das benutzerdefinierte Design auswählen, das Sie ändern möchten.
Verwenden Sie die Leiste auf der rechten Seite, um durch die verschiedenen Registerkarten zu navigieren und die Design-Einstellungen zu ändern:
Die angezeigten visuellen Elemente ändern sich, wenn Sie die Einstellungen ändern. Wenn das Ergebnis auf der Arbeitsfläche nicht das gewünschte ist, können Sie auf das Symbol Rückgängig (
Wenn Ihre Design-Änderungen abgeschlossen sind, klicken Sie auf Speichern.
Verwalten benutzerdefinierter Designs
Sie können Ihre benutzerdefinierten Designs mit demselben Workflow und denselben Tools verwalten, die Sie beim Erstellen eines Designs verwenden. Der Unterschied besteht darin, dass Sie die Registerkarte Meine Designs auswählen und Ihre Designs in der angezeigten Liste verwalten.
Wenn Sie über eine große Liste mit benutzerdefinierten Designs verfügen, verwenden Sie das Feld Suche und andere Filter, um die angezeigte Liste zu reduzieren. Wenn Sie Ihre Liste der verfügbaren Designs verwalten, können Sie ein benutzerdefiniertes Design jederzeit bearbeiten, löschen oder duplizieren.
Bearbeiten eines Designs
-
Wählen Sie das Design aus, das Sie ändern möchten, und klicken oben auf „Bearbeiten“.
-
Verwenden Sie die Navigation auf der rechten Seite, um die verschiedenen Stilregisterkarten zu verwenden und die Design-Einstellungen zu ändern:
Die angezeigten visuellen Elemente ändern sich, wenn Sie die Einstellungen ändern. Wenn das Ergebnis auf der Arbeitsfläche nicht das gewünschte ist, können Sie auf das Rückgängig-Symbol unten in der rechten Leiste klicken. Klicken Sie auf Wiederholen, um die Änderung erneut vorzunehmen.
-
Wenn Ihre Design-Änderungen abgeschlossen sind, klicken Sie auf Speichern.
Löschen oder Duplizieren eines Designs
Wenn Sie das Design gefunden haben, klicken Sie auf das Mehr Menü (…) unten rechts auf der Designkarte und wählen Sie die gewünschte Aktion aus:
-
Duplizieren - Wählen Sie diese Aktion, um das Design zu duplizieren. Das neue Design ist identisch mit Kopie von, das an den Namen des Originals angehängt wird. Sie können den Namen ändern, wenn Sie Design bearbeiten.
-
Löschen - Wählen Sie diese Aktion, um das benutzerdefinierte Design zu entfernen. Klicken Sie im Bestätigungsdialog auf Löschen.
note note NOTE Das Löschen des Designs hat keine Auswirkungen auf E-Mail- oder E-Mail-Vorlagen, auf die es bereits angewendet wurde.
Design für die Inhaltserstellung in E-Mails verwenden use-email-theme
Wenn Sie eine neue E-Mail- oder E-Mail-Vorlage erstellen, können Sie ein Markendesign verwenden, das den Inhaltserstellungsprozess optimiert und sicherstellt, dass das Design den definierten Standards entspricht. Für ein neues Fragment können Sie vor dem Speichern des Fragments auch ein Design anwenden. Das Fragment verbleibt von diesem Zeitpunkt an Design-Modus und ist kompatibel, um es zu E-Mails und E-Mail-Vorlagen hinzuzufügen, die sich auch im Design-Modus befinden.
-
Eine der folgenden Aktionen auswählen:
-
Wählen Sie eine E-Mail-Vorlage aus, die ein Design enthält (erstellt im Design-Modus). Das für jede Vorlage spezifische Design wird automatisch angewendet.
-
Verwenden Sie die Von Grund auf gestalten und wählen Sie Designs verwenden, um mit einem vordefinierten Stildesign zu beginnen.
note important IMPORTANT Wenn Sie den Modus Manuelle Formatierung wählen, müssen Sie das E-Mail-Design zurücksetzen, um ein Design anzuwenden. Wenn Sie den Modus Designs wählen, sind nur Fragmente verfügbar, die auch im Modus Designs erstellt wurden und dem E-Mail-Inhalt hinzugefügt werden können.
-
-
Klicken Sie im E-Mail-Design auf das Symbol Designs (
Das Standarddesign oder das auf die Vorlage angewendete Design wird angezeigt. Sie können zwischen den Farbvarianten für dieses Design wechseln.
-
Klicken Sie auf den Pfeil neben dem angezeigten Design, um die Liste der verfügbaren benutzerdefinierten und Adobe-Designs anzuzeigen.
-
Klicken Sie auf Meine Designs und wählen Sie Ihr benutzerdefiniertes Design aus.
-
Klicken Sie außerhalb der Liste.
Das neu ausgewählte benutzerdefinierte Design wendet die Stile auf alle E-Mail-Komponenten auf der Arbeitsfläche an. Sie können zwischen den Farbvarianten wechseln.
-
Wenn Sie die Designstile für eine ausgewählte Komponente überschreiben müssen, klicken Sie auf das Symbol Komponentenstile entsperren (Symbol
Klicken Sie im Bestätigungsdialogfeld auf Entsperren.
Wählen Sie die Stile im rechten Bedienfeld aus, um die Einstellungen für die Komponente zu ändern.
Ändern des Designs für Ihren E-Mail-Inhalt
Bei E-Mail- oder E-Mail Vorlagen, die im Design-Modus“ erstellt wurden, können Sie das Design jederzeit ändern. Der E-Mail-Inhalt bleibt unverändert, aber die Stile werden aktualisiert, um das neue Design widerzuspiegeln.
-
Öffnen Sie die E-Mail- oder E-Mail-Vorlage im Design-Bereich.
-
Klicken Sie auf Designs (
Das angewendete Design wird im rechten Bereich angezeigt.
-
Klicken Sie auf den Pfeil neben dem angezeigten Design, um die Liste der verfügbaren benutzerdefinierten und Adobe-Designs anzuzeigen.
-
Ein anderes Design auswählen.
-
Klicken Sie außerhalb der Liste.
Das ausgewählte Design wendet die Stile auf alle E-Mail-Komponenten auf der Arbeitsfläche an. Sie können zwischen den Farbvarianten wechseln.