HTML E-Mail Signaturen erstellen

---

---

Auf WordToHTML.net gibt es ebenfalls mehrere Möglichkeiten, eine HTML-E-Mail-Signatur zu erstellen:

1. Erstellen Sie Ihre E-Mail-Signatur mit dem E-Mail-Signatur-Generator auf WordToHTML.net.
2. Gestalten Sie Ihre E-Mail-Signatur von Grund auf neu, indem Sie den gesamten Text manuell im Visual Editor eingeben.
3. Erstellen Sie eine HTML-E-Mail-Signatur mithilfe unserer integrierten Vorlagen.
4. Sie können den HTML-Code einer Signatur, die Sie auf einer anderen Website zur Erstellung von Signaturen erstellt haben, in unseren HTML-Editor einfügen und diesen dann anpassen (Text ändern, ein Foto oder Logo hinzufügen usw.).
5. Nutzen Sie unseren AI Writer, um einen Beispielcode für eine HTML-Signatur zu generieren.

So gestalten Sie eine HTML-E-Mail-Signatur manuell von Grund auf

Wir empfehlen, eine Signatur in einer Tabelle zu erstellen. Wenn Sie beispielsweise eine Signatur erstellen möchten, bei der Ihr Foto auf der linken Seite und alle anderen Kontaktdaten auf der rechten Seite stehen, können Sie zunächst eine Tabelle mit zwei Spalten und einer Zeile erstellen:

Setzen Sie dann den Cursor in die linke Zelle dieser Tabelle und laden Sie Ihr Foto hoch oder fügen Sie es ein. Wir empfehlen, entweder ein kleines Foto hochzuladen oder die Größe beim Hochladen anzupassen:

Wenn Ihr Foto groß ist, zeigt Ihnen unsere Website automatisch ein Modalfenster an, in dem Sie die Größe anpassen können. Wir empfehlen, die Breite oder Höhe des Fotos auf etwa 100–200 Pixel anzupassen.

Unten sehen Sie die in der Größe angepasste Bilddatei, eine kleine Datei mit einer Größe von 6,6 KiB (Kilobyte) und einer Auflösung von 154 × 154 Pixel. Je nach Größe Ihres eingereichten Fotos müssen Sie die Größe mit dem Schieberegler auf der linken Seite anpassen, bis Sie ein kleines Foto sehen, das Sie in Ihrer Signatur verwenden möchten. Klicken Sie anschließend auf die blaue Schaltfläche „Größenangepasstes Bild einfügen“.

Danach sehen Sie Ihr Foto in der linken Tabellenzelle:

Wenn du im visuellen Editor ein großes Foto siehst, klicke einfach darauf und passe die Größe wie im obigen Screenshot gezeigt auf eine kleine Größe an (wir empfehlen eine Breite/Höhe von 100–200 Pixel).

Wir empfehlen, die Tabellenbreite auf 500px (-100px) festzulegen, indem Sie den Cursor in eine beliebige Tabellenzelle setzen und dann auf das Symbol „Tabellenformatierung“ klicken:

Geben Sie dann eine Tabellenbreite wie z. B. 500 px ein und klicken Sie auf „OK“:

Sie können das Foto zentrieren, indem Sie darauf klicken, dann „Anzeige: Text umbrechen“ auswählen und anschließend auf das Zentrierungssymbol klicken. Außerdem können Sie die Tabellenzelle mit dem Foto verkleinern, indem Sie eine horizontale Linie in der Mitte nach links ziehen, wie im Screenshot unten gezeigt.

Wenn du das Foto abgerundet haben möchtest, kannst du optional unseren Bildeditor verwenden. Klicke auf das Foto und dann auf das Bildsymbol:

Gehen Sie dann zum Abschnitt „Anpassen“, wählen Sie „Auf Ellipse zuschneiden“ aus und klicken Sie anschließend auf die Schaltfläche „Speichern“:

Anschließend müssen Sie das PNG-Format auswählen – andernfalls wird Ihrem Bild ein schwarzer Hintergrund hinzugefügt – und auf die Schaltfläche „Speichern“ klicken:

Anschließend sollte im visuellen Editor ein abgerundetes Foto zu sehen sein:

