# Finden Sie sich im Editor zurecht

Machen Sie sich mit Structure, dem Bearbeiten von Registerkarten, Vorschauen und Eingabedaten vertraut, damit Sie wissen, wo Sie im Editor beginnen müssen.

Durch das Öffnen einer Vorlage werden deren Struktur, Bearbeitungswerkzeuge und Vorschau zusammengeführt. Wählen Sie ein zu bearbeitendes Teil aus und sehen Sie sich dann die Vorschau an, um das Ergebnis zu sehen, ohne den Editor zu verlassen.

Beginnen Sie in **Structure**, um auszuwählen, was bearbeitet werden soll, verwenden Sie die Registerkarten daneben, um Änderungen vorzunehmen, und öffnen Sie dann **Run**, um ein PDF zu generieren. Die folgenden Abbildungen zeigen jeden Bereich im Kontext.

## 1. Structure: Wählen Sie aus, was bearbeitet werden soll

**Structure** ist auf der linken Seite. Es zeigt die Seiten und Abschnitte, aus denen die Vorlage besteht. Wenn Sie ein Element auswählen, werden dessen Bearbeitungsoptionen im Bedienfeld daneben geöffnet.

- **Global** enthält Einstellungen, die in der gesamten Vorlage gemeinsam genutzt werden.
- **Seite** stellt eine Seite im Layout dar, mit ihren Abschnitten darin.
- **Abschnitt** ist ein Inhaltsblock, z. B. Kundendetails oder eine Servicetabelle.
- **Kopfzeile/Fußzeile** enthält Seitenkopf- oder Fußzeileninhalte, wenn die Vorlage diese verwendet.

Wählen Sie beispielsweise **Rechnungsparteien** aus, um Beschriftungen im Abschnitt „Kundendetails“ zu bearbeiten. Wählen Sie **Global** für gemeinsame Einstellungen wie Schriftarten oder Hintergrund.

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="Structure → Wählen Sie einen Abschnitt aus, um dessen Bearbeitungswerkzeuge zu öffnen">
<div class="sim-stage"><div class="sim-panel tour-tree"><div class="ds-head"><strong>STRUKTUR</strong><span class="sim-control">＋</span></div><div class="tour-tree-row">⌄   Global <span class="sim-badge">1/2</span></div><div class="tour-tree-row tour-child">▤   Fußzeile</div><div class="tour-tree-row">⌄   01 Seite <span class="sim-badge">3</span></div><div class="tour-tree-row tour-child">▤   Überschrift</div><div class="tour-tree-row tour-child sim-selected sim-focus">▤  Inhalt <span class="sim-badge">4p</span></div><div class="tour-tree-row tour-child">▤  Zusammenfassung</div></div></div>
<figcaption>Structure → Wählen Sie einen Abschnitt aus, um dessen Bearbeitungswerkzeuge zu öffnen</figcaption>
</figure>

## 2. HTML, CSS, Props und Config

Nachdem Sie ein Element in Structure ausgewählt haben, werden im nächsten Bereich die verfügbaren Registerkarten angezeigt:

- **HTML**: Inhalt und Struktur des Abschnitts.
- **CSS**: Präsentation, wie Farben, Schriftgrößen und Abstände.
- **Props**: Mit der Vorlage gespeicherte Werte, häufig Beschriftungen, Farben oder wiederverwendbarer Text.
- **Config**: Einstellungen für das ausgewählte Element, z. B. Ränder, Hintergründe oder Seitenumbrüche.

Öffnen Sie **Props** mit einer vorhandenen Vorlage, um eine Beschriftung zu ändern, ohne HTML/CSS zu bearbeiten. Die folgende Abbildung zeigt eine `heading`-Stütze im ausgewählten Abschnitt. Sein HTML liest den Wert über `{{ props.heading }}`.

Die verfügbaren Registerkarten hängen von Ihrer Auswahl ab. **Global** hat Props und Config, während ein Abschnitt HTML, CSS, Props und Config haben kann. Eine Variante, die von der Basis erbt, bietet möglicherweise weniger Bearbeitungsmöglichkeiten.

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="Abschnitt → Props → Wert, der in HTML verwendet wird">
<div class="sim-stage"><div class="sim-panel"><div class="sim-tabs tour-tabs"><span>HTML</span><span>CSS</span><span class="sim-active">Props</span><span>Config</span></div><div class="ds-head"><strong>ABSCHNITT · Inhalt</strong></div><div class="sim-prop-card ds-field"><div class="sim-prop-name"><b>Überschrift</b><span class="ds-type">Text</span></div><div class="sim-prop-value"><small class="sim-label">WERT</small><span class="sim-input sim-focus">Dokumenttitel</span><span class="sim-embed">{{ props.heading }}</span></div></div></div></div>
<figcaption>Abschnitt → Props → Wert, der in HTML verwendet wird</figcaption>
</figure>

## 3. Layout und PDF: Sehen Sie sich das Ergebnis an

Die Vorschau neben dem Bearbeitungsfeld verfügt über zwei Modi: **Layout** und **PDF**.

