More than half of all search traffic takes place on mobile phones, and over 60% of Google searches come from mobile devices. For this reason, it’s important to optimise your pages for mobile devices 📱.
With landing pages in Plug&Pay, you have several options to design your page specifically for mobile. This allows you to improve the user experience and increase your conversions at the same time.
Displaying blocks and elements on mobile
By default, all your blocks and elements are set to be displayed on both desktop and mobile. This means there would be no difference between viewing your landing page on a laptop or on an iPhone.
To display a block or element on mobile only, first select the relevant block or element. On the left-hand side of your screen, you will see a Display option. Click on Mobile.
You will immediately notice that the section becomes blurred. This indicates that the section will not be displayed on desktop. The page builder is set to desktop view by default.
When should I use this?
You won’t need to configure every block or element separately for desktop and mobile. In most cases, a block looks good in both versions.
However, there are specific blocks that do not display well on mobile.
In particular, Hero blocks often contain large images or videos that do not fit properly on smaller screens.
Below, you’ll find exactly how to optimise certain sections specifically for mobile 👇
Making adjustments in the mobile view
By default, the page builder is set to desktop view. Using the toggle in the top right-hand corner, you can switch to mobile view to see how your landing page will appear on a mobile device.
Any visual adjustments you make here will only be displayed on mobile devices. These changes will not appear on a laptop or desktop computer.
ℹ️ All design adjustments you make are applied specifically to mobile. However, editing text or adding elements in the mobile view will also affect the desktop view.
You can now start optimising your page for mobile devices 🥳
All design-related changes are controlled via the settings under the paint palette icon:
If you would like to use a block for both desktop and mobile, you do not need to recreate it separately for mobile.
Example
On my page, I have a Hero block. This does not display well on mobile, as the image is significantly cropped at the sides.
I configure the Hero block to be displayed on Desktop only.
Next, I create a new Content block and set it to be displayed on Mobile only.
In the mobile view, I customise this block so I can optimise its appearance.
This way, I can still display an image, and the text and button fit much better within the screen.
On desktop:
On mobile:
