Getting started with the editor

The editor is where you build and design a page. The editor window has five areas: the top bar, the left panel, the canvas, the right panel and the timeline. In freeform mode, you place and size elements freely on the canvas, much like in design tools such as Sketch or Photoshop.

Editor layout

The editor window is divided into five areas:

• Top bar: the options menu, saving, previewing and publishing, alignment and zoom.
• Left panel: a narrow bar of buttons for adding elements, switching scenes and pages, viewing comments, switching between the desktop and mobile layout, showing the safe zone and opening the timeline.
• Canvas: the area in the centre where you build the active scene. It shows the page as visitors will see it (WYSIWYG: what you see is what you get).
• Right panel: four tabs with the settings for the selected element, the layers, the media and the active scene.
• Timeline: the panel at the bottom where you set when each element appears and disappears.

Top bar

The top bar runs along the top of the editor window and holds:

• Options menu: the M icon in the top-left corner. It opens a menu with options such as Back to overview, Editor preferences and Shortcuts.
• Save, Preview and Publish: the buttons to save your changes, preview the page and publish it.
• Page title: the name of the page, followed by the name of the active scene.
• Alignment buttons: buttons to align the selected elements. Hover over them to see all of them. The buttons to distribute elements appear when you select two or more elements.
• Zoom: the minus and plus buttons and the zoom percentage, to zoom the canvas out and in. Click the percentage to go back to 100%.

The top bar has no undo or redo buttons. To undo a change, press Cmd+Z (Mac) or Ctrl+Z (Windows). To redo it, press Shift+Cmd+Z (Mac) or Shift+Ctrl+Z (Windows).

Left panel

The left panel is the narrow bar of buttons on the left side of the editor window. From top to bottom, it holds:

• Add: opens the Add elements drawer, where you choose elements to add to the canvas.
• Scenes: shows the scenes of the page, so you can switch between them, add a scene and set how visitors move between scenes.
• Pages: shows the pages of the project, so you can switch between them, add a page and edit a page's settings.
• Comment: opens the Comments panel with the comments on this page. A number on the button shows how many comments are still open.
• Desktop and Mobile: switch between editing the desktop layout and the mobile layout of the page.
• Safe zone: shows or hides the safe zone on the canvas.
• Timeline: at the bottom of the panel, opens or closes the timeline.

Right panel tabs

The right panel on the right side of the editor window has four tabs:

• Element: the settings of the selected element, divided into five sub-tabs: Settings, Animations, Effects, Links and Accessibility.
• Layers: all elements of the active scene as layers. Here you can change their order by dragging, show or hide them, lock them and group them.
• Media: the files in your project's media library. Use the project menu at the top of the tab to browse another project's files, or click Open library to open the full media library.
• General: the settings of the active scene, such as its type, size, safe zone and grid.

Safe zone

The safe zone is the area of a scene that always stays visible, regardless of the size of the visitor's screen. Content outside the safe zone may be cropped on some screens, such as smaller or differently shaped screens. Keep all important content inside the safe zone.

On the canvas, the safe zone is shown as a rectangle with red lines. Red is the default color; you can change it with the Safe zone color setting in the General tab of the right panel.

To show the safe zone and change its size:

1. Click Safe zone in the left panel to show or hide the safe zone on the canvas.
2. To change its size, open the General tab in the right panel.
3. Under Scene size, find the Safe zone row below the scene's own size, and set the safe zone's width (W) and height (H) there. Which of the two you can set depends on the scene type and on whether you're editing the desktop or mobile layout.

For more about how scenes adapt to different screen sizes, see the safe zone and bleed article.

Adding elements

You add elements to the canvas from the Add elements drawer, which you open with Add in the left panel. Elements include text, headings, shapes, images, videos, audio, buttons, slideshows, embeds, charts and forms.

To add an element:

1. Click Add in the left panel.
2. In the Add elements drawer, choose an element, for example Text, Image or Video.
3. Drag the element onto the canvas, or click it to place it.

Timeline

The timeline is the panel at the bottom of the editor window where you set the timing of each element on the canvas: when it appears, when it disappears and how long it stays visible. The timeline starts running when the page loads. To open or close the timeline, click Timeline at the bottom of the left panel.

For more about animating elements, see Intro to animations.

General settings

The General tab in the right panel holds the settings of the active scene:

• Scene type: Fullscreen or Longpage. On the desktop layout, you also choose how the scene scales to fit the visitor's screen: Zoom or Original fit.
• Scene size: the width and height of the scene, and the width, height and color of its safe zone.
• Canvas grid: a grid on the canvas to help you position elements.
• Guidelines: rulers along the edges of the canvas, from which you drag guide lines onto the canvas. With Magnetic guidelines on, elements snap to these lines.
• Align to element: while you move an element, lines show when it lines up with the edge or centre of another element, and the element snaps into place.
• Autoplay scene: moves from the active scene to the next scene automatically after a number of seconds that you set in Next scene after.

Autoplay applies only to the active scene. It's available only when the page has at least two scenes, and not on a first scene that is set to stay on top (sticky).

Freeform essentials course

The Freeform essentials course in the Maglr Academy is a series of 12 short videos that covers the editor's core features in freeform mode. Start the course here: Freeform essentials course.

Frequently asked questions

How do I undo or redo a change in the editor?

The editor has no undo or redo buttons; you use keyboard shortcuts. To undo a change, press Cmd+Z (Mac) or Ctrl+Z (Windows). To redo it, press Shift+Cmd+Z (Mac) or Shift+Ctrl+Z (Windows).

Why is part of my design cut off on smaller screens?

Content outside the safe zone may be cropped on some screens. The safe zone is the area of a scene that always stays visible, regardless of the size of the visitor's screen. To show it on the canvas, click Safe zone in the left panel of the editor, and keep all important content inside it.

How do I switch between editing the desktop and mobile layout?

In the left panel of the editor, click Desktop to edit the desktop layout of the page, or Mobile to edit the mobile layout.

Updated on: 20/10/2026