# Angebotsvorlage erstellen

Schritt 3: Bas-Konfiguration anpassen · Aktualisiert: 2026-02-07 · Bas Software
Webversion: https://www.bas.software/de/onboarding/schritt-3-bas-konfiguration-anpassen/angebotsvorlage-erstellen

Erstellen Sie Ihre Angebotsvorlage mit dem Drag-and-Drop-Editor. Erfahren Sie, wie Sie Blöcke hinzufügen, Variablen verwenden und Ihre Vorlage professionell gestalten.

Dokumentvorlagen bestimmen, wie Ihre Angebote, Rechnungen und Arbeitsscheine aussehen. Ihre Angebotsvorlage ist die Visitenkarte Ihres Unternehmens - jeder Kunde, der ein Angebot erhält, sieht Ihre Vorlage.

Bas verwendet einen Drag-and-Drop-Editor, mit dem Sie ohne technische Kenntnisse professionelle Vorlagen erstellen. Sie ziehen Blöcke in Ihr Dokument, füllen Variablen aus (wie Kundenname oder Angebotsnummer) und passen die Gestaltung an Ihr Corporate Design an.

---

## Schritt 1 - Vorlagen öffnen

Gehen Sie zu **Einstellungen** > **Arbeitsweise** > **Dokumentvorlagen**. Sie sehen eine Übersicht aller verfügbaren Vorlagen. Klicken Sie auf die **Angebotsvorlage** und anschließend auf das **Stift-Symbol**, um den Editor zu öffnen.

---

## Schritt 2 - Den Editor verstehen

Der Editor besteht aus drei Teilen:

| Bestandteil | Funktion |
| --- | --- |
| **Canvas (Mitte)** | Hier bauen Sie Ihre Vorlage auf, indem Sie Blöcke ziehen |
| **Blöcke (rechts)** | Alle verfügbaren Bausteine für Ihr Dokument |
| **Einstellungen (rechts)** | Gestaltung der ausgewählten Blöcke anpassen |

### Desktop- und Mobilansicht

Oben im Editor wechseln Sie zwischen **Desktop-** und **Mobilansicht**. Die meisten Kunden sehen sich Angebote am Desktop an, aber prüfen Sie immer, ob die mobile Version gut aussieht.

---

## Schritt 3 - Blöcke hinzufügen

Ziehen Sie Blöcke aus dem rechten Menü auf Ihr Canvas. Die wichtigsten Blöcke:

### Standardblöcke

| Block | Verwendung |
| --- | --- |
| **SPALTEN** | Teilen Sie Ihre Seite in mehrere Spalten auf (z. B. Logo links, Firmendaten rechts) |
| **RUBRIK** | Überschriften und Zwischenüberschriften |
| **ABSATZ** | Fließtext, wie Ihr Angebotstext |
| **BILD** | Ihr Logo oder andere Bilder |
| **BUTTON** | Schaltflächen (z. B. "Online ansehen" oder "Angebot akzeptieren") |
| **TRENNLINIE** | Trennlinien zwischen Abschnitten |
| **TABELLE** | Manuelle Tabellen (verwenden Sie dies NICHT für Angebotspositionen, dafür gibt es einen speziellen Block) |
| **HTML** | Für fortgeschrittene Nutzer: individueller HTML-Code |

### Spezielle Blöcke für Angebote

| Block | Verwendung |
| --- | --- |
| **ANGEBOTSPOSITIONEN** | Zeigt automatisch alle Angebotspositionen aus dem Vorgang an (Beschreibung, Anzahl, Betrag, Gesamtsumme, MwSt.) |
| **RECHNUNGSPOSITIONEN** | Zeigt automatisch alle Rechnungspositionen an (verwenden Sie dies in Ihrer Rechnungsvorlage) |
| **ANGEBOT STUNDENSATZ** | Zeigt Stundensatz-Informationen aus dem Angebot an |

`Achtung:` Verwenden Sie für Ihre Preistabelle immer den Block **ANGEBOTSPOSITIONEN**. NIEMALS eine manuelle Tabelle. Der Block ANGEBOTSPOSITIONEN holt die Daten automatisch aus dem Vorgang und hält alles synchron.

---

## Schritt 4 - Variablen verwenden

Variablen sind dynamische Felder, die automatisch mit Daten aus dem Vorgang gefüllt werden. Denken Sie an den Kundennamen, die Adresse oder die Angebotsnummer.

### Variablen einfügen

1. Klicken Sie in einen Textblock, in dem Sie eine Variable platzieren möchten
2. Klicken Sie in der Symbolleiste auf **Variablen** (Dropdown-Schaltfläche)
3. Wählen Sie eine Kategorie (Identität, Kunde, Angebot oder Umzug)
4. Wählen Sie die Variable aus

Die Variable erscheint als `####{{ quote.loadAddresses|trans }}` in Ihrem Text. Diese wird automatisch durch den tatsächlichen Wert ersetzt, wenn das Angebot erstellt wird.

### Verfügbare Variablen

