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.
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 absolutely 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 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 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).
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.
To leverage the new Margin left and right option for column elements effectively, follow these steps:
Access the Funnel/Website Builder:
Log in to your CRM account and navigate to the Funnel/Website Builder section where you want to apply the column spacing adjustments.
Select the Desired Column:
Identify the column or columns for which you want to adjust the spacing.
Open Column Settings:
Click on the column element to open its settings menu.
Navigate to Advanced Settings:
Within the settings menu, locate the "Advanced" tab or option.
Activate Margin left and right:
Under the "Advanced" settings, look for the Margin left and right option. Toggle this option to enable it.
Adjust Spacing:
Once the Margin left and right option is activated, you'll typically see input fields or sliders where you can specify the desired amount of spacing. Adjust these values according to your design preferences.
Preview and Fine-Tune:
After adjusting the spacing, preview your funnel or website to see how the changes affect the layout. Fine-tune the spacing as needed to achieve the desired visual balance.
Save Changes:
Once you're satisfied with the spacing adjustments, be sure to save your changes to apply them to your funnel or website.
Repeat as Necessary:
If you have multiple columns that require spacing adjustments, repeat the above steps for each column as needed.
By following these steps, you can effectively utilize the Margin left and right option to enhance the visual appeal and layout of your funnel or website, ensuring a seamless user experience for your visitors.