Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

E-Mail-Kampagnen gestalten

Jede E-Mail-Kampagne besteht aus mehreren Abschnitten. Obwohl Sie die meisten Abschnitte separat gestalten können, gibt es einige „globale“ Style-Einstellungen, die sich auf Ihre gesamte Kampagne auswirken. Dies kreiert ein einheitliches Erscheinungsbild für einen einheitlichen Markenauftritt.

Diese globalen Styles werden auf die gesamte Kampagne angewendet:

Du kannst die Stil-Einstellungen deiner Website automatisch auf deine Kampagne anwenden oder diese Stile manuell festlegen. Du kannst auch Farben für jedes Element speichern und wiederverwenden oder eine Kampagne duplizieren, um alle ihre Stil-Einstellungen in einem neuen Entwurf wiederzuverwenden.

Tipp: Um globale Stile anzupassen, klicken Sie auf den Bereich außerhalb der Abschnitte (E-Mail-Hintergrund).

Website-Stil anwenden

Wenn du möchtest, dass deine Kampagne der Ästhetik deiner Website entspricht, kannst du automatisch die Stil-Einstellungen deiner Website anwenden. Gehe folgendermaßen vor:

  1. Klicke beim Bearbeiten deines Kampagnen-Entwurfs im rechten Menü auf Stil.
  2. Klicke auf Website-Stile anwenden und dann auf Anwenden.

Dadurch werden die Schriftarten, Farben und das Logo deiner Kampagne geändert, sodass sie besser mit dem Menü „Website-Stil“ deiner Website übereinstimmen. Nachdem du diese Änderung vorgenommen hast, kannst du sie auf die vorherigen Einstellungen zurücksetzen, indem du auf den Rückgängig-Pfeil klickst. Du kannst auch manuelle Änderungen an einzelnen Stil-Anpassungen vornehmen.

Wenn der Button Website-Stile anwenden nicht angezeigt wird, siehst du dir möglicherweise die Stil-Einstellungen eines Inhaltsabschnitts an. Klicke auf den Bereich außerhalb des Entwurfsinhalts, um die globalen E-Mail-Stile anzuzeigen.

Wählen Sie Ihre Schriftarten

Klicken Sie in einem beliebigen Abschnitt auf Schriftartenpaket, um die Schriftarten für den gesamten Text in einer Kampagne festzulegen.

Schriftartenpakete sind Kombinationen von Schriftarten, die von unseren Designern sorgfältig ausgewählt wurden, damit Sie angenehm anzusehen sind und Ihre Abonnenten sich auf Ihre Botschaft konzentrieren können. Durchsuchen Sie die Optionen, um ein Schriftartenpaket zu finden, das zum Ton und Inhalt Ihrer Kampagne passt.

Einzelne Schriftarten in einem Schriftartenpaket können nicht bearbeitet werden. Unsere Schriftartenpakete werden gepflegt, damit Sie auf einer Vielzahl von Mail-Clients einheitlich aussehen. Die meisten E-Mail-Clients für Smartphones unterstützen z. B. keine Webschriftarten und ersetzen diese durch eigene standardmäßige Schriftarten. Die Schriftarten in unseren Schriftartenpaketen wurden für eine maximale Kompatibilität ausgewählt, damit Sie darauf vertrauen können, dass das, was Sie in Ihrem Entwurf sehen, so nah wie möglich an das kommt, was Ihre Abonnenten in ihrer Mailbox sehen.

Wenn Sie an einer bestimmten Position eine andere Schriftart benötigen, können Sie diese als Bild hinzufügen oder mithilfe von Farben und Formatierungen Ihren Text hervorheben lassen.

Im Bloom-Layout ist das „Bloom“ ein zur Kopfzeile hinzugefügtes Bild, und „extra special“ (im eigenen Textabschnitt) wird kursiv gestellt und rosa gefärbt, um es hervorzuheben:

bloom.png

Ihre Textgrößen festlegen

