4. How to Use the Mobile Page Builder
Video Tutorial:
Article:
Your page’s mobile version is automatically generated by Convertri, and lives inside the Page Builder.
It’s best to get the desktop page looking exactly how you want it to look before you click on Mobile view as Convertri automatically generates it based on elements and settings you’ve added to your Desktop page.
Just like with any page builder, our conversion algorithm isn’t guaranteed to be 100% perfect - but, unlike a lot of other editors, we let you reposition elements and tweak sizing to get your page exactly how you want. Any edits you make in the Mobile view won’t affect your Desktop version, except for changing the property of an element itself - e.g. changing the colour, making something full-width - then that will change the desktop view, or unless you actively delete an element completely, so don’t worry about anything being out of place.
To access and edit your mobile page, click the Mobile button in the top bar. You can switch back and forth anytime.
Here’s a quick tour of the Mobile Page Builder:
You’ll see it’s almost exactly the same as the normal Page Builder, so before you begin make sure you familiarise yourself with the layout. However, the Mobile view has a few important differences:
- You cannot add elements in the Mobile view (but you can edit their properties)
Remobilize - this button appears next to Display in the top toolbar after you make any changes to the mobile version. It reruns Convertri’s automatic mobile conversion. Click to restore the original automatic mobile version generated by Convertri - but only if you’re unhappy with your edits.
We recommend that you create your desktop version first, before making any manual changes to your mobile version, as making any manual change while still creating your desktop version will stop our automatic remobilization of your mobile version.
Allowing text editing in mobile mode brings up an option in the Quick Actions toolbar where you can select font size scaling, edit text styles - Font style, font size, colour, etc. Default text scaling is set to 150% to make relative text size more accurate on smaller screens, but you can make it bigger or smaller. See the article How to Allow Text Editing in Mobile Mode
What you see in the Mobile Page Builder is exactly how it will look on any device, regardless of screen size. For example, if you arrange 6 words on a single line, the viewer will always see 6 words on that line whatever device they’re using.
NOTE: clicking Preview on the mobile page will preview how your page will look on the screen you’re using. So, if you’re on a desktop, you’ll see your desktop version even if you’ve been editing in mobile view.