Geben Sie anschließend alle Ihre Kontaktdaten ein und gestalten Sie das Design nach Belieben in der rechten Zelle. Tipp: Standardmäßig erstellt der visuelle Editor beim Drücken der Eingabetaste einen neuen Textabsatz mit Zeilenabstand. Wenn Sie jedoch die Umschalttaste gedrückt halten und die Eingabetaste drücken, wird ein Zeilenumbruch eingefügt, der kaum zusätzlichen Abstand zwischen den Zeilen erzeugt.

Du kannst deine Signatur testen, indem du sie an dein E-Mail-Programm sendest oder in einem Browser-Tab in der Vorschau anzeigst usw.

Optional kannst du Symbole mit Links zu deinen Social-Media-Profilen oder beliebigen Websites hinzufügen:

Sobald du mit deiner Signatur zufrieden bist, kannst du sie online auf WordToHTML speichern oder in die Zwischenablage kopieren und in dein E-Mail-Programm einfügen.

Gehen Sie beispielsweise in Gmail zu „Einstellungen“ und suchen Sie im Abschnitt „Allgemein“ den Punkt „Signatur“; erstellen Sie dort eine neue Signatur oder bearbeiten Sie die vorhandene.

Füge anschließend den HTML-Code von WordToHTML.net wie unten gezeigt in das Textfeld für die Signatur ein, wähle diese Signatur „für neue E-Mails“ aus und klicke unten auf der Einstellungsseite auf die Schaltfläche „Änderungen speichern“.

Wenn beim Erstellen einer neuen E-Mail in Gmail alles geklappt hat, wird Ihre Signatur wie unten gezeigt angezeigt:

So erstellen Sie eine HTML-E-Mail-Signatur aus einer integrierten Vorlage

Sie müssen lediglich auf ein Symbol klicken, um die HTML-Vorlage aus der Symbolleiste auszuwählen:

Wählen Sie anschließend Ihre Signaturvorlage aus:

Sobald Sie die Vorlage ausgewählt haben, können Sie den Inhalt im visuellen Editor bearbeiten:

Ersetzen Sie das Platzhalterbild durch Ihr eigenes Bild im JPG- oder PNG-Format. Wir raten davon ab, Bilder einzubetten oder das SVG-Format zu verwenden, da einige E-Mail-Clients dies nicht unterstützen.

Wenn Sie Ihrer Signatur weitere Symbole hinzufügen möchten (z. B. Links zu sozialen Medien), empfehlen wir Ihnen, Symbole von der Website „Icons“ zu verwenden. Alternativ können Sie PNG-Symbole vom „Icon Finder“ herunterladen und auf unsere Website hochladen.

Sobald Sie Ihre Signatur erstellt haben, können Sie diese kopieren und in Ihr E-Mail-Programm einfügen:

---

Sie können unser AI Writer-Tool nutzen, um eine Signaturvorlage für sich zu erstellen, müssen jedoch die Eingabeaufforderung für die KI genauer formulieren, um die gewünschten Ergebnisse zu erhalten.

Beispielsweise eine KI-Anweisung wie diese:

Erstelle eine HTML-Signatur für einen CEO unter Verwendung einer Tabelle mit einem Logo auf der linken Seite und meinen Informationen auf der rechten Seite. Bitte verwende CSS ausschließlich als Inline-Stile.

Dadurch sollte eine ähnliche HTML-Signatur generiert werden. Um Ihr Logo einzufügen, klicken Sie bitte auf den Bildplatzhalter und anschließend auf das Symbol „Ersetzen“. Wählen Sie dann entweder das bereits hochgeladene Logo aus oder laden Sie ein neues hoch und wählen Sie es aus.

Wir empfehlen, den Ganzseitenmodus zu deaktivieren, um nur den Haupt-HTML-Code anzuzeigen und zu kopieren:

Sobald Sie das Logo-Bild aktualisiert haben, sieht die Signatur wie unten dargestellt aus. Passen Sie die Signaturdaten nach Bedarf an, kopieren Sie sie dann in die Zwischenablage und fügen Sie sie in einen beliebigen E-Mail-Client ein.

---

Häufig gestellte Fragen zu HTML-E-Mail-Signaturen

