Skip to main content

Text-Buttons erstellen

By Gabrielle Links und Buttons

Neben zahlreichen Schriftarten und Textstilen ermöglicht dir Mail Designer 365 auch, stilvolle Text-Buttons und Badges in deinen Newslettern zu erstellen. In dieser Schritt-für-Schritt-Anleitung zeigen wir dir, wie du loslegst und mehr Farbe in deine E-Mail-Designs bringst.

Warum sind Text-Buttons die bessere Wahl?

Du kennst sicher bereits die Formen- und Bildelemente in Mail Designer 365. Obwohl Bild-basierte Elemente dein E-Mail-Design aufwerten können, ist es nicht empfehlenswert, E-Mails ausschließlich aus Bildern zu erstellen. Besonders wichtige Inhalte wie Links und Call-to-Actions sollten, wenn möglich, textbasiert sein.

Hier sind einige Gründe, warum Text-Buttons die bessere Wahl sind:

  • Kompatibilität: Text wird in allen E-Mail-Clients angezeigt – selbst wenn Bilder blockiert sind (z. B. bei mobilen Nutzern mit aktiviertem Datensparmodus)
  • Spam-Konformität: Bildlastige E-Mails landen häufiger im Spam-Ordner. Ein Verhältnis von 60:40 zwischen Text und Bildern wird empfohlen
  • Barrierefreiheit: Screenreader können Bilder ohne Alt-Text nicht erkennen – mit Text-Buttons stellst du sicher, dass deine Botschaft für alle verständlich ist
  • E-Mail-Größe: Mehr Text reduziert die Gesamtgröße der E-Mail im Vergleich zu Bildern und sorgt so für eine bessere Zustellbarkeit

Use-Cases für Text-Buttons und Badges

Oftmals musst du beim Schreiben von E-Mail-Texten bestimmte Wörter und Phrasen hervorheben. So stellst du sicher, dass wichtige Informationen sofort ins Auge springen, was besonders nützlich ist, wenn Leser die E-Mail schnell nach den wichtigsten Punkten durchsuchen.

Badges und Buttons im Text lassen sich gut mit klassischen Marketingtechniken kombinieren, wie zum Beispiel durch die Schaffung von Dringlichkeit – etwa mit zeitlich begrenzten Formulierungen ("Schnell, nur bis Mitternacht!") – oder um Schlagwörter wie "neu" oder "Sale" hervorzuheben, die sofort die Aufmerksamkeit des Lesers auf sich ziehen.

Ein Text-Button erfüllt den gleichen Zweck wie ein Badge, ermöglicht aber auch das Einfügen eines Links. Im Vergleich zu normalen Text-Links sticht ein Text-Button sofort ins Auge und fordert den Empfänger aktiv zum Klicken auf – eine großartige Wahl für den wichtigsten Call-to-Action deiner E-Mail.

Badges in Text einfügen

Hast du einen Textbereich gefunden, den du hervorheben möchtest? Markiere den Text und gehe dann im Mail Designer 365 Menü zu Einfügen > Badge:

Es wird dann ein Standardstil auf deinen Text angewendet. Nutze die Optionen im Menü, um den Stil anzupassen und ihn perfekt an dein E-Mail-Design anzupassen. Als erstes kannst du den Farbwähler verwenden, um die Hintergrundfarbe deines Text-Badges zu ändern:

Dann kannst du mit den Abstands- und Rundungsreglern spielen, um dem Badge die gewünschte Form zu geben. Abgerundete Ecken sorgen für die perfekte "Pillenbutton"-Form, oder wähle schärfere Kanten für einen klassischen Hervorhebungseffekt.

Schließlich kannst du den Textstil-Editor verwenden, um die Schriftart, Größe, Ausrichtung und Fettdruck deines Textes anzupassen:

Buttons in Text einfügen

Das Hinzufügen eines Text-Buttons folgt einem ähnlichen Workflow wie das Hinzufügen eines Text-Badges. Beginne damit, den Text auszuwählen, den du für deinen Button verwenden möchtest, und gehe dann im Mail Designer 365 Menü zu Einfügen > Text-Button.

Die erste Option, die du im Kontrollpanel siehst, ist das Link-Feld. Gib hier die URL für deinen Button ein.

