# Kopfzeilen, Fußzeilen und Seitenzahlen

Fügen Sie wiederholte Kopf- und Fußzeileninhalte hinzu, legen Sie separate Ränder fest, verbergen Sie sie auf einem Cover und fügen Sie automatische Seitenzahlen ein.

Ein Dokumenttitel oben, Kontaktdaten unten oder eine Seitenbeschriftung „1/3“ können alle in **Kopfzeile** und **Fußzeile** enthalten sein. Schreiben Sie den Inhalt einmal und Tembuilder wiederholt ihn auf den PDF-Blättern, auf denen dieser Teil aktiviert ist.

Kopf- und Fußzeile befinden sich unter **Global** in Structure. Ihr Inhalt wird geteilt, während jede Seite sie ein- oder ausblenden kann – zum Beispiel kann ein Cover beides weglassen, während der Hauptinhalt sie behält.

## 1. Fügen Sie eine Kopf- oder Fußzeile hinzu

Erweitern Sie **Global** in **Structure** und wählen Sie dann **Globales Element hinzufügen → Kopfzeile** oder **Fußzeile**. Wenn es bereits vorhanden ist, wählen Sie es direkt in der Liste aus, um es zu bearbeiten.

Der Schalter neben jedem Element steuert seine Global-Sichtbarkeit. Wenn Sie es deaktivieren, wird dieser Teil im gesamten Dokument ausgeblendet, während der von Ihnen geschriebene Inhalt erhalten bleibt.

Das Hinzufügen einer neuen Kopf- oder Fußzeile ist in der Basisvariante verfügbar. Wechseln Sie zurück zur Basis, wenn Sie eine andere Variante bearbeiten und Globales Element hinzufügen nicht angezeigt wird.

<figure class="doc-sim hf-illustration" aria-label="Structure → Global → Globales Element hinzufügen → Kopf- oder Fußzeile">
<div class="sim-stage"><div class="hf-add-scene"><div class="sim-panel hf-tree"><div class="sim-panel-title">STRUKTUR</div><div class="sim-tree-row">⌄ Global <small>1/2</small></div><div class="hf-tree-item">▤ Fußzeile <span class="hf-toggle" aria-label="Ein"></span></div><div class="hf-add-row"><span class="sim-control sim-focus">＋ Globales Element hinzufügen</span><div class="hf-menu">▤ Kopfzeile</div></div></div><div class="hf-repeat"><small>Kopf-/Fußzeile</small><div class="hf-paper"><div class="hf-paper-header">Tembuilder <small>RECHNUNG</small></div><div class="hf-paper-body"><strong>RECHNUNG</strong><span>TB-2026-0042</span><i></i><i></i><i></i></div><div class="hf-paper-footer"><span>tembuilder.com</span><b>1 / 3</b></div></div></div></div></div>
<figcaption>Structure → Global → Globales Element hinzufügen → Kopf- oder Fußzeile</figcaption>
</figure>

## 2. Bearbeiten Sie den wiederholten Inhalt

Wählen Sie **Kopfzeile** oder **Fußzeile**, um die Registerkarten **HTML**, **CSS**, **Props** und **Config** zu öffnen.

Beginnen Sie bei einer vorhandenen Vorlage in **Props**, um einen von dieser Vorlage verwendeten Firmennamen, eine Website oder ein Label zu aktualisieren. Die Rechnungsvorlage enthält beispielsweise eine `footerWebsite`-Prop für die Website, die unten auf der Seite angezeigt wird.

Verwenden Sie **HTML**, um Inhalt oder Struktur zu ändern, und **CSS**, um die Darstellung zu ändern. Im Header/Footer HTML liest `{{ props.propName }}` eine Prop, die zu diesem Teil gehört; `{{ global.props.propName }}` liest eine Prop von Global.

