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:
- 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.
- To return to the Desktop view, you will click on the Desktop icon in the top menu.
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.
- 2 column row in the Desktop view
- The same 2 column row converted into a 1 column row in the Mobile view
Optimizing the Mobile view:
- 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.
- After clicking the gear icon, you can find the option to edit the size of an Element to the right of your screen.
Making Sections, Rows, and Elements visible only on desktop, only on mobile, or on both desktop and mobile:
- 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.
- 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.
Mobile Only
The Section, Row, or Element will only be displayed in Mobile browsers.
All
The Section, Row, or Element will be displayed in both the Desktop and Mobile versions of the page.
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.
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.
- 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.
- Instead, you can add the background image within a Section after clicking the gear icon to access the Section settings.
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.
- Hover over the Section, Row, or Element and click on the Two-sheet icon to clone.
- Access the cloned Section, Row, or Element settings by clicking the Gear icon.
- Set the visibility settings to Mobile Only by clicking the Cell Phone icon at the bottom.
- Access the original Section, Row, or Element settings by clicking the Gear icon.
- Set the visibility settings to Desktop Only by clicking the monitor icon at the bottom.
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.
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.
