Skip to main content

Header and Footer

Eledo does not use traditional header and footer sections.

Instead, it uses a Background document, which is rendered behind the main content.

This allows you to design the entire page layout — not just fixed areas at the top or bottom.

How it works​

  • The Background document is rendered first
  • The Main document is rendered on top of it
  • Both layers are independent

This means:

  • background elements can overlap with content
  • layout must be controlled explicitly

A simple way to structure the page is to use a 3-row table.

Step 1: Create a full-page table​

In the Background document:

  • create a table with 1 column and 3 rows
  • set width and height to 100%

This divides the page into:

  • header
  • content
  • footer

Creating 3 row table for header and footer concept

Step 2: Set row heights​

Row heights are automatic by default.

To create stable header and footer areas:

  • set fixed height for the first (header) row
  • set fixed height for the last (footer) row

Setting first and last row height to a constant

Step 3: Add content​

You can place:

  • text
  • images
  • page numbers

Page numbers are available under Variables in the toolbar.

Placing header text and footer page numbering

Step 4: Remove table borders​

Set border size to 0 in table properties.

Removing table's borders by setting their size to 0

Avoiding overlap with content​

Since the Background and Main documents are rendered independently:

  • Background is drawn first
  • Main content is drawn on top

If elements overlap, the main content will cover the background.

To prevent layout issues:

  1. Define header and footer height in the Background table
  2. Increase top and bottom margins in the Main document

Margins are configured in Styles using CSS.

Increasing Main document's page top and bottom margin

Dynamic Flow vs Static Pages​

The behavior of the Background depends on the template type.

Dynamic Flow​

  • One Background layout is used for all pages

Static Pages​

  • Each page has its own Background
  • Allows different layouts per page

However:

  • each page behaves like a Dynamic Flow internally
  • overflowing content creates additional pages
  • those additional pages reuse the same Background

When to use this approach​

Use Background-based headers and footers when you need:

  • consistent page layout
  • full control over page design
  • repeated elements such as logos, titles, or page numbers

Was this article helpful?

Yes
No