Edit the mobile version of a grid scene

The mobile version of a grid scene is generated from the desktop version: it has the same content and structure, on a page grid of 6 columns by default. You check it in the mobile view and change what needs to be different on mobile, such as the order of items. A change you make on mobile applies to mobile only, and you can reset it to the desktop version.

Switching to the mobile version

To see and edit the mobile version of a grid scene, click Mobile in the left panel. To go back, click Desktop.

Mobile overrides

The mobile version follows the desktop version until you change something on mobile. Changes on mobile are called overrides:

• An item whose order or visibility differs from desktop is marked with a blue dot on its marker in the structure rail.
• A text you change on mobile is unlinked from its desktop version.
• Each override can be reset, so the item follows the desktop version again.

Using the structure rail

The structure rail is the row of markers beside the mobile canvas. Each marker stands for an item on the page: a row, column or element.

• Hover a marker to see its toolbar with the actions for that item (tooltip Open structure).
• Click a marker to select its item.

Changing the order of items on mobile

To move an item up or down on mobile only:

1. Click Mobile in the left panel.
2. In the structure rail, hover the marker of the item.
3. Click Move up (same level) or Move down (same level).

"Same level" means the item moves among the items in the same row or column. It doesn't move into another row or column.

Reversing the order of items on mobile

You can reverse the order of all items in a row or column on mobile, for example to show an image above its text instead of below it. This is called a flip.

1. In the structure rail, hover the marker of the row or column.
2. Click Reverse vertical order of rows (mobile) or Reverse horizontal order of children (mobile). Only the option that applies to the selected item is shown.

The item gets a Vertical flip or Horizontal flip label on the canvas. To undo the flip, click Reset column order to default or Reset row child order to default in the same toolbar.

Hiding an item on mobile or on desktop

You can hide a row, column or element on mobile only, for example a large image that doesn't work on a small screen. You can also hide an item on desktop only, for example a shorter version of a text that is meant for mobile.

To hide an item on mobile with the structure rail:

1. Click Mobile in the left panel.
2. In the structure rail, hover the marker of the item.
3. Click Hide on mobile canvas.

A hidden item shows as a hidden label on the mobile canvas. Click the label to preview the item in place; to show it again, hover its marker and click Show on mobile canvas.

You can also hide an item with Visible on in the item's settings. Click Desktop or Mobile to hide or show the item on that device. In the Design view this is in the Position block in the right panel; in the Build view, click More actions in the toolbar above the item to open the settings bar.

Seeing what differs from desktop

An item that differs from desktop has a blue dot on its marker in the structure rail. Hover the dot to see what changed, for example Position changed, Columns mirrored or Child order reversed.

When an item's order or text differs from desktop, its marker in the structure rail shows a warning. Hover the warning to read it, for example Order differs from desktop on mobile. Reset this item to restore its desktop position.

Resetting the mobile version to desktop

To make an item follow the desktop version again:

1. In the structure rail, hover the marker of the item.
2. Click Restore this item to its desktop position.

To reset all items in the same row or column at once, click Restore all items at this level to desktop order.

For a setting you changed on mobile in the item's settings, click the reset button next to it (tooltip Remove overwrite).

Editing text on mobile

On mobile, a text follows its desktop version. Unlock it when it needs to be different on mobile, for example shorter for a small screen. To change it on mobile only:

1. Click Mobile in the left panel.
2. Double-click the text. The message Unlock to edit appears: The element will be unlinked from the desktop version.
3. Click Unlock.
4. Edit the text.

From then on, changes to the text on desktop no longer reach the mobile version. A warning shows: Text is overwritten on mobile. Reset on mobile layout to sync.

To make the text follow the desktop version again, select it on mobile and click Reset in the Reset element bar that appears (Reset this element back to the desktop version.).

Moving items by dragging on mobile

In the Design view, you can also drag items on the mobile canvas. Moving an item within the same row or column changes the mobile version only.

The mobile version in the Build and Content views

• Build view: you can't drag items on the mobile canvas. Change the order with the structure rail instead.
• Content view: the structure rail shows where the mobile version differs from desktop, but its actions are not available. See Edit content in the Content view.

For what each view can do, see Roles and views in the editor.

Frequently asked questions

Do I need to design a separate mobile version of a grid scene?

No. The mobile version of a grid scene is generated from the desktop version. You only change what needs to be different on mobile, such as the order of items.

Can I hide an element on mobile only?

Yes. In the mobile view, hover the element's marker in the structure rail and click Hide on mobile canvas. You can also use Visible on in the element's settings to hide it on mobile or on desktop. The element stays on the other device.

Why did my change on mobile also change the desktop version?

Moving an item into another row or column on mobile also changes the desktop structure. Only moving an item within the same row or column, or reversing the order of items, changes the mobile version alone.

How do I make the mobile version follow desktop again?

In the mobile view, hover the item's marker in the structure rail and click Restore this item to its desktop position. To reset a whole row or column, click Restore all items at this level to desktop order.

Updated on: 02/11/2026