Home Affiliate Marketing Tools Unbounce: How to Mobile Optimize Your Pages

Unbounce: How to Mobile Optimize Your Pages

by Ivan

Hey all! In this video, I show you how to optimize your landing page for mobile in Unbounce so that you can make changes specific to the mobile version of the page while leaving the desktop elements intact.

The first thing you need to do when mobile-optimizing your page is click on “on” for mobile on the bottom right of your page.

This will separate the desktop and mobile on Unbounce and allow you to make changes that will not affect one or the other.

The next thing you need to do is click on “apply layout assistant” to all sections so that the entire page has mobile optimization automatically applied.

This should do most of the hard work and so you will need to just do a few changes here and there to finalize the look.

You cannot change the text size in one view without affecting the other – so if you want to change the text size in mobile, you will need to adjust the “scale”, not the size. This can get a little tedious but I get into how to add a completely different element later on in the video.

If you want to just move an element within a section, you can simply drag and drop while in the mobile view.

If you want to move an element outside of the current section however, you will need to hold control for Windows, or the Apple symbol for Macs and then drag and drop. This way the desktop version won’t be affected and vice versa.

If you want to change anything within an element that’s not a text element, such as a button, you can make the changes there without it affecting the other view. So if you want to change a button color, text, font, you can do that in one view without affecting the other mobile or desktop one for example.

That covers it for the moving around and re-sizing elements.

Now if you want to keep one element in desktop and a whole other element on mobile, you would need to copy and paste the element, and then show one only for mobile, and show the other only for desktop.

So as per the example from the video, let’s suppose you want to show one number for desktop, and a different number for mobile.

The way you would do that is copy the number and then paste it.

Then, you would rename the original element to something like “phone number – desktop” and rename the copy to “phone number – mobile”.

One the desktop view, you would then click on the little eye next to the element name for mobile in the contents tab on the left hand side in order to hide that number from desktop view.

In your mobile view, you would then click on the little eye icon next to the desktop version element.

This would ensure that you only see the desktop element on desktop and the mobile element on mobile.

That’s it!

If you want to try out Unbounce yourself for free for 30 days and then get 20% off for the next 3 months after the 1-month free trial, sign up using my link:

https://unbounce.grsm.io/dtr

If you need help with a specific issue and want me to personally take a look at your setup, I can help! Check out the ‘My Services’ section of my blog: https://amarketingessentials.com/my-services/

Do you have any ideas or video topics about Unbounce or anything else you would like me to cover?

Write down in the comments below what you would like me to make a video on!

Most of my videos I made were requests/suggestions from subscribers, so don’t hesitate to let me know as well!

Like my Facebook page! https://www.facebook.com/onlinemarketingessentials

Thanks for watching, and I’ll see you in the next video!

related articles

Leave a Comment

Top

WAIT! BEFORE YOU GO...

250+ FREE Technical Marketing Videos Available

Weekly Updates! Check Them Out!