Welches Bildformat eignet sich am besten für eine E-Mail-Signatur?

JPG oder PNG sind die sicherste Wahl für Fotos und Logos in E-Mail-Signaturen. SVG wird nicht empfohlen, da viele E-Mail-Clients (einschließlich Outlook) dieses Format nicht zuverlässig darstellen und es das Layout der Signatur vollständig zerstören kann. PNG eignet sich am besten, wenn Sie einen transparenten Hintergrund benötigen, beispielsweise für ein Logo ohne weißen Rahmen.

Wie groß sollte ein Bild für eine E-Mail-Signatur sein?

Für ein Profilfoto oder ein Porträtbild sind 100–200 Pixel in der Breite oder Höhe ideal. Größere Bilder verlangsamen das Laden der E-Mail und können im Posteingang des Empfängers überdimensioniert wirken. Achten Sie auch auf eine geringe Dateigröße – streben Sie weniger als 10–15 KB pro Bild an, damit die Signatur auf allen Geräten und in allen E-Mail-Programmen schnell geladen wird.

Wie breit sollte eine Tabelle in einer HTML-E-Mail-Signatur sein?

500 px (plus/minus 100 px) sind eine sichere Standardbreite. Diese passt problemlos in die meisten Vorschaufenster und Lesebereiche von E-Mail-Clients, ohne dass horizontales Scrollen erforderlich wird, und lässt dennoch genügend Platz für ein Foto oder Logo neben den Kontaktdaten.

Sollte ich für eine HTML-E-Mail-Signatur Inline-CSS verwenden?

Ja. E-Mail-Clients entfernen oder ignorieren style-Blöcke und externe Stylesheets, daher muss das gesamte Styling als Inline-CSS direkt in jedes HTML-Element geschrieben werden. Dies ist auch der Grund, warum die Erstellung von Signaturen mit Tabellen (anstelle moderner CSS-Layoutmethoden wie Flexbox oder Grid) nach wie vor der zuverlässigste Ansatz für E-Mail-Kompatibilität ist.

Wie füge ich eine HTML-Signatur in Gmail hinzu?

Kopieren Sie den fertigen HTML-Code Ihrer Signatur in die Zwischenablage. Gehen Sie dann in Gmail zu „Einstellungen“ → „Alle Einstellungen anzeigen“ → „Allgemein“ → „Signatur“, erstellen oder bearbeiten Sie eine Signatur und fügen Sie den Code in das Signaturfeld ein. Wählen Sie sie als Standard-Signatur für neue E-Mails (und auf Wunsch auch für Antworten und Weiterleitungen) aus und klicken Sie anschließend unten auf der Seite auf „Änderungen speichern“.

Kann ich eine HTML-E-Mail-Signatur ohne Programmierkenntnisse erstellen?

Ja. Sie müssen den HTML-Code nicht manuell schreiben – Sie können einen visuellen Drag-and-Drop-Editor verwenden, von einer integrierten Signaturvorlage ausgehen oder ein KI-Writer-Tool nutzen, das den HTML-Code anhand einer Textbeschreibung für Sie generiert (zum Beispiel: „Erstelle eine CEO-Signatur mit einem Logo auf der linken Seite und Kontaktdaten auf der rechten Seite“). Alle drei Methoden liefern gebrauchsfertigen HTML-Code, den Sie kopieren und in Ihren E-Mail-Client einfügen können.

Warum sieht mein Foto im Signatur-Editor zu groß aus?

Die meisten hochgeladenen Fotos stammen direkt von einem Smartphone oder einer Kamera und haben eine viel höhere Auflösung, als für eine E-Mail-Signatur erforderlich ist. Verwenden Sie das integrierte Tool zur Bildgrößenanpassung, um das Bild vor dem Einfügen auf etwa 100–200 Pixel zu verkleinern, anstatt es in voller Größe hochzuladen und anschließend visuell zu verkleinern – so bleibt die Dateigröße gering und die Signatur wird schnell geladen.

Wie erstelle ich ein rundes (abgerundetes) Foto in meiner Signatur?

Verwenden Sie beim Hochladen Ihres Fotos unseren Bildausschnitt-Editor mit dem Ellipsen-/Kreis-Ausschnittwerkzeug.

---