# Encabezados, pies de página y números de página

Agregue contenido repetido de encabezado y pie de página, establezca márgenes separados, ocúltelo en una portada e inserte números de página automáticos.

El título de un documento en la parte superior, los datos de contacto en la parte inferior o una etiqueta de página de “1/3” pueden estar en **Encabezado** y **Pie de página**. Escribe el contenido una vez y Tembuilder lo repite en las hojas PDF donde esa parte está habilitada.

El encabezado y el pie de página se encuentran debajo de **Global** en Structure. Su contenido se comparte, mientras que cada página puede mostrarlos u ocultarlos; por ejemplo, una portada puede omitir ambos mientras el contenido principal los conserva.

## 1. Agregue un encabezado o pie de página

Expanda **Global** en **Structure**, luego seleccione **Agregar elemento global → Encabezado** o **Pie de página**. Si ya existe, selecciónelo directamente en la lista para editarlo.

El interruptor al lado de cada elemento controla su visibilidad Global. Al desactivarlo, se oculta esa parte en el documento y se conserva el contenido que escribió.

Agregar un nuevo encabezado o pie de página está disponible en la variante básica. Vuelva a la base si está editando otra variante y no ve Agregar elemento global.

<figure class="doc-sim hf-illustration" aria-label="Structure → Global → Agregar elemento global → Encabezado o pie de página">
<div class="sim-stage"><div class="hf-add-scene"><div class="sim-panel hf-tree"><div class="sim-panel-title">ESTRUCTURA</div><div class="sim-tree-row">⌄ Global <small>1/2</small></div><div class="hf-tree-item">▤ Pie de página <span class="hf-toggle" aria-label="En"></span></div><div class="hf-add-row"><span class="sim-control sim-focus">＋ Agregar elemento global</span><div class="hf-menu">▤ Encabezado</div></div></div><div class="hf-repeat"><small>Encabezado/pie de página</small><div class="hf-paper"><div class="hf-paper-header">Tembuilder <small>FACTURA</small></div><div class="hf-paper-body"><strong>FACTURA</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 → Agregar elemento global → Encabezado o pie de página</figcaption>
</figure>

## 2. Edita el contenido repetido

Seleccione **Encabezado** o **Pie de página** para abrir las pestañas **HTML**, **CSS**, **Props** y **Config**.

Con una plantilla existente, comience en **Props** para actualizar el nombre de la empresa, el sitio web o la etiqueta utilizada por esa plantilla. Por ejemplo, la plantilla de factura tiene un accesorio `footerWebsite` para el sitio web que se muestra en la parte inferior de la página.

Utilice **HTML** para cambiar el contenido o la estructura y **CSS** para cambiar su presentación. En Encabezado/Pie de página HTML, `{{ props.propName }}` lee un accesorio que pertenece a esa parte; `{{ global.props.propName }}` lee un accesorio de Global.

<figure class="doc-sim hf-illustration" aria-label="Global → Pie de página → Props → pie de páginaSitio web">
<div class="sim-stage"><div class="hf-path">Global <span>→</span> Pie de página <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">PIE DE PIE</small><div class="sim-prop-card"><div class="sim-prop-name"><b>sitio web de pie de página</b><small>Texto</small></div><div class="sim-prop-value"><small class="sim-label">VALOR</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 → Pie de página → Props → pie de páginaSitio web</figcaption>
</figure>

## 3. Establecer márgenes de encabezado y pie de página

Abra **Encabezado → Config → Margen** o **Pie de página → Config → Margen**. Habilite los márgenes e ingrese los cuatro lados en **mm**. La sección **Fondo** a continuación establece el fondo de ese encabezado o pie de página.

Estos márgenes son independientes del **Margen de contenido**. Para alinear un logotipo de encabezado con una tabla en el cuerpo, configure los márgenes izquierdo/derecho del encabezado para que coincidan con los márgenes izquierdo/derecho del área de contenido.

La altura del encabezado/pie de página sigue su contenido, incluidos sus propios márgenes. **Margen de contenido → Superior/Inferior** proporciona el espacio entre esa área y el contenido principal. Para aumentar el espacio después de un encabezado, cambie el margen del contenido en la parte superior; para insertar un logotipo dentro del encabezado, cambie los márgenes del encabezado o CSS.