**Identität** (Ihre Firmendaten): - Adresse - Firmenname - BTW-Nummer - E-Mail - IBAN - KvK-Nummer - Logo - Mobilnummer - Telefonnummer

**Kunde** (Kundendaten): - Anrede - Nachname - Firmenname - BTW-Nummer - E-Mail - Rechnungsansprechpartner - Rechnungsadresse (mit Untervariablen) - Hauptansprechpartner (mit Untervariablen) - Kundennummer

**Angebot**: - Angebotsnummer - Referenz - Gesamtbetrag inkl. BTW - Ablaufdatum - Freitextfelder

**Umzug**: - Vorgangsnummer - Datum des ersten Umzugstermins - Uhrzeit des ersten Umzugstermins - Ladeadresse (mit Untervariablen) - Datum des letzten Umzugstermins - Uhrzeit des letzten Umzugstermins - Entladeadresse (mit Untervariablen) - Notizen für den Kunden

`Tipp:` Die Variablennamen sind im Editor auf Englisch, aber die AUSGABE erfolgt auf Niederländisch. `####{{ quote.loadAddresses|trans }}` zeigt im generierten PDF "Laadadres: Voorbeeldstraat 10, 1234 AB Amsterdam" an.

---

## Schritt 5 - Gestaltung anpassen

Wählen Sie einen Block aus, um die Einstellungen anzupassen. Sie können Folgendes ändern:

### Textgestaltung

- Schriftart und -größe
- Fett, kursiv, unterstrichen
- Textfarbe
- Ausrichtung (links, mittig, rechts)

### Farben

- Hintergrundfarbe von Blöcken
- Textfarbe
- Rahmenfarbe

### Abstand und Raum

- Padding (Innenabstand rund um den Text)
- Margin (Außenabstand zwischen Blöcken)
- Containerraum (Breite des Blocks)

### Bilder

- Laden Sie Ihr Logo hoch
- Passen Sie die Größe an
- Legen Sie die Ausrichtung fest
- Fügen Sie einen Link hinzu (optional)

`Achtung:` Verwenden Sie für Ihr Logo vorzugsweise eine **SVG**-Datei (Vektordatei) oder eine **PNG-Datei mit transparentem Hintergrund** von mindestens 300x300 Pixeln. SVG bleibt beim Drucken scharf und skaliert perfekt.

---

## Schritt 6 - Positionen konfigurieren

Der Block **ANGEBOTSPOSITIONEN** verfügt über besondere Optionen:

### Anzeige der Positionen

Im rechten Bedienfeld stellen Sie ein: - **Summen pro Position immer ausblenden**: Blenden Sie die Summenspalte pro Position ein oder aus - **Anzahl immer ausblenden**: Blenden Sie die Anzahlspalte ein oder aus

### Optionale Positionen

Manche Angebotspositionen können als **Optional** gekennzeichnet werden. Das bedeutet, dass der Kunde beim Online-Angebot diese Position an- oder abhaken kann. Das ist praktisch für Upselling (z. B. "Demontage/Montage pro Stunde - Optional").

`Tipp:` Optionale Positionen erhöhen Ihre Chance auf Upselling. Der Kunde sieht sofort, was zusätzliche Leistungen kosten, und kann sie selbst auswählen.

---

## Schritt 7 - Vorlage speichern und testen

Nach der Bearbeitung:

1. Klicken Sie auf **Speichern**
2. Gehen Sie zu einem **Test-Vorgang** (oder legen Sie einen mit fiktiven Daten an)
3. Erstellen Sie ein Angebot für diesen Vorgang
4. Sehen Sie sich die **PDF-Vorschau** an

### Prüfen Sie bei der Vorschau

- Sind alle Variablen korrekt ausgefüllt? (kein `####{{ quote.something }}` sichtbar)
- Stimmt die Gestaltung auf Seite 2 und weiteren Seiten?
- Werden die ANGEBOTSPOSITIONEN sauber dargestellt?
- Stimmen Logogröße und -position?
- Entsprechen die Farben Ihrem Corporate Design?
- Gibt es keine unerwünschten Leerräume?

`Achtung:` Der Editor zeigt Beispieldaten ("Jan Jansen", "Voorbeeldstraat 1"). Dies sind Dummy-Daten. Bei einem echten Vorgang werden diese automatisch durch die tatsächlichen Kundendaten ersetzt.

---

## Kopf- und Fußzeilen

Die Kopfzeile (Header) und Fußzeile (Footer) Ihrer Vorlage erscheinen auf jeder Seite. Hier stehen häufig Ihr Logo, Ihre Firmendaten, KvK-Nummer, BTW-Nummer und IBAN.

Sie können selbst eine einfache Kopfzeile erstellen, indem Sie oben in Ihrer Vorlage einen **SPALTEN**-Block mit Ihrem Logo und Ihren Firmendaten hinzufügen. Für komplexere Kopfzeilen (z. B. mit SVG-Elementen oder aufwendiger Gestaltung) können Sie bei Bedarf während des Onboardings um Hilfe bitten.

### Was gehört in die Kopf-/Fußzeile?

