Zum Hauptinhalt springen

Eigene Vorlage erstellen

Dieser Leitfaden führt Sie durch die Erstellung einer individuellen Rechnungsvorlage. Sie starten mit einer bestehenden Vorlage und passen sie an Ihre Anforderungen an — Kopfzeile, Inhalt, Fußzeile, CSS-Gestaltung und Übersetzungen.

Ausgangspunkt: Bestehende Vorlage duplizieren​

Der effizienteste Weg zu einer eigenen Vorlage ist, ein bestehendes Design zu duplizieren und anzupassen:

  1. Gehen Sie zum Bereich Vorlagen
  2. Finden Sie eine Vorlage, die Ihrem Ziel am nächsten kommt
  3. Klicken Sie auf Duplizieren, um eine eigene Kopie zu erstellen
  4. Benennen Sie sie um (z. B. "Meine Rechnungsvorlage")
  5. Öffnen Sie sie in der Template IDE

So haben Sie eine funktionierende Basis mit allen Abschnitten, Variablen und Übersetzungen. Sie können jeden Teil ändern — oder ganze Bereiche ersetzen — ohne bei Null zu beginnen.

Warum nicht leer starten?

docs101 bietet bewusst keine leere Vorlage an: Von einem funktionierenden Design auszugehen ist schneller und weniger fehleranfällig. Sie bekommen korrekte Variablenreferenzen, vollständige Übersetzungsschlüssel und eine bewährte CSS-Struktur von Anfang an.

Komplett eigenes Design gewünscht? Wenn Sie ein bestehendes PDF oder einen Designentwurf in eine docs101-Vorlage umwandeln möchten, kontaktieren Sie uns — wir konvertieren es in eine private oder öffentliche Vorlage für Sie.

Empfohlene Struktur​

Eine professionelle Rechnungsvorlage folgt typischerweise diesem Aufbau:

+---------------------------+
|  KOPFZEILE                |  Logo, Firmenname, Adresse
+---------------------------+
|  RECHNUNGS-METADATEN      |  Rechnungsnummer, Datum, Fällig
+---------------------------+
|  KUNDENABSCHNITT          |  Rechnungsempfänger, Adresse
+---------------------------+
|  POSITIONSTABELLE         |  Positionen mit Menge, Preis, Summe
+---------------------------+
|  SUMMENABSCHNITT          |  Zwischensumme, USt., Gesamtsumme
+---------------------------+
|  ZAHLUNGSINFORMATIONEN    |  Bankdaten, Zahlungsbedingungen
+---------------------------+
|  FUSSZEILE                |  Rechtlicher Hinweis, Firmeninfo
+---------------------------+

Schritt 1: Kopfzeile erstellen​

Die Kopfzeile erscheint oben auf jeder Seite. Klicken Sie auf die Registerkarte Kopfzeile in der Template IDE.

Kopfzeilen-HTML​

<div class="header-container">
  <div class="header-top">
    <div class="company-branding">
      <img src="{{ company.logo_url }}" alt="Logo" class="company-logo">
      <h1 class="company-name">{{ company.name }}</h1>
    </div>
  </div>

  <div class="invoice-title-section">
    <h2 class="invoice-title">{{ t('invoice_title') }}</h2>
  </div>

  <div class="invoice-meta">
    <div class="meta-item">
      <span class="label">{{ t('invoice_number_label') }}</span>
      <span class="value">{{ invoice.invoice_number }}</span>
    </div>
    <div class="meta-item">
      <span class="label">{{ t('date_label') }}</span>
      <span class="value">{{ invoice.invoice_date }}</span>
    </div>
    <div class="meta-item">
      <span class="label">{{ t('due_date_label') }}</span>
      <span class="value">{{ payment_terms.date }}</span>
    </div>
  </div>

  <div class="customer-section">
    <h4>{{ t('bill_to') }}</h4>
    <p class="customer-name">{{ customer.name }}</p>
    <p>{{ customer.address.street }} {{ customer.address.house_number }}</p>
    <p>{{ customer.address.zip_code }} {{ customer.address.city }}</p>
    <p>{{ customer.address.country }}</p>
    {% if customer.vat_id %}
    <p>{{ t('vat_id_label') }}: {{ customer.vat_id }}</p>
    {% endif %}
  </div>
</div>

