Elysia Tools

Durchsuche Tools, Beispiele, visuelle Erklärungen und Themenguides an einem klaren Ort.

Beliebte Kategorien

Themen

Sprache
ZHESPTRUFRDEEN

Elysia Tools

Mobile Navigation

Design

E-Mail-Signatur-HTML-Generator

· Zuletzt aktualisiert：2026-06-24

Erzeugt eine saubere, kopierfertige HTML-E-Mail-Signatur, die in Gmail, Outlook und Apple Mail korrekt dargestellt wird — mit Avatar/Logo, Social Icons (automatisch aus Ihren Links erkannt), Akzentfarbe, Hell/Dunkel/Auto-Theme und einem tabellenbasierten, E-Mail-sicheren Layout mit Inline-Styles. HTML kopieren und direkt in den Mail-Client einfügen.

Einzelheiten

Wobei dieses Tool hilft

Erstellen Sie eine professionelle E-Mail-Signatur, die überall funktioniert:

  1. Daten ausfüllen — Name, Position, Firma, E-Mail, Telefon, Website, Adresse und eine öffentliche Foto-/Logo-URL.
  2. Layout wählen — nebeneinander (Foto links mit Akzent-Trennbalken) oder gestapelt (nur Text). Ohne URL wird das Foto ausgeblendet.
  3. Gestalten — Akzentfarbe, web-sichere Schrift und Hell/Dunkel/Auto-Theme (Auto fügt einen prefers-color-scheme-Block ein, den Apple Mail beachtet).
  4. Soziale Links — LinkedIn, X, GitHub, Instagram, Facebook oder YouTube einfügen; Icons werden als E-Mail-sichere Inline-SVG-Data-URIs gerendert.
  5. HTML kopieren — eigenständige tabellarische Signatur mit Inline-Styles für Gmail/Outlook/Apple Mail.

Alles läuft lokal.

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Beispiele

Beispiele zu diesem Tool

Verwandt

Mit verwandten Tools und Themen fortfahren

Verfasst vom Elysia Tools Team
Farbe214
HTML/CSS86
Raw49
CSS48
Logo13

Leitfaden zur Tool-Nutzung

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Kategorie
Design
Eingabetypen
text, textarea, color, select
Ausgabetyp
html
Sample-Abdeckung
4
API bereit
Ja

Überblick

Der E-Mail-Signatur-HTML-Generator erstellt professionelle, tabellenbasierte Signaturen mit Inline-Styles, die in Gmail, Outlook und Apple Mail fehlerfrei dargestellt werden. Fügen Sie einfach Ihre Kontaktdaten, Social-Media-Links und ein Logo hinzu, um eine responsive Signatur im passenden Design zu generieren.

Wann verwenden

  • Wenn Sie eine professionelle E-Mail-Signatur benötigen, die in verschiedenen Mail-Clients wie Outlook, Gmail und Apple Mail einheitlich aussieht.
  • Wenn Sie Social-Media-Icons und ein Logo ohne externe Abhängigkeiten oder fehlerhafte Formatierungen in Ihre E-Mail-Fußzeile einbinden möchten.
  • Wenn Sie eine Signatur erstellen wollen, die sich automatisch an den Hell- oder Dunkelmodus des Empfängers anpasst.

So funktioniert es

  1. 1Geben Sie Ihre persönlichen Daten wie Name, Position, E-Mail-Adresse und optional eine Bild-URL für Ihr Logo ein.
  2. 2Fügen Sie Ihre Social-Media-Links hinzu, die automatisch erkannt und als E-Mail-sichere Inline-SVG-Icons eingebunden werden.
  3. 3Wählen Sie das Layout (nebeneinander oder gestapelt), die Akzentfarbe sowie das gewünschte Theme (Hell, Dunkel oder Auto).
  4. 4Kopieren Sie den generierten HTML-Code mit den integrierten Inline-Styles und fügen Sie ihn direkt in die Signatureinstellungen Ihres Mail-Clients ein.

Anwendungsfälle

  • Erstellung einer einheitlichen, markenkonformen E-Mail-Signatur für Freiberufler und Selbstständige.
  • Generierung von minimalistischen Nur-Text-Signaturen für Entwickler mit direktem Link zum GitHub-Profil.
  • Schnelles Erstellen von E-Mail-Fußzeilen mit Firmenlogo und Social-Media-Icons für Vertriebsmitarbeiter.

Beispiele

1. Professionelle Business-Signatur mit Logo

Marketing-Managerin

Hintergrund

Eine Marketing-Managerin möchte eine E-Mail-Signatur mit ihrem Porträtfoto, Firmenfarben und Social-Media-Links erstellen, die auf allen Geräten professionell aussieht.

Aufgabe

Manuell erstellte HTML-Signaturen verziehen sich oft in Outlook oder laden externe Icons nicht korrekt.

Verwendung

Sie trägt ihren Namen, ihre Position und die URL ihres Avatars ein. Unter 'Soziale Netzwerke' fügt sie ihre LinkedIn- und X-Profile hinzu und wählt ein blaues Akzent-Design im Side-by-Side-Layout.

fullName: 'Jane Doe', jobTitle: 'Product Manager', company: 'Acme Inc.', photoUrl: 'https://i.pravatar.cc/150?img=47', socials: 'linkedin.com/in/janedoe\nx.com/janedoe', accent: '#2563eb', layout: 'side', theme: 'light'

Ergebnis

