Articles on: The editor

Create your Mobile Version

Every scene has a separate mobile layout, which you build by dragging elements from the desktop layout onto the mobile canvas. Because elements on desktop are positioned freely, Maglr can't place them on mobile automatically, so you decide where each element goes on mobile.

Creating the mobile layout of a scene

To create the mobile layout of a scene:

Open the scene in the editor.
In the left panel, click Mobile. The canvas switches to the mobile layout and the Element library panel opens on top of the canvas.
The Element library shows the elements of the current scene's desktop layout. If the scene's elements aren't shown, click the scene in the Element library to open it. Click the arrow in front of a group to see the layers inside it, or use the search field to find an element.
Drag an element from the Element library onto the mobile canvas.
Move and resize the element on the mobile canvas. This doesn't change its position or size on desktop.
Repeat steps 4 and 5 for each element you want on mobile. Elements you have placed turn grey in the Element library.
To go back to the desktop layout, click Desktop in the left panel.

Element library

The Element library is a panel that lists every element of a scene's desktop layout, so you can place those elements on the mobile layout. It opens on top of the canvas when you click Mobile in the left panel, and only appears while the mobile layout is active.

Scenes: the panel lists the scenes of your page. Select a scene to see the elements of its desktop layout.
Search: type in the search field to find an element by name. Matching elements are highlighted and the others are dimmed until you clear the search.
Grey elements: an element turns grey once it is on the mobile canvas. Each desktop element can be placed on mobile once, so you can't drag a grey element in again.

Linked elements on mobile

An element you drag from the Element library onto the mobile canvas is the same element as on desktop. Its content stays linked to the desktop version, while its position and size are set separately for mobile.

When you open a linked text element on the mobile canvas to edit it, a bar says "The element will be unlinked from the desktop version." Click Unlock to edit the text. The bar closes after a few seconds. Once you change the text on mobile, that text is detached from desktop: later text changes on desktop no longer carry over to mobile. To link the text to desktop again:

On the mobile canvas, select the text element.
In the bar that says "Reset this element back to the desktop version.", click Reset.

Frequently asked questions

What happens if I leave the mobile layout of a scene empty?

If the mobile layout of a scene has no content, visitors who would see the mobile layout are prompted to rotate their device, and your desktop design is scaled down to fit the screen.

Does deleting an element on mobile delete it on desktop?

No. Deleting a linked element on the mobile canvas removes it from the mobile layout only. The element stays on desktop, and it is no longer grey in the Element library, so you can drag it onto the mobile canvas again.

Why is an element grey in the Element library?

A grey element in the Element library is already on the mobile canvas of that scene. Each desktop element can be placed on mobile once, so you can't drag a grey element in again. To place it somewhere else, move it on the mobile canvas instead.

Why don't my desktop text changes show on mobile?

A text element's text stops following desktop once you unlock it and change it on the mobile canvas. To link it to desktop again, select the text element on the mobile canvas and click Reset in the bar that says "Reset this element back to the desktop version."

When do visitors see the mobile layout?

Visitors see the mobile layout on screens up to 500 pixels wide, such as phones held upright. On wider screens, including phones held sideways, visitors see the desktop layout.

Updated on: 19/10/2026