Was dieser Code bewirkt​

  • {{ company.logo_url }}: Zeigt das Firmenlogo (eine vom Backend generierte vorzeichnete URL)
  • {{ t('invoice_title') }}: Übersetzungsschlüssel — gibt "Invoice" oder "Rechnung" aus, je nach Kundensprache
  • {{ invoice.invoice_number }}, {{ invoice.invoice_date }}: Rechnungs-Metadaten
  • {{ payment_terms.date }}: Das formatierte Fälligkeitsdatum
  • {{ customer.address.* }}: Unterfelder der Kundenadresse
  • {% if customer.vat_id %}...{% endif %}: Zeigt USt-IdNr. nur an, wenn der Kunde eine hat

Schritt 2: Rechnungsinhalt erstellen​

Der Inhaltsabschnitt ist der Hauptteil der Rechnung. Klicken Sie auf die Registerkarte Rechnungsinhalt.

Inhalts-HTML​

<table class="invoice-items">
  <thead>
    <tr>
      <th class="col-description">{{ t('col_description') }}</th>
      <th class="col-quantity">{{ t('col_quantity') }}</th>
      <th class="col-unit">{{ t('col_unit') }}</th>
      <th class="col-price">{{ t('col_unit_price') }}</th>
      <th class="col-amount">{{ t('col_total') }}</th>
    </tr>
  </thead>
  <tbody>
    {% for position in positions %}
    <tr class="{% if loop.last %}last-row{% endif %}">
      <td class="col-description">
        <strong>{{ position.title }}</strong>
        {% if position.description %}
        <div class="item-description">{{ position.description }}</div>
        {% endif %}
      </td>
      <td class="col-quantity text-right">{{ position.quantity }}</td>
      <td class="col-unit text-right">{{ position.unit }}</td>
      <td class="col-price text-right">{{ position.unit_price }}</td>
      <td class="col-amount text-right bold">{{ position.total }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<div class="invoice-totals">
  <div class="totals-row">
    <span class="label">{{ t('subtotal') }}:</span>
    <span class="amount">{{ invoice.subtotal }}</span>
  </div>

  <div class="totals-row">
    <span class="label">{{ t('vat_label') }}:</span>
    <span class="amount">{{ invoice.vat_total }}</span>
  </div>

  <div class="totals-row total-row">
    <span class="label">{{ t('total') }}:</span>
    <span class="amount">{{ invoice.total }}</span>
  </div>
</div>

{% if IS_REVERSE_CHARGE %}
<div class="reverse-charge-notice">
  <p>{{ t('reverse_charge_notice') }}</p>
</div>
{% endif %}

Was dieser Code bewirkt​

  • {% for position in positions %}...{% endfor %}: Iteriert durch jede Position
  • {{ position.title }}, {{ position.quantity }} usw.: Positionsdatenfelder
  • loop.last: Jinja2-Schleifenvariable — bei der letzten Iteration wahr, für Gestaltung der letzten Zeile
  • {% if position.description %}: Zeigt die Beschreibungszeile nur an, wenn sie existiert
  • {{ t('col_description') }}: Übersetzte Spaltenüberschrift
  • {% if IS_REVERSE_CHARGE %}: Zeigt einen Hinweis zur Steuerschuldnerschaft, wenn automatisch erkannt

Schritt 3: Fußzeile erstellen​

Die Fußzeile erscheint unten auf jeder Seite. Klicken Sie auf die Registerkarte Fußzeile.

Fußzeilen-HTML​

<div class="invoice-footer">
  {% if bank_account.iban %}
  <div class="footer-section">
    <h4>{{ t('payment_info') }}</h4>
    <p>{{ bank_account.bank_name }}</p>
    <p>IBAN: {{ bank_account.iban }}</p>
    {% if bank_account.bic %}
    <p>BIC: {{ bank_account.bic }}</p>
    {% endif %}
  </div>
  {% endif %}

  {% if payment_terms.text %}
  <div class="footer-section">
    <h4>{{ t('payment_terms_label') }}</h4>
    <p>{{ payment_terms.text }}</p>
  </div>
  {% endif %}

  <div class="footer-legal">
    <p>{{ company.name }} | {{ company.address }}</p>
    {% if company.tax_id %}
    <p>{{ t('tax_id_label') }}: {{ company.tax_id }}</p>
    {% endif %}
  </div>
</div>

Was dieser Code bewirkt​

  • {% if bank_account.iban %}: Zeigt Bankdaten nur an, wenn IBAN vorhanden ist
  • {{ payment_terms.text }}: Der vollständig formatierte Zahlungsbedingungstext (Platzhalter für Tage und Datum bereits aufgelöst)
  • {{ company.tax_id }}: Steuernummer des Unternehmens, bedingt angezeigt

Schritt 4: CSS-Gestaltung hinzufügen​

Wechseln Sie zur Registerkarte CSS, um alle Abschnitte zu gestalten.

Vollständiges CSS​

/* === GLOBALE STILE === */
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 20px;
}

