HTML-Vorlagen | PDF CreateMate

Erstelle eine Vorlage aus HTML und CSS statt aus einem Word-Dokument. HTML-Vorlagen werden direkt in PDF umgewandelt und geben dir volle Kontrolle über das Markup.

Eine HTML-Vorlage hinzufügen

Klicke unter Vorlagen auf Vorlagen-Builder.
Wähle HTML als Vorlagenquelle.
Entweder:
- Datei hochladen: Ziehe eine .html- oder .htm-Datei (bis 10 MB) hinein, oder
- HTML-Code schreiben: Füge dein HTML im Code-Editor ein oder tippe es dort.
PDF CreateMate analysiert das HTML, listet die gefundenen Platzhalter auf und zeigt Kompatibilitätswarnungen an.
Durchlaufe die weiteren Builder-Schritte wie bei jeder anderen Vorlage. Siehe Vorlage hochladen.

Platzhalter

Verwende dieselbe Platzhalter-Syntax wie in Word-Vorlagen:

<p>Dear {{ firstname }} {{ lastname }},</p>

<p>Your order total is {{ amount | currency:EUR }}.</p>

Kopiere Platzhalter von der Seite Eigenschaften, damit sie den internen Namen jeder Eigenschaft verwenden. Formatierer und Standardwerte funktionieren auch in HTML-Vorlagen.

Live-Vorschau

Der Code-Editor zeigt dein HTML beim Tippen neben einer Vorschau. Platzhalter erscheinen in der Vorschau wie geschrieben und werden beim Generieren eines Dokuments durch echte Werte ersetzt. Um das Ergebnis mit HubSpot-Daten zu prüfen, generiere einen Test im Schritt Test.

Kompatibilitätswarnungen

HTML-Vorlagen werden mit DOMPDF gerendert, das die meisten HTML- und CSS-Funktionen unterstützt, aber nicht alles, was ein Browser kann. Der Builder warnt dich, wenn er Folgendes findet:

Warnung	Was du stattdessen tun solltest
Flexbox oder CSS Grid (`display: flex` / `display: grid`)	Verwende Tabellen für das Layout
`position: fixed`	Wird für Kopf- und Fußzeilen nicht unterstützt; platziere sie im normalen Dokumentfluss
Externe Schriftarten (`@font-face`, Google Fonts)	Verwende Web-Safe-Schriftarten oder Base64-eingebettete Schriftarten
Hintergrundbilder (`background: url(...)`)	Verwende `<img>`-Tags
Externe Bilder (`<img src="https://...">`)	Bette Bilder als Base64-Data-URIs ein, damit sie immer geladen werden
JavaScript (`<script>`)	Wird nicht unterstützt; Skripte werden entfernt
Kein `DOCTYPE` oder `<html>`-Tag	Füge eine vollständige HTML-Dokumentstruktur hinzu, für ein einheitliches Rendering

Warnungen hindern dich nicht daran, die Vorlage zu speichern. Sie weisen auf Teile deines HTML hin, die im PDF möglicherweise anders aussehen. Generiere daher einen Test, um das Ergebnis zu prüfen.

Schriftarten

Verwende Web-Safe-Schriftarten wie Arial, Helvetica, Times New Roman oder DejaVu Sans, oder bette eine Schriftart als Base64 in eine @font-face-Regel ein. Externe Schriftart-URLs werden möglicherweise nicht geladen. Siehe Schriftarten einbetten.

Versionsverlauf

Hochgeladene HTML-Dateien werden wie Word- und Google-Docs-Vorlagen im Versionsverlauf gespeichert. HTML-Code, den du in den Editor einfügst, wird nicht versioniert. Bewahre daher eine Kopie deines Codes auf, falls du eine frühere Version benötigst.

HTML-Vorlagen Neu