Customizing Your Funnel and Website for Mobile and Desktop Views
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 in mobile than they do in desktop, since all the content in mobile stacks vertically. Items aligned left to right on 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, 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 do 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.
Related Articles
Customizing Funnel and Website Colors
Within the funnel or website builder, you can completely customize each step, including colors, fonts, and more. Follow these steps to learn how to customize the colors of your funnel or website, using a few different methods. You can make overall ...How to Customize the Navigation Bar in Your Funnel's Mobile View
You can customize the navigation bar for your funnel or website's mobile view. Step 1: Choosing the Mobile background color Navigate to the funnel builder Add a navigation bar using the drag-and-drop funnel (or website) builder. With the navigation ...How To Use Time Delay In The Funnel and Website Builder
You may want to delay the appearance of certain elements in your funnels or website. This can be done using the Countdown timer, or time delay feature, within the builder. Step 1: Hiding initial visibility. To have something pop up after a time ...Implementing Funnel Best Practices
Creating funnels within the Funnel Builder works best through simplicity. The simpler the funnel is set up the easier it will be to convey your message, convert leads into sales, and perform regular maintenance and changes. Here are some best funnel ...Converting Funnel Steps and Website Pages Within LANA
If you want to convert or import a funnel or website page into a new funnel or website you are building, you can do so using the import feature. This will save you time and allow you to work efficiently in your Funnel and Website builders, so you ...