Who This Is For / When to Use
This guide is for users who want to:
Optimize layouts for mobile devices
Adjust spacing or structure differently on desktop vs mobile
Control which elements appear on specific device types
Ensure funnels and websites are responsive before publishing
How Desktop and Mobile Views Work
The Funnel and Website Builder includes Desktop and Mobile preview modes.
These modes allow you to:
Preview how content renders on each device
Adjust spacing, layout, and visibility per device
Hide elements on one device while showing them on another
Important:
Most edits apply to both views by default. Only visibility and certain layout changes require device-specific settings.
Step 1: Open the Funnel or Website Builder
Navigate to Funnels.
Click the three-dot menu next to the funnel.
Select Edit.
Result:
You are now inside the funnel editor.
Step 2: Open the Page Editor
From the Steps tab, locate the funnel step.
Click Edit on the step.
Result:
The page opens in the visual builder.
Step 3: Add or Select Elements
Click the + icon in the top-left toolbar.
Open Elements.
Drag or select the element you want to customize.
Result:
The selected element is now editable.
Step 4: Switch Between Desktop and Mobile Views
Use the device toggle in the top toolbar to preview layouts.
Desktop icon = Desktop view
Mobile icon = Mobile view
Result:
You can now see how the page renders on each device.
Step 5: Control Element Visibility by Device
To show or hide an element on specific devices:
Click the element.
Open Advanced settings.
Scroll to Visibility.
Toggle:
Desktop icon (desktop visibility)
Mobile icon (mobile visibility)
Result:
The element is now device-specific.
Step 6: Build Mobile-Only or Desktop-Only Layouts (When Required)
Use this method only when the layout must differ structurally.
Recommended workflow:
Build the desktop version first.
Duplicate the section or row.
Set one version to Desktop only.
Set the duplicate to Mobile only.
Customize each version separately.
Important Limitation:
Once an element is set to Mobile only or Desktop only, edits must be made separately for each version.
What Can and Cannot Be Edited Separately
Can Be Device-Specific
Visibility
Layout structure
Spacing and margins
Element order (via duplication)
Applies to Both Views Automatically
Text content
Colors
Images
Buttons
Exception
Font size supports separate Desktop and Mobile values.
Common Issues and Fixes
Changes appear on both desktop and mobile
This is expected behavior unless the element is set to Mobile only or Desktop only.
Mobile layout looks incorrect
Switch to Mobile view and adjust spacing or duplicate the section for a Mobile-only layout.
Element disappeared unexpectedly
Check Advanced > Visibility to confirm it is enabled for the current device.
FAQ
Can I adjust column spacing on mobile layouts?
Yes. Margins and padding can be adjusted while in Mobile view.
Will margin changes apply to all columns automatically?
No. Margins must be set individually for each column.
What happens if I don’t adjust margins?
Columns will follow the default layout with no added spacing.
Is using Mobile Only or Desktop Only required for every design change?
No. Avoid using them unless the layout truly requires a different structure.
Can I change the order of elements on mobile?
Mobile layouts stack left-to-right by default.
To change the order:
Duplicate the row
Set it to Mobile only
Reorder elements manually
Do I need to save changes before exiting?
Yes. Always save before leaving the builder to preserve device-specific edits.