> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.maglr.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Getting started with the Pro editor


## Get started with the Essential course

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

[Click here to start the Essential course for Maglr Pro](https://www.maglr.com/academy/essential-course/intro).

## 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.

![Image: the Maglr Pro editor](https://storage.crisp.chat/users/helpdesk/website/5ce38374974bd800/7899b3cd-5ba1-46a2-8c61-ef0da8_opvmqx.png)

* **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).**

![Image: safe zone in the Pro editor](https://storage.crisp.chat/users/helpdesk/website/e9e2a0266b247800/de914f15-5fa0-4a35-abe3-8253d9_39fwc9.png)

## 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.

![Image: the elements panel in the Pro editor](https://storage.crisp.chat/users/helpdesk/website/cbaa998d9c479000/48776a1a-427e-4e4e-a00a-85d4d8_v5yrfu.png)

## 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.

![Image: the timeline in the Pro editor](https://storage.crisp.chat/users/helpdesk/website/5ff3549a53cdb400/3ab5aa9b-f2e6-4098-8d96-22e4c3_cgzu3m.png)

## 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.

![Image; editing the general settings of the current scene & page](https://storage.crisp.chat/users/helpdesk/website/7f0574fae35dc000/56ed9db8-b541-4a81-a9ed-106d95_1j9w0zk.png)