How to Use the Mobile Page Builder - Convertri

Master Convertri's mobile page builder. Follow this step-by-step guide to design responsive, high-converting mobile pages without writing any code.

How to Use the Mobile Page Builder

A high-converting mobile page is essential nowadays as mobile traffic outpaces desktop traffic.

Unlike many traditional page builders that "squish" your desktop site into a narrow column, Convertri offers a dedicated Mobile Page Builder. This gives you complete freedom to design a mobile experience that is distinct, faster, and more user-friendly than a standard responsive template.

Video Tutorial:

Here’s everything you need to know to master the Convertri Mobile Editor, from automatic generation to pixel-perfect manual adjustments.

What the Best Website Builder Does

While most website builders rely on standard responsive website design, this approach often fails for complex websites.

The code automatically shifts elements to fit mobile devices, often destroying your site structure. This results in messy layouts that frustrate mobile users and prevent you from having a professional-looking site.

Convertri is different. We believe the best website builder should give you total control. We use intelligent mobilization to function as a dedicated mobile website builder.

• Automatic generation: When you build your desktop page, Convertri automatically creates a mobile-friendly website version based on your visual hierarchy. It is the easiest way to build your own website without starting from scratch.
• True drag-and-drop freedom: Unlike a standard website maker, we offer complete independence. Once generated, you can use our drag-and-drop editor to resize and rearrange elements for mobile visitors without affecting your desktop page.
• Performance & SEO: Search engines prioritize user experience. Convertri ensures lightning-fast load times to boost your search engine visibility. With built-in SEO tools, it becomes easy to optimize your mobile website and track results in Google Search Console.
• Flexible publishing: Whether you use a free domain or connect a custom domain, your site remains fully optimized.

NOTE: Think of the mobile builder as a separate canvas. It shares the same content as your desktop page but allows for a completely unique layout, ensuring you capture every lead regardless of the device they use.

Don't lose another mobile visitor to a messy interface. Switch to intelligent mobilization.

Step-by-step Instructions:

Step 1: Accessing the mobile builder

Once your desktop page is ready, navigate to the top toolbar in the page builder.

• Click the Mobile button.
• You can switch back and forth between Desktop and Mobile views at any time.

Step 2: Editing the layout

The mobile view is a "What You See Is What You Get" editor. The layout you see in the builder is exactly how it will appear on any device, regardless of screen size.

• Repositioning: You can move elements around and tweak their sizing to perfect the layout.
• Safety: Any edits you make in the mobile view will not affect your desktop version. You don't need to worry about breaking your main site while adjusting the mobile view.
• Limitation: You cannot add new elements while in mobile view; you can only edit the properties of existing elements.

Step 3: Adjusting text size

Text often needs to be scaled differently for smaller screens.

1. Select the text element you wish to change.
2. Locate the Quick Actions Toolbar.

3. Select the Font Size Scaling option.

Note: The default scaling is set to 150% to make text legible on small screens, but you can adjust this percentage up or down to suit your design. See the article How to Allow Text Editing in Mobile Mode.

Step 4: Using the remobilize button

If you have made edits to the mobile version but aren't happy with the result, you can reset the page.

Locate the Remobilize button in the top toolbar (next to "Display"). Clicking this will rerun Convertri’s automatic conversion algorithm.

Warning: This restores the original auto-generated version and will undo your manual mobile edits.

Step 5: Previewing your page

When you are ready to check your work, click the Preview button.

Important Note: The preview function shows how the page looks on the device you are currently using. If you click Preview while on a desktop computer, even if you are currently editing in mobile view, you will see the desktop version of the page. To see the mobile version, you must view the preview on a mobile device or use browser developer tools to simulate a mobile screen.

Experience the only builder that treats mobile as a unique canvas, not an afterthought.

Best Practices for Creating a Responsive Website

To rank high in Google's mobile-first index and keep users happy, follow these rules:

• Stack vertically - Mobile screens are narrow. Ensure your content flows in a single column.
• Larger fonts - Body text should be at least 16px to be legible without zooming.
• Padding is king - Don't put text right against the edge of the screen. Ensure there is "breathing room" on the left and right.
• Optimize images - While Convertri does this automatically, try not to load the mobile page with 50 heavy images. Use the "Hide" feature for decorative images that don't add value on mobile.
• Sticky headers - Use a sticky header for your Call to Action (CTA) so it is always accessible as the user scrolls.

Troubleshooting Common Problems

"My text changed on the Desktop when I edited the Mobile!"

Cause: You likely edited the text content or formatted it using the text toolbar.

Fix: Only use the Text Scale slider in the Properties panel to change size on mobile. Do not type new words unless you want them changed everywhere.

"My elements are overlapping."

Cause: You may have moved a container box without moving the elements inside it, or "Remobilize" grouped them tightly.

Fix: Manually drag the elements apart. Use the Shift + Drag command to move a group of elements down to create space.

"I can't find an element I added on Desktop."

Cause: It might be hidden behind another element or sitting in the "Unused Elements" tray.

Fix: Check the Layers panel to see if the element is behind a background. Check the Element Tray for items that have not yet been placed on the canvas.

FAQs

Q: If I delete an element on Mobile, does it delete on Desktop?

A: Yes! Deleting an element removes it from the page entirely. If you don't want it to appear on mobile, use the Hide/Visibility setting instead of deleting it.

Q: Can I have a completely different menu for mobile?

A: Yes. Create a standard menu for Desktop and hide it on Mobile. Then, create a "Hamburger" menu icon for Mobile and hide it on Desktop.

Q: Does Convertri support mobile breakpoints?

A: Convertri focuses on a singular, optimized mobile view (usually < 600px) and a desktop view. It does not currently utilize tablet-specific breakpoints; tablet users typically see either the desktop version scaled or the mobile version, depending on their resolution.

Parting Thoughts

Just like with any page builder, our conversion algorithm isn’t guaranteed to be 100% perfect. However, unlike many other editors, we allow you to reposition elements and adjust sizing to get your page exactly how you want it.

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.

It’s best to get the desktop page looking exactly as you want it before clicking on Mobile view, as Convertri automatically generates it based on the elements and settings you’ve added to your Desktop page.