Help center

Go to Topline
All collectionsSitesCustomizing Your Funnel and Website for Mobile and Desktop Views

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 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. 

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).

Margin left & right for column element in Funnel/Website builder

To leverage the new Margin left and right option for column elements effectively, follow these steps:

  1. 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.

  1. Select the Desired Column:

  • Identify the column or columns for which you want to adjust the spacing.

  1. Open Column Settings:

  • Click on the column element to open its settings menu.

  1. Navigate to Advanced Settings:

  • Within the settings menu, locate the "Advanced" tab or option.

  1. Activate Margin left and right:

  • Under the "Advanced" settings, look for the Margin left and right option. Toggle this option to enable it.

  1. 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.

  1. 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.

  1. Save Changes:

  • Once you're satisfied with the spacing adjustments, be sure to save your changes to apply them to your funnel or website.

  1. 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.

Did this answer your question?
😞
😐
😁
RoadmapHomepage