Building a landing page with the drag-and-drop editor
Use the visual builder to compose a landing page: templates, components, viewport previews, and saving.
Overview
SiteDetour's landing-page builder is a drag-and-drop visual editor that runs entirely in the browser. It supports three viewport sizes and exports clean HTML/CSS that is served verbatim from your link domain. This article walks through the mechanics.
Open the editor
Go to Landing Pages and click Create New. Fill in page metadata first:
- Name, Description — internal fields.
- Document Title — the browser tab title, also used by search engines.
- Link Domain and Path — where the page will be served. Auto-generated or custom.
The builder renders below the metadata.
Start from a template (optional)
Use the Select a template... dropdown above the canvas and click Apply Template to load a starter document. Templates are production-ready starting points — swap the copy, images, and colors.
Device viewports
Three icons in the top-left of the builder toolbar switch the canvas viewport: desktop, tablet, mobile. Responsive-layout rules you set on a component are applied at each breakpoint; use the viewport toggle to preview how the page looks at each size.
The component library
Along the right side of the builder, you'll find component blocks:
- Basic: Link Block, Quote, Text, Image, Video, Map, Divider.
- Sections/Columns: pre-built containers for laying out content.
- Forms: Form, Input, Textarea, Select, Checkbox, Button.
Drag a block into the canvas to add it. Click any element in the canvas to select it; the right-hand Style Manager exposes CSS properties (typography, spacing, layout, background, borders).
Editing raw HTML/CSS
Click the </> icon in the toolbar to open the code view. You can paste HTML or CSS directly, and the canvas updates. Useful when pulling existing HTML from another tool, or tweaking a specific style that the visual controls don't expose.
Uploading images
Drag any Image block into the canvas and click it to open the asset picker. Upload a PNG/JPG/SVG from your computer. Uploaded assets are stored on SiteDetour and referenced by URL; there's no per-page asset quota beyond your plan's overall storage cap.
Save and publish
The builder works in a local buffer. After making changes:
- Click Apply Changes in the toolbar. This copies the current canvas into the page record.
- Click Save at the top right of the page. This persists to SiteDetour's server.
Both steps are required. Closing the browser without applying loses in-progress edits. The moment Save completes, the page is live at its configured URL.
Duplicating a page
To use an existing page as a starting point, open it and re-save with a different name and path. The old page remains intact.
Next steps
