Content areas

Each layout defines a number of content areas and their locations on a page within Liftoff. These content areas are where content blocks are placed when editing a page.

Each content area may only contain a single content block.

Default content areas


Layouts define content areas which can contain content blocks and which are used when editing a page.

Although most users will only ever require the use of the Main Body content area, by default each theme in Liftoff defines the following 8 content areas:

  • Header - Typically located at the end of the layout's header markup, below the navigation. Useful for adding alerts or special info.
  • Main Body - This content area should be used for the main content of a page, and appears between the site's header and footer.
  • Footer - Typically located at the end of the layout's footer markup, below all other content. Useful for adding extra notices to the bottom of the page.
  • Directly after tag - This content area will not be visible to site visitors. It is intended for adding special HTML markup such as meta tags.
  • Directly before tag - This content area will not be visible to site visitors. It is intended for linking to external resources such as scripts or stylesheets.
  • Directly before tag - This content are should only be used in special development situations.
  • Directly after tag - This content area appears before the Main Body area, and may be useful for adding special alerts to a specific page. Refer to the article on content blocks to understand how to add time-constrained content.
  • Directly before tag - This content area appears after all other content areas, and is typically used when adding custom JavaScript to a site.

Arrange content areas within a layout

While it is not currently possible to define new content areas, users may rearrange content areas within their layouts if they are comfortable working with HTML and have read and understand the documentation for using Handlebars within Liftoff.

Content area Handlebars placeholders

Content Area

Handlebars placeholder


{{> node.header}}

Main Body

{{> node.main}}


{{> node.footer}}

Directly after tag

{{> node.firstHeadCode}}

Directly before tag

{{> node.lastHeadCode}}

Directly before tag

{{> node.firstBodyCode}}

Directly after tag

{{> node.lastBodyCode}}

Directly before tag

{{> node.preBodyCode}}


Warning regarding editing layouts

Editing layouts is an advanced feature! Rearranging or removing content area placeholders within a layout may have unintended consequences. Your site could be prevented from operating as expected, or even stop working completely.

If your changes do cause a negative effect, it is always possible to revert the layout to its default state. Refer to the article on layouts for more information.

Launchpad will not be held responsible for site malfunctions, outages, or errors resulting from user actions and edits.


Where can I learn HTML, CSS, JavaScript, or other web technologies?

Launchpad does not offer training in these subjects. However, they are the building blocks of the web, and there are countless resources available for learning about them and their applications. Our team members may be able to offer recommendations of learning materials that we have found useful as we've developed our own professional skillsets over our combined 100+ years of experience.