Nun kannst du den Stil deines Buttons anpassen, wie bereits im vorherigen Abschnitt beschrieben:

Styles speichern

Wenn du regelmäßig E-Mails für dein Business versendest, ist ein einheitliches Design entscheidend. So stärkst du deine Markenidentität und sorgst für Wiedererkennung bei deinen Kunden. Um sicherzustellen, dass Buttons, Badges und Texte in allen E-Mails gleich aussehen, kannst du Stiloptionen für dein Team speichern.

Sobald du mit dem Design eines Badges oder Buttons zufrieden bist, wechsle zum Tab „Eigene“ und klicke auf „Badge-/Button-Stil speichern“.

Anschließend kannst du dem Stil einen Namen geben, z. B. „Wichtiger Text“, und ihn speichern, damit dein Team ihn immer wieder verwenden kann.

Künftig findest du gespeicherte Badge- und Button-Stile unter dem Tab „Eigene“.

Vordefinierte Styles nutzen

Du hast es eilig oder bist auf der Suche nach Inspiration für deine Badge- oder Button-Stile? Mail Designer 365 bietet eine Auswahl an vordefinierten Optionen, die du schnell auf deinen Text anwenden kannst, um ihm sofort ein Style-Upgrade zu verleihen.

Sobald du deinen gewünschten Text ausgewählt und den Editor geöffnet hast, wechsele zum Reiter „Vorgefertigt“, um alle Optionen zu entdecken:

Klicke auf eine Vorschau, um den Stil auf deinen Text anzuwenden. Hier haben wir uns für einen kräftigen Highlighter-Effekt entschieden – perfekt, um wichtige Informationen hervorzuheben, zum Beispiel in Büro-Newslettern:

Mail Designer 365 gratis testen

Gestalte und versende attraktive E-Mail-Kampagnen auf deinem Mac – ganz ohne HTML-Coding. Teste Mail Designer 365 7 Tage kostenlos und entdecke HTML-E-Mail-Design für alle.
Keine Kreditkarte erforderlich!
Kompatibel ab macOS 10.13

Mehrere Buttons mit mehreren Links erstellen

By Links und Buttons

Ein Bildbereich unterstützt nur einen Link.

Achte darauf, dass ein Bildbereich nur einen Link unterstützen kann - auch, wenn du mehrere Design-Elemente in dem Bereich hast. Wenn du ein Design verschickst, wird jeder Bildbereich als ein einzelnes Bild gerendert und kann deswegen auf nur eine Seite verlinkt werden.

Layoutblöcke mit mehreren Bildbereichen

Um mehrere Buttons mit verschiedenen Links zu erstellen, brauchst du einen Layoutblock mit mehreren Bildbereichen. Mail Designer 365 bietet dir folgende Optionen:

Die verschiedenen Bildbereiche werden dann später als verschiedene Bilder gerendert und können deswegen mehrere Links unterstützen. 

Buttons mit unterschiedlichen Links

In diesem Beispiel verwenden wir einen Layoutblock mit 4 Bildbereichen:



Dann fügen wir jedem Bildbereich einen unterschiedlichen Button hinzu: 

Danach verlinken wir jeden Button auf eine unterschiedliche Seite. Zum Beispiel verlinken wir das Facebook-Icon auf www.facebook.com und das Pinterest-Icon auf www.pinterest.com, usw...

 

Wenn die Vorlage später gerendert wird, werden die 4 Bildbereiche auf 4 verschiedenen Webseiten verlinken. 

 

 

 

 

Auf einen Blick

Hintergründe

Layoutblöcke

Mit Text arbeiten

Links und Buttons

Textstile

Tabellen

Bildbereiche

Bilder

Retina-Bilder

Grafiken und mehr

Kreative Tools

Erweiterte Design-Techniken

Mobile Optimierung

Klartext-Darstellung

Inbox-Vorschau

Vorschau

Vorbereitung vor dem Senden

E-Mail-Versand

HTML Export

Teilen

CTA Buttons hinzufügen

By Links und Buttons

CTA (call-to-action) Buttons sind ein wesentlicher Teil von jeder effektiven E-Mail-Kampagne. Mit Mail Designer 365 kannst du von einer Vielzahl von Buttons auswählen.

