Getting started with the Pro editor

Get started with the Crash Course

Get started at light speed and learn everything there is to know about our Pro editor. This will help you understand exactly how this editor works and how you can use it to design your interactive stories.

Click here to start the Crash Course for Maglr Pro.

Editor Layout

Compared to the drag-and-drop Block Editor, the Pro Editor has much more to offer in terms of creativity and freedom of digital design. The Block editor is built for a user-friendly and quick and efficient way to create a digital publication. Creation with the Pro editor can take up more time in completing an interactive publication. This editor is built for the (graphic) designer that is familiar with tools like Sketch, Photoshop etc.



Top bar: contains the options to save, preview and publish and the additional options for zooming, undo and redo changes in the project.
Left panel: the left side panel contains options to add content elements, switch pages/screens, view the safe zone and controls to switch views between desktop, mobile, hidden elements and timing that is displayed on the project's canvas.
Canvas: the centre area where you add and edit your project is called the canvas. The canvas allows you to visualise the publication you are creating. You can compare it to a What You See Is What You Get-editor (WYSIWYG).
Right panel: the right side panel holds settings for objects, layers, files and page. In the objects tab, you can control the objects' options, positioning, animation, effects and actions. The layers tab is where the user can rearrange, hide and group things together or even duplicate layers. When you click on the files tab, you will get access to the library of your publication's content assets and the option to add them from another publication. The general tab is where you control the changes you make for the publication, such as size, viewport, grids and more.
Timeline: the bottom panel called timeline is for timing and more advanced animation of objects (explained below).

Safe Zone

A safe zone or safe margin indicates the space on a canvas that possibly won't be visible when viewed from different devices or screen sizes. This safe zone guides the user where he can place elements on the canvas. Elements that are partly outside the safe zone (red area) would result in that specific part being trimmed off when the publication is viewed on smaller screens. We recommend keeping all necessary elements within the Safe Zone (inside the red borders).

Elements

Adding elements to your project gives you the creative power to craft your online publication with all types of content, information and as many visuals as you please. From text, shapes, images, videos, audio and more, it's all there.

Timeline

This area controls the effects and timing of elements on your canvas. Each element's timeline can be altered in order to control when it appears or disappears on the canvas and for how long. This panel will bring your publications to life in terms of revealing certain content in a timeline-based animation.

General settings

This last tab on the right side of the panel controls the settings of the canvas in your current project, from the scene type and size to editing the safe zone, grid and guidelines. The autoplay feature is also present here, automatically advancing the current scene to the next after a fixed amount of seconds.

Updated on: 08/02/2023