Nutzen Sie unseren kleinen HTML Generator, um schnell und einfach schicke Angebote für Mails zu erstellen.
Newsletter-HTML Konfigurator (Fluid-Hybrid, ohne MSO-Conditionals)
directdeal.me • Bulletproof-Button • Bild-Skalierung (%)
Eingaben
Fluid-Hybrid: 100 % Breite + zentrierendes DIV mit max-width:600px. Bild skaliert prozentual (CSS) + feste Pixelobergrenze (Attribut) für Outlook.
Generierter HTML-Code
Live-Vorschau (simuliert 600 px E-Mail-Breite)
Vorschau erscheint nach dem Generieren …
Outlook Mobile respektiert max-width auf dem umschließenden DIV; Tabellen bleiben auf width:100%.
Newsletter-HTML Konfigurator – Funktionsbeschreibung
Dieses Tool erstellt einen Outlook-sicheren HTML-Block für Produkt-Newsletter auf Basis deiner Eingaben. Es nutzt einen 600-px Hybrid-Container mit MSO-Conditional Comments und VML-Button, damit Layout und Buttons auch in Outlook-Desktop zuverlässig dargestellt werden.
So verwenden Sie das Tool
- Pflichtangaben: Produktlink und Bildlink eintragen.
- Optional: Titel, Kurzbeschreibung, Preis(e), Badge-Text, Herstellernummer (mit/ohne Link) sowie Button-Text/Farbe anpassen.
- Technik: Containerbreite (typisch 600 px) und Bildbreite (z. B. 420 px ≈ 70 %) definieren.
- Generieren: „HTML generieren“ klicken ➜ Code kopieren ➜ im Newsletter-Tool als HTML-Block einfügen.
Eingabefelder im Überblick
- Produktlink: Ziel-URL des Artikels (Shop-Detailseite).
- Bildlink: Direktlink zum Produktbild (z. B.
…imgbolt.de/…png). - Titel (H2): Überschrift im Block.
- Beschreibung (kurz): 1–3 Sätze Nutzenfokus, optional Verfügbarkeit.
- Preis / Streichpreis: Zeigt wahlweise nur Preis, Preis mit durchgestrichenem Streichpreis oder nur Streichpreis.
- Angebots-Badge: Checkbox zum Einblenden; Badge-Text frei wählbar (Standard: „ANGEBOT“).
- Herstellernummer & Link: Kleine Zeile oberhalb der Beschreibung; mit Link klickbar.
- Button-Text & Farbe: Call-to-Action und Markenfarbe (z. B. #0d345b).
- Containerbreite: Feste Breite für Outlook-Tische (empfohlen 600 px).
- Bildbreite: Feste Pixelbreite (Attribut + CSS), damit Outlook korrekt skaliert.