| Bestandteil | Kopfzeile | Fußzeile |
| --- | --- | --- |
| **Logo** | Ja | Nein |
| **Firmenname** | Ja | Ja |
| **Adresse** | Nein | Ja |
| **Telefon / E-Mail** | Ja | Ja |
| **KvK-Nummer** | Nein | Ja |
| **BTW-Nummer** | Nein | Ja |
| **IBAN** | **NIEMALS auf dem Angebot** | Nur auf der Rechnung |

`Achtung:` Setzen Sie Ihre IBAN **nicht** auf das Angebot. Wenn die IBAN auf dem Angebot steht, zahlen Kunden manchmal direkt aufgrund des Angebots, anstatt auf die Rechnung zu warten. Das führt zu administrativem Mehraufwand. Geben Sie die IBAN nur auf Ihrer Rechnungsvorlage an.

---

## Vorlage kopieren

Möchten Sie eine neue Vorlage erstellen, die einer bestehenden ähnelt? Verwenden Sie beim Anlegen einer neuen Vorlage die Funktion **"Basierend auf"**. Damit kopieren Sie die Gestaltung, Struktur und den Stil. Sie müssen dann nur noch die Texte anpassen.

Das ist praktisch für: - Eine separate Angebotsvorlage für Firmenumzüge - Eine englischsprachige Version - Eine Vorlage für spezifische Dienstleistungen (z. B. Einlagerung)

---

## Online-Angebot vs. PDF

Das Angebot, das Ihr Kunde erhält, kann auf zwei Arten angesehen werden:

| Ansicht | Wie es funktioniert |
| --- | --- |
| **Online-Angebot** | Der Kunde öffnet das Angebot über einen Link in der E-Mail. Dies ist ein durchgehender One-Pager ohne Seitenaufteilung. Hier kann der Kunde optionale Positionen an-/abwählen. |
| **PDF-Angebot** | Das Angebot als herunterladbare PDF-Datei mit festen A4-Seiten. |

`Achtung:` Eine Gestaltung, die in der Online-Ansicht gut aussieht, kann im PDF an einer ungünstigen Stelle umbrechen (z. B. eine Tabelle, die auf halber Höhe über zwei Seiten aufgeteilt wird). Testen Sie daher immer beide Ansichten.

---

## Ablaufdatum des Angebots

Bei jedem Angebot legen Sie ein **Ablaufdatum** fest. Das ist das Datum, bis zu dem das Angebot gültig ist.

`Tipp:` Legen Sie das Ablaufdatum kurz fest, zum Beispiel **1 Woche**. Ein kurzes Ablaufdatum erhöht Ihre Erfolgsquote: Kunden spüren Dringlichkeit und reagieren schneller. Der Kunde kann übrigens auch nach Ablauf des Datums noch unterschreiben - das System blockiert dies nicht. Das Ablaufdatum wirkt als psychologischer Nudge.

---

## Tipps

- **Verwenden Sie den Block ANGEBOTSPOSITIONEN** für Ihre Preistabelle. NIEMALS eine manuelle Tabelle - diese bleibt nicht synchron mit Ihrem Vorgang.
- **Testen Sie mit einem realen Szenario.** Legen Sie einen Test-Vorgang mit mehreren Angebotspositionen an und sehen Sie sich das PDF an.
- **Liefern Sie Ihr Logo als SVG.** Das ergibt die schärfsten Resultate im PDF.
- **Halten Sie Ihre Texte kurz.** Kunden lesen keine drei Seiten. Verweisen Sie auf Ihre Allgemeinen Geschäftsbedingungen.
- **Vorschau auf mehreren Seiten.** Erstellen Sie ein langes Testangebot und prüfen Sie, ob Seite 2 und 3 gut aussehen.
- **Dummy-Daten sind normal.** Der Editor zeigt Beispieldaten. Diese werden bei echter Nutzung automatisch ersetzt.
- **Verwenden Sie optionale Positionen** für Upselling. Kunden können Leistungen selbst hinzufügen oder abwählen.
- **Legen Sie ein kurzes Ablaufdatum fest.** Eine Woche funktioniert besser als ein Monat.

---

## Achtung

- **Der Block ANGEBOTSPOSITIONEN ist verpflichtend.** Manuelle Tabellen geraten out-of-sync mit Ihrem Vorgang.
- **Variablen haben englische Namen** im Editor, zeigen aber niederländischen Text in der Ausgabe.
- **Testen Sie immer, bevor Sie live gehen.** Erstellen Sie ein Testangebot und sehen Sie sich das PDF an.
- **Online und PDF können sich unterscheiden.** Testen Sie beide Ansichten - Seitenumbrüche fallen manchmal anders aus.
- **Logo als PNG verschwindet manchmal ab Seite 2.** Verwenden Sie SVG für eine zuverlässige Darstellung auf allen Seiten.

---

**Nächster Schritt:** [Variablen in Vorlagen verwenden](https://www.bas.software/de/onboarding/schritt-3-bas-konfiguration-anpassen/variablen-in-vorlagen-verwenden)