Mobile views in the Landingi application are twofold.
If you use a template for creating a landing page, they already have a mobile view.
When creating a landing page yourself, you need to customize the view of tablet and smartphone or one of them. Depends on which one do you need.
1. Templates mobile views
- The views 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 the 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 views
The default view in the editor is the desktop view. Mobile views 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 begging 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. If you plan to add the view for the smartphone, we recommend you to frequently use sections divided into columns (two or more). The columns are not visible on the website after publication.
Let's start from adding a section:
- Drag a "Section".
- Drop it in the editor and choose sections made of two, three or four columns.
After added 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 views all elements previously used in the desktop view will be automatically transferred to the newly added view.
3. Elements in the section divided into columns are ordered. Note that the two-, three- and four-column section are arranged in this view one above the other, from left to right vertically. Elements on mobile view can be moved and edited inside a section with no consequences on the other views.
4. 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 first one. This 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.
5. Additionally, you can add new and hide unnecessary elements on individual views.
Find details in this article.
If you delete the element in the editor on any view, will delete the element in all views.
So, instead of deleting elements you can hide them 😉
6. If you used a form on your landing page you should also check and create the 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);
Tablet computer: display 764 px.