A must-know guide for mobile
RESOURCE
We’ve added chapter marks in this video so you can jump ahead to whichever content interests you the most:
PAGE CATEGORY
Optimizing your mobile layout with the layout assistant
A must-know guide for mobile
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.
Unbounce's Conversion Benchmark Report shows that 83% of landing page traffic comes from mobile devices, yet mobile pages are converting nearly 8% worse than desktop pages—which means there’s serious potential for conversion gains with mobile optimization.
Unbounce makes it easy to showcase your brand and convert more visitors—on any device. Here's everything you need to ensure your mobile landing page is just as high-converting as your desktop one.
© Unbounce All rights reserved.
Layout assistant
The Layout Assistant helps you quickly set up mobile-responsive designs. You’ll find it in the Properties tab on the right side of the screen
- Apply it to your entire page, popup, or sticky bar—or just to individual sections.
- Run it before making manual changes for the best results.
- Once applied, you can fine-tune the details.
- Avoid editing elements beforehand, since this can cause small layout issues.
Separating elements
Need a completely different version of an element on desktop vs. mobile? Separate them with these steps:
- Duplicate the element.
- Rename the duplicate to delink it from the original.
- Edit the duplicate without affecting the original.
- Hide the version you don’t want shown on each layout.
Note: Creating entirely separate designs for desktop and mobile can slow down saving and republishing.
Hiding elements
Want an element to appear only on desktop or mobile? Select the element, then click the Visibility icon in the Properties tab to show or hide it for each version of your page.
All you need to know about mobile in one handy video
Understand how to effectively use the mobile view
Getting familiar with the content panel
Hiding page elements in mobile/page view
Using the content panel for mobile building
Moving mobile elements between sections
Mobile landing page design FAQ
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!
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.
Layout Assistant
The Layout Assistant helps you quickly set up mobile-responsive designs. You’ll find it in the Properties tab on the right side of the screen
- Apply it to your entire page, popup, or sticky bar—or just to individual sections.
- Run it before making manual changes for the best results.
- Once applied, you can fine-tune the details.
- Avoid editing elements beforehand, since this can cause small layout issues.
Separating elements
Need a completely different version of an element on desktop vs. mobile? Separate them with these steps:
- Duplicate the element.
- Rename the duplicate to delink it from the original.
- Edit the duplicate without affecting the original.
- Hide the version you don’t want shown on each layout.
Note: Creating entirely separate designs for desktop and mobile can slow down saving and republishing.
Hiding elements
Want an element to appear only on desktop or mobile? Select the element, then click the Visibility icon in the Properties tab to show or hide it for each version of your page.