Landing page: full page

This is the most simple use case of a Piano inline template: the whole page is a Piano template. It contains everything including a top bar, a side bar, a footer, and everything else needed.

All you need to do is prepare an empty <div> for the Piano template on a completely empty page (empty HTML body). Also, some CSS should be added to your page to remove default gaps on the edges:

html,
body {
  margin: 0;
  padding: 0;
}

DemoTo return from the demo page, please use the browser Back button. We were trying to make the demo as close to real life as possible, and did not provide any link to go back intentionally.

How-to

Setting up a template

There're 2 ways to set up a landing page: on your end or in Composer.

Specifying a template size

Piano inline templates (full landing page being one of them) simply take 100% of the parent container width. By parent container we mean the <div> you specify on your end for the Piano template to show up. Regarding its height, the browser counts it automatically according to the template content. So nothing needs to be defined. Instead, just let the Piano template be parsed freely — things like setting up a fixed height would prevent it from displaying correctly.