Skip to main content
Version: Latest

Headers and Footers

Unlayer provides built-in Header and Footer Support, allowing designs to be divided into clearly defined sections: Header, Content and Footer. This helps end-users structure their designs more logically, simplifies template creation, and ensures better consistency across designs. When enabled, the editor visually highlights the Header and Footer areas inside the canvas with distinct indicators, making it easy for users to understand which part of the content they are working on.

Headers and Footers

Key Benefits​

  • Clear Visual Separation: Dedicated header and footer areas are displayed at the top and bottom of the design canvas.
  • Improved Design Consistency: Helps enforce structural best practices across all designs.
  • Simplifies Template Creation: End-users can easily place branding, navigation, and legal information in appropriate sections.
  • Stored in Design JSON: The header/footer structure is fully preserved in the design data model.

Enabling Headers and Footers​

You can enable this feature by passing a feature flag during initialization:

unlayer.init({
  features: {
    headersAndFooters: true,
  },
});

Once enabled:

  • The editor will display Header and Footer sections with visible labels.
  • Users can independently add content inside each section using the existing tools.
  • Content added inside the Header or Footer remains logically grouped in the design JSON.

Design Behavior​

  • Header: Shown at the top of the canvas, ideal for logos, navigation, or branding elements.
  • Content: All content between header and footer remains fully editable.
  • Footer: Shown at the bottom, ideal for legal disclaimers, contact details, unsubscribe links, etc.

Notes​

  • This feature only modifies the editor interface and design structure; exported outputs remain as standard HTML or PDF content.
  • When disabled, the editor operates as a single continuous body without any section divisions.