E-Mail-Signatur-Generator

Eine E-Mail-Signatur ist mehr als nur Kontaktdaten am Ende einer Nachricht. Sie enthält Ihren Namen, Ihre Position, Ihr Unternehmen, Kontaktinformationen und optional einen CTA-Link oder Social-Media-Profile. Eine konsistente, professionell gestaltete Signatur stärkt den Markenauftritt in jeder gesendeten E-Mail.

Im Durchschnitt versendet ein Büroangestellter 30–40 E-Mails pro Tag. Jede dieser E-Mails ist eine Gelegenheit, Ihre Marke zu präsentieren, einen CTA-Link zu platzieren und dem Empfänger den direkten Zugang zu Ihren Social-Media-Profilen zu ermöglichen. Mit diesem Tool erstellen Sie eine Signatur, die diesen Anforderungen gerecht wird.

Im Tab Daten finden Sie alle Felder, die Sie ausfüllen können. Nur zwei Felder sind erforderlich: Name und E-Mail-Adresse. Alle anderen Felder sind optional und erscheinen nur in der Signatur, wenn sie ausgefüllt sind.

Felder im Tab Daten

• Zeile über dem Namen – zusätzlicher Text über dem Namen, z. B. Firmenname oder Slogan.
• Avatar / Logo (Bild-URL) – URL zu einem Profilbild oder Firmenlogo. Das Bild sollte quadratisch (min. 120×120 px) und öffentlich zugänglich sein. Nach Eingabe der URL können Sie Form (rund, abgerundet, quadratisch) und Größe (40, 56 oder 72 px) wählen.
• Name – Pflichtfeld. Ihr vollständiger Name.
• Tag neben dem Namen – kurzer Text neben dem Namen, z. B. Pronomen oder Kurzbezeichnung.
• Position – Ihre Rolle im Unternehmen.
• Unternehmen – Name der Organisation.
• Zusätzliche Zeile – kurze Beschreibung Ihrer Tätigkeit oder Ihres Angebots.
• E-Mail – Pflichtfeld. Ihre geschäftliche E-Mail-Adresse.
• Telefon – Kontaktnummer in beliebigem Format.
• Website – vollständige URL Ihrer Website (https://...).
• Adresse – Firmenadresse (Straße, Stadt, PLZ).
• Formale Daten – USt-IdNr., Handelsregisternummer oder branchenspezifische Pflichtangaben.

Ein CTA-Button (Call to Action) ist ein klickbares Element, das den Empfänger zu einer bestimmten Seite weiterleitet – z. B. Terminkalender, Kontaktformular oder Angebot. Der Generator unterstützt zwei CTA-Buttons.

Hauptbutton

1. Öffnen Sie den Tab Buttons im Editor.
2. Geben Sie den Buttontext ein, z. B. Termin vereinbaren.
3. Fügen Sie die Ziel-URL ein (muss mit https:// beginnen).

Zusätzlicher Button

Optional können Sie einen zweiten Button im Outline-Stil (transparenter Hintergrund mit Rahmen) hinzufügen. Füllen Sie die Felder im Abschnitt Zusätzlicher Button analog zum Hauptbutton aus.

Wenn beide Felder (Text und Link) leer bleiben, wird der Button nicht angezeigt. Beide Felder müssen ausgefüllt sein, damit der Button erscheint.

Im Tab Social Media können Sie Links zu Ihren Profilen hinzufügen. Der Generator unterstützt zwölf Plattformen: LinkedIn, Instagram, Facebook, TikTok, YouTube, X (ehemals Twitter), GitHub, Dribbble, Behance, WhatsApp, Telegram und Pinterest.

So funktioniert es

1. Öffnen Sie den Tab Social Media im Editor.
2. Fügen Sie bei jeder Plattform die vollständige Profil-URL ein.
3. Füllen Sie nur die Felder aus, die Sie benötigen. Leere Felder erscheinen nicht in der Signatur.

Icon-Optionen

Aktivieren Sie Icons neben Plattformnamen anzeigen, um farbige SVG-Icons statt reiner Textnamen anzuzeigen. Sie können die Icon-Größe (16, 20 oder 24 px) und den Farbmodus (Plattformfarben, Akzentfarbe oder Textfarbe) wählen.

Im Tab Disclaimer / DSGVO können Sie einen rechtlichen Hinweis einfügen, der in kleinerer Schrift am Ende der Signatur erscheint.

Wann ist ein Disclaimer sinnvoll?

• Geschäftskorrespondenz – Vertraulichkeitshinweis und Bitte um Löschung bei Fehlzustellung.
• Branchenanforderungen – bestimmte Branchen (Recht, Medizin, Finanzen) erfordern spezifische Angaben.
• DSGVO – Hinweis zur Verarbeitung personenbezogener Daten.

Trennlinie

Aktivieren Sie Trennlinie anzeigen, um eine horizontale Linie zwischen Kontaktdaten und Disclaimer einzufügen. Sie können Stil (durchgezogen, gestrichelt, gepunktet), Dicke (1–3 px) und Farbe anpassen.

Im Tab Erscheinungsbild können Sie Farben, Schriftart und andere visuelle Elemente der Signatur anpassen.

Farbthemen

Oben im Tab finden Sie fünf vorgefertigte Themen: Dunkel, Blau, Violett, Grün und Grau. Ein Klick auf ein Thema setzt automatisch die Akzentfarbe und Textfarbe. Das ist der schnellste Weg zu einem einheitlichen Erscheinungsbild.

Farben

• Akzentfarbe – wird für die Seitenleiste/obere Leiste, CTA-Button und Links verwendet. Sie können eine beliebige Farbe aus der Palette wählen.
• Textfarbe – Farbe aller Texte in der Signatur (Name, Kontaktdaten, Disclaimer).
• Hintergrundfarbe – Farbe des gesamten Signaturhintergrunds. Standardmäßig weiß, kann aber geändert werden.

Schriftart und Größe

• Schriftart – Auswahl: Arial, Verdana, Tahoma, Trebuchet MS und Georgia. Alle sind E-Mail-sicher und werden beim Empfänger korrekt angezeigt.
• Textgröße – drei Optionen: Klein (12 px), Standard (14 px) und Größer (16 px).

Im Tab Textstil können Sie für jedes Textelement in der Signatur individuell Farbe und Schriftgröße anpassen.

Verfügbare Elemente

Es werden nur Elemente angezeigt, die aktuell Daten enthalten. Für jedes Element können Sie einstellen:

• Name – wird standardmäßig in der Akzentfarbe angezeigt.
• Position – Ihre Rolle im Unternehmen.
• Unternehmen – Name der Organisation.
• Kontaktdaten – E-Mail, Telefon, Website (Labels).
• Social Media – Links zu Profilen.
• Disclaimer – rechtlicher Hinweis am Ende der Signatur.

Farbe ändern

Bei jedem Element finden Sie eine Reihe von Farboptionen. Klicken Sie auf ein Farbquadrat, um es auszuwählen. Sie können auch eine eigene Farbe hinzufügen, indem Sie auf das Farbquadrat mit dem Pluszeichen klicken – Farbe wählen und Speichern klicken. Eigene Farben (bis zu 8) werden zwischen allen Elementen geteilt.

Der Button mit dem Reset-Icon setzt die Standardfarbe des Elements zurück.

Größe ändern

In der zweiten Zeile finden Sie die Größensteuerung mit Buttons - und +. Der Wert zeigt die Abweichung von der Basisschriftgröße (eingestellt im Tab Erscheinungsbild). Bereich: -4 bis +4 Pixel.

Im Tab Abstände können Sie die Abstände zwischen den einzelnen Elementen der Signatur präzise steuern.

Innenabstand der Signatur

Oben im Tab finden Sie die Option für den Innenabstand – also den Abstand zwischen dem Inhalt der Signatur und ihren Rändern. Drei Werte stehen zur Verfügung: 8 px (klein), 16 px (mittel) und 24 px (groß).

Abstände zwischen Elementen

Unterhalb des Innenabstands finden Sie Steuerelemente für die einzelnen Signaturelemente. Jedes Steuerelement hat Buttons + und - zum Vergrößern oder Verkleinern des Abstands. Es werden nur Optionen für Elemente angezeigt, die aktuell in der Signatur vorhanden sind.

• Nach dem Namen – Abstand unter der Namenszeile.
• Nach Position / Unternehmen – Abstand unter Position und Firmenname.
• Nach der zusätzlichen Zeile – Abstand unter der Beschreibung (falls ausgefüllt).
• Nach den Kontaktdaten – Abstand unter E-Mail, Telefon und Website.
• Nach Social Media – Abstand unter den Profillinks.
• Nach dem CTA-Button – Abstand unter dem Button (falls aktiviert).
• Vor dem Disclaimer – Abstand über dem rechtlichen Hinweis.

Wenn Sie Daten aus einem Feld entfernen (z. B. Telefonnummer löschen), verschwindet die entsprechende Abstandsoption automatisch aus dem Tab.

Alle Einstellungen werden automatisch im Browser gespeichert (localStorage). Nach dem Neuladen der Seite bleiben Daten, Layout, Farben und alle anderen Optionen erhalten.

Unter der Vorschau finden Sie den Button Design zurücksetzen, der alle Daten und Einstellungen auf die Standardwerte zurücksetzt (nach Bestätigung). Die Konfiguration kann auch als JSON-Datei exportiert und auf einem anderen Gerät importiert werden.

Das Vorschau-Panel wird rechts neben dem Editor angezeigt und aktualisiert sich automatisch bei jeder Änderung. Die Vorschau ist am Bildschirm fixiert (sticky) und bleibt auch beim Scrollen durch die Bearbeitungsoptionen sichtbar.

Hintergrund der Vorschau

Über der Vorschau finden Sie drei Buttons zur Hintergrundauswahl: Hell (Standard-grauer Hintergrund), Dunkel (dunkler Hintergrund, nützlich zur Überprüfung der Lesbarkeit) und Schachbrett (Schachbrettmuster, zeigt Transparenz und Ränder der Signatur).

Aktionsbuttons

Unter der Vorschau finden Sie mehrere Buttons:

• Signatur kopieren (Gmail / Outlook) – kopiert die Signatur als formatierten HTML-Text in die Zwischenablage. Einfach in das Signaturfeld einfügen (Strg+V / Cmd+V).
• HTML-Code kopieren – kopiert den reinen HTML-Quellcode. Ideal für HTML-Editoren oder CMS-Systeme.
• Als HTML herunterladen – speichert den Signaturcode als .html-Datei. Nützlich zur Archivierung oder Weitergabe an Entwickler.
• HTML-Code anzeigen – öffnet ein modales Fenster mit dem vollständigen HTML-Quellcode. Code kann direkt aus dem Fenster kopiert werden.
• Einstellungen exportieren – speichert die vollständige Konfiguration (Daten, Farben, Layout, Abstände, Textstile) als JSON-Datei.
• Einstellungen importieren – lädt eine Konfiguration aus einer JSON-Datei. Alle Einstellungen werden automatisch angewendet.
• Design zurücksetzen – setzt alle Daten und Einstellungen auf die Standardwerte zurück (nach Bestätigung).