Customizing Your Funnel and Website 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).

Live Site URL Display in Funnel/Website Builder 

Users can view the live site URL directly from the page they are working on. This improvement streamlines workflows by eliminating the need to navigate back to the funnel/website listing page to access the live site URL. While editing a funnel or website in the builder, the live site URL is prominently displayed within the builder interface. This feature requires no special setup or limitations, providing a seamless addition to any website management process.

Column Spacing Adjustment: Margin Left and Right Options

The Margin Left and Right option for the column element allows you to manually adjust the spacing on the left and right sides of each column. This ensures that you have greater control over your layout design, helping to create more visually appealing and well-spaced content.

Benefit:

• Design Flexibility: Easily adjust column spacing to create cleaner, more organized layouts, especially when default padding no longer meets your design needs.

How to Use:

1. Go to the column element in your page builder.
2. Locate the new Margin Left and Margin Right options in the style settings.
3. Adjust the margins as needed to achieve the desired spacing between columns.
4. Save your changes to update the layout.

FAQ’s

1. Can I adjust the column spacing on mobile layouts?
   At the moment, the margin adjustment applies only to desktop layouts. Mobile layout support will be introduced in a future update.
2. Do I need to create a new funnel page to use this feature?
   Yes, this feature is available only for newly created pages after the column spacing fix release.
3. 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.
4. 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.
5. Can I use this feature with previously created pages?
   Unfortunately, this feature is only available for new pages created after the fix. Existing pages will not have the margin options available.