Vorlagen

Vorlagen bestimmen, wie Ihre Rechnungen und Kontoauszüge als PDF-Dokumente aussehen. Sie erstellen sie mit HTML, CSS und Jinja2-Syntax — und docs101 rendert sie direkt in pixelgenaue PDFs. Ob Sie ein vorgefertigtes Design aus der Bibliothek wählen oder ein eigenes von Grund auf erstellen — Sie haben volle Kontrolle über jedes Detail: Schriftarten, Farben, Abstände, Layout und Inhaltslogik.

Das bedeutet: Ihre Dokumente entsprechen exakt Ihrer Marke — keine Kompromisse. Sie bestimmen die HTML-Struktur, schreiben Ihr eigenes CSS und nutzen bedingte Logik, damit sich die Ausgabe automatisch an jede Rechnung anpasst.

Was sind Vorlagen?

Eine Vorlage ist ein wiederverwendbares Dokumentdesign, das in docs101 gespeichert ist. Jede Vorlage enthält mehrere bearbeitbare Abschnitte:

• Kopfzeile: Firmenlogo, Name und Branding am oberen Rand jeder Seite
• Rechnungsinhalt: Der Hauptteil — Positionstabelle, Summen, Kundendetails
• Kontoauszugsinhalt: Ein alternativer Hauptteil für die Erstellung von Kontoauszügen
• Fußzeile: Zahlungsbedingungen, Bankverbindung, rechtliche Hinweise am unteren Rand jeder Seite
• CSS: Alle Gestaltung — Schriftarten, Farben, Abstände, Layout
• Variablen: JSON-Metadaten, die Datenfelder (Rechnung, Kunde, Unternehmen, Positionen) den Platzhaltern in der Vorlage zuordnen
• Übersetzungen: JSON-basierte Übersetzungsschlüssel für Mehrsprachigkeit

Vorlagentypen

docs101 unterstützt zwei Dokumenttypen innerhalb einer einzigen Vorlage:

• Rechnungen: Professionelle Rechnungen mit Positionen, USt.-Aufschlüsselung, Summen und Zahlungsinformationen
• Kontoauszüge: Kundentransaktionsverlauf mit Eröffnungs-/Schlusssaldo und laufenden Summen

Jede Vorlage hat separate Inhaltsabschnitte für Rechnungen und Kontoauszüge, sodass eine Vorlage für beide Zwecke dienen kann.

Wichtige Funktionen

Volle Designkontrolle

Anders als starre Template-Builder, die Sie auf Drag-and-Drop beschränken, gibt Ihnen docs101 direkten Zugriff auf HTML und CSS Ihrer Dokumente. Das bedeutet:

• Exakte Markentreue — verwenden Sie Ihre Corporate-Schriftarten, -Farben und -Layouts bis auf den Pixel genau
• Intelligente Vorlagen — blenden Sie Abschnitte bedingt ein oder aus, basierend auf Rechnungsdaten (z. B. Reverse-Charge-Hinweise, Skonto-Staffeln, USt-Aufschlüsselungen bei gemischten Steuersätzen)
• Seitenlayout kontrollieren — setzen Sie individuelle Ränder, Kopf- und Fußzeilen die sich auf jeder Seite wiederholen, mit automatischer Seitennummerierung
• Zahlenformate nach Wunsch — Datumsangaben, Währungen und Dezimalformate passen sich Ihren Firmeneinstellungen an
• Mehrsprachigkeit — das integrierte Übersetzungssystem rendert dieselbe Vorlage auf Englisch, Deutsch oder jeder Sprache, die Sie konfigurieren

Template IDE

Die integrierte Template IDE bietet eine dreispaltige Bearbeitungsoberfläche:

• Variablenseitenleiste (links): Verfügbare Datenfelder nach Kategorie durchsuchen — klicken Sie auf eine Variable, um sie an der Cursorposition einzufügen
• Code-Editor (Mitte): HTML und CSS mit CodeMirror-Syntaxhervorhebung bearbeiten, organisiert in Registerkarten für Kopfzeile, Inhalt, Fußzeile, Kontoauszugsinhalt, CSS und Übersetzungen
• Live-PDF-Vorschau (rechts): Eine gerenderte PDF-Vorschau, die beim Speichern aktualisiert wird

