A Must-Know Guide for Mobile

Handy tips 

RESOURCE

Use CMD/CTRL: the power move

Want to move something on the desktop or mobile version of a page without affecting the placement on the other version? 

Hold down the Command (Mac) or Control (Windows) key while you make the change to keep the placement of the element static in the other view.

Separate Mobile Elements

I want my mobile header to say “Mobile” and my desktop header to say “Desktop”. Can I do this?

Learn More

Sticky Mobile Navigation Bar

Give your users a way to quickly navigate your mobile landing page while allowing them to jump to the form at any time by creating your own sticky hamburger bar and making it mobile friendly.

It’s Burger Time!

Let's get mobile-serious now

We’ve added chapter marks in this video so you can jump ahead to whichever content interests you the most:

Mobile Nightmares Interpreted for You

Let’s get mobile!

PAGE CATEGORY

Scaling Elements

Changing your text size will affect both views. 

To resize text for one view only, use the scale bar.

Layout Assistant

Access the Layout Assistant by clicking the Properties tab on the right side of the screen. This feature is the best way to get started on customizing your mobile-responsive content. You can apply the Mobile Layout Assistant to your whole page/popup/sticky bar, or to individual sections, which will get you to a much friendlier starting point. The feature works best if you apply it first, then go ahead with the detail work. Try to avoid making changes before you apply layout assistant, as this can cause minor reparenting issues.

See it in action

Hiding Elements

If you’d like an element to appear on only one version (desktop or mobile) of a page, you can do this by hiding the element on one version. Click the element and select the Visibility icon in the Properties tab to toggle the visibility.

Note:  Creating completely separate designs on mobile and desktop can slow down the saving/republishing functionality.

See it in action
jQuery UI Accordion - Default functionality

Mobile landing pages aren’t so different from their desktop counterparts, and standard best practices still apply. However, there are some additional considerations and optimizations for on-the-go visitors. It’s why you should really be building separate landing pages for mobile (or, at the bare minimum, ensuring that your page is mobile-responsive).

We have covered some tips for how to knock your next mobile landing page outta the park on our blog post here.

Understand How to Effectively Use the Mobile View

Getting Familiar with the Content Panel

Using the Content Panel for Mobile Building

Optimizing Your Mobile Layout with the Layout Assistant

Moving Mobile Elements Between Sections

Hiding Page Elements in Mobile/Page View

All You Need to Know about Mobile in One Handy Video

Want more knowledge?

Connect with savvy marketers from around the world to discuss landing pages, conversion rate optimization, a/b testing and all things marketing in the Unbounce Community.

See it in action

A Must-Know Guide for Mobile

Handy tips and tricks for getting your landing page mobile ready.

Scaling Elements

Hiding Elements

If you’d like an element to appear on only one version (desktop or mobile) of a page, you can do this by hiding the element on one version. Click the element and select the Visibility icon in the Properties tab to toggle the visibility.

Note:  Creating completely separate designs on mobile and desktop can slow down the saving/republishing functionality.

Want more knowledge?

Do you want to learn more about what you can do with the Unbounce Builder? We have a lot of great how-to tutorials in our Help Center!

and tricks for getting your landing page mobile ready. |

Let’s go mobile!

© Unbounce All rights reserved.

Layout Assistant

Access the Layout Assistant by clicking the Properties tab on the right side of the screen. This feature is the best way to get started on customizing your mobile-responsive content. You can apply the Mobile Layout Assistant to your whole page/popup/sticky bar, or to individual sections, which will get you to a much friendlier starting point.The feature works best if you apply it first, then go ahead with the detail work. Try to avoid making changes before you apply layout assistant, as this can cause minor reparenting issues.