Video 1


Video 2

Video 3
 

Mobile & Desktop Optimization Guide for Your Landing Pages

When building a high-converting landing page, optimizing it for both desktop and mobile is crucial. In this guide, we’ll walk you through best practices for styling, spacing, typography, images, and performance — so your page looks great and loads fast across all devices.

1. Style Settings for Mobile Optimization

Before diving into optimization, switch to Mobile View inside the page editor.

Then, for any element (for example, a Headline), go to:

Gear Icon → Pencil Icon → Text Settings

Here, you can adjust the mobile-specific size or spacing without affecting the Desktop version.

Example:
In Mobile view, you can set the Headline size to 45px, while it remains 56px on Desktop. This allows you to maintain design flexibility.

Repeat this process for other elements like images, text blocks, and buttons for device-specific adjustments.
 

2. Use Inline Bar vs. Style Settings Smartly

There are two ways to style text:

• Inline Bar: Use this to style specific words or phrases.
  For example, underline only the word “Software” using the Inline Bar.

• Style Setting: Use this for element-level styling such as font size, color, and spacing.

Use both methods appropriately to maintain clean formatting and reduce confusion.

 

3. Spacing: Margin vs. Padding

Understanding spacing is essential for a mobile-friendly layout.

• Margin: Adds space outside the element.

• Padding: Adds space inside the element (between the content and its border).

Tip:
To view margin or padding, hover over the element while another element is selected.
Green space represents padding, while the shadow area indicates margin.

Adjust padding and margin from Style Settings in Mobile View to maintain layout integrity.

Note:
Avoid excessive use of spacing or advanced settings, as it may disrupt the layout across devices and make troubleshooting difficult.

4. Typography Settings (Desktop & Mobile)

Maintain consistent typography across your landing page for better readability and design.

Desktop Typography

Mobile Typography

5. Image Optimization Tips

Properly optimized images reduce load times and improve overall user experience.

• Use Collages: Combine multiple images into one to reduce the number of DOM elements.

• Convert to WebP: This format offers smaller file sizes with better quality.
  Suggested tool: WebP Converter Tool

• Compress Images: Reduce size without losing quality using tools like TinyPNG

6. Structural and Performance Best Practices

Improve your landing page performance and maintainability with these structural tips:

Element Usage

• Avoid using <BR> tags for line breaks.

• Instead, use multiple paragraph elements to ensure better structure and performance.

Color Management

• Minimize the use of multiple inline colors. Use Style Settings to apply consistent color schemes.

DOM Optimization

• Avoid nesting rows inside rows or sections within sections.

• Keep your layout clean by limiting the number of child elements in each row or column.

• For image-heavy or testimonial sections, split content into 2–3 smaller rows to improve performance.

Summary Checklist

• Typography sizes are properly set for both desktop and mobile

• Style settings used for overall formatting

• Inline bar used for specific text customizations

• Images optimized using WebP and TinyPNG

• Clean code structure: no nested rows or excessive elements

• Consistent spacing using clear margin/padding logic

• Avoided excessive inline colors and <BR> tags