<figure class="doc-sim hf-illustration" aria-label="Global → Fußzeile → Props → FußzeileWebsite">
<div class="sim-stage"><div class="hf-path">Global <span>→</span> Fußzeile <span>→</span> Props</div><div class="sim-panel"><div class="sim-tabs"><span>HTML</span><span>CSS</span><span class="sim-active">Props</span><span>Config</span></div><div class="hf-prop"><small class="sim-label">FUSSZEILE</small><div class="sim-prop-card"><div class="sim-prop-name"><b>FußzeileWebsite</b><small>Text</small></div><div class="sim-prop-value"><small class="sim-label">WERT</small><span class="sim-input sim-focus">tembuilder.com</span><span class="sim-embed">{{ props.footerWebsite }}</span></div></div></div><div class="hf-footer-preview"><b>Tembuilder</b><span>tembuilder.com</span><small>1 / 3</small></div></div></div>
<figcaption>Global → Fußzeile → Props → FußzeileWebsite</figcaption>
</figure>

## 3. Legen Sie die Ränder für Kopf- und Fußzeile fest

Öffnen Sie **Kopfzeile → Config → Rand** oder **Fußzeile → Config → Rand**. Aktivieren Sie Ränder und geben Sie die vier Seiten in **mm** ein. Der Abschnitt **Hintergrund** unten legt den Hintergrund dieser Kopf- oder Fußzeile fest.

Diese Ränder sind vom **Inhaltsrand** getrennt. Um ein Header-Logo an einer Tabelle im Hauptteil auszurichten, stellen Sie die linken/rechten Ränder der Kopfzeile so ein, dass sie mit den linken/rechten Rändern des Inhaltsbereichs übereinstimmen.

Die Höhe der Kopf-/Fußzeile richtet sich nach dem Inhalt, einschließlich der eigenen Ränder. **Inhaltsrand → Oben/Unten** stellt die Lücke zwischen diesem Bereich und dem Hauptinhalt dar. Um die Lücke nach einem Header zu vergrößern, ändern Sie „Content margin Top“; Um ein Logo in die Kopfzeile einzufügen, ändern Sie die Ränder der Kopfzeile oder CSS.

<figure class="doc-sim hf-illustration" aria-label="Kopf-/Fußzeilenränder und Inhaltsrand sind separate Einstellungen">
<div class="sim-stage"><div class="hf-path">Global <span>→</span> Kopfzeile <span>→</span> Config</div><div class="hf-margin-scene"><div class="sim-panel"><div class="sim-tabs"><span>Props</span><span class="sim-active">Config</span></div><div class="hf-margin-card"><div class="hf-setting"><strong>Rand · mm</strong><span class="hf-toggle" aria-label="Ein"></span></div><div class="hf-setting"><span>Oben</span><span class="sim-input">4</span></div><div class="hf-setting"><span>Links</span><span class="sim-input sim-focus">14</span></div><div class="hf-setting"><span>Richtig</span><span class="sim-input">14</span></div><div class="hf-setting"><span>Unten</span><span class="sim-input">4</span></div></div></div><div class="hf-band-page"><div class="hf-band-header">Kopfzeile<small>Marge</small></div><div class="hf-band-gap">Inhaltsrand · Oben</div><div class="hf-band-content">Abschnittsinhalt<i></i><i></i><i></i></div><div class="hf-band-footer">Fußzeile</div></div></div></div>
<figcaption>Kopf-/Fußzeilenränder und Inhaltsrand sind separate Einstellungen</figcaption>
</figure>

## 4. Verstecken Sie es auf einem Cover oder einer bestimmten Seite

Wählen Sie eine Seite unter **Structure → Config → Layout** aus und deaktivieren Sie dann **Kopfzeile** oder **Fußzeile**. Beispielsweise kann **Cover** beides verbergen, während **Invoice** sie behält.

Der freigegebene Inhalt in Global bleibt erhalten. Aktivieren Sie die entsprechende Layout-Einstellung wieder, um sie wieder auf dieser Seite anzuzeigen.

Wenn eine Einstellung „global aus“ besagt, aktivieren Sie zuerst die Kopf-/Fußzeile in Global. Eine Seite kann einen Teil nicht aktivieren, der global deaktiviert ist.

Um einem Cover andere Einstellungen als der Hauptinhalt zu geben, machen Sie es zu einer separaten Seite in Structure.