<figure class="doc-sim hf-illustration" aria-label="Los márgenes del encabezado/pie de página y el margen del contenido son configuraciones independientes">
<div class="sim-stage"><div class="hf-path">Global <span>→</span> Encabezado <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>Margen · mm</strong><span class="hf-toggle" aria-label="En"></span></div><div class="hf-setting"><span>Arriba</span><span class="sim-input">4</span></div><div class="hf-setting"><span>Izquierda</span><span class="sim-input sim-focus">14</span></div><div class="hf-setting"><span>Correcto</span><span class="sim-input">14</span></div><div class="hf-setting"><span>Abajo</span><span class="sim-input">4</span></div></div></div><div class="hf-band-page"><div class="hf-band-header">Encabezado<small>Margen</small></div><div class="hf-band-gap">Margen de contenido · Arriba</div><div class="hf-band-content">Contenido de la sección<i></i><i></i><i></i></div><div class="hf-band-footer">Pie de página</div></div></div></div>
<figcaption>Los márgenes del encabezado/pie de página y el margen del contenido son configuraciones independientes</figcaption>
</figure>

## 4. Ocultarlo en una portada o en una página específica

Seleccione una página en **Structure → Config → Diseño**, luego desactive **Encabezado** o **Pie de página**. Por ejemplo, **Cubierta** puede ocultar ambos, mientras que **Factura** los conserva.

El contenido compartido en Global permanece intacto. Vuelva a activar la configuración de Diseño correspondiente para mostrarla nuevamente en esta página.

Si una configuración dice **desactivado globalmente**, primero habilite el encabezado/pie de página en Global. Una página no puede habilitar una parte que está desactivada globalmente.

Para darle a la portada una configuración diferente del contenido principal, conviértala en una página separada en Structure.

<figure class="doc-sim hf-illustration" aria-label="Desactive el encabezado/pie de página de la portada y manténgalos en el contenido">
<div class="sim-stage"><div class="hf-path">Structure <span>→</span> Portada <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>Diseño</strong><div class="hf-setting"><span>Encabezado</span><span class="hf-toggle hf-off sim-focus" aria-label="Apagado"></span></div><div class="hf-setting"><span>Pie de página</span><span class="hf-toggle hf-off" aria-label="Apagado"></span></div></div></div><div class="hf-page-pair"><div><small>Portada · Apagado</small><div class="hf-paper"><div class="hf-paper-body"><strong>FACTURA</strong><span>TB-2026-0042</span><i></i><i></i><i></i></div></div></div><div><small>Factura · Activado</small><div class="hf-paper"><div class="hf-paper-header">Tembuilder <small>FACTURA</small></div><div class="hf-paper-body"><strong>FACTURA</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>Desactive el encabezado/pie de página de la portada y manténgalos en el contenido</figcaption>
</figure>

## 5. Insertar números de página automáticos

Agregue esto al pie de página o encabezado HTML:

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

Estos valores están integrados en **Global Props** y el sistema los completa cuando se genera el documento:

| Valor | Contenido |
| --- | --- |
| `global.props.page_number` | El número de hoja actual PDF. |
| `global.props.total_pages` | El recuento total de hojas PDF. |

No es necesario crear otro accesorio para almacenar los números de página. Para un documento de tres hojas, este ejemplo muestra `1 / 3`, `2 / 3` y `3 / 3`.

Los números se refieren a las hojas **PDF**, no al número de páginas en Structure. Una página Structure puede producir varias hojas, cada una con su propio número. Ocultar encabezado/pie de página en una portada no excluye esa hoja del recuento total.

<figure class="doc-sim hf-illustration" aria-label="Los valores del sistema muestran la hoja PDF actual y el recuento total de hojas">
<div class="sim-stage"><div class="hf-path">Global <span>→</span> Pie de página <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>FACTURA</small></div><div class="hf-paper-body"><strong>FACTURA</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>FACTURA</small></div><div class="hf-paper-body"><strong>FACTURA</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>FACTURA</small></div><div class="hf-paper-body"><strong>FACTURA</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>Los valores del sistema muestran la hoja PDF actual y el recuento total de hojas</figcaption>
</figure>