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 needs to be adjusted manually.
If the mobile view doesn't look like you expected, you can adjust it by hand, for example expand the section, regardless of the desktop view.
1. Mobile view on the landing page template
- The mobile view can be added by clicking button "Add viewport" on the top bar in the editor. To switch views click the view icons those ones next to another.
- 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.
2. Self-added mobile view
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 beggining 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.
Let's start from adding a section:
- Drag a "Section".
- Drop it in the editor area and choose section made of one, two, three or four columns.
After added a section on the desktop view:
1. You can see a section with two columns added to the editor on the desktop view. After you can add other elements, background, etc.
2. You can add mobile view by click on "Add Viewport" button 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.
3. 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 mobile view can be moved inside the section with no consequences on the other view.
4. Keep in mind, that you can not change a 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 first one. It helps avoiding problems on the mobile viewport.
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.
5. Additionally, you can add new and hide unnecessary elements on individual view.
Find details in this article.
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 😉.
6. Bear in mind, that you should also check and create a mobile view for the conversion page.
7. 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.
Mobile views specification:
Smartphone: the display less than 700 px (most smartphones).