Klicken Sie in einem beliebigen Abschnitt auf Schriftgrößen, um die Größe für den gesamten Text in Ihrer Kampagne festzulegen.

  • Verwenden Sie den Schieberegler Basis-Schriftgröße, um die Größe des Bodytexts in Ihrer Kampagne auszuwählen.
  • Verwenden Sie den Schieberegler Typ-Skalierung, um den Kontrast der Textgröße festzulegen. Eine kleinere Typ-Skalierung führt z. B. zu einer „flachen“ E-Mail, bei der die Kopfzeilen nur geringfügig größer sind als der Absatztext, und eine größere Typ-Skalierung wird die Kopfzeilen relativ größer gestalten.

font-size.png

Es gibt jedoch einige Ausnahmen. Kopfzeilentext verfügt über seine eigenen Größeneinstellungen, und die folgenden Elemente haben gegenwärtig eine feste Größe:

  • Schaltflächentext
  • Blog-Einträge und Produkttitel
  • Daten des Blog-Eintrags
  • Preise der Produkte
  • Footer-Text, einschließlich deiner Adresse und dem Abmeldelink

Ändern Sie Ihre Farben

Wenn Sie auf ein Element klicken, um seine Farbe zu ändern, z. B. Hintergrundbereich oder Schriftart, werden Musterkreise für die aktuell in dieser Kampagne verwendeten Farben angezeigt. Sie können diese Farben verwenden oder neue Farben hinzufügen.

  • Um eine bestehende Farbe zu verwenden, klicken Sie auf das entsprechende Muster.
  • Um eine neue Farbe hinzuzufügen, klicke innerhalb der Farbauswahl, um die gewünschte Farbe zu suchen, und klicke im angezeigten Muster dann auf +.
  • Um eine Farbe zu löschen, klicke auf das Muster und innerhalb davon dann auf X.
Tipp: Wenn du versehentlich eine Farbe löschst, sieh dir unseren Tipp zur Fehlerbehebung an.

adjust-colors.gif

Tipp: Sehen Sie sich unsere Tipps für die Erzeugung von Charakter durch Farben.

Wenn Sie den Wert für die gewünschte Farbe kennen, können Sie diesen im Wertfeld eingeben. Dies ist ideal, um genaue Farben aus anderen Stil-Einstellungen zu kopieren. Das Wertfeld akzeptiert HEX und RGB.

color_code.jpg

Ich habe versehentlich ein Farbmuster gelöscht

Wird diese Farbe in einem anderen Abschnitt verwendet, kannst du diese zurück zu deinen wichtigsten Musterfarben hinzufügen. Wenn du z. B. eine Musterfarbe löschst, die auch in deinen Blogeintrag-Buttons verwendet wird:

  1. Klicke auf den Blogeintrag-Abschnitt.
  2. Klicke auf Details.
  3. Klicke auf Button-Farbe.
  4. Klicke im Muster für diese Farbe auf +. Dadurch wird sie wieder in anderen Farbstilbereichen angezeigt.

Wenn die Farbe nirgendwo in deiner Kampagne verwendet wird, gibt es derzeit keine Möglichkeit, sie abzurufen. Als Vorsichtsmaßnahme kannst du den HEX-Code der Farben notieren, die du verwendest, falls du versehentlich ein Muster löschst.

Hintergrundfarben

Es gibt drei Arten von Hintergrundfarbeinstellungen:

  • Hintergrundfarbe – Die Hintergrundfarbe des Bereichs, der den Inhalt umgibt. Wenn die folgenden beiden Stile auf „transparent“ festgelegt sind, ist dies die Farbe, die auch hinter dem Inhalt der Kampagne angezeigt wird.
  • E-Mail-Hintergrund – Die Hintergrundfarbe hinter allen Abschnitten einer Kampagne. Wenn die Abschnittsfarbe auf „transparent“ festgelegt ist, ist dies die Farbe, die hinter dem Abschnitt angezeigt wird. Wenn alle Abschnitte über eindeutige Farbeinstellungen verfügen, wird diese Farbe möglicherweise nirgendwo angezeigt.
  • Abschnittsfarbe – Die Hintergrundfarbe eines einzelnen Abschnitts. Du kannst jeden Abschnitt unabhängig gestalten. Wenn die Abschnittsfarbe auf „transparent“ festgelegt ist, wird stattdessen der E-Mail-Hintergrund oder die Hintergrundfarbe hinter dem Abschnitt angezeigt.

