E-Mail-Kampagnen gestalten

Bearbeite Schriftarten, Farben, Padding und andere Stil-Einstellungen deiner Kampagne, um sie an deine Website oder Marke anzupassen.

Zuletzt aktualisiert: 6. Dezember 2024

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 dein Website-Logo einfügen und Farben basierend auf der Farbpalette deiner Website anwenden. Gehe dazu wie folgt vor:

  1. Klicke beim Bearbeiten deines Kampagnen-Entwurfs im rechten Menü auf Stil.
  2. Klicke auf Website rasch anpassen. Wenn dieser Button nicht angezeigt wird, hast du möglicherweise die Stil-Einstellungen eines Inhaltsabschnitts geöffnet. Klicke in den Bereich außerhalb des Entwurfsinhalts, um die globalen E-Mail-Formatierungen anzuzeigen.
  3. Um dein Website-Logo einzufügen, klicke auf Logo einfügen. Diese Option ist deaktiviert, wenn du kein Website-Logo hinzugefügt hast.
  4. Um die Farben der Kampagne zu ändern, klicke auf eines der Farbschemen. Um die Farbschemen zu ändern, ändere die Farbpalette deiner Website.

Nachdem du diese Änderungen vorgenommen hast, kannst du sie auf die vorherigen Einstellungen zurücksetzen, indem du auf den Rückgängig-Pfeil klickst. Um das Logo zu entfernen, klicke in deiner Kampagnen-Vorschau auf das Logo und wähle im rechten Menü Text aus.

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 du auf ein Element klickst, um seine Farbe zu ändern, z. B. den Inhaltshintergrund oder die Link-Farbe, siehst du zwei Optionen: E-Mail-Palette und Website-Palette mit entsprechenden Farbkreisen.

E-Mail-Palette

Unter E-Mail-Palette werden die derzeit in der Kampagne verwendeten Farben angezeigt.

  • Um eine bestehende Farbe zu verwenden, klicke auf das entsprechende Muster.
  • Um eine neue Farbe hinzuzufügen, klicke innerhalb der Farbauswahl, um die gewünschte Farbe zu suchen, und klicke dann im angezeigten Muster auf +.
  • Um eine Farbe zu löschen, klicke auf das Muster und innerhalb davon dann auf X.
adjust-colors.gif

Tipp

Sieh dir unsere Tipps dazu an, wie du mit Farben für Charakter sorgen kannst.

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

Website-Palette

Unter Website-Palette werden die in den Website-Stilen verwendeten Farben angezeigt. Mit dieser Option kannst du sicherstellen, dass deine Kampagnen mit der Markenführung deiner Website übereinstimmen.

  • Um eine Farbe der Website-Palette zu verwenden, klicke auf das entsprechende Farbfeld. Dadurch wird sie zu deiner E-Mail-Palette hinzugefügt.
  • Es ist nicht möglich, die Farben der Website-Palette direkt zu ändern oder zu löschen. Ändere stattdessen die Farben deiner Website unter „Website-Stile“.

Ich habe versehentlich ein Farbfeld in der E-Mail-Palette 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 dir den HEX-Code der Farben notieren, die du verwendest, falls du versehentlich ein Muster löschst.

Hintergrundfarben

Es gibt drei Arten von Hintergrundfarbeinstellungen:

  • E-Mail-Hintergrund – Die Hintergrundfarbe des Bereichs, der den Inhalt umgibt. Wenn für die folgenden beiden Stile „transparent“ eingestellt ist, ist dies die Farbe, die auch hinter dem Inhalt der Kampagne angezeigt wird.
  • Inhaltshintergrund – Die Hintergrundfarbe hinter allen Abschnitten einer Kampagne. Wenn für die Abschnittsfarbe „transparent“ eingestellt 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 einzeln gestalten. Wenn die Abschnittsfarbe auf „transparent“ festgelegt ist, wird stattdessen der Inhaltshintergrund oder der E-Mail-Hintergrund hinter dem Abschnitt angezeigt.

Um den E-Mail-Hintergrund und den Inhaltshintergrund 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.

Denk 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

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 Blog-, Produkt- und Bild-Abschnitte werden die Bilder und Text in schmalen Browsern und Bildschirmen vertikal angeordnet. Dadurch bleiben deine Inhalte 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. Öffne das Dashboard für E-Mail-Marketing.
  2. Klicken Sie auf Gesendet.
  3. Klicke in der Kampagne mit dem Stil, den du wiederverwenden möchtest, auf das Symbol Template wiederverwenden.
  4. Wähle den Automatisierungstyp aus.

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.

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.