Mobile view in the Landingi application is twofold. If you use a template for creating your landing page, it already has a mobile view prepared.
When creating a landing page yourself from scratch, you need to customize the view of smartphone.
Mobile view is created automatically based on desktop view and sometimes elements on mobile viewport need to be adjusted manually.
If the mobile view doesn’t look like you expected, you can adjust it by hand, for example by expand the the section, regardless of the desktop view.
1. The mobile view can be added by clicking Add viewport on the top bar in the editor. To switch views click the view icons those ones next to another.
2. Before a landing page publication, make sure that all content and elements are arranged properly in all views. If they are not, you must manually set up and edit elements on each view. If you added a form on your landing page or you used a template with the form, you should also check out the mobile view for the conversion page.
The default view in the editor is a desktop view. Mobile view display is closely linked to the type of sections you used on the landing page. It is extremely important to add divided sections to the landing page, especially if you want to use the smartphone view. Plan where to put the sections already at the beginning of your work with the landing page.
While adding a section to the editor, you can choose between single or divided into two, three or four columns section. Columns are not visible on the website after publication.
1. Add a section by dragging a section widget to the landing page active area.
2. Choose the section type made of one, two, three or four columns.
3. You can see a section with two columns added to the editor on the desktop view. After you can add other elements, background, etc.
4. You can add mobile view by click on Add Viewport on the top bar of the editor. After adding mobile view all elements previously used on the desktop view will be automatically transferred to the newly added view.
5. Elements in the section are ordered. Note that the two-, three- and four-columns section are arranged in this view one above the other, from left to right vertically. Elements on the mobile view can be moved inside the section with no consequences on the other view.
6. Keep in mind, that you can not change the text on the mobile view. Instead of this you can create a new widget directly on mobile with different text than on the desktop and hide the first one. It helps to avoid problems on the mobile viewport.
IMPORTANT! You can go around this by switch off a desktop view for a moment, edit a text widget and switch the desktop on again. Additionally, you cannot remove any widget on this viewport or move it to the other section.
7. Additionally, you can add new and hide unnecessary elements on individual view. Find details in this article.
REMEMBER! If you delete the element on the desktop view, will delete the element on mobile view also. So, instead of deleting elements you can hide them.
Bear in mind, that you should also check a mobile view for the conversion page.
8. Make sure that the blue frame of an element does not extend beyond the editor workspace (dashed vertical lines). Frame extending beyond the workspace causes a problem with landing page display on some devices.
If you can not move the blue frame of element make sure that the element is not blocked or hidden in the Layers panel.
When you would like to find a blocking element, it has an icon of a closed padlock. The hidden icon is a crossed eye on the panel. Unhide/unblock the element and shorten the frame. After editing, hide/block element again.
9. The Rebuild Mobile View option lets you to rearrange the elements automatically on a mobile view, if after making the changes on a desktop view it does not meet your expectations. You can decide to rearrange the elements for the whole landing page (1) or for the certain section (2).
Mobile views specification:
Smartphone: the display less than 700 px (most smartphones).