/* === KOPFZEILE === */
.header-container {
  max-width: 800px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #003366;
}

.company-logo {
  max-width: 80px;
  height: auto;
}

.company-name {
  font-size: 24pt;
  font-weight: bold;
  color: #003366;
  margin: 0;
}

.invoice-title {
  font-size: 28pt;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin: 30px 0;
}

.invoice-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
}

.meta-item .label {
  font-weight: bold;
  color: #666;
}

.meta-item .value {
  font-weight: bold;
  color: #003366;
}

.customer-section {
  margin: 30px 0;
}

.customer-section h4 {
  font-size: 11pt;
  font-weight: bold;
  margin: 0 0 10px 0;
}

.customer-name {
  font-weight: bold;
}

/* === POSITIONSTABELLE === */
.invoice-items {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
}

.invoice-items thead {
  background-color: #003366;
  color: white;
}

.invoice-items th {
  padding: 12px;
  text-align: left;
  font-weight: bold;
}

.invoice-items th.col-quantity,
.invoice-items th.col-unit,
.invoice-items th.col-price,
.invoice-items th.col-amount {
  text-align: right;
}

.invoice-items td {
  padding: 12px;
  vertical-align: top;
  border-bottom: 1px solid #ddd;
}

.invoice-items td.col-quantity,
.invoice-items td.col-unit,
.invoice-items td.col-price,
.invoice-items td.col-amount {
  text-align: right;
}

.invoice-items tr:nth-child(even) {
  background-color: #f9f9f9;
}

.invoice-items tr.last-row {
  border-bottom: 2px solid #333;
}

.item-description {
  font-size: 10pt;
  color: #666;
  margin-top: 5px;
  font-style: italic;
}

.text-right { text-align: right; }
.bold { font-weight: bold; }

/* === SUMMEN === */
.invoice-totals {
  width: 50%;
  margin-left: auto;
  margin-top: 20px;
}

.totals-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.totals-row .amount {
  font-weight: 600;
  min-width: 100px;
  text-align: right;
}

.totals-row.total-row {
  font-size: 14pt;
  font-weight: bold;
  color: #003366;
  border-top: 2px solid #003366;
  border-bottom: 2px solid #003366;
  padding: 12px 0;
}

/* === FUSSZEILE === */
.invoice-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
  font-size: 10pt;
  color: #666;
}

.footer-section {
  margin-bottom: 15px;
}

.footer-section h4 {
  font-size: 10pt;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #333;
}

.footer-legal {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
  font-size: 9pt;
  color: #999;
  text-align: center;
}

.reverse-charge-notice {
  margin-top: 20px;
  padding: 10px;
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  font-size: 10pt;
}

Schritt 5: Übersetzungen hinzufügen​

Klicken Sie auf die Registerkarte Übersetzungen und geben Sie folgendes JSON ein:

{
  "en": {
    "invoice_title": "Invoice",
    "invoice_number_label": "Invoice #:",
    "date_label": "Date:",
    "due_date_label": "Due:",
    "bill_to": "Bill To",
    "vat_id_label": "VAT ID",
    "col_description": "Description",
    "col_quantity": "Qty",
    "col_unit": "Unit",
    "col_unit_price": "Unit Price",
    "col_total": "Total",
    "subtotal": "Subtotal",
    "vat_label": "VAT",
    "total": "Total Amount",
    "reverse_charge_notice": "Reverse charge: VAT to be accounted for by the recipient.",
    "payment_info": "Payment Information",
    "payment_terms_label": "Payment Terms",
    "tax_id_label": "Tax ID"
  },
  "de": {
    "invoice_title": "Rechnung",
    "invoice_number_label": "Rechnungsnummer:",
    "date_label": "Datum:",
    "due_date_label": "Fällig:",
    "bill_to": "Rechnungsempfänger",
    "vat_id_label": "USt-IdNr.",
    "col_description": "Beschreibung",
    "col_quantity": "Menge",
    "col_unit": "Einheit",
    "col_unit_price": "Einzelpreis",
    "col_total": "Summe",
    "subtotal": "Zwischensumme",
    "vat_label": "USt.",
    "total": "Gesamtsumme",
    "reverse_charge_notice": "Steuerschuldnerschaft des Leistungsempfängers.",
    "payment_info": "Zahlungsinformationen",
    "payment_terms_label": "Zahlungsbedingungen",
    "tax_id_label": "Steuernummer"
  }
}
Übersetzungsschlüssel müssen übereinstimmen

