Keine Werbung mögen? Gehen Werbefrei Heute 

HTML-E-Mail-Vorlage-Generator

EntwicklerText

EINGANG

Automatischer Prozess

Betreffzeile

Verwendet für die E-Mail-Tag und die Vorschau-Rendernung. </small> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailPreheader">Vorleiter</label> <div class="input-group"> <input type="text" name="ioEmailPreheader" id="ioEmailPreheader" class="form-control" placeholder="Schnellstartanleitung und was Sie nun tun sollen." aria-label="Schnellstartanleitung und was Sie nun tun sollen." value="Here is everything you need to get started." > </div> <small class="form-text form__help-text text-muted"> Kurze Zusammenfassung, die nach dem Betreff in den meisten Postfächern angezeigt wird. </small> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailFont">Schriftfamilie</label> <div class="input-group"> <select class="custom-select" id="ioEmailFont" name="ioEmailFont"> <option value="system" selected>System-/Sans-Serif</option> <option value="helvetica" >Helvetica/Arial</option> <option value="georgia" >Georgia/Serif</option> <option value="courier" >Courier/Monospace</option> </select> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailBrandColor">Markenfarbe</label> <div class="input-group"> <input type="color" name="ioEmailBrandColor" id="ioEmailBrandColor" class="form-control" data-coloris value="#464aff" > </div> <small class="form-text form__help-text text-muted"> Verwendet für Buttons und Akzente. </small> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailBgColor">Hintergrundfarbe</label> <div class="input-group"> <input type="color" name="ioEmailBgColor" id="ioEmailBgColor" class="form-control" data-coloris value="#f4f4f7" > </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailTextColor">Textfarbe</label> <div class="input-group"> <input type="color" name="ioEmailTextColor" id="ioEmailTextColor" class="form-control" data-coloris value="#333333" > </div> </div> <p class="h5 blue mb-3">Header-Block</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailHeaderEnabled" name="ioEmailHeaderEnabled" checked > <label class="custom-control-label" for="ioEmailHeaderEnabled">Header-Block einbeziehen</label> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailHeaderLogo">Logo-Text</label> <div class="input-group"> <input type="text" name="ioEmailHeaderLogo" id="ioEmailHeaderLogo" class="form-control" placeholder="Ihr Marken- oder Produktname" aria-label="Ihr Marken- oder Produktname" value="Acme" data-rules="[{"name":"ioEmailHeaderEnabled","value":["on"]}]" > </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailHeaderTagline">Untertitel</label> <div class="input-group"> <input type="text" name="ioEmailHeaderTagline" id="ioEmailHeaderTagline" class="form-control" placeholder="Optionaler kurze Untertitel" aria-label="Optionaler kurze Untertitel" value="Build things that matter" data-rules="[{"name":"ioEmailHeaderEnabled","value":["on"]}]" > </div> </div> <p class="h5 blue mb-3">Hero-Block</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailHeroEnabled" name="ioEmailHeroEnabled" checked > <label class="custom-control-label" for="ioEmailHeroEnabled">Hero-Block einbeziehen</label> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailHeroTitle">Hero-Titel</label> <div class="input-group"> <input type="text" name="ioEmailHeroTitle" id="ioEmailHeroTitle" class="form-control" value="Welcome aboard, friend!" data-rules="[{"name":"ioEmailHeroEnabled","value":["on"]}]" > </div> </div> <div class="form-group"> <label for="ioEmailHeroSubtitle">Hero-Untertitel</label> <div class="input-group"> <textarea class="form-control" name="ioEmailHeroSubtitle" id="ioEmailHeroSubtitle" rows="2" data-rules="[{"name":"ioEmailHeroEnabled","value":["on"]}]" >Thanks for signing up. Your account is ready and we have a few things to help you get the most out of it.</textarea> </div> </div> <p class="h5 blue mb-3">Bild-Block</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailImageEnabled" name="ioEmailImageEnabled" > <label class="custom-control-label" for="ioEmailImageEnabled">Bild-Block einbeziehen</label> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailImageUrl">Bild-URL</label> <div class="input-group"> <input type="url" name="ioEmailImageUrl" id="ioEmailImageUrl" class="form-control" placeholder="https://example.com/hero.png" aria-label="https://example.com/hero.png" value="https://placehold.co/560x280/png?text=Hero+Image" data-rules="[{"name":"ioEmailImageEnabled","value":["on"]}]" > </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailImageAlt">Bild-Alternativtext</label> <div class="input-group"> <input type="text" name="ioEmailImageAlt" id="ioEmailImageAlt" class="form-control" value="Product screenshot" data-rules="[{"name":"ioEmailImageEnabled","value":["on"]}]" > </div> </div> <p class="h5 blue mb-3">Textblock für den Körper</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailBodyEnabled" name="ioEmailBodyEnabled" checked > <label class="custom-control-label" for="ioEmailBodyEnabled">Textblock für den Körper einbeziehen</label> </div> </div> <div class="form-group"> <label for="ioEmailBodyText">Körpertext</label> <div class="input-group"> <textarea class="form-control" name="ioEmailBodyText" id="ioEmailBodyText" rows="4" data-rules="[{"name":"ioEmailBodyEnabled","value":["on"]}]" >Click the button below to finish setting up your account. It only takes a couple of minutes and you will be up and running in no time. If you have any questions, reply to this email and someone on our team will get back to you.</textarea> </div> <small class="form-text form__help-text text-muted"> Jede leere Zeile beginnt einen neuen Absatz. </small> </div> <p class="h5 blue mb-3">Button-Block</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailButtonEnabled" name="ioEmailButtonEnabled" checked > <label class="custom-control-label" for="ioEmailButtonEnabled">Aufforderung zum Handeln (Call-to-Action) Button einbeziehen</label> </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailButtonLabel">Button-Bezeichnung</label> <div class="input-group"> <input type="text" name="ioEmailButtonLabel" id="ioEmailButtonLabel" class="form-control" value="Get Started" data-rules="[{"name":"ioEmailButtonEnabled","value":["on"]}]" > </div> </div> <div class="form-group form-group--horizontal form-group--horizontal-3"> <label for="ioEmailButtonUrl">Button-URL</label> <div class="input-group"> <input type="url" name="ioEmailButtonUrl" id="ioEmailButtonUrl" class="form-control" value="https://example.com/getting-started" data-rules="[{"name":"ioEmailButtonEnabled","value":["on"]}]" > </div> </div> <p class="h5 blue mb-3">Trennlinie & Fußzeile</p> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailDividerEnabled" name="ioEmailDividerEnabled" checked > <label class="custom-control-label" for="ioEmailDividerEnabled">Trennlinie zwischen Körper und Fußzeile einbeziehen</label> </div> </div> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="ioEmailFooterEnabled" name="ioEmailFooterEnabled" checked > <label class="custom-control-label" for="ioEmailFooterEnabled">Fußzeilenblock einbeziehen</label> </div> </div> <div class="form-group"> <label for="ioEmailFooterText">Fußzeilen-Text</label> <div class="input-group"> <textarea class="form-control" name="ioEmailFooterText" id="ioEmailFooterText" rows="2" data-rules="[{"name":"ioEmailFooterEnabled","value":["on"]}]" >You are receiving this email because you signed up at example.com.</textarea> </div> </div> <div class="form-group"> <label for="ioEmailFooterAddress">Fußzeilen-Adresse</label> <div class="input-group"> <textarea class="form-control" name="ioEmailFooterAddress" id="ioEmailFooterAddress" rows="2" data-rules="[{"name":"ioEmailFooterEnabled","value":["on"]}]" >Acme Inc. - 123 Market Street, Suite 100, San Francisco, CA 94105</textarea> </div> </div> <input type="hidden" name="trp-form-language" value="de"/></form> </div> <div class="card-footer"> <form action="#" id="html-email-template-generator-in_footer" autocomplete="off" onsubmit="return false;" class="html-email-template-generator d-flex flex--rtl gap-2" data-trp-original-action="#"> <button class="btn btn-default" data-toggle="tooltip" title="Eingaben löschen und alle Optionen zurücksetzen" data-name="ioClearInputs" onclick="IOTools.resetForm('form.form-in'); return false;" > <span class="btn__icons"> <i class="ti ti-refresh" data-no-translation=""></i> </span> Zurücksetzen </button> <input type="hidden" name="trp-form-language" value="de"/></form> </div> </div> </div> <div class="col-md-6" data-cols="6"> <div class="card sticky-top"> <div class="card-header"> <div class="h3 card-title font-weight-bold">AUSGABE</div> <div class="card-tools"> <span data-toggle="tooltip" data-placement="left" title="Dieses Tool funktioniert direkt auf Ihrem Gerät oder in Ihrem Browser. Keine Sorge, es sendet keine Ihrer Eingabedaten über das Internet und speichert auch nichts auf unseren Servern." class="badge badge-pill badge-success"><i class="ti ti-device-desktop" data-no-translation=""></i> Client-Seite</span> <div class="dropdown d-inline-block ml-1"> <a href="#" role="button" data-toggle="dropdown" aria-expanded="false" aria-label="Werkzeugeinstellungen"> <i class="ti ti-settings" data-no-translation=""><i class="ti ti-chevron-down small" data-no-translation=""></i></i> </a> <div class="dropdown-menu"><a href="#" class="dropdown-item" onclick="IOTools.toggleFullwidth();return false;"><i class="ti ti-arrow-autofit-width" data-no-translation=""></i> <span>Breite umschalten</span></a><a href="#" class="dropdown-item" data-card-widget="maximize"><i class="ti ti-maximize" data-no-translation=""></i> <span>Vollbildmodus aktivieren/deaktivieren</span></a></div> </div> </div> </div> <div class="card-body"> <form action="#" id="html-email-template-generator-out" autocomplete="off" onsubmit="return false;" class="html-email-template-generator form-out" data-trp-original-action="#"> <div class="form-group" id="ioEmailPreview" data-name="ioEmailPreview"> <div class="email-preview-empty">Konfigurieren Sie die Blöcke auf der linken Seite, um eine Live-Vorschau hier zu sehen.</div> </div> <div class="form-group"> <label for="ioEmailHtml">Inline-CSS-E-Mail-HTML</label> <div class="input-group"> <pre class="form-control" ><code data-name="ioEmailHtml" id="ioEmailHtml" class="language-html" data-no-translation="" ></code></pre> <div class="input-group-append"> <button class="btn btn-primary" type="button" onclick="IOTools.copyCode('#ioEmailHtml'); return false;" data-toggle="tooltip" title="HTML kopieren" aria-label="HTML kopieren" > <i class="ti ti-copy" data-no-translation=""></i> </button> <button class="btn btn-primary" type="button" onclick="IOTools.downloadEmailHtml(); return false;" data-toggle="tooltip" title="Herunterladen .html" aria-label="Herunterladen .html" > <i class="ti ti-download" data-no-translation=""></i> </button> </div> </div> <small class="form-text form__help-text text-muted"> Produktionssicherer HTML-Code mit MSO-Bedingungen und Inline-Stilen für E-Mail-Client. </small> </div> <input type="hidden" name="trp-form-language" value="de"/></form> </div> </div> </div> </div> <script defer> setTimeout(() => { const highlight = () => document.querySelectorAll('pre code').forEach(el => hljs.highlightElement(el)); document.readyState === 'complete' ? highlight() : document.addEventListener('DOMContentLoaded', highlight); }, 1000); </script> <div class="aw aw-below_tool text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">ANZEIGE <a tabindex="-1" target="_blank" href="https://iotools.cloud/de/pricing/" title="Werbefrei" style="text-decoration: underline;color: #9f9f9f;">Entfernen?</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741343828950-4_123456"] { min-width: 300px; min-height: 50px; } } @media only screen and (min-width: 900px) and (min-height: 0px) { div[id^="bsa-zone_1741343828950-4_123456"] { min-width: 468px; min-height: 90px; } } </style> <div id="bsa-zone_1741343828950-4_123456"></div> </div> <div class="card card--related card--has-list"> <div class="card-header card-header--heading"> <h2 class="card-title" data-card-widget="collapse"><i class="ti ti-circles-relation" data-no-translation=""></i> Verwandte Tools</h2> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse" aria-label="Überschrift umschalten" title="Umschalten"> <i class="fas fa-minus"></i> </button> </div> </div> <div class="card-body pb-md-3 pt-0"> <p>Einige andere Tools ähnlich <b>HTML-E-Mail-Vorlage-Generator</b> die Sie vielleicht nützlich finden.</p> <div class="row"> <div class="col col-lg-4"> <div class="card card--tool card--tool-compact elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/tailwind-classes-to-css/" class="card-image card-image--icon" aria-label="Tailwind CSS-Klassen in normale CSS-Umsetzung"> <i class="ti blue" style="--icon-hex:'\eca1'" data-no-translation=""></i> </a> <a class="card-body" href="https://iotools.cloud/de/tool/tailwind-classes-to-css/"> <h3 class="h5 mb-0 black">Tailwind CSS-Klassen in normale CSS-Umsetzung<span class="io-badge io-badge--new" style="background-color: #f59e0b30;color:#f59e0b" data-toggle="tooltip" title="Neu" data-content="New"></span></h3> </a> <div class="card-footer text-muted text-xs"> <div class="d-flex"> <span data-tag-slug="developer" class="badge badge-pill mr-2 tag-ico tag-ico--orange"><i class="ti ti-tag" data-no-translation=""></i>Entwickler</span><span data-tag-slug="text" class="badge badge-pill mr-2 tag-ico tag-ico--green"><i class="ti ti-tag" data-no-translation=""></i>Text</span> </div> <span class="io-compact-bookmark ml-auto position-relative" title="Lesezeichen"> <span class="io-compact-bookmark__count" data-favorites-post-count-id="329823" data-siteid></span> <button class="io-favorite-button" aria-label="Lesezeichen" data-toggle="modal" data-target="#io-modal-login"><i class="sf-icon-bookmark"></i></button> </span> </div> </div> </div> <div class="col col-lg-4"> <div class="card card--tool card--tool-compact elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/email-signature-html-generator/" class="card-image card-image--icon" aria-label="HTML-Generator für E-Mail-Unterschrift"> <i class="ti blue" style="--icon-hex:'\eee0'" data-no-translation=""></i> </a> <a class="card-body" href="https://iotools.cloud/de/tool/email-signature-html-generator/"> <h3 class="h5 mb-0 black">HTML-Generator für E-Mail-Unterschrift<span class="io-badge io-badge--new" style="background-color: #f59e0b30;color:#f59e0b" data-toggle="tooltip" title="Neu" data-content="New"></span></h3> </a> <div class="card-footer text-muted text-xs"> <div class="d-flex"> <span data-tag-slug="developer" class="badge badge-pill mr-2 tag-ico tag-ico--orange"><i class="ti ti-tag" data-no-translation=""></i>Entwickler</span><span data-tag-slug="text" class="badge badge-pill mr-2 tag-ico tag-ico--green"><i class="ti ti-tag" data-no-translation=""></i>Text</span> </div> <span class="io-compact-bookmark ml-auto position-relative" title="Lesezeichen"> <span class="io-compact-bookmark__count" data-favorites-post-count-id="323627" data-siteid></span> <button class="io-favorite-button" aria-label="Lesezeichen" data-toggle="modal" data-target="#io-modal-login"><i class="sf-icon-bookmark"></i></button> </span> </div> </div> </div> <div class="col col-lg-4"> <div class="card card--tool card--tool-compact elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/scala-code-formatter/" class="card-image card-image--icon" aria-label="Scala-Code-Formatter (Scalafmt-Stil)"> <i class="ti blue" style="--icon-hex:'\ebcc'" data-no-translation=""></i> </a> <a class="card-body" href="https://iotools.cloud/de/tool/scala-code-formatter/"> <h3 class="h5 mb-0 black">Scala-Code-Formatter (Scalafmt-Stil)<span class="io-badge io-badge--new" style="background-color: #f59e0b30;color:#f59e0b" data-toggle="tooltip" title="Neu" data-content="New"></span></h3> </a> <div class="card-footer text-muted text-xs"> <div class="d-flex"> <span data-tag-slug="developer" class="badge badge-pill mr-2 tag-ico tag-ico--orange"><i class="ti ti-tag" data-no-translation=""></i>Entwickler</span><span data-tag-slug="text" class="badge badge-pill mr-2 tag-ico tag-ico--green"><i class="ti ti-tag" data-no-translation=""></i>Text</span> </div> <span class="io-compact-bookmark ml-auto position-relative" title="Lesezeichen"> <span class="io-compact-bookmark__count" data-favorites-post-count-id="322190" data-siteid></span> <button class="io-favorite-button" aria-label="Lesezeichen" data-toggle="modal" data-target="#io-modal-login"><i class="sf-icon-bookmark"></i></button> </span> </div> </div> </div> </div> </div> </div> <div class="card generic-content" id="tool-doc"> <div class="card-header card-header--heading"> <h2 class="card-title" data-card-widget="collapse"><i class="ti ti-book" data-no-translation=""></i> Führung</h2> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse" aria-label="Überschrift umschalten" title="Umschalten"> <i class="fas fa-minus"></i> </button> </div> </div> <div class="card-body pt-0"> <div class="toc-wrapper position-relative" style="overflow: hidden;border-radius: 10px"> <div class="position-absolute toc-image"> <img decoding="async" class="exclude--lazy-load" src="https://iotools.cloud/wp-content/uploads/2026/06/html-email-template-generator-featured-400x512.jpg" alt="HTML-E-Mail-Vorlage-Generator" title="HTML-E-Mail-Vorlage-Generator 1"> </div> <div class="toc-content position-relative" style="z-index: 1"> </div> </div> <h3 class="wp-block-heading">HTML-E-Mail-Vorlage-Generator</h3> <p>Erstellen Sie reaktive, inline-CSS-E-Mail-HTML-Dateien, indem Sie modulare Blöcke – Header, Hero, Bild, Textkörper, Button, Trennlinie und Footer – mithilfe eines Live-Desktop- und Mobilvorschau-Tools zusammensetzen. Das Ergebnis verwendet eine tabellengestützte Layout-Struktur und MSO-Bedingungen, um konsistent in Outlook, Gmail, Apple Mail und anderen E-Mail-Clienten angezeigt zu werden.</p> <h3 class="wp-block-heading">Nutzung</h3> <ul class="wp-block-list"> <li>Legen Sie den Betreff, den Vorabtext, die Schriftfamilie und Marke, Hintergrund- und Textfarben am Anfang des Formulars fest.</li> <li>Aktivieren oder deaktivieren Sie die Blöcke, die Sie einbeziehen möchten, und füllen Sie den Inhalt pro Block aus – Logo und Slogan, Hero-Überschrift und Untertitel, Bild-URL, Absatzabschnitte, Aufforderung zum Handeln, Trennlinie und Footer.</li> <li>Beobachten Sie die Live-Vorschau auf der rechten Seite. Wechseln Sie zwischen Desktop- und Mobilbreite, um beide Layouts zu überprüfen.</li> <li>Klicken Sie auf <strong>HTML kopieren</strong> um den inline-CSS-HTML-Code abzurufen oder <strong>Herunterladen .html</strong> um es als Datei zu speichern, die Sie in Ihr ESP, Ihr Transaktions- oder Kampagnen-Tool einfügen können.</li> </ul> <h3 class="wp-block-heading">Funktionen</h3> <ul class="wp-block-list"> <li><strong>Modulare Blöcke</strong> – Aktivieren oder deaktivieren Sie den Header, den Hero, das Bild, den Textkörper, den Button, die Trennlinie und den Footer unabhängig voneinander.</li> <li><strong>Inline-CSS-Ausgabe</strong> – Jede Stilregel ist eingebettet und tabellengestützt, sodass keine externen Stylesheets verwendet werden und keine falsche Darstellung in Outlook oder Gmail auftreten.</li> <li><strong>MSO-Bedingungen</strong> – Die Outlook-spezifische Markierung wird eingeschlossen, um die Breiten und Abstände auf Windows Outlook korrekt zu halten.</li> <li><strong>Live-Vorschau</strong> – Ein Desktop- (600px) und Mobilvorschau (360px) wird in einem isolierten iframe dargestellt.</li> <li><strong>Marke anpassen</strong> – Farbwaehler für die Marke, Hintergrund und Text sowie vier Schriftfamilien-Vorlagen.</li> <li><strong>Einfache Export-Funktion</strong> – Kopieren Sie den HTML-Code in die Zwischenablage oder laden Sie eine fertige Version zum Versenden herunter <code data-no-translation="">.html</code> Datei.</li> <li><strong>Laufen in Ihrem Browser</strong> – Keine Daten werden hochgeladen oder gespeichert. Die Generierung erfolgt vollständig im Client-Bereich.</li> </ul> </p> </div> </div> <div class="card generic-content" id="tool-faq"> <div class="card-header card-header--heading"> <h3 class="card-title" data-card-widget="collapse"><i class="ti" data-no-translation=""></i> Häufig gestellte Fragen</h3> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse" aria-label="Überschrift umschalten" title="Umschalten"> <i class="fas fa-minus"></i> </button> </div> </div> <div class="card-body pt-0"> <div id="rank-math-faq" class="rank-math-block"> <ol class="rank-math-list"> <li id="faq-question-1780668428000" class="rank-math-list-item"> <h4 class="rank-math-question">Warum verwenden HTML-E-Mails Tabellen anstatt moderne Flexbox- oder Grid-Layouts?</h4> <div class="rank-math-answer"> <p>Viele E-Mail-Client-Systeme – insbesondere Microsoft Outlook auf Windows – verwenden das Word-Engine, das nur sehr begrenzte CSS-Unterstützung bietet und Flexbox, Grid und die meisten Positionierungsregeln ignoriert. Verkettete HTML-Tabellen bleiben die einzige Layout-Struktur, die konsistent in allen Client-Systemen, einschließlich Gmail, Outlook, Apple Mail, Yahoo und mobiler Webmail, angezeigt wird. Deshalb sieht produzierte E-Mail-HTML wie Web-Code aus dem Jahr 2003 aus: es ist das niedrigste gemeinsame Nenner, das alle Rendering-Engines überlebt.</p> </div> </li> <li id="faq-question-1780668428001" class="rank-math-list-item"> <h4 class="rank-math-question">Was sind MSO-Bedingungen und warum brauchen E-Mails sie?</h4> <div class="rank-math-answer"> <p>MSO-Bedingungen sind HTML-Kommentare, die nur Microsoft Outlook (Word-Engine) interpretiert. Sie sehen aus wie <code data-no-translation=""></code> und ermöglichen es Ihnen, Markup oder Stile speziell für Outlook zu versenden, ohne andere Clients zu beeinflussen. Sie werden häufig verwendet, um eine feste Containerbreite mit einer Phantom-Tabelle zu definieren, VML für Buttons und Hintergründe zu beheben und Funktionen zu deaktivieren, die Outlook falsch darstellt. Ohne sie verformen oder verzerren sich Layouts oft in Outlook, selbst wenn sie überall sonst perfekt aussehen.</p> </div> </li> <li id="faq-question-1780668428002" class="rank-math-list-item"> <h4 class="rank-math-question">Warum muss das CSS in E-Mails inline statt in einer Style-Tag-Deklaration sein?</h4> <div class="rank-math-answer"> <p>Viele wichtige E-Mail-Client-Systeme – historisch besonders Gmail – entfernen <code data-no-translation=""><style></code> Blöcke oder behandeln sie sie ungleich, besonders auf Mobilgeräten und bei weitergeleiteten Nachrichten. Das Inlinesystem verschiebt jede Regel direkt auf das Element, das sie betrifft, über das <code data-no-translation="">style</code> Attribut, das jeder Client respektiert. Der Preis dafür ist eine höhere Verfassung und schwerere Wartung, weshalb Tools – einschließlich dieses Generators – existieren, um CSS-Regeln automatisch inline zu machen, ausgehend von einer höherstufigen Vorlage.</p> </div> </li> <li id="faq-question-1780668428003" class="rank-math-list-item"> <h4 class="rank-math-question">Was ist ein Vorabtext und wie beeinflusst er die Öffnungsrate von E-Mails?</h4> <div class="rank-math-answer"> <p>Der Vorabtext ist ein kurzer Textabschnitt, der nach dem Betreff in der meisten Postfachvorschauen angezeigt wird. Standardmäßig wird er aus dem ersten sichtbaren Text im E-Mail-Körper abgerufen, was oft eine Begrüßung oder eine Standardtexte ist, die den Platz verschwenden. Durch die Einführung eines versteckten Vorabtext-Elements am Anfang des HTML-Dateis wird Ihnen ermöglicht, genau zu bestimmen, was dort angezeigt wird. Ein gut formulierter Vorabtext ergänzt den Betreff und ist in den meisten A/B-Tests, die von großen ESPs durchgeführt werden, mit höheren Öffnungsquoten korreliert.</p> </div> </li> </ol> </div> </div> </div> </div> <div class="col aw--col-300 side-content"> <a href="https://iotools.cloud/de/pricing/" class="info-box mb-3" style="background-color: var(--io-color-blue, #464aff);letter-spacing:0;min-height:70px;padding-top:5px;"> <div class="info-box-content"> <span class="info-box-text text-sm white">Möchten Sie werbefrei genießen?</span> <span class="info-box-number white" style="font-weight: 500;"> <span class="white"><u>Werde noch heute werbefrei</u></span> </span> </div> <span class="info-box-icon white" style="width:50px"> <i class="ti" data-no-translation=""></i> </span> </a> <div class="card card-body pb-0"> <h2 class="h5 blue mb-1"> <i class="ti" data-no-translation=""></i> Erweiterungen installieren </h2> <p class="mb-2"> IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche </p> <div class="text-center pt-1 pb-3"> <div id="io-browser-extension-d41d8cd9" class="d-none d-lg-block"> <div class="io-browser-extension-container d-flex justify-content-center"> <a href="https://chromewebstore.google.com/detail/io-tools-quick-access/ngfigjoligkblljadlbojinhoiofkdld" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="Zu Chrome hinzufügen" style="cursor: pointer;"> Zu <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/chrome.svg" width="18" height="18" alt="Chrome-Erweiterung" class="img-fluid"> </a> <a href="https://microsoftedge.microsoft.com/addons/detail/io-tools-quick-access/daapkanhnnjodjpobfmkopolagbkcccb" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="Zu Edge hinzufügen" style="cursor: pointer;"> Zu <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/edge.svg" width="18" height="18" alt="Kantenerweiterung" class="img-fluid"> </a> <a href="https://addons.mozilla.org/en-US/firefox/addon/iotools-quick-access/" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="Zu Firefox hinzufügen" style="cursor: pointer;"> Zu <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/firefox.svg" width="18" height="18" alt="Firefox-Erweiterung" class="img-fluid"> </a> <a href="https://addons.opera.com/en/extensions/details/io-tools-quick-access/" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="Zu Opera hinzufügen" style="cursor: pointer;"> Zu <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/opera.svg" width="18" height="18" alt="Opera-Erweiterung" class="img-fluid"> </a> <style> #io-browser-extension-d41d8cd9 .io-browser-extension-container { gap: 10px; margin-left: -1px; } #io-browser-extension-d41d8cd9 .io-browser-extension-btn { display: flex; padding: 3px 5px 1px 6px;; background-color: white; border: 1px solid #dee2e6; border-radius: 12px; text-decoration: none; transition: all 0.2s ease; font-size: 12px;; color: #000!important; align-items: center; justify-content: center; gap: 2px; flex-grow: 1;; } #io-browser-extension-d41d8cd9 .io-browser-extension-btn img { transform: translateY(-1px); } #io-browser-extension-d41d8cd9 .io-browser-extension-btn:hover { background-color: #f8f9fa; border-color: #ced4da; color: #333; text-decoration: none; } </style> </div> </div> </div> </div> <div class="card card-body pb-0"> <h2 class="h5 blue mb-1"> <i class="ti" data-no-translation="">恵</i><a href="https://scoreboard.iotools.cloud/" target="_blank" rel="noopener"> Die Anzeigetafel ist eingetroffen!</a> </h2> <p class="mb-2"> <a href="https://scoreboard.iotools.cloud/" target="_blank" rel="noopener">Anzeigetafel</a> ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze! </p> </div> <div class="aw aw-side_content_1_desktop text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">ANZEIGE <a tabindex="-1" target="_blank" href="https://iotools.cloud/de/pricing/" title="Werbefrei" style="text-decoration: underline;color: #9f9f9f;">Entfernen?</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741342473519-9_123456"] { min-width: 0px; min-height: 0px; } } @media only screen and (min-width: 1370px) and (min-height: 0px) { div[id^="bsa-zone_1741342473519-9_123456"] { min-width: 200px; min-height: 250px; } } </style> <div id="bsa-zone_1741342473519-9_123456"></div> </div> <div class="card card-body pb-0"> <div class="d-flex justify-content-between align-items-center mb-3"> <h2 class="h5 blue mb-0"><i class="ti" data-no-translation=""></i> Unverzichtbare Tools</h2> <a class="text-muted small blue" href="https://iotools.cloud/de/tags/must-try/"><u>Alle</u></a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/imagekit/background-remover/" class="card-image card-image--icon" aria-label="Hintergrundentferner"> <i class="ti blue" style="--icon-hex:'\f360'" data-no-translation=""></i> </a> <span class="card-image card-image--icon" data-toggle="tooltip" title="Werkzeugsatz: ImageKit" ><i class="ti blue" style="--icon-hex:'\f360'" data-no-translation=""></i></span> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/de/tool/imagekit/background-remover/"> Hintergrundentferner </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/ai-image-editor/" class="card-image card-image--icon" aria-label="KI-Bildeditor"> <i class="ti blue" style="--icon-hex:'\fa32'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/de/tool/ai-image-editor/"> KI-Bildeditor<span class="io-badge io-badge--toolset" style="background-color: #92ff9580;color:#10a581" data-toggle="tooltip" title="Werkzeuge" data-content="Toolset"></span> </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/ai-image-generator/" class="card-image card-image--icon" aria-label="KI-Bildgenerator"> <i class="ti blue" style="--icon-hex:'\ffb0'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/de/tool/ai-image-generator/"> KI-Bildgenerator </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/imagekit/" class="card-image card-image--icon" aria-label="ImageKit"> <i class="ti blue" style="--icon-hex:'\f360'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/de/tool/imagekit/"> ImageKit<span class="io-badge io-badge--toolset" style="background-color: #92ff9580;color:#10a581" data-toggle="tooltip" title="Werkzeuge" data-content="Toolset"></span> </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/pdf-converter/compress-pdf/" class="card-image card-image--icon" aria-label="PDF Compressor"> <i class="ti blue" style="--icon-hex:'\ed44'" data-no-translation=""></i> </a> <span class="card-image card-image--icon" data-toggle="tooltip" title="Toolset: PDF-Konverter" ><i class="ti blue" style="--icon-hex:'\f7ac'" data-no-translation=""></i></span> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/de/tool/pdf-converter/compress-pdf/"> PDF Compressor </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/image-converter/" class="card-image card-image--icon" aria-label="Bildkonverter"> <i class="ti blue" style="--icon-hex:'\fd9f'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/de/tool/image-converter/"> Bildkonverter<span class="io-badge io-badge--toolset" style="background-color: #92ff9580;color:#10a581" data-toggle="tooltip" title="Werkzeuge" data-content="Toolset"></span> </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/one-time-link/" class="card-image card-image--icon" aria-label="Einmaliger Link"> <i class="ti blue" style="--icon-hex:'\f7bd'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/de/tool/one-time-link/"> Einmaliger Link </a> </div> </div> <div class="aw aw-side_content_2_desktop text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">ANZEIGE <a tabindex="-1" target="_blank" href="https://iotools.cloud/de/pricing/" title="Werbefrei" style="text-decoration: underline;color: #9f9f9f;">Entfernen?</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741342696932-0_123456"] { min-width: 0px; min-height: 0px; } } @media only screen and (min-width: 1370px) and (min-height: 0px) { div[id^="bsa-zone_1741342696932-0_123456"] { min-width: 200px; min-height: 250px; } } </style> <div id="bsa-zone_1741342696932-0_123456"></div> </div> <div class="card card-body pb-0"> <div class="d-flex justify-content-between align-items-center mb-3"> <h2 class="h5 blue mb-0"> <i class="ti" data-no-translation=""></i> Neuheiten </h2> <a class="text-muted small blue" href="https://iotools.cloud/de/tools/"><u>Alle</u></a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/carbon-footprint-estimator/" class="card-image card-image--icon" aria-label="Kohlendioxid-Fußabdruck-Estimator"> <i class="ti blue" style="--icon-hex:'\ed94'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/de/tool/carbon-footprint-estimator/"> Kohlendioxid-Fußabdruck-Estimator </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/tailwind-classes-to-css/" class="card-image card-image--icon" aria-label="Tailwind CSS-Klassen in normale CSS-Umsetzung"> <i class="ti blue" style="--icon-hex:'\eca1'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/de/tool/tailwind-classes-to-css/"> Tailwind CSS-Klassen in normale CSS-Umsetzung </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/sitemap-xml-parser/" class="card-image card-image--icon" aria-label="Sitemap XML Parser & URL Extrahierer"> <i class="ti blue" style="--icon-hex:'\eb9d'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/de/tool/sitemap-xml-parser/"> Sitemap XML Parser & URL Extrahierer </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/css-media-query-generator/" class="card-image card-image--icon" aria-label="CSS-Medienabfrage-Generator"> <i class="ti blue" style="--icon-hex:'\eb87'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/de/tool/css-media-query-generator/"> CSS-Medienabfrage-Generator </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/css-aurora-blob-generator/" class="card-image card-image--icon" aria-label="Aurora / Gradient Blob CSS Hintergrundgenerator"> <i class="ti blue" style="--icon-hex:'\eb01'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/de/tool/css-aurora-blob-generator/"> Aurora / Gradient Blob CSS Hintergrundgenerator </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/openapi-v2-to-v3-converter/" class="card-image card-image--icon" aria-label="OpenAPI v2 zu v3-Wandler"> <i class="ti blue" style="--icon-hex:'\edb2'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/de/tool/openapi-v2-to-v3-converter/"> OpenAPI v2 zu v3-Wandler </a> </div> <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon"> <a href="https://iotools.cloud/de/tool/dns-propagation-checker/" class="card-image card-image--icon" aria-label="DNS-Propagation-Prüfer"> <i class="ti blue" style="--icon-hex:'\f1e9'" data-no-translation=""></i> </a> <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/de/tool/dns-propagation-checker/"> DNS-Propagation-Prüfer </a> </div> <p class="small text-muted mb-3 text-center"><b>Aktualisieren:</b> Unser <a href="https://iotools.cloud/de/tool/carbon-footprint-estimator/" class="text-muted"><u>neuestes Werkzeug</u></a> wurde am 20. Juni 2026 hinzugefügt</p> </div> <div class="aw aw-dashboard_sidebar text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">ANZEIGE <a tabindex="-1" target="_blank" href="https://iotools.cloud/de/pricing/" title="Werbefrei" style="text-decoration: underline;color: #9f9f9f;">Entfernen?</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741781122639-0_123456"] { min-width: 300px; min-height: 50px; } } @media only screen and (min-width: 900px) and (min-height: 0px) { div[id^="bsa-zone_1741781122639-0_123456"] { min-width: 200px; min-height: 200px; } } </style> <div id="bsa-zone_1741781122639-0_123456"></div> </div> <div class="card card-body io-no-scrollbar" style="max-height:700px;"> <h2 class="h5 blue mb-3"><i class="ti" data-no-translation=""></i> Nachrichtenecke <small class="black">mit technischen Highlights</small></h2> <div data-load-more-id="side-news" class="exclude--translation" data-no-translation=""> <div class="io-loading mb-3"> <div class="io-loading__item title"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> </div> <div class="io-loading mb-3"> <div class="io-loading__item title"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> </div> <div class="io-loading mb-3"> <div class="io-loading__item title"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> <div class="io-loading__item"></div> </div> </div> <script class="exclude--lazy-load" async> // Immediately load news from session storage document.querySelectorAll('[data-load-more-id="side-news"]').forEach(function(element) { const dailyNewsHtml = sessionStorage.getItem(`dailyNewsHtml`); if (dailyNewsHtml) { element.innerHTML = dailyNewsHtml; } }); </script> <p class="text-center"> <button class="btn--load-more" data-load-more="{"target":"side-news","postType":"wprss_feed_item","offset":3}">Zeig mir mehr!</button> </p> </div> <h2 class="h5 blue text-right mt-5"><i class="ti ti-heart-handshake" data-no-translation=""></i> Beteiligen Sie sich</h2> <div class="text-right mb-4"> <p>Helfen Sie uns, weiterhin wertvolle kostenlose Tools bereitzustellen</p> <div class="d-lg-flex justify-content-end"> <a href="https://buymeacoffee.com/iotools" target="_blank" rel="noopener"><img width="180" height="50" src="https://iotools.cloud/wp-content/themes/iotools/assets/images/yellow-button.png" alt="Kauf mir einen Kaffee" class="img-fluid"></a> </div> </div> <div class="aw aw-side_content_sticky_desktop sticky-top text-center"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">ANZEIGE <a tabindex="-1" target="_blank" href="https://iotools.cloud/de/pricing/" title="Werbefrei" style="text-decoration: underline;color: #9f9f9f;">Entfernen?</a></div>  <style> @media only screen and (min-width: 0px) and (min-height: 0px) { div[id^="bsa-zone_1741342751312-1_123456"] { min-width: 0px; min-height: 0px; } } @media only screen and (min-width: 1370px) and (min-height: 0px) { div[id^="bsa-zone_1741342751312-1_123456"] { min-width: 120px; min-height: 600px; } } </style> <div id="bsa-zone_1741342751312-1_123456"></div> </div> </div> </div> </div> </main>  <footer class="main-footer text-sm text-center text-xl-left d-flex flex-xl-nowrap flex-column-reverse flex-xl-row"> <span>Copyright © 2026 <a href="https://iotools.cloud/de/" class="exclude--translation" data-no-translation=""><u>iotools.cloud</u></a>. Alle Rechte vorbehalten.</span>  <ul class="navbar-nav d-flex flex-row ml-xl-auto justify-content-center flex-wrap"> <li class="nav-item"> <a href="https://iotools.cloud/de/" class="text-muted">Heim</a> </li> <li class="nav-item"> <a href="https://iotools.cloud/de/about/" class="text-muted">Um</a> </li> <li class="nav-item"> <a href="https://iotools.cloud/de/contact/" class="text-muted">Kontakt</a> </li> <li class="nav-item"> <a href="https://iotools.cloud/de/pricing/" class="text-muted">Preise</a> </li> <li class="nav-item blue mb-2 mb-xl-0"> • </li> <li class="nav-item"><a href="https://iotools.cloud/de/community-tools/" rel="nofollow" class="text-muted">Gemeinschaftswerkzeuge</a></li> <li class="nav-item"><a href="https://iotools.cloud/de/journal/" class="text-muted">Zeitschriften-Hub</a></li> <li class="nav-item blue mb-2 mb-xl-0"> • </li> <li class="nav-item"><a href="https://iotools.cloud/de/privacy-policy/" class="text-muted">Datenschutzrichtlinie</a></li> <li class="nav-item"><a href="https://iotools.cloud/de/terms-of-service/" class="text-muted">Servicebedingungen</a></li> <li class="nav-item"><a href="https://iotools.statuspage.io/" target="_blank" rel="noopener" class="text-muted">Systemstatus</a></li> <li class="nav-item"><a href="https://iotools.cloud/de/sitemap/" class="text-muted">Sitemap</a></li> <li class="nav-item blue mb-2 mb-xl-0 d-none d-lg-block"> • </li> <li class="d-block w-100 d-lg-none"></li> <li class="nav-item"><a href="https://x.com/io_tools" target="_blank" rel="noopener" class="text-muted" aria-label="X"><i class="ti ti-brand-x" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.facebook.com/iotools.cloud" target="_blank" rel="noopener" class="text-muted" aria-label="auf facebook."><i class="ti" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.youtube.com/@io-tools" target="_blank" rel="noopener" class="text-muted" aria-label="YouTube"><i class="ti" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.tiktok.com/@iotools" target="_blank" rel="noopener" class="text-muted" aria-label="TikTok"><i class="ti" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.linkedin.com/company/io-tools/" target="_blank" rel="noopener" class="text-muted" aria-label="linkedin"><i class="ti ti-brand-linkedin" data-no-translation=""></i></a></li> <li class="nav-item"><a href="https://www.producthunt.com/products/io-tools" target="_blank" rel="noopener" class="text-muted" aria-label="Produktsuche"><i class="ti ti-brand-producthunt" data-no-translation=""></i></a></li> </ul> </footer> <div class="bsa-gap d-none d-xl-block" style="height: 110px;"> </div> <div class="bsa-gap d-xl-none" style="height: 60px;"> </div> <style> body:has(>.bsa_fixed-leaderboard[style*="display: none"]) .bsa-gap { display: none !important; } </style> </div> <template id="tp-language" data-tp-language="de_DE"></template><script type="speculationrules"> {"prerender":[{"source":"document","where":{"and":[{"href_matches":"/de/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/iotools/*","/de/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prerender, .no-prerender a"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"moderate"}]} </script> <style> #ioEmailHtml { font-size: 12px; line-height: 1.5; max-height: 320px; overflow: auto; } #ioEmailPreview { margin-bottom: 14px; border: 1px solid #ced4da; border-radius: 12px; background-color: #fff; overflow: hidden; min-height: 360px; } #ioEmailPreview .email-preview-empty { color: #6c757d; font-style: italic; padding: 24px 18px; text-align: center; font-family: var(--bs-font-sans-serif), sans-serif; } #ioEmailPreview .email-preview-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background-color: #f8f9fa; border-bottom: 1px solid #e9ecef; font-family: var(--bs-font-sans-serif), sans-serif; font-size: 0.8rem; color: #495057; } #ioEmailPreview .email-preview-header strong { font-weight: 600; color: #212529; } #ioEmailPreview .email-preview-toolbar { margin-left: auto; display: flex; gap: 4px; } #ioEmailPreview .email-preview-btn { font-size: 0.75rem; padding: 2px 8px; border: 1px solid #adb5bd; background-color: #fff; border-radius: 4px; cursor: pointer; color: #212529; } #ioEmailPreview .email-preview-btn:hover { background-color: #f1f3f5; } #ioEmailPreview .email-preview-btn.is-active { background-color: #464aff; border-color: #464aff; color: #fff; } #ioEmailPreview iframe { display: block; width: 100%; border: 0; background-color: #fff; transition: max-width 0.15s ease; } #ioEmailPreview .email-preview-stage { background-color: #eef0f3; padding: 12px; } #ioEmailPreview .email-preview-stage iframe { margin: 0 auto; background-color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } </style> <script type="text/javascript" src="https://iotools.cloud/wp-content/plugins/duracelltomi-google-tag-manager/dist/js/gtm4wp-form-move-tracker.js?ver=1.22.3" id="gtm4wp-form-move-tracker-js"></script> <script type="text/javascript" src="https://iotools.cloud/wp-content/plugins/translatepress-multilingual/assets/js/trp-clickable-ls.js?ver=2.9.12" id="trp-clickable-ls-js-js"></script> <script type="text/javascript" src="https://iotools.cloud/wp-includes/js/underscore.min.js?ver=1.13.7" id="underscore-js"></script> <script type="text/javascript" id="theme-js-js-extra"> /* <![CDATA[ */ var IOTools = {"ajaxUrl":"https://iotools.cloud/wp-admin/admin-ajax.php","assetsUrl":"https://iotools.cloud/wp-content/themes/iotools/assets/","homeUrl":"https://iotools.cloud/de/","isMobile":"","currentPostId":"314379","turnstileSiteKey":"0x4AAAAAABroE5_aI0mWeJ_q","algoliaAppId":"1P44EFZA6Z","algoliaApiKey":"430f43bbda2ef03c2d61fbdf33bae284","urlRequests":"/requests/","creditsCap":"10","pondUploader":null,"tagColors":{"Accessibility":"indigo","AI":"red","arithmetic":"blue","Art":"orange","Backend":"red","base conversion":"blue","Base64":"blue","Beta":"red","Binary":"blue","Calculator":"blue","Character Classes":"blue","Color":"yellow","Couple":"blue","Creator":"blue","Cryptography":"yellow","CSS":"indigo","CSV":"green","Data":"gray","decimal":"blue","Decode":"yellow","Decrypt":"red","Designer":"cyan","Developer":"orange","devops":"blue","DnD":"blue","Education":"lime","Encode":"indigo","Encoding":"blue","Encryption":"blue","evaluation":"blue","Fantasy":"lime","Fiction":"blue","Finance":"green","Frontend":"red","Fun":"violet","Gaming":"blue","Generator":"blue","Git":"blue","Graphics":"red","Health":"orange","hex":"blue","History":"green","HTML":"green","Ideas":"orange","Identity":"lime","Image":"orange","instant calculation":"blue","integer":"blue","IPv6":"blue","Javascript":"orange","JPG":"blue","JSON":"yellow","logarithm":"blue","Lookup":"gray","MAC address":"blue","Magic":"yellow","Markdown":"blue","Marketing":"orange","mask":"blue","Match":"blue","Math":"yellow","MD5":"indigo","Minecraft":"blue","Music":"blue","Must Try":"red","Mythical":"blue","Networking":"blue","number systems":"blue","obfuscate":"blue","octal":"blue","PDF":"yellow","Performance":"green","Planning":"yellow","PNG":"blue","privacy":"blue","Productivity":"green","programming":"blue","Random":"red","Scheduling":"blue","Science":"blue","Security":"yellow","SEO":"orange","Social":"indigo","Sports":"blue","Statistics":"green","string":"blue","SVG":"orange","sysadmin":"blue","Testing":"orange","Text":"green","Time":"blue","trigonometry":"blue","ULA":"blue","Utilities":"blue","Video":"indigo","Wellness":"orange","Wizard":"blue","World":"blue","XML":"orange","YAML":"blue"},"translations":{"copiedDeepLink":"Deep Link in die Zwischenablage kopiert!","copiedText":"In die Zwischenablage kopiert!","copiedImage":"Bild in die Zwischenablage kopiert!","generatedContentAppearsHere":"Das Ergebnis wird hier angezeigt ...","confirmOverwriteContent":"Aktuelle Inhalte werden ersetzt?","invalidBase64String":"Ung\u00fcltige Base64-Zeichenfolge","timeoutReached":"Vor dem Finden des Hashs wurde eine Zeit\u00fcberschreitung erreicht.","allCombinationsTried":"Alle Kombinationen ausprobiert, aber Hash nicht gefunden. Passen Sie die Einstellungen an und versuchen Sie es erneut.","useThisFont":"Diese Schriftart verwenden","noFileTypesDetected":"Kein Dateityp erkannt. Der Originalinhalt kann einfach eine Textdatei oder ein String sein.","noResults":"Keine Ergebnisse gefunden","loadMore":"Mehr laden","decodedString":"Decodierte Zeichenfolge","yes":"Ja","no":"NEIN","team":"Team","detectedFile":"Erkannte Datei","download":"Herunterladen","converting":"Konvertieren...","compressing":"Komprimieren...","tapToRemove":"Zum Entfernen tippen","serverUploaded":"Auf den Server hochgeladen","validationPassed":"Validierung bestanden","validationFailed":"Validierung fehlgeschlagen","validationIndependently":"Der generierte Code wird unabh\u00e4ngig validiert","pokemon":{"generation":"Generation","hp":"HP","speed":"Geschwindigkeit","attack":"Angriff","defense":"Verteidigung","spAttack":"Spezialangriff","spDefense":"Spezielle Verteidigung"},"browserInfo":{"userAgent":"Benutzeragent","language":"Sprache","windowSize":"Fenstergr\u00f6\u00dfe","pdfViewerEnabled":"PDF Viewer aktiviert","javascriptEnabled":"Javascript aktiviert","cookiesEnabled":"Cookies aktiviert","browser":"Browser","browserMajorVersion":"Hauptversion des Browsers","browserVersion":"Browserversion","layoutEngine":"Layout-Engine","deviceMemory":"Ger\u00e4tespeicher","maxTouchPoints":"Maximale Ber\u00fchrungspunkte","screenSize":"Bildschirmgr\u00f6\u00dfe","orientation":"Orientierung","colorDepth":"Farbtiefe","pixelRatio":"Pixelverh\u00e4ltnis","os":"Betriebssystem","osVersion":"Betriebssystemversion","deviceType":"Ger\u00e4tetyp","deviceVendor":"Ger\u00e4tehersteller","deviceModel":"Ger\u00e4temodell"},"splits":"Teilungen","noImagesSelected":"Bitte laden Sie mindestens eine Datei hoch.","errorOccurredAI":"Der KI-Inhalt konnte nicht abgerufen werden. Bitte versuchen Sie es erneut.","errorOccurredExtractText":"Der Dateiinhalt konnte nicht extrahiert werden. Bitte versuchen Sie es erneut.","errorOccurredPokemon":"Mit den angegebenen Kriterien wurden keine Pok\u00e9mon gefunden.","errorCannotConvert":"Konvertierung nicht m\u00f6glich","autoComplete":{"Tools":"Werkzeuge","Modules":"Module","SearchForATool":"Suchen Sie nach einem Tool, einer Kategorie oder einem Tag ...","NoToolsFoundForThisQuery":"F\u00fcr diese Abfrage wurden keine Tools gefunden.","SubmitARequest":"Anfrage einreichen","WeWillMakeIt":"und wir schaffen das!","CategoriesFilter":"Kategorien Filter","NoCategoriesFoundForThisQuery":"F\u00fcr diese Abfrage wurden keine Kategorien gefunden.","TagsFilter":"Schlagworte Filter","NoTagsFoundForThisQuery":"F\u00fcr diese Abfrage wurden keine Tags gefunden.","ToNavigate":"Navigieren","ToSelect":"zu w\u00e4hlen","ToClose":"schlie\u00dfen","ToCancel":"Stornieren"}},"defaultSwatches":["#264653","#2a9d8f","#e9c46a","rgb(244,162,97)","#e76f51","#d62828","navy","#07b","#0096c7","#00b4d880","rgba(0,119,182,0.8)"]}; //# sourceURL=theme-js-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://iotools.cloud/wp-content/themes/iotools/dist/main.min.js?ver=8cc561825f92eedc5bf2a04df7f0afad" id="theme-js-js"></script> <script type="text/javascript" src="https://iotools.cloud/wp-content/themes/iotools/dist/modules/61ea48838d56c794fb1748cfb9bebdfd.min.js?ver=f5a2016167f5a7b2b78201d36eda51ab" id="theme-js-61ea48838d56c794fb1748cfb9bebdfd-js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js?ver=8cc561825f92eedc5bf2a04df7f0afad" id="highlight-js-js"></script> <script type="text/javascript" src="https://iotools.cloud/wp-content/themes/iotools/assets/libraries/Coloris-0.24.0/dist/coloris.min.js?ver=8cc561825f92eedc5bf2a04df7f0afad" id="coloris-js-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://iotools.cloud/wp-includes/js/wp-emoji-release.min.js?ver=6.9.1"}} </script> <script type="module"> /* <![CDATA[ */ /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://iotools.cloud/wp-includes/js/wp-emoji-loader.min.js /* ]]> */ </script> <script type="text/javascript">(function (undefined) {let scriptOptions={"_localizedStrings":{"redirect_overlay_title":"Hold On","redirect_overlay_text":"You are being redirected to another page,<br>it may take a few seconds.","webview_notification_text":"The selected provider doesn't support embedded browsers!"},"_targetWindow":"prefer-popup","_redirectOverlay":"overlay-with-spinner-and-message","_unsupportedWebviewBehavior":""}; /** * Used when Cross-Origin-Opener-Policy blocked the access to the opener. We can't have a reference of the opened windows, so we should attempt to refresh only the windows that has opened popups. */ window._nslHasOpenedPopup = false; window._nslWebViewNoticeElement = null; window.NSLPopup = function (url, title, w, h) { /** * Cross-Origin-Opener-Policy blocked the access to the opener */ if (typeof BroadcastChannel === "function") { const _nslLoginBroadCastChannel = new BroadcastChannel('nsl_login_broadcast_channel'); _nslLoginBroadCastChannel.onmessage = (event) => { if (window?._nslHasOpenedPopup && event.data?.action === 'redirect') { window._nslHasOpenedPopup = false; const url = event.data?.href; _nslLoginBroadCastChannel.close(); if (typeof window.nslRedirect === 'function') { window.nslRedirect(url); } else { window.opener.location = url; } } }; } const userAgent = navigator.userAgent, mobile = function () { return /\b(iPhone|iP[ao]d)/.test(userAgent) || /\b(iP[ao]d)/.test(userAgent) || /Android/i.test(userAgent) || /Mobile/i.test(userAgent); }, screenX = window.screenX !== undefined ? window.screenX : window.screenLeft, screenY = window.screenY !== undefined ? window.screenY : window.screenTop, outerWidth = window.outerWidth !== undefined ? window.outerWidth : document.documentElement.clientWidth, outerHeight = window.outerHeight !== undefined ? window.outerHeight : document.documentElement.clientHeight - 22, targetWidth = mobile() ? null : w, targetHeight = mobile() ? null : h, left = parseInt(screenX + (outerWidth - targetWidth) / 2, 10), right = parseInt(screenY + (outerHeight - targetHeight) / 2.5, 10), features = []; if (targetWidth !== null) { features.push('width=' + targetWidth); } if (targetHeight !== null) { features.push('height=' + targetHeight); } features.push('left=' + left); features.push('top=' + right); features.push('scrollbars=1'); const newWindow = window.open(url, title, features.join(',')); if (window.focus) { newWindow.focus(); } window._nslHasOpenedPopup = true; return newWindow; }; let isWebView = null; function checkWebView() { if (isWebView === null) { function _detectOS(ua) { if (/Android/.test(ua)) { return "Android"; } else if (/iPhone|iPad|iPod/.test(ua)) { return "iOS"; } else if (/Windows/.test(ua)) { return "Windows"; } else if (/Mac OS X/.test(ua)) { return "Mac"; } else if (/CrOS/.test(ua)) { return "Chrome OS"; } else if (/Firefox/.test(ua)) { return "Firefox OS"; } return ""; } function _detectBrowser(ua) { let android = /Android/.test(ua); if (/Opera Mini/.test(ua) || / OPR/.test(ua) || / OPT/.test(ua)) { return "Opera"; } else if (/CriOS/.test(ua)) { return "Chrome for iOS"; } else if (/Edge/.test(ua)) { return "Edge"; } else if (android && /Silk\//.test(ua)) { return "Silk"; } else if (/Chrome/.test(ua)) { return "Chrome"; } else if (/Firefox/.test(ua)) { return "Firefox"; } else if (android) { return "AOSP"; } else if (/MSIE|Trident/.test(ua)) { return "IE"; } else if (/Safari\//.test(ua)) { return "Safari"; } else if (/AppleWebKit/.test(ua)) { return "WebKit"; } return ""; } function _detectBrowserVersion(ua, browser) { if (browser === "Opera") { return /Opera Mini/.test(ua) ? _getVersion(ua, "Opera Mini/") : / OPR/.test(ua) ? _getVersion(ua, " OPR/") : _getVersion(ua, " OPT/"); } else if (browser === "Chrome for iOS") { return _getVersion(ua, "CriOS/"); } else if (browser === "Edge") { return _getVersion(ua, "Edge/"); } else if (browser === "Chrome") { return _getVersion(ua, "Chrome/"); } else if (browser === "Firefox") { return _getVersion(ua, "Firefox/"); } else if (browser === "Silk") { return _getVersion(ua, "Silk/"); } else if (browser === "AOSP") { return _getVersion(ua, "Version/"); } else if (browser === "IE") { return /IEMobile/.test(ua) ? _getVersion(ua, "IEMobile/") : /MSIE/.test(ua) ? _getVersion(ua, "MSIE ") : _getVersion(ua, "rv:"); } else if (browser === "Safari") { return _getVersion(ua, "Version/"); } else if (browser === "WebKit") { return _getVersion(ua, "WebKit/"); } return "0.0.0"; } function _getVersion(ua, token) { try { return _normalizeSemverString(ua.split(token)[1].trim().split(/[^\w\.]/)[0]); } catch (o_O) { } return "0.0.0"; } function _normalizeSemverString(version) { const ary = version.split(/[\._]/); return (parseInt(ary[0], 10) || 0) + "." + (parseInt(ary[1], 10) || 0) + "." + (parseInt(ary[2], 10) || 0); } function _isWebView(ua, os, browser, version, options) { switch (os + browser) { case "iOSSafari": return false; case "iOSWebKit": return _isWebView_iOS(options); case "AndroidAOSP": return false; case "AndroidChrome": return parseFloat(version) >= 42 ? /; wv/.test(ua) : /\d{2}\.0\.0/.test(version) ? true : _isWebView_Android(options); } return false; } function _isWebView_iOS(options) { const document = (window["document"] || {}); if ("WEB_VIEW" in options) { return options["WEB_VIEW"]; } return !("fullscreenEnabled" in document || "webkitFullscreenEnabled" in document || false); } function _isWebView_Android(options) { if ("WEB_VIEW" in options) { return options["WEB_VIEW"]; } return !("requestFileSystem" in window || "webkitRequestFileSystem" in window || false); } const options = {}, nav = window.navigator || {}, ua = nav.userAgent || "", os = _detectOS(ua), browser = _detectBrowser(ua), browserVersion = _detectBrowserVersion(ua, browser); isWebView = _isWebView(ua, os, browser, browserVersion, options); } return isWebView; } function isAllowedWebViewForUserAgent(provider) { const facebookAllowedWebViews = [ 'Instagram', 'FBAV', 'FBAN' ]; let whitelist = []; if (provider && provider === 'facebook') { whitelist = facebookAllowedWebViews; } const nav = window.navigator || {}, ua = nav.userAgent || ""; if (whitelist.length && ua.match(new RegExp(whitelist.join('|')))) { return true; } return false; } function disableButtonInWebView(providerButtonElement) { if (providerButtonElement) { providerButtonElement.classList.add('nsl-disabled-provider'); providerButtonElement.setAttribute('href', '#'); providerButtonElement.addEventListener('pointerdown', (e) => { if (!window._nslWebViewNoticeElement) { window._nslWebViewNoticeElement = document.createElement('div'); window._nslWebViewNoticeElement.id = "nsl-notices-fallback"; window._nslWebViewNoticeElement.addEventListener('pointerdown', function (e) { this.parentNode.removeChild(this); window._nslWebViewNoticeElement = null; }); const webviewNoticeHTML = '<div class="error"><p>' + scriptOptions._localizedStrings.webview_notification_text + '</p></div>'; window._nslWebViewNoticeElement.insertAdjacentHTML("afterbegin", webviewNoticeHTML); document.body.appendChild(window._nslWebViewNoticeElement); } }); } } window._nslDOMReady(function () { window.nslRedirect = function (url) { if (scriptOptions._redirectOverlay) { const overlay = document.createElement('div'); overlay.id = "nsl-redirect-overlay"; let overlayHTML = ''; const overlayContainer = "<div id='nsl-redirect-overlay-container'>", overlayContainerClose = "</div>", overlaySpinner = "<div id='nsl-redirect-overlay-spinner'></div>", overlayTitle = "<p id='nsl-redirect-overlay-title'>" + scriptOptions._localizedStrings.redirect_overlay_title + "</p>", overlayText = "<p id='nsl-redirect-overlay-text'>" + scriptOptions._localizedStrings.redirect_overlay_text + "</p>"; switch (scriptOptions._redirectOverlay) { case "overlay-only": break; case "overlay-with-spinner": overlayHTML = overlayContainer + overlaySpinner + overlayContainerClose; break; default: overlayHTML = overlayContainer + overlaySpinner + overlayTitle + overlayText + overlayContainerClose; break; } overlay.insertAdjacentHTML("afterbegin", overlayHTML); document.body.appendChild(overlay); } window.location = url; }; let targetWindow = scriptOptions._targetWindow || 'prefer-popup', lastPopup = false; document.addEventListener('click', function (e) { if (e.target) { const buttonLinkElement = e.target.closest('a[data-plugin="nsl"][data-action="connect"]') || e.target.closest('a[data-plugin="nsl"][data-action="link"]'); if (buttonLinkElement) { if (lastPopup && !lastPopup.closed) { e.preventDefault(); lastPopup.focus(); } else { let href = buttonLinkElement.href, success = false; if (href.indexOf('?') !== -1) { href += '&'; } else { href += '?'; } const redirectTo = buttonLinkElement.dataset.redirect; if (redirectTo === 'current') { href += 'redirect=' + encodeURIComponent(window.location.href) + '&'; } else if (redirectTo && redirectTo !== '') { href += 'redirect=' + encodeURIComponent(redirectTo) + '&'; } if (targetWindow !== 'prefer-same-window' && checkWebView()) { targetWindow = 'prefer-same-window'; } if (targetWindow === 'prefer-popup') { lastPopup = NSLPopup(href + 'display=popup', 'nsl-social-connect', buttonLinkElement.dataset.popupwidth, buttonLinkElement.dataset.popupheight); if (lastPopup) { success = true; e.preventDefault(); } } else if (targetWindow === 'prefer-new-tab') { const newTab = window.open(href + 'display=popup', '_blank'); if (newTab) { if (window.focus) { newTab.focus(); } success = true; window._nslHasOpenedPopup = true; e.preventDefault(); } } if (!success) { window.location = href; e.preventDefault(); } } } } }); let buttonCountChanged = false; const googleLoginButtons = document.querySelectorAll(' a[data-plugin="nsl"][data-provider="google"]'); if (googleLoginButtons.length && checkWebView()) { googleLoginButtons.forEach(function (googleLoginButton) { if (scriptOptions._unsupportedWebviewBehavior === 'disable-button') { disableButtonInWebView(googleLoginButton); } else { googleLoginButton.remove(); buttonCountChanged = true; } }); } const facebookLoginButtons = document.querySelectorAll(' a[data-plugin="nsl"][data-provider="facebook"]'); if (facebookLoginButtons.length && checkWebView() && /Android/.test(window.navigator.userAgent) && !isAllowedWebViewForUserAgent('facebook')) { facebookLoginButtons.forEach(function (facebookLoginButton) { if (scriptOptions._unsupportedWebviewBehavior === 'disable-button') { disableButtonInWebView(facebookLoginButton); } else { facebookLoginButton.remove(); buttonCountChanged = true; } }); } const separators = document.querySelectorAll('div.nsl-separator'); if (buttonCountChanged && separators.length) { separators.forEach(function (separator) { const separatorParentNode = separator.parentNode; if (separatorParentNode) { const separatorButtonContainer = separatorParentNode.querySelector('div.nsl-container-buttons'); if (separatorButtonContainer && !separatorButtonContainer.hasChildNodes()) { separator.remove(); } } }) } });})();</script> <div id="io-modal-login" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-scrollable modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Anmeldung erforderlich</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"> <i class="ti ti-x" aria-hidden="true" data-no-translation=""></i> </button> </div> <div class="modal-body"> Bitte <a class="white bg-blue rounded p-1 pl-1 pr-2" rel="nofollow" href="https://iotools.cloud/de/account/"><i class="ti ti-user-circle" data-no-translation=""></i> anmelden</a> oder <a rel="nofollow" href="https://iotools.cloud/de/register/"><u>registrieren</u></a> um Ihre Lesezeichen zu verwalten. Es ist kostenlos! </div> </div> </div> </div> <div id="io-modal-request" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-scrollable modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Anmeldung erforderlich</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"> <i class="ti ti-x" aria-hidden="true" data-no-translation=""></i> </button> </div> <div class="modal-body"> Bitte <a class="white bg-blue rounded p-1 pl-1 pr-2" rel="nofollow" href="https://iotools.cloud/de/account/?redirect_to=https://iotools.cloud/de/account/request-tool/"><i class="ti ti-user-circle" data-no-translation=""></i> anmelden</a> oder <a rel="nofollow" href="https://iotools.cloud/de/register/?redirect_to=https://iotools.cloud/de/account/request-tool/"><u>registrieren</u></a> um eine Werkzeuganfrage zu senden. Es ist kostenlos! </div> </div> </div> </div> <div id="io-modal-community" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-scrollable modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Anmeldung erforderlich</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"> <i class="ti ti-x" aria-hidden="true" data-no-translation=""></i> </button> </div> <div class="modal-body"> Bitte <a class="white bg-blue rounded p-1 pl-1 pr-2" rel="nofollow" href="https://iotools.cloud/de/account/?redirect_to=https://iotools.cloud/de/account/byo/"><i class="ti ti-user-circle" data-no-translation=""></i> anmelden</a> oder <a rel="nofollow" href="https://iotools.cloud/de/register/?redirect_to=https://iotools.cloud/de/account/byo/"><u>registrieren</u></a> um Ihr eigenes Tool zu erstellen. Es ist kostenlos! <div class="card mt-4 mb-0"> <div class="card-body"> <h5><i class="ti ti-info-circle" data-no-translation=""></i> Über den Build Your Own (BYO) Builder</h5> <p>Mit unserer BYO Builder-Funktion können Sie benutzerdefinierte Tools ohne Programmierkenntnisse erstellen. Sie können:</p> <ul> <li>Erstellen Sie KI-gestützte Tools mit unserer einfachen Benutzeroberfläche</li> <li>Teilen Sie Ihre Tools mit der Community</li> <li>Holen Sie sich Feedback und verbessern Sie Ihre Tools</li> <li>Helfen Sie anderen, Probleme mit Ihren Kreationen zu lösen</li> </ul> <p class="mb-0">Werden Sie Mitglied <a href="https://iotools.cloud/de/community-tools/"><u>Gemeinschaft</u></a> und beginnen Sie noch heute mit der Entwicklung von Werkzeugen, die einen Unterschied machen!</p> </div> </div> </div> </div> </div> </div> <div id="cf-turnstile" data-sitekey="0x4AAAAAABroE5_aI0mWeJ_q" data-appearance="execute"></div> </body> </html>