Customizing Your Funnel and Website for Mobile and Desktop Views

Modified on Mon, Dec 5, 2022 at 9:45 PM

One of the perks of the funnel builder is the ability to see and edit what the funnel looks like in desktop and mobile view. However, sometimes what looks best on one view does not look best on the other. The best solution to make sure that the funnel design looks good on both views is to keep in mind that the simpler, the better, and to switch to the mobile view editor after finishing up a section in the desktop view.

The alignment of some columns and elements appear different on mobile than they do on desktop since all the content on mobile stacks vertically. Items aligned left to right on the desktop will appear top to bottom on mobile.

Ideally, it is not best practice to create Mobile Only or Desktop Only sections, rows, columns, or elements (can hide certain content so that it only appears in one view). When it comes to editing, you will have to do double the work since the updates/revisions made on one view do not update on the other view (they are separate content now that it only appears in one view). However, in some scenarios, it is necessary to create Mobile or Desktop only sections to accomplish certain designs.

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

Layout, spacing, and other structural changes require mobile-only and desktop-only sections. As such, the recommendation is to build out the desktop version first and then, in mobile view, determine which sections don't show up how you want them to. Once you've determined those sections, you can duplicate them and change one version to desktop only (see steps below) 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 yellow "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.

This is what it looks like when they are un-selected or off:

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.