Jeder Schlüssel, den Sie mit {{ t('schlüssel_name') }} in Ihrem HTML referenzieren, muss im Übersetzungs-JSON für jede unterstützte Sprache vorhanden sein. Fehlende Schlüssel führen zu leerer Ausgabe.

Schritt 6: Vorlage testen​

Speichern und Vorschau​

  1. Klicken Sie auf Speichern in der Template IDE
  2. Die Versionsnummer wird automatisch erhöht
  3. Prüfen Sie die PDF-Vorschau im rechten Panel — sie verwendet die englischen Übersetzungen und Beispieldaten aus den Variablendefinitionen

Testrechnung erstellen​

  1. Gehen Sie zum Bereich Rechnungen
  2. Erstellen Sie eine neue Rechnung mit Beispieldaten
  3. Wählen Sie Ihre neue Vorlage
  4. Generieren Sie das PDF und überprüfen Sie es

Verifizierungs-Checkliste​

  • Logo wird korrekt angezeigt
  • Firmenname und Adresse erscheinen in der Kopfzeile
  • Rechnungsnummer, Datum und Fälligkeitsdatum werden angezeigt
  • Kundeninformationen sind korrekt und vollständig
  • Alle Positionen erscheinen mit korrekter Formatierung
  • Zwischensumme, USt. und Gesamtsumme werden angezeigt
  • Zahlungsinformationen und -bedingungen erscheinen in der Fußzeile
  • Keine Übersetzungsschlüssel fehlen (keine leeren Beschriftungen)
  • Farben und Schriftarten wirken professionell
  • Tabellen brechen nicht ungünstig über Seiten hinweg

Mehrere Sprachen testen​

  1. Erstellen Sie einen Testkunden mit Sprache Deutsch
  2. Erstellen Sie eine Rechnung für diesen Kunden mit Ihrer Vorlage
  3. Überprüfen Sie, ob alle Beschriftungen auf Deutsch erscheinen ("Rechnung", "Beschreibung", "Gesamtsumme" usw.)

Drucktest​

  1. Laden Sie das generierte PDF herunter
  2. Drucken Sie es auf Papier oder in einen PDF-Viewer
  3. Prüfen Sie Ausrichtung, Farben und Schriftdarstellung

Design anpassen​

Farbschema ändern​

Ersetzen Sie die Primärfarbe #003366 im gesamten CSS durch Ihre Markenfarbe:

.header-top { border-bottom: 2px solid #2c5aa0; }
.company-name { color: #2c5aa0; }
.invoice-items thead { background-color: #2c5aa0; }
.totals-row.total-row { color: #2c5aa0; border-color: #2c5aa0; }

Logo-Größe anpassen​

.company-logo {
  max-width: 120px;  /* Nach Bedarf erhöhen oder verringern */
}

Schriftart ändern​

body {
  font-family: 'Georgia', serif;
}

Abwechselnde Zeilenfarben​

.invoice-items tr:nth-child(even) {
  background-color: #e8f0f7;  /* Heller Blauton */
}

Best Practices​

Design​

  • Halten Sie es einfach und lesbar
  • Nutzen Sie Weißraum effektiv — überladen Sie Abschnitte nicht
  • Begrenzen Sie Ihre Palette auf 2-3 Farben
  • Machen Sie wichtige Informationen (Summen, Rechnungsnummer) visuell prominent

Code-Qualität​

  • Verwenden Sie semantische HTML-Tags
  • Behalten Sie eine konsistente Einrückung bei
  • Verwenden Sie beschreibende CSS-Klassennamen
  • Organisieren Sie CSS nach Abschnitt mit Kommentaren
  • Vermeiden Sie tief verschachtelte HTML-Strukturen

Testen​

  • Testen Sie immer mit realistischen Daten
  • Prüfen Sie in mehreren PDF-Readern
  • Testen Sie sowohl Englisch als auch Deutsch
  • Drucken Sie, um die Ausgabequalität zu überprüfen
  • Testen Sie mit verschiedenen Szenarien: mit und ohne USt., einzelne Position vs. viele Positionen, mit und ohne Reverse Charge

Ihre Vorlage ist jetzt vollständig. Für weitere Jinja2-Techniken siehe Vorlagen anpassen. Zum Hinzufügen weiterer Sprachen siehe Vorlagenübersetzungen.