Two-Column Layouts & Responsive Design
LeadCapture landing pages support multiple layout options so you can control how your content and form are arranged on the page. You can use a single-column layout for simplicity, or a two-column layout to display content alongside the form. All layouts are fully responsive and automatically adapt to mobile devices.
Available Layouts
| Layout | Description |
|---|---|
| Single Column | All content blocks and the form are stacked in a single centered column. This is the default layout. |
| Two Column (Form Right) | Content blocks appear in the left column and the form appears in the right column, side by side. |
| Two Column (Form Left) | The form appears in the left column and content blocks appear in the right column. |
Changing the Layout
- Open your funnel in the builder.
- Open the Page Settings (click on an empty area of the canvas so no block is selected).
- Find the Layout setting and select your preferred option.
- The canvas updates immediately to show the new layout.
You can also change the layout using the AI Copilot. Type "switch to a two-column layout with the form on the right" in the copilot chat.
How Two-Column Layouts Work
In a two-column layout, the page splits content around the form:
- Content blocks placed above the form in the element list appear in the content column (the non-form side).
- The form itself occupies the form column.
- Content blocks placed below the form in the element list appear in a full-width section beneath both columns.
This means you can add headlines, text blocks, and images in the content column to explain your offer, while the form stays visible next to it for easy access.
Responsive Behavior
All layouts automatically adapt to the visitor's screen size:
- Desktop (768px and wider) – Two-column layouts display side by side as intended.
- Tablet and Mobile (below 768px) – Columns stack vertically. The content column appears first, followed by the form column below it.
You do not need to create separate mobile and desktop versions. The responsive behavior is automatic.
Mobile Style Overrides
Beyond the automatic stacking behavior, you can fine-tune how individual elements look on mobile:
- Select an element on the canvas.
- In the element editor, click the Mobile device icon to switch to mobile editing mode.
- Adjust any style property. Changes made in mobile mode only apply on screens smaller than 768 pixels.
- A blue indicator appears on any setting that has a mobile-specific value.
- Use "Reset to desktop" to remove a mobile override and inherit the desktop value.
Previewing on Different Devices
Use the responsive preview buttons in the builder header to see how your page looks at different widths:
- Desktop – Full-width canvas.
- Tablet – 768px fixed width with a visible border.
- Mobile – 375px fixed width with a visible border.
These previews are available while building, so you can check your layout before sharing the page.
Pro Tips
- Two-column layouts work best when you have strong supporting content (like benefit lists, testimonials, or images) that should be visible while the lead fills out the form.
- For short, simple funnels with minimal landing page content, single-column is usually the better choice. It keeps the focus on the form.
- Test your layout on mobile. Since two-column layouts stack vertically on small screens, make sure the content order makes sense when stacked.
- You can mix and match: use a two-column layout for the main section and add full-width content (like a footer area) by placing blocks below the form in the element list.