Um die Hintergrundfarbe und den E-Mail-Hintergrund festzulegen, klicke auf den Bereich außerhalb der Abschnitte und klicke im seitlichen Menü auf die Optionen. Um die Farbe eines Abschnitts festzulegen, klicke auf den Abschnitt und dann auf Abschnittsfarbe.

Denken Sie daran:

  • Die Hintergrundfarbe wird für Bildabschnitte nur hinter Beschriftungen und transparente Bildbereichen angezeigt. Wenn du z. B. das Bildabschnitt-Layout Darunter ausgewählt und die Beschriftungen verborgen hast, ist die Hintergrundfarbe nicht sichtbar.
  • Da E-Mails auf Mobilgeräten häufig den ganzen Bildschirm einnehmen, ist die Hintergrundfarbe auf einigen Geräten möglicherweise nicht sichtbar.
  • Um einen transparenten Hintergrund zu erstellen, wählen Sie das Farbmuster auf der linken Seite mit diagonalen Linien.

transparent_color.jpg

Styletext-Links

Text-Links werden an dein globales Schriftartenpaket und globale Schriftgrößen angepasst. Um die Farbe für alle Links in Ihrer Kampagne festzulegen, klicke auf den Bereich außerhalb der Abschnitte und lege dann die Linkfarbe fest.

Tipp: Links zum Anzeigen im Browser haben eine eigene Farboption, da sie über der Hintergrundfarbe des Headers angezeigt werden.

style-a-link.png

Padding

Klicke zum Ändern des Leerraums um Text und Bilder herum auf einen beliebigen Abschnitt, um die Padding-Optionen anzuzeigen. Das Erscheinungsbild vom Padding kann je nach Gerät variieren. Kampagnenbilder haben beispielsweise kein Padding auf Mobilgeräten, um sicherzustellen, dass der Inhalt auf kleineren Bildschirmen sichtbar und klar ist.

Wenn zu viel oder nicht genug Padding angezeigt wird, probiere verschiedene Einstellungen aus, bis du das ideale Erscheinungsbild für deine Bedürfnisse gefunden hast. Denke daran, dass deine Kampagnen geringfügige Unterschiede im Aussehen aufweisen können, je nachdem, wie deine Abonnenten die Kampagne ansehen.

Tipp: Sie können mehr Leerraum oberhalb und unterhalb von Abschnitten mit Abstandshaltern hinzufügen.

Responsive Design

Das in E-Mail-Kampagnen integrierte Responsive Design passt basierend auf dem Bildschirm des Besuchers automatisch die Größe deiner Bilder und deines Texts an. Egal, ob deine Abonnenten an einem Computer sitzen oder ihre E-Mails auf einem Smartphone überprüfen, während sie auf den Zug warten – mit Responsive Design kannst du deiner Kampagne ein großartiges Erscheinungsbild verleihen.

  • Schriftarten werden auf Mobilgeräten leicht größer dargestellt, damit sie auf einem kleineren Bildschirm lesbarer werden.
  • Für Blogs, Produkte und Bildabschnitte passen die Layouts Side und Numbered in schmale Browser und Bildschirme. Dadurch bleiben Ihre Bilder und Text sichtbar.

Einen Bereich gestalten

Abgesehen von den oben genannten globalen Stilen wird jeder Abschnitt separat gestaltet. Klicke auf einen Abschnitt in der Vorschau auf der linken Seite und verwende dann das Menü rechts, um diesen Abschnitt zu gestalten. Weitere Hilfe findest du in unseren Tipps zum Erstellen und Gestalten der jeweiligen Abschnittstypen:

Einen Stil wiederverwenden

So verwendest du eine Kampagne, die du bereits als Template gesendet hast, einschließlich aller Stileinstellungen:

  1. Gehen Sie zu Ihrem E-Mail-Kampagnen-Dashboard.
  2. Klicken Sie auf Gesendet.
  3. Klicken Sie auf die Kampagne.
  4. Klicke auf ... und dann auf Dieses Layout wiederverwenden.

Das Layout erscheint als neuer Entwurf, den Sie als Ausgangspunkt für eine neue Kampagne verwenden können. Mehr dazu erfährst du unter E-Mail-Kampagnen erstellen.

War dieser Beitrag hilfreich?
12 von 46 fanden dies hilfreich