Landing page
A landing page project makes web pages: responsive HTML for a browser, not an inbox. Your users build them with the same blocks as emails, plus forms.
What your users make
- A page up to 1600px wide, with a breakpoint below which columns stack for phones.
- Every block an email has, and a form block that collects sign-ups and enquiries.
- A title and description for the page.
A landing page is never sent as an email. If you need both, use an email project and a page project.
Getting it out
exportHtml() gives you the page two ways.
The whole page, a complete HTML document — save it as index.html and publish it anywhere:
const { html } = await editor.exportHtml();
// html: '<!doctype html><html lang="en"><head>…</head><body>…</body></html>'
await myHosting.publish(`/offers/${slug}/index.html`, html);
In pieces, to place inside a page of your own — your header, your footer, your layout:
const { chunks } = await editor.exportHtml();
chunks.body; // the content, for inside your <body> (scripts taken out)
chunks.css; // its styles, for a <style> tag
chunks.js; // its scripts (a form's), for a <script> tag; empty when there are none
chunks.fonts; // web-font stylesheet URLs, for <link rel="stylesheet"> tags
<!-- your page template -->
<head>
<!-- for each URL in chunks.fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=…" />
<style>/* chunks.css */</style>
</head>
<body>
<header>Your own header</header>
<!-- chunks.body -->
<footer>Your own footer</footer>
<script>/* chunks.js */</script>
</body>
The design's styles are scoped to its own content, so they do not restyle the rest of your page.
| Format | From the page | From your server | In the Download menu |
|---|---|---|---|
| HTML (whole, or chunks) | exportHtml() | designs.export(id, { user }) | yes |
| ZIP (HTML, images) | exportZip() | format: 'zip' | yes |
exportPdf() | format: 'pdf' | yes | |
| PNG | exportImage() | format: 'png' | yes |
Good to know
- Images are hosted at
https://addresses, so the page works wherever you publish it. - A page with a form carries a small script for it; see Forms for where the answers go.