Thrive Themes: How to Mobile-Optimize Your Pages

👉 Sign up for Thrive Themes membership here: https://go.ivanmana.com/thrivethemes

How to install Thrive Themes on your WordPress site?

This video tutorial shows you everything you need to know in order to mobile optimize your Thrive Themes landing page.

Haven’t installed WordPress yet?

👉 See this video to learn how to install WordPress: https://youtu.be/HPSsos_nZCw

That being said, let’s have a look at how to best mobile-optimize our Thrive Themes page(s)!

✔ Best practice #1: Try not to adjust the margins and padding if it’s not needed

Ideally you want to try to avoid using the margins and padding if you can.

Reason for that is that these options will affect every view completely differently and so if there is a way to use another tool to get the same result, you should use that tool instead.

For example you can left-, right-, and center align certain elements – instead of using the margins and padding, you should align them instead.

In our example, we first increased the right margin of the optin box by 200 or so, and so when we went in to see what it looked like live, we noticed that in some views the arrow would touch the optin form and it would look awkward.

So instead we went in and right-aligned the arrow while left-aligning the optin form, and it looked great from there on, on every device.

✔ Best practice #2: If you must touch margins and padding, try to do it for mobile or tablet view only

After you add a new element and make style changes to it on desktop, it will affect how that element looks on every view – desktop, mobile and tablet.

But if you go into tablet view and make the stylistic changes there, then these changes will ONLY affect tablet view.

Same with mobile – if you go in and make changes on mobile, then these changes will only affect mobile view.

This is one of the ways you can make your page mobile responsive – by changing the style for each of the devices separately.

In our example the space between our optin fields was great on desktop, but when we looked at it on mobile, it looked too spread out.

So we went in and adjusted the padding and margins ONLY for mobile view and that ended up looking great.

✔ Best practice #3: Use the “responsive” option

Sometimes doing the 2 things listed above won’t do much good for you.

In our example we had an arrow that pointed to the right, but on mobile that made no sense because the optin form was BELOW the arrow, not to the right of it…

So in this case what you can do to make your page mobile-responsive is click on the arrow, go into the “responsive” option on the left-hand side and make that arrow show up ONLY for desktop and tablet – it therefore completely disappeared from view on mobile.

To take it a step further you can go in and add another arrow that points down ONLY for mobile view, since the optin fields will be below the arrow. So you can get creative with how you do this and just add/hide elements as you see fit depending on what you are doing.

✔ Best practice #4: Use the “wrap” feature

Sometimes sections will automatically wrap (ie. go to a new line for each new column) when you don’t actually want them to.

For example in our video on tablet view where we had the 3 columns talking about what the user can expect from signing up.

These 3 columns looked a bit awkward, so we went in and removed the wrapping by selecting that entire section, clicking on “main options”, and deselecting the “wrap columns” option.

This immediately made it so that the columns did NOT stack on top of each other and instead were just sitting next to each other just like on desktop view.

You would also have to go in on mobile view and CHECK the option that wraps the columns because wrapping on mobile does NOT look good – so play around with it depending on your view and how you want the sections and columns to look.

✔ Best practice #5: Always check your work after saving it

After we mobile optimized our page, we saved our work and opened our website to see what it was going to look like.

Just make sure to do this as well because things can always show up unexpectedly, like in our case the arrow touching the optin form in between the tablet and desktop view and looking awkward.

We also noticed that the text on some of the elements was too big, so we went in and adjusted it.

But that’s pretty much it.

Was there something else you wanted me to cover in regards to Thrive Themes?

Let me know and if there’s enough demand, I’ll add it to the queue to make a video on!

That’s it!

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

Also be sure to check out my courses at https://www.ivanmana.com/all-courses

source