Jinja2-Vorlagensyntax

Vorlagen verwenden Jinja2 für dynamische Inhalte:

• Variablen: {{ company.name }}, {{ invoice.total }}
• Schleifen: {% for position in positions %}...{% endfor %}
• Bedingungen: {% if customer.vat_id %}...{% endif %}
• Übersetzungsfunktion: {{ t('invoice_title') }}

Ausrichtung

Vorlagen unterstützen sowohl Hochformat als auch Querformat, wählbar beim Erstellen oder Bearbeiten einer Vorlage.

Leitfaden-Übersicht

Dieser Abschnitt behandelt alles, was Sie für die Arbeit mit Vorlagen benötigen:

Vorlage auswählen

Die Vorlagenbibliothek durchsuchen, Designs in der Vorschau ansehen und eine Standardvorlage für Ihre Rechnungen festlegen.

Vorlage anpassen

Die Template IDE verwenden, um HTML-Struktur, CSS-Gestaltung, Variablen und Jinja2-Bedingungen und -Schleifen zu bearbeiten.

Vorlagenübersetzungen

Mehrsprachigkeit mit JSON-basierten Übersetzungsschlüsseln und der t()-Funktion hinzufügen.

Von Grund auf erstellen

Eine vollständige Vorlage von Grund auf aufbauen — Kopfzeile, Inhalt, Fußzeile, CSS, Variablen und Übersetzungen.

Demnächst: Weitere Dokumenttypen

Aktuell decken Vorlagen Rechnungen und Kontoauszüge ab. Wir arbeiten aktiv daran, die Vorlagenunterstützung auf den gesamten Transaktionszyklus auszuweiten:

• Gutschriften / Stornorechnungen — erstellen Sie professionell formatierte Gutschriften, die zu Ihrem Rechnungsdesign passen
• Angebote — senden Sie gebrandete Angebote an Interessenten und wandeln Sie sie mit einem Klick in Rechnungen um

So behalten Sie ein einheitliches Erscheinungsbild über alle Dokumente hinweg — vom ersten Angebot bis zum letzten Kontoauszug.

Erste Schritte

Wenn Sie neu bei Vorlagen sind, beginnen Sie mit Vorlage auswählen, um zu sehen, was verfügbar ist. Gehen Sie dann zu Vorlage anpassen, um das Design an Ihre Marke anzupassen.

Für ein tiefes Verständnis der Vorlagensyntax und -architektur gehen Sie direkt zu Von Grund auf erstellen.

Best Practices

Design

• Halten Sie Vorlagen übersichtlich und auf Lesbarkeit fokussiert
• Verwenden Sie konsistente Schriftarten und Farben, die zu Ihrer Markenidentität passen
• Sorgen Sie für ausreichend Weißraum für ein professionelles Erscheinungsbild
• Testen Sie das gerenderte PDF in mehreren PDF-Readern und im Druck

Code-Qualität

• Verwenden Sie semantische HTML-Tags für die Dokumentstruktur
• Definieren Sie wiederverwendbare CSS-Klassen statt Inline-Stile
• Verwenden Sie beschreibende Klassennamen (z.B. .invoice-totals statt .box1)
• Halten Sie CSS nach Abschnitt organisiert mit Kommentaren

Übersetzungen

• Übersetzen Sie allen benutzersichtbaren Text — mischen Sie keine Sprachen in einem Dokument
• Verwenden Sie konsistente, beschreibende Namen für Übersetzungsschlüssel
• Testen Sie mit Kunden in jeder unterstützten Sprache vor der Bereitstellung

Häufige Aufgaben

Aufgabe	Leitfaden
Vorlage durchsuchen und auswählen	Vorlage auswählen
Farben, Schriftarten oder Layout ändern	Vorlage anpassen
Mehrsprachigkeit hinzufügen	Vorlagenübersetzungen
Eigenes Design von Grund auf erstellen	Von Grund auf erstellen

---

Bereit loszulegen? Beginnen Sie mit Vorlage auswählen und erkunden Sie die Möglichkeiten.