Mit **Layout** können Sie beim Arbeiten erkennen, wie Abschnitte zusammenpassen. **PDF** zeigt das Dokument als Seiten an, was nützlich ist, um Ränder, Kopf- und Fußzeilen sowie den auf die nächste Seite fließenden Inhalt zu überprüfen.

In **Layout** arbeiten Sie mit den Seiten und Abschnitten der Vorlage. **PDF** zeigt das paginierte Ergebnis, einschließlich zusätzlicher Blätter, die erstellt werden, wenn der Inhalt über eine Seite hinausgeht.

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="Layout zeigt die Struktur · PDF zeigt paginierte Blätter">
<div class="sim-stage"><div class="sim-panel"><div class="sim-tabs tour-tabs"><span>Layout</span><span class="sim-active sim-focus">PDF</span></div><div class="tour-sheets"><div><small>Seite 1</small><div class="tour-sheet"><b>Tembuilder</b><span class="tour-line"></span><span class="tour-line"></span><span class="tour-line"></span><span class="tour-line"></span><small>1 / 2</small></div></div><div><small>Seite 2</small><div class="tour-sheet"><b>Tembuilder</b><span class="tour-line"></span><span class="tour-line"></span><span class="tour-line"></span><span class="tour-line"></span><small>2 / 2</small></div></div></div></div></div>
<figcaption>Layout zeigt die Struktur · PDF zeigt paginierte Blätter</figcaption>
</figure>

**Layout** spiegelt Ihre aktuellen Änderungen wider. **PDF** rendert gespeicherte Vorlageninhalte, also speichern Sie das Design und generieren Sie die PDF-Vorschau nach Änderungen neu. Vorschauparameter stammen aus den Werten des Editors, zunächst Defaults; Die in Run eingegebenen Werte gelten nur für Run-Jobs. Eine frühere PDF-Vorschau wird nicht automatisch aktualisiert.

## 4. Parameters: Daten für jedes Dokument

**Parameters** ist rechts. Es zeigt die Daten an, die die Vorlage akzeptiert, z. B. einen Kundennamen, eine Rechnungsnummer oder eine Liste von Dienstleistungen.

Wählen Sie **Schema**, um Felder, Typen und Standardwerte zu überprüfen. Wählen Sie **Payload**, um die Daten als JSON anzuzeigen. Feldnamen müssen mit den im HTML der Vorlage verwendeten Ausdrücken übereinstimmen.

Beispielsweise liefert ein Feld namens `recipient` den Ausdruck `{{ params.recipient }}` für Ihren HTML. Der Standardwert ist Schema; Daten für jeden PDF werden in Run eingegeben.

Siehe [Parameters und Props](/docs/de/data/parameters-props/) für Hilfe bei der Entscheidung, welches verwendet werden soll.

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="Parameters → Schema / Payload">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Parameters</strong><span class="sim-control">＋ Hinzufügen</span></div><div class="sim-tabs"><span class="sim-active">Schema</span><span>Payload</span></div><div class="sim-prop-card ds-field"><div class="sim-prop-name"><b>Empfänger</b><span class="ds-type">Text</span></div><div class="sim-prop-value"><small class="sim-label">STANDARD</small><span class="sim-input sim-focus">Tembuilder</span><span class="sim-embed">{{ params.recipient }}</span></div></div></div></div>
<figcaption>Parameters → Schema / Payload</figcaption>
</figure>

## 5. Run und Geschichte

Nachdem Sie die Vorlage gespeichert und veröffentlicht haben, öffnen Sie **Run**, um einen Schlüssel, eine Version und eine Variante auszuwählen und geben Sie Daten ein, um ein PDF zu generieren. Folgen Sie [Erstellen Sie Ihr erstes PDF](/docs/de/getting-started/first-pdf/), wenn Sie diesen Workflow ausprobieren möchten.

Wenn Sie auf Ihre Arbeit zurückblicken, verwenden Sie den Verlauf der Vorlage für gespeicherte Designänderungen und **Renders** für PDF-Aufträge und deren Ergebnisse. Dies hilft Ihnen, entweder die Designversion oder die generierte Datei zu finden, die Sie benötigen.

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="Speichern → Veröffentlichen → Run · Renders behält die Ergebnisse">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Meine Vorlage <span class="sim-badge">v1</span></strong><div class="tour-actions"><span class="sim-control">Speichern</span><span class="sim-control sim-dark">Veröffentlichen</span></div></div><div class="ds-head"><strong>LAUFEN</strong><span class="sim-control sim-focus">ϟ Run</span></div><div class="ds-run-fields"><div><small>VERSION</small><span class="sim-input">v1</span></div><div><small>VARIANTE</small><span class="sim-input">Standard</span></div></div><div class="ds-code"><code>{ "recipient": "Tembuilder" }</code></div><div class="ds-rows"><div><span>Renders</span><small>PDF · Abgeschlossen ↗</small></div></div></div></div>
<figcaption>Speichern → Veröffentlichen → Run · Renders behält die Ergebnisse</figcaption>
</figure>