How do I optimise the site for mobile devices?

Compared to other page builders, Onepage has a distinctive advantage. Every landing page you build with us is already optimized for mobile devices without you having to do anything for it. So, our designers are working ahead of you!

⚙️If you want to arrange different parts of your website for mobile and desktop differently, you might need to optimize content for each device separately. It can be helpful to create separate sections for each device type. For example, sections meant for mobile phones won't be shown to users visiting your site on a laptop.

🎬 At the end of the article, you'll find our video tutorial!

Edit visibility:

Step 1: Find settings

Move the mouse pointer over the affected section. You will see the following panel with settings at the top right:

Step 2: Duplicate section

📌 Please note: If you do not want the section to be available in both versions (mobile and desktop), you can skip this step.

Click on the [...] icon and then on "duplicate". This will give you two sections that you can edit separately. One for desktop computers and one for mobile devices.

Step 3: Change visibility settings

Please select whether the section should be visible only on desktop or only mobile devices.

With the "visibility" setting, you can select the device for which this section is visible. Onepage recognises which device the visitor is using to access your site and displays or hides this section accordingly. The whole concept is called "Responsive Design".

Step 4: Publish/update

Finally, please publish or update your page and test your changes on both desktop and mobile.

View mobile sections

Click on the display icon at the bottom right and activate the hidden sections. These are the sections of the mobile view that are not shown by default.

Edit burger menu in the mobile view

If you add a header to your page, it will automatically be converted into a burger menu in the mobile view.

If required, you can change the design of the burger menu. Open the visibility settings and click on "Mobile style":

🎬 Here is a short video tutorial:

Frequently asked questions and solutions

How can I understand which section is released for desktop and which for mobile devices?

Move the mouse pointer over the section. At the top right you will see a button that shows the current view rule of the section:

📌 Please note: To avoid mixing up the sections, we recommend simply renaming them.

Why doesn't my page scroll to the specified section?

Please check whether the scroll function refers to the section from the same view (desktop/mobile).

A button in the Dekstop cannot refer to a section that is only enabled for mobile devices, as the mobile section is not loaded in the desktop.

Why is my section greyed out?

This means that this section is not enabled for the current view.

For example: you are currently looking at the desktop view. This means that all mobile sections will be greyed out. And vice versa, all desktop sections will be greyed out in the mobile view.

How can I hide the burger menu?

This is not possible at the moment. However, you can simply use a ‘normal’ section with a logo instead:

💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