Landing Page Canvas
Navigate and manage your landing pages, variants, and translations in the visual canvas.
When you open a campaign's Landing Pages tab, you see the landing page canvas—a visual workspace where all your landing pages, variants, and translations are displayed as connected nodes.
Understanding the Canvas
The canvas uses a flow-based layout where:
- Champion landing pages are the primary versions
- Variants branch off horizontally to the right
- Translations appear below their parent page
- Connecting lines show relationships between pages
Node Types
Champion
The primary landing page. This is your base design from which variants and translations are created.
Variant
An alternative version for A/B testing. Variants start as copies but can be modified independently.
Translation
A language-specific version of a landing page. Translations maintain the design while changing the content language.
Navigating the Canvas
Pan and Zoom
- Pan: Click and drag on empty space, or scroll with two fingers
- Zoom: Use the scroll wheel, or pinch to zoom on trackpad
- Fit View: The canvas automatically fits all nodes in view when opened
Selecting a Champion
When you have multiple champion landing pages, click on any champion node to select it. The selected champion determines:
- Which variants and translations are visible
- Which page opens when you click to edit
Your selected champion is saved. When you return to this campaign, the same champion will be selected.
Canvas Controls
The canvas includes a control panel for managing your view and pages:
Visibility Filters
Toggle visibility of different node types:
- Show Variants: Show or hide variant nodes
- Show Translations: Show or hide translation nodes
Auto Layout
Click the auto-layout button to reorganize all nodes in a structured layout:
- Champions at the origin
- Variants to the right
- Translations below
This is useful after creating or deleting pages to keep the canvas organized.
Creating New Pages
From the canvas controls, you can:
- Create New⌘N - Create a new champion landing page
- Create Variant - Create a variant of the selected champion
- Create Translation - Create a translation of the selected champion
Working with Nodes
Opening a Page
Double-click any node to open that landing page in the editor.
Dragging Nodes
Nodes can be freely positioned by dragging. This is purely visual organization—it doesn't affect functionality.
Node Preview
Each node shows a live preview thumbnail of the landing page, helping you quickly identify different versions.
Empty State
When a campaign has no landing pages yet, you'll see an empty state with a prompt to create your first landing page.