Sie erhält einen sauberen HTML-Code mit einer Tabelle, der ihr Foto links und die Kontaktdaten rechts sauber getrennt darstellt, inklusive funktionierender Social-Icons.

2. Minimalistische Entwickler-Signatur im Dark Mode

Software-Entwickler

Hintergrund

Ein Entwickler bevorzugt ein schlichtes, dunkles Design für seine E-Mails, das ohne ablenkende Bilder auskommt, aber sein GitHub-Profil hervorhebt.

Aufgabe

FAQ

Unterstützt die Signatur den Dark Mode?

Ja, das 'Auto'-Theme fügt einen Medienblock für den Dunkelmodus hinzu, den Clients wie Apple Mail unterstützen. Alternativ können Sie ein festes dunkles Theme wählen.

Welche Social-Media-Plattformen werden automatisch erkannt?

Der Generator erkennt Links zu LinkedIn, X, GitHub, Instagram, Facebook und YouTube und fügt die passenden Icons ein.

Benötige ich HTML-Kenntnisse, um das Tool zu nutzen?

Nein, Sie tragen Ihre Daten einfach in die Eingabemaske ein und kopieren den fertigen HTML-Code per Klick.

Warum wird mein Foto oder Logo nicht angezeigt?

Stellen Sie sicher, dass Sie eine öffentlich zugängliche Bild-URL (z. B. auf Ihrem Webserver oder einem Bildhoster) verwenden.

Funktioniert die Signatur auch in Outlook?

Ja, das tabellenbasierte Layout und die Inline-Styles sind speziell für die Kompatibilität mit Outlook und anderen gängigen Mail-Clients optimiert.

Start
Werkzeuge3201
Beispiele593
Visualisierungen465
Dateibetrachter103
Themen233
Schlagwörter333
Bilder, Audio & Video657

Werkzeuge für Bild-, Audio- und Videobearbeitung, Konvertierung und Optimierung

Mathe, Datum & Finanzen644

Rechner, Zahlenwerkzeuge, Datumslogik, Statistik und Finanztools

Design & Farbe297

Werkzeuge für Farben, Layouts, Grafiken, visuelle Gestaltung und Designhilfen

Text & Schreiben209

Werkzeuge für Schreiben, Bereinigung, Formatierung, Extraktion und Textanalyse

Entwicklung & Web193

Entwicklerwerkzeuge, Netzwerk-Utilities, Web-Debugging und Automatisierungshelfer

Konvertierung & Kodierung175

Werkzeuge für Format-, Datei-, Archiv-, Einheiten- und Kodierungskonvertierung

FLAC/WAV-Quellen prüfen und Nachweise übergeben
Selbst gehostetes Gewinnspiel-Widget prüfen und zur Einbettung übergeben
Stripe-Codepaket prüfen und lokalen Import vorbereiten
Technische Fotoauswahl prüfen und Kandidaten zur Bearbeitung übergeben
UI-Screenshot strukturieren, prüfen und an die Entwicklung übergeben

© 2026 Elysia Tools. Alle Rechte vorbehalten.

DokumentationTarifeÜber unsNutzungsbedingungenDatenschutzerklärungCookiesKontakt
Entwicklung

HTML-Beispiele

Beispieldateien fuer den Browser-basierten HTML-Viewer

Textverarbeitung

HTML mit Bildern Proben

HTML-Quellcodeproben mit Bildern zum Testen der Extraktion

Medien

MSG-Viewer-Beispiele

Ein Outlook-MSG-E-Mail-Beispiel für die Vorschau im Browser

Textverarbeitung

Textbeispiele mit Sensiblen Daten

Text mit verschiedenen Arten sensibler Daten zum Testen der Datenmaskierung (Telefonnummern, E-Mails, Ausweise, Bankkarten)

Format Conversion

AsciiMath-/LaTeX-/MathML-Formelkonverter

Wandelt Formeln zwischen AsciiMath, LaTeX und MathML um: erkennt das Eingabeformat und erzeugt kanonisches LaTeX, annotiertes Presentation-MathML, eine best-effort-AsciiMath-Rückübersetzung, ein aria-label-Snippet für Screenreader sowie eine KaTeX-Vorschau.

Design

Bild-Palette zu Design-Tokens

Extrahiert dominante Farben per k-Means und exportiert sie als CSS-/SCSS-Variablen, Tailwind-Config oder JSON-Tokens mit Namen und Farbskala

Text Processing

HTML-Tag-Entferner

Entfernt HTML-Tags aus dem Code und extrahiert sauberen Textinhalt

Design

QR-Code-Generator

Erstellt QR-Codes aus URLs oder Text mit anpassbarer Größe und Farben

Standard-Signaturen sind oft zu bunt oder erzwingen helle Hintergründe, was im Dark Mode störend wirkt.

Verwendung

Er wählt das gestapelte Layout (stacked), stellt das Theme auf 'dark', wählt eine grüne Akzentfarbe und trägt nur seinen Namen, seine Position und seinen GitHub-Link ein.

fullName: 'Alex Chen', jobTitle: 'Staff Engineer', company: 'Nullcorp', socials: 'github.com/alexchen', accent: '#10b981', layout: 'stacked', theme: 'dark'

Ergebnis

Es wird eine kompakte, textbasierte Signatur mit dunklem Hintergrund und einem grünen GitHub-Icon generiert, die perfekt zu seinem minimalistischen Stil passt.