Landing Page Builder Tutorial
Build a landing page in Studio: launch the Page content type, generate a first draft with Blu, fine-tune it visually or in code, then save and export the HTML.
Overview
A landing page in Studio is the Page content type: a full HTML body you generate with Blu, then edit yourself in a visual point-and-click view, a code view, or a rendered preview. This tutorial builds one end to end: launching Page, describing it to Blu, editing the draft, and saving or exporting the result. For how Studio's library, launchers, and asset table work in general, see Studio Overview.
📘 Media pending
Video walkthrough for this tutorial hasn't been captured yet.
How it works
Page is one of Studio's content types
The launcher tiles at the top of the Asset library page, and the "Create asset" dropdown above the assets table, both list the same nine content types: Image, Email, Email plain, Page, SMS, Push, Slack, Text, and Code. Clicking Page in either place doesn't open a new screen. It opens Blu, pre-scoped to building a page, docked beside the Asset library.
Blu builds the first draft
Describe the page in the chat: the layout, the copy, what it's for. Blu streams back the full HTML body. Once Blu creates the item, it's added to the top of the "Your assets" table right away. Click that row to open the full page editor.
📘 Media pending
Screenshot of launching a page and Blu's chat panel hasn't been captured yet.
Three ways to edit a generated page
A View mode dropdown in the editor's toolbar switches between three views:
- Visual Edits (the default view). Renders the page live. Click any element to open a small popup for direct edits: text color, bold, italic, font size, or swapping an image's source, without touching HTML.
- Code Edits. Opens the raw HTML in a code editor on the left with a live preview on the right. Use Format to auto-indent the markup, Copy HTML to copy it to your clipboard, and the Desktop / Mobile toggle above the preview pane to check both widths.
- Preview. Renders the page as it will actually display, using the same HTML the page will send.
Blu's chat panel stays docked while you edit, so you can keep describing changes instead of making every edit by hand.
📘 Media pending
Screenshot of Code Edits view hasn't been captured yet.
📘 Good to know
Send Test and email preflight checks are email-only. They don't appear on a Page item. If you need deliverability or link checks on the same content, build it as an HTML email instead.
Previewing as a real contact
The Preview as picker in the toolbar lets you search your project's contacts and pick one. Once picked, the editor switches to Preview and fills the page's personalization variables with that contact's actual name, email, title, company, and location instead of leaving raw variables in place.
Saving, exporting, and sharing a page
A title field and Save button sit at the bottom of the editor (the same button is mirrored in the toolbar). Save again later and the button reads Update. The Export dropdown next to it offers Download HTML, which saves the rendered page as an .html file named after its title, and Copy HTML, which copies the same markup to your clipboard.
From the Asset library table, each row's ⋯ menu also has Copy preview link, which copies the page's preview link without opening the editor.
Getting started
Build a landing page
- Go to Studio's Asset library.
- Click Page in the launcher tiles, or open Create asset and choose Page. Blu opens, pre-scoped to building a page.
- Describe the page in the chat, for example a signup page with a hero headline and an email capture form. Blu generates the HTML.
- Find the new page at the top of "Your assets" and click it to open the editor.
- Stay in Visual Edits to click into any element and adjust its text, color, or image directly, or switch to Code Edits to change the raw HTML yourself.
- In Code Edits, use Format to clean up the markup and the Desktop / Mobile toggle to check both widths.
- Keep chatting with Blu in the docked panel for changes you'd rather describe than make by hand.
- Use Preview as to check how the page looks with a real contact's data filled in.
- Give the page a title, then click Save.
- Use Export to download the HTML file or copy it, or copy the page's preview link from the Asset library's row menu.
Use cases
- Building a signup page from a one-line prompt. Describe the page to Blu instead of assembling the layout by hand.
- Asking Blu for a specific change instead of editing HTML. Describe what you want changed in the docked chat panel while your draft is open.
- Fixing a headline's color or size without touching code. Click into it in Visual Edits and use the inline popup instead of hunting for the right CSS.
- Making a precise layout change Visual Edits can't reach. Switch to Code Edits and change the markup directly.
- Checking a page's markup is clean before handing it off. Use Format in Code Edits instead of eyeballing indentation.
- Confirming a mobile visitor sees a usable layout. Use the Desktop / Mobile toggle in Code Edits before you consider the page done.
- Seeing the page with a real contact's details instead of raw variables. Pick a contact with Preview as instead of guessing how personalization will render.
- Using a page's HTML somewhere else. Use Export's Download HTML to get a standalone
.htmlfile instead of copying markup out of the code view by hand. - Dropping a page's markup into another tool. Use Copy HTML from the Export dropdown.
- Copying a page's link for someone else. Use Copy preview link from the Asset library row menu instead of opening the editor to hand it over.
Where to go next
Email Deliverability Guide
How to read and act on the Deliverability check in Email Preflight, the score that predicts your inbox placement odds before you send an HTML email.
Studio Overview
Studio is Intempt's content-authoring workspace for building every email, SMS, push, Slack, code, and image asset your campaigns use, then reusing them across Journeys.