With Smartpages, you can edit landing pages in a desktop and mobile view. If you select an empty template, you have to enable and customize the mobile view yourself. Other templates contain a built-in mobile view, which you can still modify freely. The mobile view is automatically created based on the desktop view (however, the desktop view won’t be automatically created based on the mobile one). We recommend starting with the desktop view and then adjusting the mobile view.
The mobile view of an empty template is created automatically based on the desktop view, however, some elements may require manual adjustment. If the mobile display does not look the way you want it to look – you can easily adjust it by extending the height of some sections or moving the objects. Remember that changes introduced in the mobile view do not affect the arrangement of elements and sections in the desktop view.
Mobile view in an empty template
You can easily enable the mobile view when editing an empty template. Find the smartphone icon on the top bar of the editor and use the slider to activate the mobile view.
Before you publish a landing page, make sure that all content and elements are properly positioned in all sections of each view. If not, arrange and edit the elements yourself.
If you select a template that contains a form, check the mobile view for the page after conversion, the so-called thank you page. Such manually added form has an empty page after conversion in both views – you must design it yourself.
Mobile view for a landing page created from scratch
The default view in the editor is the desktop view. The mobile view is closely related to the type of sections you used on the landing page, which is why you have to start planning the mobile view at the very beginning. You can enable the mobile view at any time – all previously used elements will be automatically loaded to it.
Once you add a section to the editor, you can choose between a single section or a section divided into two, three, or four columns. When planning to add a mobile view, we recommend that you use few sections with more than one column. The columns are not visible on the page after publication (there are no frames).
Editing with the mobile view
- Find the Section widget on the left side of the editor, then drag and drop it into the active area of your landing page. left side of the editor, then drag and drop it into the active area of your landing page.
2a. In an Add a section window, hover over Choose a blank section.
2b. Select a section with one, two, three, or four columns.
- Elements in the section with division into columns are pre-arranged. In the mobile view, the columns are arranged one above the other, starting from left to right vertically. You can move them freely – this does not affect the layout of the columns in the desktop view.
3. Elements in the section with division into columns are pre-arranged. In the mobile view, the columns are arranged one above the other, starting from left to right vertically. You can move them freely – this does not affect the layout of the columns in the desktop view.
- Remember that it is not possible to edit the text of the desktop view from the mobile view panel. Instead, you can drop any widget that will only be visible in the mobile view. Additionally, it is not possible to remove widgets from the mobile view panel or move them between sections.
You can also work with the desktop view disabled. Find the monitor icon on the top bar of the editor and use the slider to turn off the desktop view. After you have finished editing the text, you can turn on the desktop view again.
- In the mobile view, you can add new elements and hide the ones that you don’t want in the desktop view (the same the other way). The desktop view does not have to be reflected in the mobile view exactly the same. You will find more about hiding elements here.
REMEMBER: If you delete an item in the desktop view, it will also be deleted in the mobile view. That is why instead of deleting, you can hide elements.
- Verify the mobile view of the thank you page before publishing.
- The blue frame of the element (continuous line) should not go beyond the editor’s working area (vertical dashed line). If the element is framed outside the working area, your landing page may not display correctly on mobile devices.
- The rebuild mobile view option allows you to reposition elements in the mobile view automatically if the layout does not meet your expectations after applying changes in the desktop view. You can choose to rearrange the elements for the whole landing page (rebuild mobile) or for an individual section (rebuild section).
Mobile view specification:
Smartphone: display smaller than 764 px (most smartphones).
