Customizing Your Funnel and Website for Mobile and Desktop Views

for Mobile and Desktop Views

The funnel and website builder allows you to see what a funnel looks like in both a desktop and mobile view. This will help you make sure that the funnel design looks good in both views.  

In order to alter and customize your funnel or website for each view, you will need to understand how to create and use Mobile Only or Desktop Only sections, rows, columns, and elements.

Using Desktop and Mobile Only Sections

The funnel builder can hide certain elements of your funnel builder so that it will only appear in one view. 

However, we recommend that you avoid using these Mobile Only or Desktop Only sections, rows, columns, or elements (unless it's necessary). This feature often forces you to do double the work since the updates/revisions made on one view do not update on the other view (once an element is Mobile or Desktop only, edits or changes will be limited to one view, so you’d have to make changes twice).

That said, layout, spacing, and other structural changes require using Mobile Only or Desktop Only sections. As such, the recommendation is to build out the desktop version first and then in mobile view, determine which sections have to be altered. 

Once you've determined those sections, you can duplicate them and then change one version to desktop only and the other to mobile only. You'll then be able to edit the mobile-only as needed. 

To have a section be desktop-only or mobile-only, follow these simple steps:

Step 1: Click the Edit icon on the funnel of your choice.

Step 2: Click the blue "Edit Page" button.

Step 3: Click on the element you want to edit.

Step 4: Under the element’s Settings, tab over to "Advanced".

Step 5: Under "Visibility" click on the desktop and mobile icons until blue to turn them both on.

Step 6: Then, in the top menu bar, you can click the same desktop and mobile icons to view the optimized pages.

Step 7: Be sure to save changes before exiting.

NOTE: Font sizes are the only elements that can have simultaneous settings (desktop font size and mobile font size).

FAQ’s

1. Can I adjust the column spacing on mobile layouts?Yes, margin adjustment is available for Mobile view as well.
2. Will the margins apply automatically to all columns on the page?No, the margin settings must be applied individually to each column where spacing is desired.
3. What happens if I don’t adjust the margin for columns?If no margin is set, the columns will remain adjacent without additional spacing, following the default layout behavior. Adjusting the margins will allow for more control over column spacing.