1. Home
  2. DropFunnels Builder
  3. Make Your Pages Mobile/Tablet Responsive and optimized

Make Your Pages, funnels and courses Mobile/Tablet Responsive

Learn how to edit your pages, funnels and courses for mobile and tablet devices. Create different size elements on your page depending on the screen size of your visitors. This will allow you to optimize your pages for all devices types.

There are three things you need to remember or consider before using the mobile responsiveness function;

1. There are tons of different browsers, these browsers all speak different languages. You simply need to provide the best option for all these devices to display your content the best way possible

2. It is important to know that this is an emulator. So everything you see within Dropfunnels editing mode is the best description of what you will be seeing visually. Even if you do not do any mobile responsive editing, its gonna do its best to make everything fit on any devices. If you have a lot of videos, images on your page's content and you do not want to show all of them on small devices like mobile phone, you can hide some of them if not all.

3. It is very critical to test your page to an actual device to give you an actual experience on how your page would look like on a mobile phone.

The general rule of thumb is; the simpler your pages are, the simpler it will be for it to be mobile responsive and looks good at any device.

Steps in doing mobile responsiveness editing

Step 1. Press the letter "R" on your keyboard

This has to be done while you are on edit mode or while editing the page or funnel.

Step 2. Select the device type that you would like to do the responsiveness editing

You can select between small device (mobile devices) and medium devices (tablets). 

If there are content that you would prefer not to show on small devices, you can hide those content.  Small devices will show the compact version of your page, you have to consider what you would want to show as content.

As for photos or videos, you can have the option of showing it or hiding those content by going to the Advanced tab > Visibility > Display (choose Never in the option to hide the content and Always to show the content in mobile view) Don't forget to Save your work.

Step 3. Click Done and Publish

If you are happy with the result after editing using mobile responsiveness, you may simply publish your work to save the settings you did for the mobile responsiveness. Last;y, you need to check the newly edited page with an actual small device (mobile phone) to see how it would actually look.

Was this article helpful?

Related Articles