PageFly - How can I create a mobile-customized page?

128 views PageFly 2

Important: This feature is only available on the Pro plan

PageFly layout structure is responsive by default. However, the app has the option to style your content on specific devices: mobile, tablet, laptop or desktop and you will learn how to do that in this article.

About Device Switcher (All/Laptop/Tablet/Mobile)

Inside the PageFly editing dashboard you can find Device Switcher option at the menu bar. You can easily see how your content would look like on each devices.

Device Switcher on the top menu

Here is how the function works in reality. It adjusts the editing canvas and what you see in the editor is what your visitors would see as well. So make sure that you create a comfortable user experience on mobile and tablet devices.

Device Switcher on the top menu

Important: Just keep in mind that the changes you made in General tab are applied to all devices regardless of the device mode you are currently in. The changes in Styling tab are applied to the selected device only.

With the Hide On feature in Advanced tab of Element Inspector. Let’s see how it works.

Fine-tune content presentation on individual mobile devices

PageFly allows you to fine-tune content presentation of your page on individual mobile devices. Let’s take Whey product page template as the example. You can find this template in the template library here:

Whey template in Template Library

Let’s take a closer look at the Testimonials part of that template. On the desktop, we see 2 rows layout with 3 testimonials in each row.

Testimonial section on All (Desktop) mode

If you switch to Mobile, this part will be a bit too long since each testimonial covers almost the full mobile screen.

Testimonial section on Mobile mode

In this example, we want to show only 3 testimonials on Mobile instead of 6. To do that we select the container of each testimonial which is the column and navigates to Advanced tab.

Hide On parameter in Advanced tab

Next, we enable Hide On setting for Tablet and Mobile. It’s DONE! To check if the testimonial is hidden on Mobile and Tablet, we use the Device Switcher.

Demonstate Hide On feature

This is an example of how you can have optimized content for the page on mobile/tablet and improve the overall user experience for your Shopify store.