Auf der rechten Seite in dem App-Menü gibt es den Inhalte-Bereich. Klicke auf das Dreieck um dir die verschiedenen Optionen für Buttons anzuschauen.

Ziehe einen Button in einen Bildbereich. Um den Text zu ändern, klicke einfach doppelt auf den Text.

Wenn du doppelt auf den Button klickst, öffnest du gleichzeitig das Stil-Menü. Hier kannst du den Button-Text noch anpassen. Es gibt verschiedene Stiloptionen wie Schriftart, Schriftgröße, Schriftstil und Schriftfarbe.

Klicke auf "Link & Hintergrund bearbeiten", um den Button auf deine Webseite zu verlinken. 

 

Klicke auf "Link hinzufügen":

 

 

 

Füge den Link für deine Webseite ein:

 

 

Auf einen Blick

Hintergründe

Layoutblöcke

Mit Text arbeiten

Links und Buttons

Textstile

Tabellen

Bildbereiche

Bilder

Retina-Bilder

Grafiken und mehr

Kreative Tools

Erweiterte Design-Techniken

Mobile Optimierung

Klartext-Darstellung

Inbox-Vorschau

Vorschau

Vorbereitung vor dem Senden

E-Mail-Versand

HTML Export

Teilen

 

Einen Link für Grafiken hinterlegen

By Links und Buttons

Image link

Du kannst Links auch für einen Bildbereich hinterlegen, so dass eine Grafik in  deiner E-Mail anklickbar wird. Beachte bitte, dass ein gesamter Bildbereich als eine einzige Grafik erscheint und deshalb nur ein Link pro Bildbereich verwendet werden kann.

Um einen Link für einen Bildbereich festzulegen, wähle eine Grafik in deinem Design aus und klicke im Reiter auf „Stil“. Nun kannst du die URL eingeben. Das gesamte Bild fungiert jetzt als Link und kann in deiner Nachricht angeklickt werden.

Der kleine Pfeil in der rechten unteren Ecke zeigt dir, für welchen Bildbereich bereits ein Link hinterlegt wurde.

Nur ein Link pro Bildbereich kann verwendet werden. Die folgenden Layoutblöcke haben nur einen Bildbereich und unterstützen deswegen nur einen Link

 

 

Mehrere Links

Es gibt verschiedene Layoutblöcke mit mehreren Bildbereichen nebeneinander.

 

Du kannst sie verwenden, um für mehrere Bildbereich einen Link zu hinterlegen. Zum Beispiel, um soziale Netzwerke einzubinden.

 

 

 

 

Auf einen Blick

Hintergründe

Layoutblöcke

Mit Text arbeiten

Links und Buttons

Textstile

Tabellen

Bildbereiche

Bilder

Retina-Bilder

Grafiken und mehr

Kreative Tools

Erweiterte Design-Techniken

Mobile Optimierung

Klartext-Darstellung

Inbox-Vorschau

Vorschau

Vorbereitung vor dem Senden

E-Mail-Versand

HTML Export

Teilen

Einen Link für Text hinterlegen

By Links und Buttons

Mit Links arbeiten

Du kannst Links auf deine Homepage, zu Dokumenten oder weiteren Ressourcen im Internet in dein Design einfügen. Links können in Mail Designer 365 für Text und Grafiken hinterlegt werden.

Einen Link für Text hinterlegen

Markiere den Text, der als Link verwendet werden soll. Klicke nun auf "Link hinzufügen" und gebe die Link-Adresse ein.

Du kannst jetzt auf den Pfeil im Überblendemenü klicken und einen Link-Stil (z.B mailto) auswählen.

 

Auf einen Blick

Hintergründe

Layoutblöcke

Mit Text arbeiten

Links und Buttons

Textstile

Tabellen

Bildbereiche

Bilder

Retina-Bilder

Grafiken und mehr

Kreative Tools

Erweiterte Design-Techniken

Mobile Optimierung

Klartext-Darstellung

Inbox-Vorschau

Vorschau

Vorbereitung vor dem Senden

E-Mail-Versand

HTML Export

Teilen

Privacy Settings / Datenschutz-Einstellungen