The Mobile Editor

Do you want to know how to view, edit, and optimize your ClickFunnels pages on mobile devices? This article will explain how to swap between Desktop and Mobile views, and how to make Sections, Rows, and/or Elements visible on desktop only, mobile only, or both. You will also learn how the Mobile view rearranges the Elements of a page and which Elements should not be duplicated in both versions of a page.

 

    

Prior to getting started, you will need to have the following:

The Mobile Editor:

There are times when a page looks good on its desktop version but doesn't display correctly when viewed from a mobile device. This is generally due to mobile's decreased ability to show advanced formatting and screen size limitations. Because of this, the ClickFunnels Page Editor has a Mobile view so customers can see how it will display from a phone or tablet and arrange the page accordingly.

Swapping between Desktop and Mobile views: 

  1. In order to access the Mobile view from the Page Editor, all you need to do is click on the Mobile icon in the top menu.

    The_Mobile_Editor_2.png


  2. To return to the Desktop view, you will click on the Desktop icon in the top menu.


    The_Mobile_Editor_2.png

Mobile view page structure

The Mobile Editor will rearrange the position of Elements in a single column row, regardless if the desktop design has 2 or more columns containing Elements. This is how the rearrangement looks like.

  1. 2 column row in the Desktop view


    The_Mobile_Editor_3.png


  2. The same 2 column row converted into a 1 column row in the Mobile view


    The_Mobile_Editor_4.png

Optimizing the Mobile view:

  1. In order to optimize the mobile version of a page, you can set the Mobile Size of text elements, including button texts. To access the settings, hover over the Element you want to edit and click the gear icon.


    The_Mobile_Editor_6.png

  2. After clicking the gear icon, you can find the option to edit the size of an Element to the right of your screen.


The_Mobile_Editor_5.png

Making Sections, Rows, and Elements visible only on desktop, only on mobile, or on both desktop and mobile:

  1. Sections, Rows, and Elements have three different visibility settings inside the Page Editor. To access the settings, hover over the Section, Row, or Element you want to edit and click the gear icon.


    The_Mobile_Editor_6__1_.png

  2. After clicking the gear icon, you can find the visibility settings at the bottom of every Section, Row, and Element contained on the page.


Desktop Only
The Section, Row, or Element will only be displayed in Desktop browsers.


The_Mobile_Editor_7.png

Mobile Only
The Section, Row, or Element will only be displayed in Mobile browsers.


The_Mobile_Editor_8.png

All
The Section, Row, or Element will be displayed in both the Desktop and Mobile versions of the page.


The_Mobile_Editor_9.png


Important Note: When setting a Section, Row, or Element to Desktop Only or Mobile Only, you will see a legend informing you of that and a red border will surround the Section, Row, or Element.

The_Mobile_Editor_10.png

Duplicating Sections, Rows, and Elements:

It is possible to create two versions of a page, one for desktop and one for mobile. You can do that by cloning Sections, Rows, and/or Elements and changing the visibility settings.

  1. For example, sometimes a background image will not display properly on the mobile version of your page when configuring it on the entire page. This is when adding the image to Settings > Background within the Page Editor.


    The_Mobile_Editor_12.png

  2. Instead, you can add the background image within a Section after clicking the gear icon to access the Section settings.


The_Mobile_Editor_13.png


Then, you can clone the Section, and set the cloned version visibility settings to Mobile Only. Once you have two Sections, one set to Mobile Only and the other to Desktop Only, you can edit each individually.

  1. Hover over the Section, Row, or Element and click on the Two-sheet icon to clone.


    The_Mobile_Editor_11.png


  2. Access the cloned Section, Row, or Element settings by clicking the Gear icon.


    The_Mobile_Editor_6__2_.png


  3. Set the visibility settings to Mobile Only by clicking the Cell Phone icon at the bottom.


    The_Mobile_Editor_8__1_.png


  4. Access the original Section, Row, or Element settings by clicking the Gear icon.

    The_Mobile_Editor_6__3_.png

  5. Set the visibility settings to Desktop Only by clicking the monitor icon at the bottom.


The_Mobile_Editor_7__1_.png


Important Note:
If you don’t follow the above instructions and move Sections, Rows, and/or Elements around, add and/or remove text, use the hide and show options, or edit something that doesn’t specify that you’re editing the Mobile view (see  Optimizing the Mobile view above) all changes will apply on both versions of your page (desktop and mobile).

Elements that should not be duplicated:

In creating the best possible design for both page versions, you could end up duplicating Elements that shouldn’t be duplicated.

Important Note: To avoid breaking the page, it is very important that Order Elements (Credit Card, Order Select, Order Bump, etc.) are present only one time. Its visibility on Order Form, Upsell, Downsell, and Order Confirmation pages should be set to ALL devices. Having an Order Form set for mobile and a second Order Form set for desktop will result in an error when attempting a purchase.

 

 If you have any questions about this, please contact our support team by clicking the support icon in the bottom right-hand corner of this page.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article