Mobile

In this chapter, you’ll learn how to build the mobile version of a page and maintain the link between elements on desktop and mobile by using the ‘element library’. We’ll also cover how to overwrite specific element settings on mobile or unlink text contents entirely from their desktop versions.

The element library

Before you start, it’s important to know that, when building a page from scratch, you’re always greeted with a blank canvas on mobile. This is because everything on desktop is positioned in a pixel-perfect manner, and it's therefore impossible to predict where an element should be positioned on the mobile version.

However, when navigating to the mobile version of your page in the editor, you can find an ‘element library’ on the right hand side. This library contains all of the elements used on the desktop version of your page, including all of their settings. All that’s left to do is drag the elements from this element library to your canvas and resize them if needed, but everything else will be preserved. Everything. That’s animations, effects, actions, the whole shebang.

Overwriting desktop settings

When using the element library to place your elements on mobile, the link between them is maintained. This means that all of the settings from desktop are exactly the same on your mobile version. Additionally, every change you now make on desktop is automatically reflected on the mobile version too.

Some element settings though, such as font sizes, might work well on desktop, but are too big for mobile. In these cases, you can customise an element’s settings on mobile without affecting your desktop version. This is called an ‘overwrite’, and these can be identified by a blue dot next to the element’s setting. Clicking this blue dot removes the overwrite and reconnects your mobile setting to its desktop version again.

Unlinking text contents

Specifically for text-based elements, it's possible to unlink the text content within these elements from their desktop versions. When double clicking the text frame a pop-up will appear, asking you to ‘unlock’ the element before you’re able to make changes.

Be advised that, when unlocking your text contents, every time you now make a change to the text on desktop, you also have to manually update the text on mobile as well.