<figure class="doc-sim hf-illustration" aria-label="Deaktivieren Sie die Kopf-/Fußzeile für das Deckblatt, behalten Sie sie jedoch im Inhalt bei">
<div class="sim-stage"><div class="hf-path">Structure <span>→</span> Abdeckung <span>→</span> Config</div><div class="hf-page-scene"><div class="sim-panel"><div class="sim-tabs"><span class="sim-active">Config</span></div><div class="hf-page-card"><strong>Layout</strong><div class="hf-setting"><span>Kopfzeile</span><span class="hf-toggle hf-off sim-focus" aria-label="Aus"></span></div><div class="hf-setting"><span>Fußzeile</span><span class="hf-toggle hf-off" aria-label="Aus"></span></div></div></div><div class="hf-page-pair"><div><small>Abdeckung · Aus</small><div class="hf-paper"><div class="hf-paper-body"><strong>RECHNUNG</strong><span>TB-2026-0042</span><i></i><i></i><i></i></div></div></div><div><small>Rechnung · Ein</small><div class="hf-paper"><div class="hf-paper-header">Tembuilder <small>RECHNUNG</small></div><div class="hf-paper-body"><strong>RECHNUNG</strong><span>TB-2026-0042</span><i></i><i></i><i></i></div><div class="hf-paper-footer"><span>tembuilder.com</span><b>2 / 3</b></div></div></div></div></div></div>
<figcaption>Deaktivieren Sie die Kopf-/Fußzeile für das Deckblatt, behalten Sie sie jedoch im Inhalt bei</figcaption>
</figure>

## 5. Automatische Seitenzahlen einfügen

Fügen Sie dies zur Fußzeile oder Kopfzeile hinzu HTML:

```handlebars
<span>{{ global.props.page_number }} / {{ global.props.total_pages }}</span>
```

Diese Werte sind in **Global Props** integriert und werden vom System ausgefüllt, wenn das Dokument generiert wird:

| Wert | Inhalt |
| --- | --- |
| `global.props.page_number` | Die aktuelle PDF-Blattnummer. |
| `global.props.total_pages` | Die gesamte PDF-Blattanzahl. |

Sie müssen keine weitere Prop erstellen, um Seitenzahlen zu speichern. Für ein Dokument mit drei Blättern werden in diesem Beispiel `1 / 3`, `2 / 3` und `3 / 3` angezeigt.

Zahlen beziehen sich auf **PDF-Blätter**, nicht auf die Anzahl der Seiten in Structure. Auf einer Structure-Seite können mehrere Blätter mit jeweils einer eigenen Nummer erstellt werden. Durch das Ausblenden der Kopf-/Fußzeile auf einem Deckblatt wird dieses Blatt nicht von der Gesamtzahl ausgeschlossen.

<figure class="doc-sim hf-illustration" aria-label="Systemwerte zeigen das aktuelle PDF-Blatt und die Gesamtblattanzahl">
<div class="sim-stage"><div class="hf-path">Global <span>→</span> Fußzeile <span>→</span> HTML</div><div class="sim-panel"><div class="sim-tabs"><span class="sim-active">HTML</span><span>CSS</span><span>Props</span><span>Config</span></div><div class="hf-number-source sim-focus"><code>{{ global.props.page_number }} /<br />{{ global.props.total_pages }}</code></div><div class="hf-number-pages"><div class="hf-paper"><div class="hf-paper-header">Tembuilder <small>RECHNUNG</small></div><div class="hf-paper-body"><strong>RECHNUNG</strong><span>TB-2026-0042</span><i></i><i></i><i></i></div><div class="hf-paper-footer"><span>tembuilder.com</span><b>1 / 3</b></div></div><div class="hf-paper"><div class="hf-paper-header">Tembuilder <small>RECHNUNG</small></div><div class="hf-paper-body"><strong>RECHNUNG</strong><span>TB-2026-0042</span><i></i><i></i><i></i></div><div class="hf-paper-footer"><span>tembuilder.com</span><b>2 / 3</b></div></div><div class="hf-paper"><div class="hf-paper-header">Tembuilder <small>RECHNUNG</small></div><div class="hf-paper-body"><strong>RECHNUNG</strong><span>TB-2026-0042</span><i></i><i></i><i></i></div><div class="hf-paper-footer"><span>tembuilder.com</span><b>3 / 3</b></div></div></div></div></div>
<figcaption>Systemwerte zeigen das aktuelle PDF-Blatt und die Gesamtblattanzahl</figcaption>
</figure>