# Headers, footers and page numbers

Add repeated header and footer content, set separate margins, hide it on a cover, and insert automatic page numbers.

A document title at the top, contact details at the bottom, or a “1 / 3” page label can all live in **Header** and **Footer**. Write the content once, and Tembuilder repeats it on the PDF sheets where that part is enabled.

Header and Footer sit under **Global** in Structure. Their content is shared, while each page can show or hide them—for example, a cover can omit both while the main content keeps them.

## 1. Add a Header or Footer

Expand **Global** in **Structure**, then select **Add global element → Header** or **Footer**. If it already exists, select it directly in the list to edit it.

The toggle beside each item controls its Global visibility. Turning it off hides that part across the document while keeping the content you wrote.

Adding a new Header or Footer is available in the base variant. Switch back to the base if you are editing another variant and do not see Add global element.

<figure class="doc-sim hf-illustration" aria-label="Structure → Global → Add global element → Header or Footer">
<div class="sim-stage"><div class="hf-add-scene"><div class="sim-panel hf-tree"><div class="sim-panel-title">STRUCTURE</div><div class="sim-tree-row">⌄ Global <small>1/2</small></div><div class="hf-tree-item">▤ Footer <span class="hf-toggle" aria-label="On"></span></div><div class="hf-add-row"><span class="sim-control sim-focus">＋ Add global element</span><div class="hf-menu">▤ Header</div></div></div><div class="hf-repeat"><small>Header / Footer</small><div class="hf-paper"><div class="hf-paper-header">Tembuilder <small>INVOICE</small></div><div class="hf-paper-body"><strong>INVOICE</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 → Add global element → Header or Footer</figcaption>
</figure>

## 2. Edit the repeated content

Select **Header** or **Footer** to open its **HTML**, **CSS**, **Props**, and **Config** tabs.

With an existing template, start in **Props** to update a company name, website, or label used by that template. For example, the invoice template has a `footerWebsite` prop for the website shown at the bottom of the page.

Use **HTML** to change content or structure, and **CSS** to change its presentation. In Header/Footer HTML, `{{ props.propName }}` reads a prop belonging to that part; `{{ global.props.propName }}` reads a prop from Global.

<figure class="doc-sim hf-illustration" aria-label="Global → Footer → Props → footerWebsite">
<div class="sim-stage"><div class="hf-path">Global <span>→</span> Footer <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">FOOTER</small><div class="sim-prop-card"><div class="sim-prop-name"><b>footerWebsite</b><small>Text</small></div><div class="sim-prop-value"><small class="sim-label">VALUE</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 → Footer → Props → footerWebsite</figcaption>
</figure>

## 3. Set Header and Footer margins

Open **Header → Config → Margin** or **Footer → Config → Margin**. Enable margins and enter the four sides in **mm**. The **Background** section below sets the background of that Header or Footer.

These margins are separate from **Content margin**. To align a header logo with a table in the body, set the Header’s Left/Right margins to match the content area’s Left/Right margins.

Header/Footer height follows its content, including its own margins. **Content margin → Top/Bottom** provides the gap between that area and the main content. To increase the gap after a Header, change Content margin Top; to inset a logo inside the Header, change the Header’s margins or CSS.

<figure class="doc-sim hf-illustration" aria-label="Header/Footer margins and Content margin are separate settings">
<div class="sim-stage"><div class="hf-path">Global <span>→</span> Header <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>Margin · mm</strong><span class="hf-toggle" aria-label="On"></span></div><div class="hf-setting"><span>Top</span><span class="sim-input">4</span></div><div class="hf-setting"><span>Left</span><span class="sim-input sim-focus">14</span></div><div class="hf-setting"><span>Right</span><span class="sim-input">14</span></div><div class="hf-setting"><span>Bottom</span><span class="sim-input">4</span></div></div></div><div class="hf-band-page"><div class="hf-band-header">Header<small>Margin</small></div><div class="hf-band-gap">Content margin · Top</div><div class="hf-band-content">Section content<i></i><i></i><i></i></div><div class="hf-band-footer">Footer</div></div></div></div>
<figcaption>Header/Footer margins and Content margin are separate settings</figcaption>
</figure>

## 4. Hide it on a cover or a specific page

Select a page in **Structure → Config → Layout**, then turn off **Header** or **Footer**. For example, **Cover** can hide both while **Invoice** keeps them.

The shared content in Global stays intact. Turn the corresponding Layout setting back on to show it on this page again.

If a setting says **off globally**, enable the Header/Footer in Global first. A page cannot enable a part that is turned off globally.

To give a cover different settings from the main content, make it a separate page in Structure.

<figure class="doc-sim hf-illustration" aria-label="Turn off Header/Footer for the cover page while keeping them in the content">
<div class="sim-stage"><div class="hf-path">Structure <span>→</span> Cover <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>Header</span><span class="hf-toggle hf-off sim-focus" aria-label="Off"></span></div><div class="hf-setting"><span>Footer</span><span class="hf-toggle hf-off" aria-label="Off"></span></div></div></div><div class="hf-page-pair"><div><small>Cover · Off</small><div class="hf-paper"><div class="hf-paper-body"><strong>INVOICE</strong><span>TB-2026-0042</span><i></i><i></i><i></i></div></div></div><div><small>Invoice · On</small><div class="hf-paper"><div class="hf-paper-header">Tembuilder <small>INVOICE</small></div><div class="hf-paper-body"><strong>INVOICE</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>Turn off Header/Footer for the cover page while keeping them in the content</figcaption>
</figure>

## 5. Insert automatic page numbers

Add this to Footer or Header HTML:

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

These values are built into **Global Props** and filled by the system when the document is generated:

| Value | Content |
| --- | --- |
| `global.props.page_number` | The current PDF sheet number. |
| `global.props.total_pages` | The total PDF sheet count. |

You do not need to create another prop to store page numbers. For a three-sheet document, this example displays `1 / 3`, `2 / 3`, and `3 / 3`.

Numbers refer to **PDF sheets**, not the number of pages in Structure. One Structure page can produce several sheets, each with its own number. Hiding Header/Footer on a cover does not exclude that sheet from the total count.

<figure class="doc-sim hf-illustration" aria-label="System values show the current PDF sheet and total sheet count">
<div class="sim-stage"><div class="hf-path">Global <span>→</span> Footer <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>INVOICE</small></div><div class="hf-paper-body"><strong>INVOICE</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>INVOICE</small></div><div class="hf-paper-body"><strong>INVOICE</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>INVOICE</small></div><div class="hf-paper-body"><strong>INVOICE</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>System values show the current PDF sheet and total sheet count</figcaption>
</figure>